詳しい人求む！

【html&css】太さの違う2本線の作り方

解決済

質問者：sypuimtiz
質問日時：2017/01/16 14:50
回答数：2件

html＆css初心者です。
添付画像のように、下線に2本、太さの違う線を入れ、かつ上をグラデーションにしたいです。

以下のcssを作りましたが、

#header{
width:100%;
height:120px;
background-color:white;
border-bottom:double 30px red;
padding-bottom:0px;
}

ここからどうするべきなのか・・・さっぱり分かりません。
double指定するよりも、solidにしてそれぞれ太さを指定するほうが簡単ですか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

参考程度に

No.1ベストアンサー

回答者： fujillin
回答日時：2017/01/16 16:00

こんにちは

2種類の太さや色をまとめて指定するのは難しいと思います。
要素や属性を分けてしまった方が、太さや間隔も個別に指定することが可能ですね。
一方を背景色で実現するとか、枠線代わりの要素を作ってしまうとかいろいろ方法は考えられると思います。

背景を使わず、要素を入れ子にした一例です。
（#headerの要素が何なのか不明なので、DIV要素で代用しています）

<div id="header">
<div>表示する内容</div>
</div>

【CSS】
#header {
padding-bottom: 5px;
border-bottom: solid 25px red;
}

#header>div {
width: 100%; height: 120px;
background-color: white;
}

#header:after {
content: ""; display: block;
width: 100%; height:15px;
background: linear-gradient(to right, red, white);
}

- 0
- 件

通報する

この回答へのお礼

ありがとうございます！！
無事にやりたいことが出来ました。
大変勉強になりました。ありがとうございました。

通報する

お礼日時：2017/01/17 12:59

No.2

回答者： ORUKA1951
回答日時：2017/01/17 09:25

単純に内容の追加でよいです。

HTML
　文書構造だけをマークアップします。
　headerは、何度も登場するはずなのでclassにしましょう。
　　HTML5だと
　　<body>
　　　<header></header>
　　　<section>
　　　　<h2></h2>
　　　　<article>
　　　　　<header></header>
　　　　　<section></section>
　　　　　<footer></footer>
　　　　</article>
　とか・・
スタイルシート
　CSS2以降は起点となるセレクタを書くことになっている。書かなくても類推はされるが・・、自身がわかりやすいので

★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
　のDATA入力で検証済みのHTML4.01strict
★タブは＿に置換してあるので戻す。
　文字コードはShift_JIS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css">

＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<p>本文はsection</p>
＿＿<div class="section">
＿＿＿<h3>項見出し</h3>
＿＿＿<p>本文項記事</p>
＿＿＿<p>sectionの階層でレベルが判断される</p>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2013-03-03</dd>
＿＿</dl>
＿</div>
</body>
</html>