レスポンシブwebデザイン、２カラムをやってみる。

〽️ アウストラロピテクスでもできるレスポンシブデザイン講座。




２カラムのレスポンシブデザインを作りたい！

こんにちは。「ふ」です。

〜今回は２カラムのレスポンシブデザインをやってみたいと思います。

完成イメージはこんな感じ。

PCでの表示



スマホでの表示

ではやってみましょう！
とりあへずHTMLを書いて表示させてみます。

HTML

<body>
h1
p
</body>

PC画面でのプレビュー

こんな感じになりました。

おことわり

視認性を高めるために、実際には背景色など色々なCSSを仕込んでいますが、今回の目的とは外れるため、詳しいcodeの紹介は割愛します。




まづは１カラムから。

先ほどのHTMLコードを極端に小さい画面のデバイスで表示すると、要素の右側が切れて表示されてしまいます。

スマホ画面でのプレビュー

画面の幅(width)に合わせて表示されるように、 head要素内にmeta情報を記述しましょう。

<head> </head>

meta情報の名前（属性）はviewport（画面）、そしてその設定内容は「width（幅）はデバイスのwidthに合わせてください」という意味です。

このmeta情報を指定したのち、さきほどの要素の右側が途切れてしまった画面サイズでプレビューしてみます。

スマホ画面でのプレビュー

画面サイズに合わせたwidthで要素が表示されました。
次はPC画面でプレビューしてみます。

PC画面でのプレビュー

うむ。headerは画面の横幅いっぱいに広げたかったのでこれでよしとして、それ以下の要素についてはある程度の幅に縮めて中央に配置したい。
header下の要素をdivで囲み、CSSを仕込みましょう。

「「１
」」
h1
p
「「１
」」

このwrapperに対してCSSを仕込みます。

<style> .wrapper { 「「１画面の大きさに関わらず、最大幅を1000pxに。」」 max-width:1000px; 「「１要素を中央揃えにする」」 margin:0 auto; }

PC画面でのプレビュー

おお、うまくいきましたね。
１カラムのレスポンシブはこれでよし。

２カラムのPC版。

１カラムには成功しました。これにPCで閲覧した時のデザインを仕込んでいきます。
PC画面での完成イメージをもう一度みてみましょう。

PC画面でのプレビュー

PCのでかい画面で表示したときにはこんな感じにしたいのですが・・
〜 HTMLに仕込むことがいっぱいありそうなので、項目に挙げてみます。

フジパンHTML仕込み
・まづheaderは画面幅いっぱい（これは１カラムの時にすでに仕込んだ）。

・そのあとメインのコンテンツとなるh１とpは広い横幅で右側に配置。

・サブのコンテンツとなるmenuやadvertは狭い横幅で左に。

・footerは幅1000pxのまま、最後に「でん！」と置きたい。

スマホでのプレビュー

なおかつ、スマホサイズの画面においては要素を左右に振り分けず、縦一列に等幅で表示させたい。

フジパンCSS仕込み
PC画面の時においてのみ、上の条件を適用させる。

そのためには、メディアクエリという機能をつかいます。

なんですかそれは？

メディアクエリとは、画面の表示サイズによって適用させるCSSを使い分けることができる機能です。
たとえば「画面幅が480px以内ならスマホ表示、それ以上ならPC表示」と条件分けしたい場合、以下のように記述します。

<style> @media only screen and (min-device-width: 480px) { 「「１//画面幅が480px以上の場合に適用させたいCSSをここに記述」」 } </style>

ではこのメディアクエリの内部にPC画面用のCSSを記述していきましょう。



要素を左右に振り分ける。

１カラムのデザインを作成した時、header以外の要素（div class = "wrapper"で囲んだもの）のwidthは1000pxに設定していました。
このwrapperのwidthを100%として、左側25%の幅でmenuとadvertを、右側75%の幅でh1とpを配置したいと思います。
まづはCSSでセレクトできるように、左に寄せたい要素に「left」、右に寄せたい要素に「right」のclass属性をあたえましょう。

<div id="menu" 「「１class = "left"」」> menu </div> <div id="h1" 「「１class = "right"」」> h1 </div> <div id="p" 「「１class = "right"」」> p </div> <div id="advert" 「「１class = "left"」」> advert </div> 「「３//footerはそのまま。」」

このleftとrightのCSSを、先ほどのメディアクエリの内部に記述します。

leftとrightの要素を左右に回り込ませ、幅も調整しています。
ここで忘れがちなのがそのまま表示させたいfooterについて。「clear : both」で回り込みを解除させておきましょう。

プレビューしてみます。これで完成ですね！

PCでのプレビュー



スマホでのプレビュー

スマホ画面で表示すると、各要素がちゃんと等幅で積み上げられています。

あとはfont-sizeなど調整して、素敵なページに仕上げてください 🎵 お疲れ様でした。



「ふ」です。

swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。

🐧 twitter 🐧