【書籍学習ログ】HTML/CSS/JavaScript 基礎 - 【3日目】

1月25日(金) 0.5h

続・Chapter 3 スマートフォン対応のきほんを学ぼう

スマートフォンに対応させよう

スマホ向けWebページ提供方法

1. HTMLとCSSを別途作成して別々に提供
2. CSSのみ切り替えて画面サイズに合わせてレイアウト変更
今回は2番目。←レスポンシブWebデザイン(RWD)

RWDメリット :
・HTMLは1つなので情報更新でのミスが減る
・デバイスに対して柔軟に対応できる
RWDデメリット
・デバイス毎に大幅な調整は難しい
・PCからのアクセス時、レイアウトがWebブラウザ依存になる
・スマホ用でもPC専用情報が残り動作が重くなることがある

→RWDでも2段階切替程度にする場合が多い

ブレイクポイント

レイアウトが切り替わる条件になる横幅。

メディアクエリ

RWDのキモとなる記述。CSSに記述する。書式は以下。
例: 画面幅600px以下

@media only screen and (max-width: 600px) {
...
}

・条件は複数指定可能。and (条件) and (条件)のように記述
・RWDでは｢min-width(幅の最小値)｣と｢max-width(幅の最大値)｣が主な条件
・ 広い画面幅(PC)向けCSSを記述後、狭い範囲分のみをメディアクエリで上書き
　...旧ブラウザでどのCSSも効かなくなることを防ぐ。

inherit(継承)

親要素のスタイルを継承する場合に指定する。
広い画面幅の時のみ別スタイルを指定したい場合に有用。
例: 親のフォント色を継承

div { /*親*/
    color: #fff;
}
div p { /*子*/
color: inherit; /*親のカラー#fffが適用される*/
}

リキッドレイアウト

幅を固定せずに柔軟に変化するレイアウトのこと。

モバイルファースト

先にスマホなど画面幅の狭いデバイス向けのレイアウトを作り、
そのあとPCなど画面幅の広いデバイス向けのレイアウトを作成すること。
要素を詰め込まずに余白をとるデザインが実現できる。
逆だと内容が煩雑になり無理が生じる。

ダミーリンク

リンク先がまだ指定できない場合に用いる。

<a href="#">...</a>

CSSでアニメーションをつける

疑似クラス
イベント毎の処理を加えることができる。
指定できる疑似クラスセレクターは書籍p.132参照。
例: description画像内にマウスカーソルを乗せた(マウスホバー)時

.description img:hover {
...
}

トランジション
徐々に変化するアニメーションを付加する。
｢変化する前｣の状態、つまり疑似クラスのない状態のセレクターに設定する。
・transition-property...対象となるCSSプロパティを指定
・transition-duration...トランジションにかける時間を指定(単位: 秒、ミリ秒)
・transition-timing-function...トランジションの処理を指定
・transition-delay...トランジションの開始を指定秒分遅らせる
例 : 不透明度を、1秒間、なめらかに、0秒後に変化させる

   transition-property: opacity;
   transition-duration: 1s;
   transition-timing-function: ease;
   transition-delay: 0s;

  transition: opacity 1s ease 0s; /*上と同じ*/

※上記1行での記述でコンマ区切りで指定したところ、
エラーは出ないがCSS適用されなかったので注意

成果物

※PC、iPhone 6/7画面(デベロッパツール)で確認
f:id:gomagaru:20190125165208j:plain
f:id:gomagaru:20190125165606j:plain

まとめと感想

単純な1ページ分なので比較的はやく理解と実装ができたと思う。

今後、様々なサイトのレスポンシブ化を経験してみると、
書籍コラムの内容がより理解できるかもしれない。

CSSアニメーションについても指定できる要素が
色々あったので、色々な組み合わせで試してみたい。

次回、Bootstrap！

Miki's Blog

フロントエンジニアに、俺はなる！