初心者向け
ホームページの
作り方講座

レスポンシブ化してみる

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


パソコンやタブレットやスマートフォンなど、様々な端末向けのレイアウトをcss(スタイルシートファイル)で切り替えるデザインの事で、htmlが共通なのが特徴です。

当サイトで作ったホームページをレスポンシブ化してみましょう

過去のステップで完成させたホームページをレスポンシブ化してみましょう。
このステップからやりたい人はファイル一式をダウンロード+解凍しておいて下さい。

【重要】これからのステップを行う場合は「著作表示」を入れて下さい

これまでの設定及びここからの設定は、弊社が運営する別サイトTemplate Party(ホームページテンプレート配布サイト)のcssを使っています。Template Partyには規約があり、著作表示が必要なのですが、当サイトで学んだ人は同じcssを使っているのに著作表示がありません。
第三者が訪問してきた場合に、Template Partyの規約を違反して使っていると誤解される恐れがある為、簡単な補足用のタグを入れておく事をお勧めします。

記入するのはindex.htmlのみで構いません。
html側の下から2行目あたりにある</body>のすぐ上の行に、
<!--html&css:http://homepage-chips.com/-->
と記入しておいて下さい。コメントタグになっているので、HPの表面上は見えません。

尚、この表記は単にhtmlとcssはhttp://homepage-chips.com/を元に作られている事の簡単な説明です。変更してもらっても構いませんし、なくても構わないのですが、上に書いたように規約違反者だと誤解されるのが嫌な人は入れておいた方がいいでしょう。

本題に戻ります。style.cssにレスポンシブ設定をする為のタグを追加します

cssフォルダのstyle.cssを開き、一番下にレスポンシブ用の追加設定を行います。

↓以下のタグをコピペして使って下さい。

これまでcssに設定していたものは「共通設定」という事になります。共通設定からウィンドウサイズごとに変更したいものをこれから編集していく事になります。
ただ、一般的には「モバイルファースト」といって小さな端末向けのレイアウトから作りこむ事が推奨されているようです。慣れていないと作りこみにくいので、当サイトではPC向けからレスポンシブ化する方法を解説していきます。

設定に記載している「481px」や「800px」などの数字は好きな値に変更できます。
また、設定をもっと細かく分けて表示を切り替える事もできます。「タブレット用」や「スマートフォン用」と記載していますが、実際にはここで設定されているウィンドウサイズに該当する端末に反映される事になります。

タブレット向けのウィンドウサイズのスタイルを設定していきましょう

上記の追加だけではまだ何の変化もしないので、各端末サイズ用のレスポンシブ設定を行っていきます。

まずはタブレット向けのウィンドウサイズの設定から行ってみましょう。
先に設定してある共通設定の「#container」の幅が「990px」で固定されているので、固定サイズからウィンドウサイズに変更し、HPボックスの外側に10pxのスペースを空ける設定を記入します。

↓以下のタグをコピペして使って下さい。

※スタイルを入れる場所に注意!

記入したらプレビューでindex.htmlを見てみましょう

上記で行った設定はウィンドウ幅が800px以下にならないと見れないので、ブラウザの幅を少しずつ狭くしていってみて下さい。メイン画像の幅が突然切り替わるので、そこが画面が切り替えられた合図です。(※古いブラウザではこのアクションは確認できません。)

次にメインメニューの調整を行います

2列にきれいに並ぶように調整してみます。以下を追加してみて下さい。

↓以下のタグをコピペして使って下さい。

解説:

width: 50%;」はメニューの幅を「246px」の固定サイズから「50%」に変更する設定です。
margin-right: 0px;」は、メニュー間に入れてあった余白(1pxで設定されていた)を一旦なくす設定です。
border-right: 1px solid #fff;」は、上のmarginの代わりに白線に変更する設定です。本来、PC用設定にこのボーダーを使っていればよかったのですが…、余分な手間になってしまってすみません。
border-bottom: 1px solid #fff;」は、あった方が見やすいので単に白い下線を加えただけです。
box-sizing・・・」以下の3行は、widthやheightの値に「枠線(border)」も加える設定です。これがないと枠線が幅に含まれないのでレイアウト崩れを起こしてしまいます。上のmargin-rightをborder-rightに変更したのはこれを使いたかったからです。
※古いブラウザはbox-sizingに未対応なので、当サイトではPC向けのスタイルには使っていません。

