ドットインストール:レスポンシブウェブデザイン入門#04~#06
「レスポンシブWebデザイン」の作り方を学んでいます。
今回は#04~#06です。
前回の記事はこちらです。
#04 ヘッダーを作り込んでいこう
まずは、狭い画面幅を想定して作っていくそうです。
スマホファーストですね!
狭い画面幅だと、上のほうの完成版はこのようになっています。
これの、ヘッダーの部分を作ります。
ヘッダーは、左側にタイトル「MY site」と、
右側にアイコンがあります。
では、bodyにheaderを作っていきましょう。
幅をつけたりしたいので、cotainerを作ります。
<header>
<div class="container">
</div>
</header>
アイコンは、Font awesomeを使いたいので、サイトを検索してみましょう。
サイトを開いたら、「The Icons」を探します。
検索窓に「bars」と入れて調べます。
出ました!
一番上のものが、求めていたアイコンですね♪
ここをクリックすると、下のほうにこのようなコードが出ているので
これをコピペします。
コピペしたらこのような感じになりました。
ブラウザで見ると、このようになっています。
ふむふむ。
これにスタイルをつけていきましょう。
要素を中央揃えにしたいので、
containerクラスの設定をしていきます。
幅がブラウザの90%になるようにして、
中央揃えにはmargin:0 auto;を指定します。
.container{
width:90%;
margin:0 auto;
}
次はヘッダーに関するスタイルです。
先ほどのアイコンを右寄せにしたいので、指定しましょう。
Font awesomeのサイトからコピペした段階ではこうなっていました。
<i class="fa fa-bars"aria-hidden="true"></i>
これに書き加えます。
<i class="fa fa-bars header-mobile-menu"aria-hidden="true"></i>
赤字の部分を書き足します。
そしてスタイルをあてます。
/*header*/
.header-mobile-menu{
float:right;
font-size:24px;
cursor:pointer;
}
右寄せにして、フォントサイズは24pxにして少し大きく。
カーソルプロパティで、マウスが乗ったときにわかりやすくなるようにしました。
ここまで、ブラウザで見るとこのようになっています。
うん、いいですね!
ちゃんと、メニューアイコンにマウスが乗ると指差しマークになっているのもわかります。
******************
ちなみに、カーソルプロパティに関してはCSS入門編の#16でも学習しています。
#05 セクションのスタイルを変えよう
さて、次はメインのコーナーです。
ヘッダーの下にはいくつかのセクションが並んでいくのですが、
- どのセクションにも上下に余白があり
- 見出しがあって、下に中身がある
という構成になっているので、
このあたりの共通のスタイルを書いていきます。
こんな感じで続いていきます。
commonのところに書いていきます。
セクションのスタイルは
section{
padding:60px 0;
}
上下に余白を。
セクションの中の見出しについてもスタイルをあてます。
section h2{
text-aline:center;
margin:0 0 60px;
}
中央揃えにして、
下にだけ余白をつけます。
それから、続くセクションは交互に背景色が変わっているので
nth-childを使って、順番に色を変えてみましょう。
section:nth-chilid(even){
background:#fff;
}
偶数番目のセクションの背景色は白に。
これができたら、htmlにもセクションを作りましょう。
ヘッダーの下にセクションを配置していきます。
<section cass="features">
<h2>Features</h2>
<div class="container">
</div>
</section>
featuresというセクションを作り、
見出しh2を作ります。
その下は中央揃えにするためにcontainerを作っておきましょう。
その下にも、2つセクションがあるのでコピペしましょう。
<section cass="news">
<h2>News</h2>
<div class="container">
</div>
</section>
<section cass="how to use">
<h2>How to use</h2>
<div class="container">
</div>
</section>
2個目のセクションが「News」で、
3個目のセクションが動画の埋め方を説明する「How to use」ですね。
早速ブラウザで見てみましょう。
セクションが切り替わっていて、
背景色も変わっているのがわかります。
******************
nth-childなどについては、
CSS3の#06で学習しています。
#06 特徴紹介セクションを作ろう
次は、featuresのセクションを作ります。
このような、写真と説明のかたまりが3つあるのでマークアップします。
<section cass="features">
<h2>Features</h2>
<div class="container">
</div>
</section>
先ほどの、「container」の中をマークアップしていきましょう。
画像と説明のセットを「item」とします。
<section cass="features">
<h2>Features</h2>
<div class="container">
<div class="item">
<img src="img/feature.jpg">
<p>hello.hello.hello.hello.hello.hello.hello.</p>
</div>
</div>
</section>
item の中には画像と、段落pが入ります。pの中身はダミーテキストですね。
(hello.の数は説明の動画よりも少なくしてあります)
そして、このitem が3つ続くのでコピペします。
<section cass="features">
<h2>Features</h2>
<div class="container">
<div class="item">
<img src="img/feature.jpg">
<p>hello.hello.hello.hello.hello.hello.hello.</p>
</div>
<div class="item">
<img src="img/feature.jpg">
<p>hello.hello.hello.hello.hello.hello.hello.</p>
</div>
<div class="item">
<img src="img/feature.jpg">
<p>hello.hello.hello.hello.hello.hello.hello.</p>
</div>
</div>
</section>
ブラウザで確認すると、ちゃんと先ほどのような
見出し、画像、テキストのセットが3つならんでいます。
写真が少し大きいので、containerに対して100%の大きさになるように
スタイルをあてましょう。
ヘッダーの下に、/*features*/のコメントをつけて書いていきます。
/*features*/
.features img{
width:100%;
}
このようにすると、
ちゃんと幅に収まるサイズの写真になりました。
また、item同士の余白を開けましょう。
.features .item{
magin-bottom:60px;
}
見づらくて申し訳ないのですが、
テキストの下に余白がつきました。
ただ、最後の余白だけ、セクションの余白と重なって間延びした感じになっているので
(ちょっと長い)
最後のitemのmargin-bottomだけ、余白を0にしましょう。
.features .item:last-child{
magin-bottom:0;
}
すると、
余白が短くなりましたね。
***********************
last-childについては、CSS3の#06で学習しています。
また、今回と同じように最後の要素のmargin-bottomだけを0にする方法は
実践ウェブサイトを作ろうの#12でも使っています。
復習にもなりますね!
次回が楽しみです。