どうもこんちは。きょーたです。
レスポンシブWebデザインについてやっていきます。レスポンシブWebデザインは
Webページを制作する上で必要不可欠な存在です。HTMLで文章に印をつけていき
CSSでレイアウトや装飾をしていくことは基本的な技術となります。デバイスによって
Webページのデザインを変更していくやり方をレスポンシブWebデザインと言います。
レスポンシブWebデザインとは
画面幅に応じてWebページの表示形式を変更すること。
もちろんスマートフォンで見る画面幅とPCで見る画面幅ではサイズが異なるのは当然なこ
とです。例えばスマートフォンで見た時は、ナビゲーションの部分がハンバーガーメニュー
で表示されていたり、PCで見た時はナビゲーションが横列や縦列に表示されているといった
表示形式の違いを実装するのがレスポンシブWebデザインの役割となります。
目次
レスポンシブWebデザインができてからデバイス対応が簡単になった
レスポンシブWebデザインが出る前はデバイスごとの切替といったやり方でした。ひとつの
HTMLファイルに対して見るデバイスに応じてCSSファイルを複数用意して実装していたと
いうことです。ここ数年で様々な種類のデバイスが出てきてタブレットやいろんな大きさの
スマートフォンといった形が出てきているのでレスポンシブWebデザインは画面幅が異なって
もそれに対して調整を行なっていく事ができる大事なポイントとなってきます。
・HTMLはワンソース（ひとつのHTMLファイル）
・CSSで画面幅に応じてブレイクポイントを指定して表示形式を変える
CSSを書く際に肝となるメディアクエリとブレイクポイント
メディアクエリとは
@mediaから始まる部分のことをメディアクエリと呼びます。
max-width （その幅以下の場合） or min-width（その幅以上の場合）
※注意：maxはそれ以上ではなく、それ以下場合という意味。
minはそれ以下ではなく、それ以上の場合という意味。
意外と理解に苦しむところなので注意しましょう。
ブレイクポイントとは
画面幅の切替を決めるpxの部分をブレイクポイントと呼びます。
検証ツールを利用していろいろなサイトのブレイクポイントを見るようにしましょう。
よく使われるCSSのテクニック
画面幅に応じて写真を縮尺させたいとき
img{
max-width:100%;
height:auto;
}
max-width=最大幅という意味になります。これは画面幅に応じて画像を名一杯表示させる
という意味にです。画面が拡大・縮小しても画像を画面幅に応じて表示させるということ
です。これを設定しないと画面幅から画像がはみ出てしまったり、横スクロールがおきて
しまうので忘れず記述するようにしましょう。
height=高さをautoとすることで高さも画面幅に応じて画像が名一杯表示してくれます。
画面の最大幅を設定したい時
#container{
max-width:800px;
}
#containerという画面の大枠の部分を指定したいときに#containerを記述します。
上記の記述は、画面幅が800pxを超えた場合、Webページのコンテンツ内容はそれ
以上広がることなく中央寄せで表示されるという意味になります。
レスポンシブレイアウトの種類
もともと綺麗に横並びにするやり方は、floatしかありませんでした。レスポンシブ
Webデザインが台頭してきて複雑なレイアウトを行いたいときにレイアウトを作る
のが大変でした。そこで出てきたのでFlexboxとCSS Gridになります。
これは、レイアウトの見栄えを簡単に実現するために作られたものになります。
Flexbox
Flexboxには大きく分けて2つの要素があります。
まずひとつめが親要素となるFlexboxコンテナーです。大枠の緑色の部分を指します。
ふたつめにその中にある子要素Flexboxアイテムです。イメージは大枠の部分である
Flexboxコンテナーを指定してFlexboxアイテムが動くという形になります。floatの
レイアウトに比べるとソースコードが少なく簡単に実装することができます。
CSS Grid
CSS GridはFlexboxと同様に親要素となるGridコンテナーと子要素となるGrid
アイテムがあります。CSS Gridはまずラインというものを引きます。これは格子状の
もので区切られセルというものができます。CSS Gridの良いところは好きなところに
好きな子要素のGridアイテムを配置できるということになります。基本的Flexboxを
利用するWebサイトが多くてCSS Gridは新しいレイアウトの手法となり、これから
レイアウトを整えていく中で主流になっていくのでぜひ覚えてください。
まとめ
レスポンシブWebデザインは、Webページをデザインするうえで絶対に必要なスキル
となります。現代では、PCよりも調べごとをするときはスマートフォンが主流に
なっていますのでPC用表示形式、スマートフォン用表示形式といったデザインが
できるようにしましょう。モバイルファーストでデザインしていく方法も別記事で
解説しているので目を通して見てください。
またその綺麗なレイアウトの簡単な整え方も出ているので実装しながら見つけると
CSSでひとつうえのデザインが実現できるようになります。