ブラウザでプレビュー

以下のようにメニューがウィンドウ幅に合わせて表示されればOKです。

が、よ~く見ると、右側のメニューと下の画像の幅が1pxずれていますので、これをきれいに揃えていましょう。※気にならない人はこのままで全く問題ありませんよ。

偶数番目のメニューにだけスタイルを適用させる

上記のようにずれて見えるのは、全てのメニューの右側に1pxの白い線が入っているからです。
偶数番目のメニューのみ、線を消す設定にしてみましょう。

↓以下のタグをコピペして使って下さい。

:nth-child(even) 「:nth-child(even)」は、偶数番目(even)にスタイルを適用させることができます。
奇数番目なら「:nth-child(odd)」とします。
今回は、「nav#mainmenu ul li」の偶数番目にだけ設定したかったので上記となりました。

↓以下のようにきれいにそろえばOKです。

タブレットサイズへのスタイル設定はこれで完了です。他のページもプレビューして確認してみて下さい。

次に、スマートフォン向けのウィンドウサイズのスタイルを設定していきましょう

上で設定したタブレット向けと同じスタイルをcontainerに設定します。

↓以下のタグをコピペして使って下さい。

プレビューしてみましょう

タブレットの時と同じように、幅をせまくしていって下さい。以下のように切り替わればOKです。

スマートフォンは画面が小さいので余分な余白などを消します


↓以下のタグをコピペして使って下さい。

解説:

margin: 0px;」は、HP外側の余白です。タブレットのスタイルをそのままコピペしていたので10pxで設定されていたのですが、なしにしましょう。なしならこの行はなくていいじゃないかと思われそうですが、PCで設定されているmarginが適用されてしまうので0pxで指定しなおしています。
border: none;」はPC用の設定で枠線が1pxで入っていたのをなくす設定です。
padding: 15px;」は、PC用の設定で20pxとあったのを少し小さくしただけです。お好みに合わせて変更してみて下さい。
border-radius: 0px;」は角丸の設定です。20pxあったので0pxにしました。

それぞれの行がどのようなスタイルになっているか、1行ずつコピペ&プレビューしてみるとより理解しやすいと思います。

再びプレビュー

外側がすっきり消えていればOKです。

メニューを調整します。タブレットの時と同じスタイルでOKです。

タブレットと同じ2列表示にしようと思うので、上で設定したタブレットのスタイルをそのままコピペして下さい。

↓以下のタグをコピペして使って下さい。

以下のように2列になればOKです。

キーボードの入ったボックスを見やすく調整します


このままでも問題ありませんが、もっと画像を大きく表示させたい人は以下調整を行ってみて下さい。

↓以下のタグをコピペして使って下さい。

解説:

float: none;」は、PC用で「float: left;」とあった左への回り込み設定をなしにする設定です。
width: 100%;」は、PC用で「width: 40%;」とあったものを変更しています。
box-sizing・・・」以下の3行は、上のタブレット向けスタイルでも解説したようにwidthやheightの値に枠線を加える設定です。これがないと枠線が幅に含まれないのでレイアウト崩れを起こしてしまいます。尚、古いブラウザは未対応なので、当サイトではPC向けのスタイルには使っていません。
「#contents section.list1 p」の「margin-left: 0;」は、PC用で「margin-left: 44%;」と左側に余白を作っていたものをなしに変更しています。

↓以下のようになればOKです。

tableを調整してみましょう

少し左側のブロック幅が広いようなので狭くしてみます。


↓以下のタグをコピペして使って下さい。

これはPC向けの設定で「width: 180px;」となっていたのを変更したものです。
「px」でなく、「%」での設定なども可能なので色々試してみて下さい。

完成です

画像をクリックすると、レスポンシブ化したテンプレートを見る事ができます。