【HTML5認定試験Level.1】part4 レスポンシブWEBデザイン

今回はレスポンシブWEBデザインに着手します。

HTML5認定試験の試験範囲は以下の通りです。


  •  要素 主にHTMLを構成するタグやタグに設定可能な属性について
  •  CSS ウェブサイトの見た目を設定するCSSの設定方法など
  •  レスポンシブWEBデザイン 
    スマホタブレットなど様々なデバイスでのレイアウトの設定方法
  •  APIの基礎知識 
    APIを用いて様々なコンテンツ(音楽、動画、位置情報、ブラウザ間の通信)を作成する
  •  Webの基礎知識 HTTP、HTTPSプロトコルの基礎知識、その他WEBの関連技術

試験範囲としてはそこまで広くありません。

勉強に使用したテキストは以下です。

レスポンシブWEBデザインとは

スマホやPCで同じサイトを参照したときに

解像度が大きく異なるためデバイスによっては

見にくいレイアウトになってしまいます。

そこで以前は各デバイスのレイアウトに対応するため

HTMLファイルを複数用意していました。

しかしながらデバイス毎にHTMLファイルを作成するのは

工数もかかるしメンテナンスも大変です。

 

そこで出てきた考え方がレスポンシブWEBデザインです。

HTMLは一つしか作らないがデバイスによっては読み込むCSSファイルを

切り替えたり、画面に表示する画像ファイルも端末の解像度によって

変えるなどあらゆる手法を使ってレイアウトが崩れるのを防ぎます。

実際にやってみた 

今回は画像ファイルの読み込みをデバイスによって変えてみます。

下に表示されている画像には何が表示されているでしょうか?

f:id:peaceWalker:20180225004755p:plain

f:id:peaceWalker:20180225005321p:plain


PCからこの記事を読んでいる場合は「PC用画像」という文字列が表示されています。

スマートフォンの場合は「スマホ用画像」と表示されます。

 

これはメディアクエリという手法である条件下で

CSSを切り替える技術を使用しています。

実装は以下のようになります。

 <style>

/* デフォルトで読み込むCSS */
.hatena-fotolife-pc{ /* PC用画像のclass*/
visibility : visible; /* 表示 */
}
.hatena-fotolife-sp{ /* スマホ用画像のclass*/
visibility : hidden; /* 非表示 */
}

/* 解像度の幅が480px以下の場合に読み込むCSS */
@media screen and (min-width:0px) and (max-width:480px){
    .hatena-fotolife-pc{ /* PC用画像のclass*/
    visibility : hidden; /* 非表示 */
    }
    .hatena-fotolife-sp{ /* スマホ用画像のclass*/
    visibility : visible; /* 表示 */
    } 
}
--></style>

処理の内容はコメントを読めば分かると思いますので説明は割愛します。

さいごに 

WEBサイトを作成する際には多種多様のデバイスに対応できるよう

すべきということが分かりました。以上です。