WEBデザイン ― ブラウザの横幅いっぱいに広げる（長方形ではない）

解決済

質問者：marimond
質問日時：2016/02/06 22:15
回答数：4件

CSSでメニューやヘッダー背景だけをブラウザの横幅いっぱいに広げる方法がありますが、これは長方形に限りますでしょうか。
添付の画像の様なデザインにしたいのです。

そもそも、こういう形は無理なのか、可能であればどのような方法で実現可能か、ご指導いただけますでしょうか。
どうぞ宜しくお願いします。

通報する

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

質問の本文を隠す

回答 (4件)

No.1

回答者： mai3456
回答日時：2016/02/06 23:56

ざっくりですが、全体を100％や画像を100％と指定すれば出来ます。

大枠をcenterに指定する。
CSS3で斜め背景も書くことが出来ます。

- 0
- 件

通報する

この回答へのお礼

全体100％やcenter指定は分かっていたのですが、左側のラインは太く、任意の地点で切り替わり（三角で凹み）右側のラインは細く、という形をどうしようかな、と思っていたのです。
でもafterがあることを思い出し、それで出来そうです。ご協力ありがとうございました。

通報する

お礼日時：2016/02/10 06:17

No.2

回答者： ORUKA1951
回答日時：2016/02/07 18:51

HTMLには文書構造しか書かない。

(デザイン/プレゼンテーションはすべてスタイルシートで行う)
「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
が大原則です。
　あなたの質問では文書構造がわかりませんのでセレクタが書けないのですが、簡単なサンプルを作ってみましょう。
HTML4.01
<body>
　<div class="header">
　　<h1>見出し</h1>
　　<div class="nav">
　　　<ul>
　　　　<li>あいうえお</li>
　　　　<li>かきくけこ</li>
　　　　<li>さしすせそ</li>
　　　</ul>
　　</div>
　</div>
　<div class="section">
　　<h2>本文の見出し</h2>
　　<p><q><a href="http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 …要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため</a></q></p>
　</div>
　<div class="footer">
　</div>
</body>

HTML5でしたら
<body>
　<header>
　　<h1>見出し</h1>
　　<nav>
　　　<ul>
　　　　<li>あいうえお</li>
　　　　<li>かきくけこ</li>
　　　　<li>さしすせそ</li>
　　　</ul>
　　</nav>
　</header>
　<section>
　　<h2>本文の見出し</h2>
　　<p><q><a href="http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 …要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため</a></q></p>
　</section>
　<footer>
　</footer>
</body>

ここで、
・headerブロックは全幅(width="100%")として、ナビゲーションはheaderの最下段にライン状に置きたい。
・章(本文)の見出しはタグのようにデザインしたい。
★常にこのように考えます。
　￣￣￣￣￣￣￣￣￣￣￣文書構造がわからないと次に進めない。

サンプル
★タブは＿に置換してあるので戻す。
★HTML4.01 + CSS2.1
　　last-childはCSS3
★画像は下記のものを使用する。blue(0,0,255)を透明色に指定した、blue.gifでHTMLを置くディレクトリにおく。

<!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>
＿＿<div class="nav">
＿＿＿<ul>
＿＿＿＿<li>あいうえお</li>
＿＿＿＿<li>かきくけこ</li>
＿＿＿＿<li>さしすせそ</li>
＿＿＿</ul>
＿＿</div>
＿</div>
＿<div class="section">
＿＿<h2>本文の見出し</h2>
＿＿<p><q><a href="http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 …要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため</a></q></p>
＿</div>
＿<div class="section">
＿＿<h2>本文の見出し</h2>
＿＿<p>HTMLに文書構造しか書かれていないと、自在にデザインできますし、検索エンジンはむろん、あらゆる端末で利用できるし、いつでもデザインは変えられる。</p>
＿</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>

- 0
- 件

通報する

No.3

回答者： ORUKA1951
回答日時：2016/02/08 08:37

こうなる。

- 0
- 件

通報する

この回答へのお礼

細かくありがとうございます。
afterがあったのですよね。
スッキリしました、ありがとうございます。

通報する

お礼日時：2016/02/10 06:13

No.4ベストアンサー

回答者： fufufunofufufu
回答日時：2016/02/08 12:19

こんにちは。

CSS3を使えば、画像なしでCSSだけでできますよ。
以下参考まで。

【HTML】
<img src="image.png" width="100%">
<div class="band"><p>あいうえおかきくけこさしすせそたちつてと</p></div>

【CSS】
*{margin:0; padding:0;}
img{border:0;display: block;}
.band{
width: 100%;
border-top: solid 4px #009d89;
}
.band p{
background-color: #009d89;
width: 50%;
color: #FFF;
position: relative;
height: 30px;
line-height: 30px;
text-align: center;
}
.band p:after{
content: "";
display: block;
height:0;
width:0;
border: solid 21px transparent;
border-bottom: solid 21px #009d89;
position: absolute;
right:-21px;
bottom:9px;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}

------------------------
説明として。
.band pで背景緑、幅50%のテキストを置く。
その右側に、擬似要素afterでborderを使った三角形を作り、それをtransform:rotate()で-45度回転したものを
position指定でくっつけています。（逆に白い三角形を作って、逆に回転させて、緑のテキストの上にかぶせるのもあり）
上部のボーダーは.bandにつけています。でないとwidth100%にできないので。

transformがIE8には対応していないので、その場合はIE8のCSS3適用プラグインを使用するか、やっぱり画像で対応するかだと思います。

頑張ってください。