【書籍学習ログ】HTML/CSS/Webデザインが1冊できちんと身につく本 - 【5日目】

Chapter 8 グリッドレイアウトページの制作と動画の埋め込み

グリッドレイアウトページ

用語

・カード型レイアウト
　...コンテンツをトランプのカードのように並べたレイアウト。例 : 画像ブックマークサービス｢Pinterst｣
・可変型レイアウト
　...コンテンツの幅や位置を変化させ、同じ高さや幅で並べるよりもアクセントをつけることができる。

HTMLタグ

・ページ内リンク
　...リンク先ページのid名を指定して、ページの途中から表示させる。
　<a href ="●●●.html#id名"><⁄a>
・グリッドレイアウト - 画像リストの準備
　...section要素内で画像リストを作成する。
　　CSS内ではこのリストにスタイルを指定するので画像リストクラス(photograph-list)を定義。
　　floatプロパティで並べることを考えてclearfixクラスも追加しておく。

<section id="scene_1">
   <h2 class="icon">Scene_1</h2>
   <ul class="clearfix photograph-list">
      <li><img src="images/01.png" alt="画像1"></li>
      <li><img src="images/02.png" alt="画像2"></li>
      <li><img src="images/03.png" alt="画像3"></li>
   </ul>
</section>

CSSプロパティ

・グリッドレイアウトのスタイル指定
　...HTML側で準備した画像リスト(photograph-list)にスタイルを適用させる。
　1. 画像を左寄にし、リストの装飾を外す
　2. 余白を設定する
　3. 疑似クラスで右端の余白をなくす
・特定条件下の要素を指定する疑似クラス　:nth-child()
　2番目の要素 : :nth-child(2)
　2の倍数番目の要素 : :nth-child(2n)

#photograph photograph-list li{
   float: left; /*左寄*/
   list-style: none; /*装飾なし*/
   margin: 0 20px 15px 0; /*余白設定 : 右20px 下15px */
   /*このままだと右端の画像が下に落ちる*/
}
#photograph photograph-list li:nth-child(3n) {
/*3の倍数順要素の右余白を解除*/
   margin-right: 0;
}

ポイント

・グリッドレイアウトと親和性の高い数字
　...全体は｢12｣で分割されている。12は2,3,4,6と多くの数字で割り切れるので多彩なレイアウトに対応できる。

Youtube動画埋め込みページ

用語

・iframe要素...外部サイト内容を埋め込む要素。Youtube動画他、カレンダー、地図、ブログの新着情報など幅広い用途に使用できる。

埋め込みコード取得手順

【書籍の手順×、UI変更。新手順は以下】
1. Youtube動画にアクセスし、｢共有｣クリックでメニュー表示、｢埋め込み｣を選択

共有メニュー

2. プレーヤー設定を確認のため埋め込みオプション以下の｢デベロッパーサンプル｣を選択

埋め込みプレーヤー設定の確認

3. プレーヤー設定ページで｢コンテンツ｣と｢サイズ｣を指定
　｢コンテンツ｣には、動画urlの最後にある英数字で構成された動画IDを設定。
　｢サイズ｣は埋め込み場所に合わせて横幅を設定。高さが自動調整される。

プレーヤー設定ページ

サイズとコンテンツの設定

4. ｢選択したオプションを使用してプレーヤーを更新｣でプレーヤー設定を更新

更新後プレーヤー

5. ｢プレーヤーのパラメータを表示｣でコード取得

コード取得

6. 取得したコードを埋め込み場所のHTMLに追加

動画埋め込みページ

成果物

グリッドレイアウトページ

Photographページ

YouTube動画埋め込みページ

Movieページ

まとめと感想

今回はグリッドレイアウトページと動画埋め込みページを制作しました。

動画埋め込みに関しては、埋め込みたいコンテンツごとに別サイトでのサービスでコードを取得するだけだったので楽チンでした。

グリッドレイアウトページは、タイルのように画像がぴっしり並ぶとやっぱり綺麗でした。
実装の方法として、今回はfloatと、疑似クラスを使った記述で実装していましたが、:nth-child() という記述が印象的。

しかしながら、グリッドと聞くとBootstrapのグリッドシステムが思い起こされ、
他にも実装方法ありそうだなと思い調べると、とってもたくさん出てきた。笑
www.webcreatorbox.com
ics.media
www.webdlab.com
ottan.xyz

ふむふむ。触ったことのあるものだと、やっぱりBootstrap。
そして、参考ページを見てみるとFlexBox、CSS3のobject-fitでの記述が便利そうでした。

それぞれ試してから、自作レイアウトでポートフォリオをつくるのに活用したいと思います！

次回、お問い合わせページのレイアウトを学習〜