Webサイト専門プログラマの言いたい放題

元システムエンジニアがサイト制作とプログラミングについて好き放題しゃべります。

【レスポンシブな2カラムの作り方】

f:id:wp-lesson:20150831221601j:plain

レスポンシブな2カラムとは?

レスポンシブな2カラムの作り方について、先日のWordpressオンラインレッスンでお教えさせていただきました。

レスポンシブな2カラムとは、ページの横にサイドバーが付いたブログのように、ブログの内容を表示するエリアとサイドバーを表示するエリアが左右に分かれていて、スマホで表示したとき(またはブラウザの端をドラッグしてウィンドウを狭めていったとき)に左右に並んでいた2つのエリアが縦に並び変わる状態を言います。

ちなみいにカラムとは、縦の列(column)のことです。
関連して、ロウとは、横の行(row)を指します。

カラムを理解するにはボックスの概念を理解しましょう

カラムは1つの箱(ボックス)と考えると良いです。ボックスという表現がしっくりこない方は、パネルと呼んでも良いでしょう。

一番大きなボックスは、ページ全体を囲っているボックス、つまりブラウザの画面いっぱいを指します。

次に大きなボックスは、ヘッダー画像などがある「ヘッダーエリア」と、サイドバーが付いている「サイドバー」と、ブログ等の内容が表示される「コンテンツエリア」、そして著作権表示などがある「フッターエリア」です。

このように、全てのウェブページはロシアのマトリョーシカ人形のように、大小の箱(ボックス)が幾重にも入れ子になって構成されています。タイトルや本文、写真やバナー、SNSボタンなどの1つ1つがボックスなのです。
マトリョーシカ人形 - Wikipedia

少しHTMLをご存知の方は、ボックスの入れ子構造がそのままHTMLタグの階層構造になっていることが分かるでしょう。

ボックスを横に並べる方法

ボックスはほとんどの場合、HTMLタグの div を使って記述されます。

ちなみにdivとはdivision(分割)を略したものです。HTMLタグの種類が機械的なものに感じられて覚えにくい方は、タグの語源を理解すると思い出しやすいと思います。

さて、div は基本的に横幅(width)と縦幅(height)を持った箱(ボックス)で、HTMLに書いた順番に下へ下へと並んで表示されます。つまり、基本は縦並びだということです。これを横並びにしてやれば2カラムになりますね。

HTMLで書いたボックスを横並びにしたり縦並びにするのはスタイルシートCSS)で行います。スマホで表示したときに縦並びに変更するのもスタイルシートCSS)で行います。

ヒント:float、inline-block、clear、mediaクエリ

生徒さんのコメント

この方法をお教えさせていただいたあと、生徒さんからこのようなコメントをいただきました。

「すごいわかりやすかったです。ありがとうございました。
 長年の悩みが解決できそうです。」

スタイルシートの優先順位とかも教えてもらえたのですごい役に立ちました。
 本に書いてあってもわからないところですね。」

「今後活用できそうです。
 今後ともよろしくお願い申し上げます。」

こんな方におすすめのオンラインレッスンです

  1. ちょっとしたカスタマイズは自分でできるようになりたい
  2. Wordpressなどのブログ的な画面は使えるけれどそれ以上のことができない
  3. 自分のサイトは自分で作れるようになりたい

無料相談だけでも受けてみたい方へ

ホームページの制作やカスタマイズでお困りの方はお気軽にご相談ください。

oshierumanaberu.net

↑ページの中ほどにあるオレンジ色の「先生に聞いてみる」というボタンを押すと、メッセージが入力できますので、お気軽にご相談ください。

ご相談のメッセージをいただきましたら24時間以内にお返事を差し上げます。より詳しい状況をお聞かせいただける方には1時間ほどですがスカイプで無料相談を承りますので、ご遠慮なくお尋ねください。