『HTML5+CSS3』におけるレスポンシブ対応

こんにちは、Webサイトつくり隊のささみです(･ω･ゞ-☆

先日まで、ある案件のWeb制作に携わっており、ブログ更新がご無沙汰となっておりました(;´Д`A “

でもそちらの案件も一段落したので、また新たなお仕事が入るまでシェーン相模大野の関連ブログ群を更新して参りたいと思います( =　 •̀　 д •́　)ゞ

私は前回の案件では担当ページのレスポンシブ対応からは外れたのですが、レスポンシブデザインについて私が知りうるわずかな知識を皆さまと共有したいと思います。

レスポンシブデザインというのは、そもそも何でしょうか。

レスポンシブWEBデザインというのは、ホームページを制作する際に、PCの大きな画面と、スマホ・タブレットなどの小さな画面と、それぞれの解像度に合わせてページの表示を変えて「レスポンス＝応答・対応」させるサイト構築を言います。

スマホ・タブレットは基本、WEBページの表示が縦長となり、下へとどんどんスクロールできるページ作りが好まれます。逆にPCで表示する場合は、横長の画面でサイト内をナビしやすい(ボタンの配置がわかりやすく移動しやすい)ホームページが良いでしょう。

また、段組みのあるレイアウトの場合、左→右へと流れる段組みを上→下へと配置を入れ替えると、スマホ画面でそれぞれの要素を極端に縮小する必要がなく、解像度が低めの画面でも見やすくなります( ,,｀･ ω´･)b☆

記事タイトルには「HTML5+CSS3におけるレスポンシブ対応」とありますが、レスポンシブ対応の主役というのは、HTMLではなくCSSとなります((φ(･Д´･ *)ﾎｫﾎｫ

HTMLで定義した様々な要素がありますね→<article>とか<section>とか<div>とか<p>とか。初めにCSSのファイルを複数用意し、HTMLで用意された要素に対して、画面サイズ別のスタイル指定をそれぞれ用意するのが基本です。

だから、HTMLで定義した要素に対し、PC画面用のCSSファイルが指定するスタイルと、スマホ画面用のCSSファイルが指定するスタイルと、複数あることで、共通のHTMLの要素たちに対して「パターンAの場合はこうして」「パターンBの場合はそうして」とカスタマイズすることが出来るんです。

つまり、1個のHTMLファイルを、複数のCSSファイルによって色んな見た目に自動で切り替えることができる、というのがレスポンシブの力なのですね( ,,｀･ ω´･)ﾝﾝﾝ

難しい話が続きましたが。現在、WEB制作では必要不可欠な技術となったレスポンシブですので、今後ちょっとずつ私も勉強して行きたいと思います( =　 •̀　 д •́　)ゞ

ささみでした(･ω･ゞ-☆

Follow me!