生涯、学習していきたい

いろいろなことを考えるのが好きです。

ドットインストール:レスポンシブウェブデザイン入門#04~#06

ドットインストールさんで、

「レスポンシブWebデザイン」の作り方を学んでいます。

今回は#04~#06です。

 

f:id:ponnkichi:20180411220527p:plain

 前回の記事はこちらです。

ponnkichi.hatenablog.com

 #04 ヘッダーを作り込んでいこう

まずは、狭い画面幅を想定して作っていくそうです。

スマホファーストですね!

 

狭い画面幅だと、上のほうの完成版はこのようになっています。

f:id:ponnkichi:20180410211813p:plain

これの、ヘッダーの部分を作ります。

ヘッダーは、左側にタイトル「MY site」と、

右側にアイコンがあります。

 

では、bodyにheaderを作っていきましょう。

幅をつけたりしたいので、cotainerを作ります。

<header>

<div class="container">

</div>

</header>

 

アイコンは、Font awesomeを使いたいので、サイトを検索してみましょう。

f:id:ponnkichi:20180410212154p:plain

サイトを開いたら、「The Icons」を探します。

f:id:ponnkichi:20180410212216p:plain

検索窓に「bars」と入れて調べます。

f:id:ponnkichi:20180410212235p:plain

出ました!

一番上のものが、求めていたアイコンですね♪

f:id:ponnkichi:20180410212258p:plain

ここをクリックすると、下のほうにこのようなコードが出ているので

これをコピペします。

f:id:ponnkichi:20180410212342p:plain

コピペしたらこのような感じになりました。

ブラウザで見ると、このようになっています。

f:id:ponnkichi:20180410212414p:plain

ふむふむ。

これにスタイルをつけていきましょう。

 

要素を中央揃えにしたいので、

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にして少し大きく。

カーソルプロパティで、マウスが乗ったときにわかりやすくなるようにしました。

 

ここまで、ブラウザで見るとこのようになっています。

f:id:ponnkichi:20180410213300p:plain

うん、いいですね!

ちゃんと、メニューアイコンにマウスが乗ると指差しマークになっているのもわかります。

 

******************

ちなみに、カーソルプロパティに関してはCSS入門編の#16でも学習しています。

ponnkichi.hatenablog.com

 

#05 セクションのスタイルを変えよう

さて、次はメインのコーナーです。

ヘッダーの下にはいくつかのセクションが並んでいくのですが、

  • どのセクションにも上下に余白があり
  • 見出しがあって、下に中身がある

という構成になっているので、

このあたりの共通のスタイルを書いていきます。

f:id:ponnkichi:20180411213233p:plain

f:id:ponnkichi:20180411213238p:plain

f:id:ponnkichi:20180411213241p:plain

こんな感じで続いていきます。

 

commonのところに書いていきます。

セクションのスタイルは

section{

padding:60px 0;

}

 上下に余白を。

 

セクションの中の見出しについてもスタイルをあてます。

section h2{

text-aline:center;

margin:0 0 60px;

}

 

中央揃えにして、

下にだけ余白をつけます。

 

それから、続くセクションは交互に背景色が変わっているので

nth-childを使って、順番に色を変えてみましょう。

section:nth-chilid(even){

background:#fff;

}

 

偶数番目のセクションの背景色は白に。

 

これができたら、htmlにもセクションを作りましょう。

f:id:ponnkichi:20180411213903p:plain

ヘッダーの下にセクションを配置していきます。

<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」ですね。

早速ブラウザで見てみましょう。

f:id:ponnkichi:20180411214301p:plain

 セクションが切り替わっていて、

背景色も変わっているのがわかります。

 

******************

nth-childなどについては、

CSS3の#06で学習しています。

 

ponnkichi.hatenablog.com

 

#06 特徴紹介セクションを作ろう

次は、featuresのセクションを作ります。

f:id:ponnkichi:20180411214647p:plainf:id:ponnkichi:20180411214650p:plain

 

このような、写真と説明のかたまりが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つならんでいます。

 

f:id:ponnkichi:20180411215348p:plain

f:id:ponnkichi:20180411215349p:plain

 

写真が少し大きいので、containerに対して100%の大きさになるように

スタイルをあてましょう。

 

ヘッダーの下に、/*features*/のコメントをつけて書いていきます。

 

/*features*/

.features img{

width:100%;

}

 このようにすると、

f:id:ponnkichi:20180411215545p:plain

ちゃんと幅に収まるサイズの写真になりました。

 

また、item同士の余白を開けましょう。

.features .item{

magin-bottom:60px;

}

 

f:id:ponnkichi:20180411215721p:plain

見づらくて申し訳ないのですが、

テキストの下に余白がつきました。

 

ただ、最後の余白だけ、セクションの余白と重なって間延びした感じになっているので

f:id:ponnkichi:20180411215827p:plain

(ちょっと長い)

 

最後のitemのmargin-bottomだけ、余白を0にしましょう。

.features .item:last-child{

magin-bottom:0;

}

 すると、

f:id:ponnkichi:20180411220024p:plain

余白が短くなりましたね。

 

 

***********************

last-childについては、CSS3の#06で学習しています。

ponnkichi.hatenablog.com

 

また、今回と同じように最後の要素のmargin-bottomだけを0にする方法は

実践ウェブサイトを作ろうの#12でも使っています。

ponnkichi.hatenablog.com

 

復習にもなりますね!

次回が楽しみです。