Vol.14 レスポンシブWebデザイン！ヘッダー画像の左右にブラウザ幅いっぱいのバック
カテゴリー : WEBの現場から！
いよいよサイトも完成に近づいた。それでは上記画像フッターを作成していく。これは特に問題ないだろう。ハイライト部分が「index.html」に追加するフッター部分。ソース黒枠の右上「ソースを表示」からコピー。
「index.html」
<!DOCTYPE html> <html lang="ja"> <head> 〜中略〜 </head> <body> <div id="wrap"> <!-- ヘッダー --> <header> 〜中略〜 </header> <!-- グローバルナビゲーション --> <nav id="gnav"> 〜中略〜 </nav> <!-- コンテンツエリア --> <div id="contents"> 〜中略〜 </div><!-- #contents end --> <!-- フッター --> <footer> <img src="images/logo.jpg" width="100" height="17" alt="俺のブログ"> <p>Copyright © 2014 MY BLOG All Rights Reserved.</p> </footer> </div><!-- #wrap end --> </body> </html>
サイトタイトルはトップのロゴ画像を使用する。そのままでは大きすぎるので、サイズを指定している。次にCSSの「全デバイス共通のスタイルとスマートフォン向けレイアウト指定」内に下記を追加。フッターのスタイルは全デバイスで共通のため、「メディアクエリ」指定内には記述する必要はない。
「style.css」
/*==========================================
フッターのスタイル
===========================================*/
footer {
margin: 0 auto;
text-align:center;
border-top: 2px solid #c0c0c0;
padding: 15px 0 15px 0;
}
footer p {
font-size: 0.6em;
margin-top: 10px;
}
「footer要素」は「body要素」の子要素なので「width: 100%;」をそのまま継承している。「footer要素」をセンター揃えにして、ボーダー線を指定。「width: 100%;」なので、横幅いっぱいにボーダー線が表示される。後はスタイルを調整して「footer要素」が完成。
ブラウザ幅いっぱいのバックを表示する
続いてトップ画像の横に表示されているグレーのバックを作成していく。
トップ画像は「max-width:960px;」と指定しているので、PC向け固定スタイルの961px以上のときに表示されれば良い。「style.css」のPC向け固定スタイルの「メディアクエリ」指定内に下記ハイライト部分を追加。
「style.css」
/* PC向けレイアウト指定：961px以上では固定レイアウト */
@media only screen and (min-width: 961px) {
header #back{
background-color:#dddddd;
height:auto;
}
#main .news {
width: 140px;
padding:0 10px 0;
}
#main .news img {
max-width: 100%;
}
#main .news h3 {
padding: 0;
}
#main .news p {
padding: 0;
}
}
HTML「header要素」内にidセレクタ「back」を追加する。下記ハイライト部分が追加箇所。
「index.html」
<!DOCTYPE html> <html lang="ja"> <head> 〜中略〜 </head> <body> <div id="wrap"> <!-- ヘッダー --> <header> <h1><img src="images/logo.jpg" alt="俺のブログ"></h1> <div id="back"> <img src="images/topimage.jpg" alt="俺のブログ"> </div> </header> <!-- グローバルナビゲーション --> <nav id="gnav"> 〜中略〜 </ul> </nav> <!-- コンテンツエリア --> <div id="contents"> 〜中略〜 </div><!-- #contents end --> <!-- フッター --> <footer> 〜中略〜 </footer> </div><!-- #wrap end --> </body> </html>
「style.css」に記述した「#back」は、「header要素」の子要素であり、「header要素」は「body要素」の「width: 100%;」を継承しているため、「#back」も「width: 100%;」となり、指定した背景が横幅いっぱいに広がる。「height:auto;」の指定をしているので、「#back」が包容している「header img要素」の高さと約同じになる。誤差はCSSの「header img」を微調整する。
header img {
width:100%;
height:auto;
max-width:960px;
margin-bottom:-2px;
}
これで当初の目標としていたサイトが完成した。【こちら】から完成サイトを確認できる。次回からは「フリードグリッド」を導入して、PC向けスタイルを921px〜1100pxまでを可変レイアウトとなるようにしていく。下記に今回までの全「index.html」と「style.css」のコードを記述しておく。
「index.html」
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<title>MY BLOG</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.heightLine.js">
</script>
<script type="text/javascript">
$(window).on("load",function(){
$(".news").heightLine();
});
</script>
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="js/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body>
<div id="wrap">
<!-- ヘッダー -->
<header>
<h1><img src="images/logo.jpg" alt="俺のブログ"></h1>
<div id="back">
<img src="images/topimage.jpg" alt="俺のブログ">
</div>
</header>
<!-- グローバルナビゲーション -->
<nav id="gnav">
<ul class="cf">
<li><a href="#">HOME</a></li>
<li><a href="#">COLUMN</a></li>
<li><a href="#">SNS</a></li>
<li><a href="#">PROFILE</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
<!-- コンテンツエリア -->
<div id="contents">
<section id="main" class="cf">
<h2><img src="images/new.png" width="100" height="50" alt="works"></h2>
<section class="news">
<img src="images/new1.jpg" width="184" height="184" alt="work1">
<h3>Article1</h3>
<p>レスポンシブWebデザインとは、あらゆるデバイスに最適化したWebサイトを、一つのHTMLで…</p>
</section>
<section class="news">
<img src="images/new2.jpg" width="184" height="184" alt="work1">
<h3>Article2</h3>
<p>実現できるシンプルな制作手法。CSSを調整することによって、画面サイズを基準にサイトの…</p>
</section>
<section class="news">
<img src="images/new3.jpg" width="184" height="184" alt="work1">
<h3>Article3</h3>
<p>切り替えが可能に。フルードイメージとは、ブラウザのウィンドウ幅に合わせて、画像のサイズを…</p>
</section>
<section class="news">
<img src="images/new4.jpg" width="184" height="184" alt="work1">
<h3>Article4</h3>
<p>拡大・縮小する手法。CSSのみで実装。メディアクエリとは、「画像解像度」「ウィンドウの幅」…</p>
</section>
<section class="news">
<img src="images/new5.jpg" width="184" height="184" alt="work1">
<h3>Article5</h3>
<p>「デバイスの向き」などを条件に、サイズに応じたCSSにスタイルを切り替えることができる。…</p>
</section>
<section class="news">
<img src="images/new6.jpg" width="184" height="184" alt="work1">
<h3>Article6</h3>
<p>フルードグリッドとは、「グリッドデザイン」と、「リキッドレイアウト」を合わせたものである。…</p>
</section>
</section>
</div><!-- #contents end -->
<!-- フッター -->
<footer>
<img src="images/logo.jpg" width="100" height="17" alt="俺のブログ">
<p>Copyright © 2014 MY BLOG All Rights Reserved.</p>
</footer>
</div><!-- #wrap end -->
</body>
</html>
「style.css」
@charset "utf-8";
/* /_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_
全デバイス共通のスタイルとスマートフォン向けレイアウト指定
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/
/*==========================================
body
===========================================*/
body {
width: 100%;
background-color:#FFF;
font-family:'Helvetica Neue', Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
color:#000;
}
a {
color:#000;
text-decoration:none;
}
a:hover {
color:#555;
text-decoration:underline;
}
/*==========================================
ヘッダーのスタイル
===========================================*/
header {
text-align:center;
margin:0 auto;
}
header h1 {
padding:15px 5px 15px 5px;
}
header h1 img {
width:100%;
height:auto;
max-width:200px;
}
header img {
width:100%;
height:auto;
max-width:960px;
margin-bottom:-2px;
}
/*==========================================
グローバルナビゲーションのスタイル
===========================================*/
#gnav ul {
text-align:center;
margin:0 auto;
max-width: 960px;
}
#gnav ul li {
float: left;
width: 50%;
border-bottom: 2px solid #000;
padding-top: 15px;
padding-bottom: 15px;
}
#gnav ul li a{
display: block;
}
/*==========================================
コンテンツエリア全体のスタイル
===========================================*/
#contents {
max-width: 960px;
margin: 0 auto;
text-align:center;
padding-bottom: 20px;
}
/*==========================================
コンテンツエリア -> NEWのスタイル
===========================================*/
#main h2 {
margin-bottom: 15px;
}
#main .news {
width: 50%;
float: left;
margin-bottom: 20px;
}
#main .news img {
width: 100%;
height: auto;
max-width: 90%;
}
#main .news h3 {
text-align: left;
font-size: 0.9em;
font-weight: bold;
line-height: 2.0em;
padding: 0 5%;
}
#main .news p {
text-align: left;
font-size: 0.7em;
line-height: 2.0em;
padding: 0 5%;
}
/*==========================================
フッターのスタイル
===========================================*/
footer {
margin: 0 auto;
text-align:center;
border-top: 2px solid #c0c0c0;
padding: 15px 0 15px 0;
}
footer p {
font-size: 0.6em;
margin-top: 10px;
}
/* タブレット向けレイアウト指定：521px～960px */
@media only screen and (min-width: 521px) {
#gnav {
border-bottom: 5px double #000;
margin-top: 10px;
}
#gnav ul {
margin-bottom: 10px;
}
#gnav ul li {
width: 16.6666667%;
border-bottom: none;
}
#main .news {
width: 33.3333333%;
}
}
/* PC向けレイアウト指定：961px以上では固定レイアウト */
@media only screen and (min-width: 961px) {
header #back{
background-color:#dddddd;
height:auto;
}
#main .news {
width: 140px;
padding:0 10px 0;
}
#main .news img {
max-width: 100%;
}
#main .news h3 {
padding: 0;
}
#main .news p {
padding: 0;
}
}
Vol.32 WordPressのindex.phpを分割する
Vol.29 オリジナルテーマをWordPressテンプレートファイル化する（1）
Vol.27 「レスポンシブWebデザイン」実践講座〜完全版〜
Vol.23 レスポンシブWebデザイン「2カラムレイアウト」フルードイメージ + センター揃え
Vol.20 「Viewport resizer」レスポンシブWebデザインの確認ツールはこれだけでOK
Vol.12 レスポンシブWebデザイン！可変する段組(マルチカラム)を極める（2）
Vol.11 レスポンシブWebデザイン！可変する段組(マルチカラム)を極める（1）
Vol.10 レスポンシブWebデザインでつくる「グローバルナビゲーション」
Vol.6 レスポンシブWebデザインの基本構造
Vol.5 レスポンシブWebデザインとは
Vol.4 実録！レスポンシブWebデザイン シンプル＆ハイクオリティーのサイトで学ぶ
Vol.2 Webデザインのカラーを決める
