3つのカラムの仕組みを知ろう！ ＋ぷちカスタマイズ日記＋

---

ブログを初めてしばらくしますと、サイドバーの幅を変更したくなりませんか？このサイドバーの幅の変更はカラムの仕組みがわからないで変更してしまいますと、サイドバーが表示されなくなってしまったりして、ブログの表示に支障がでてしまう場合があります。

このような説明をしますと難しいものだと思われがちですが、カラムの仕組みがわかっていますと、とってもカンタンにできちゃうんです。仕組みさえわかれば、カラムの幅が自由に変更できるようになりますので、今回はカラムの仕組みの説明をしちゃいますね。

カラムの仕組みは文章で説明するよりも、表にしてしまった方がわかりやすいので、それぞれのカラムを表にしてみました。

左2カラム　/* 2column 左サイドバー */

右2カラム　/* 2column 右サイドバー */

2カラムの、左2カラムと右2カラムは左右入れ替わっただけなので、基本的な考え方は同じで構いません。
カンタンに説明しますと、背景の中に「コンテナ」という大きな囲みがあって、その上下にコンテナと同じ幅の「ヘッダ」と「フッタ」が配置されています。そのヘッダとフッタの間に「メイン」という囲みがあり、その中に「サイドバー」と「コンテンツ」が左右に分かれて配置されています。

---

3カラム　/* 3 column multi */

3カラムの場合は、「ラッパー」という囲みが追加されますので少し複雑になりますが、右2カラムのコンテンツの部分をラッパーという囲みとして、それをさらに左サイドバーとコンテンツに左右2分割したものと考えますと、わかりやすいかもしれません。

---

いかがでしたでしょうか？今回はおおまかな仕組みの説明だけですが、次回は実際のスタイルシートの記述と照らし合わせていきたいと思います。ご興味のある方は、よろしくお付き合いくださいませ。(´・ω・`)ｂ

---

※ Htmlタグのご使用、カスタマイズにつきましては、利用者の自己責任にてお願いします。

---

この情報が、お役にたちましたら ≫ FC2 Blog Ranking ≪ 押していただけると励みになります