お品書き
書き直し中…
とりあえず、中へどうぞ
↓↓↓
スポンサーリンク

Flexboxに挑戦 5 (2カラム/3カラム)

WEBデザイン

2カラム・3カラムのレイアウトを作ってみる。(※初めてやったので参考程度にお願いします。)


2カラム

TITLE

本文

ひとまず何はともあれ、そうした幸福・仕合せのための偽りは、尊敬を自己についにもたらすために言ってくれるなら、ほとんど、とにかく22年も生きるなど、上流にこそ未練がなければ、私にそれらが打ち壊すであろう事を見せることはないだろう。それで場合によっては、全く受売であっても、相当にさきほどのように遠慮がなければ、いろいろ独立した風聞吹聴は、使ってはみてもそのものが実は時代遅れであり、人に聞かせても意味のないことなのかもしれない。

HTML
<div class="container_test0"> <div class="header">TITLE</div> <div class="main_test"> <div class="column column1"> <a href=""><li>カテゴリ</li></a> <a href=""><li>カテゴリ</li></a> <a href=""><li>カテゴリ</li></a> <a href=""><li>カテゴリ</li></a> <a href=""><li>カテゴリ</li></a> <a href=""><li>カテゴリ</li></a> </div> <div class="column column2"> <h5>本文</h5> <p style="margin:1rem 0 1rem;">ひとまず何はともあれ、そうした幸福・仕合せのための偽りは、尊敬を自己についにもたらすために言ってくれるなら、ほとんど、とにかく22年も生きるなど、上流にこそ未練がなければ、私にそれらが打ち壊すであろう事を見せることはないだろう。それで場合によっては、全く受売であっても、相当にさきほどのように遠慮がなければ、いろいろ独立した風聞吹聴は、使ってはみてもそのものが実は時代遅れであり、人に聞かせても意味のないことなのかもしれない。</p> </div> </div> <div class="footer_test">FOOTER INFORMATION</div> </div>
CSS
/* ↓各部サイズ↓ */ .container_test0{width:600px;} /*全体の幅*/ .column1{flex:0 0 200px;} /*左サイドバーの幅*/ .column2{flex:1 1 auto;} /*中央カラムの幅*/ /* ↑各部サイズ↑ */ /* ↓ヘッダ↓ */ .container_test0 .header{ background:darkblue; border:none; text-align:center; font-size:xx-large; line-height:2; color:white; } /* ↑ヘッダ↑ */ /* ↓ 中段全体(Flexbox) ↓ */ .container_test0 .main_test{display:flex;border:none;} /* ↑ 中段全体(Flexbox) ↑ */ /* ↓左サイドメニュー↓ */ .container_test0 .main_test .column1{ background:lightblue; border:none; margin:0; padding:3px; text-align:center; } .container_test0 .main_test .column1 a{ text-decoration:none; } .container_test0 .main_test .column1 li{ list-style-type:none; border:outset 3px lightblue; background:lightblue; padding:5px 10px; margin:0; } /* ↑左サイドメニュー↑ */ /* ↓ 中央カラム ↓ */ .container_test0 .main_test .column2{ background:yellow; border:none; padding:1em; } /* ↑ 中央カラム ↑ */ /* ↓ フッター ↓ */ .container_test0 .footer_test{ background:cadetblue; border:none; text-align:center; line-height:2; color:white; } /* ↑ フッター ↑ */

3カラム

TITLE

本文

ひとまず何はともあれ、そうした幸福・仕合せのための偽りは、尊敬を自己についにもたらすために言ってくれるなら、ほとんど、とにかく22年も生きるなど、上流にこそ未練がなければ、私にそれらが打ち壊すであろう事を見せることはないだろう。それで場合によっては、全く受売であっても、相当にさきほどのように遠慮がなければ、いろいろ独立した風聞吹聴は、使ってはみてもそのものが実は時代遅れであり、人に聞かせても意味のないことなのかもしれない。

プロフィール

そこ国家ではしかもそこの引込が秋刀魚なしのたはいうまいでか。

おすすめ記事

  • 記事1
  • 記事2
  • 記事3
  • HTML
    <div class="container_test1"> <div class="header">TITLE</div> <div class="main"> <div class="column column1"> <a href=""><li>カテゴリ</li></a> <a href=""><li>カテゴリ</li></a> <a href=""><li>カテゴリ</li></a> <a href=""><li>カテゴリ</li></a> <a href=""><li>カテゴリ</li></a> <a href=""><li>カテゴリ</li></a> </div> <div class="column column2"> <h5>本文</h5> <p style="margin:1rem 0 1rem;">ひとまず何はともあれ(以下略</p> </div> <div class="column column3"> <div class="wjt wjt1"> <h5>プロフィール</h5> <p>そこ国家ではしかも~(以下略</p> </div> <div class="wjt wjt2"> <h5>リンク</h5> <a href=""><li>リンク</li></a> <a href=""><li>リンク</li></a> <a href=""><li>リンク</li></a> <a href=""><li>リンク</li></a> </div> <div class="wjt wjt3"> <h5>おすすめ記事</h5> <a href=""><li>記事1</li></a> <a href=""><li>記事2</li></a> <a href=""><li>記事3</li></a> </div> </div> </div> <div class="footer_test">FOOTER INFORMATION</div> </div>
    CSS
    /* ↓各部サイズ↓ */ .container_test1{width:600px;} /*全体の幅*/ .column1{flex:0 0 125px;} /*左サイドバーの幅*/ .column2{flex:1 1 auto;} /*中央カラムの幅*/ .column3{flex:0 0 125px;} /*右サイドバーの幅*/ /* ↑各部サイズ↑ */ /* ↓ヘッダ↓ */ .container_test1 .header{ background:darkblue; border:none; text-align:center; font-size:xx-large; line-height:2; color:white; } /* ↑ヘッダ↑ */ /* ↓ 中段全体(Flexbox) ↓ */ .container_test1 .main{display:flex;border:none;} /* ↑ 中段全体(Flexbox) ↑ */ /* ↓左サイドメニュー↓ */ .container_test1 .main .column1{ background:lightblue; border:none; margin:0; padding:3px; text-align:center; } .container_test1 .main .column1 a{ text-decoration:none; } .container_test1 .main .column1 li{ list-style-type:none; border:outset 3px lightblue; background:lightblue; padding:5px 10px; margin:0; } /* ↑左サイドメニュー↑ */ /* ↓ 中央カラム ↓ */ .container_test1 .main .column2{ background:yellow; border:none; padding:1em; } /* ↑ 中央カラム ↑ */ /* ↓ 右カラム ↓ */ .container_test1 .main .column3{ background:lightpink; border:none; text-align:center; } .container_test1 .main .column3 .wjt{ margin:0; padding:0; } #main .container_test1 .main .column3 .wjt h5{ display:block; margin:0; padding:3px; background:hotpink; color:white; font-style:normal; width:100%; border:none; } .container_test1 .main .column3 .wjt p{ margin:0; padding:5px; text-align:left; border:none; } .container_test1 .main .column3 .wjt li{ list-style-type:none; } /* ↑ 右カラム ↑ */ /* ↓ フッター ↓ */ .container_test1 .footer_test{ background:cadetblue; border:none; text-align:center; line-height:2; color:white; } /* ↑ フッター ↑ */

    やっぱり、floatを使わないでレイアウトがシンプルにできるので、Frexboxは楽ですね(^^)

    コメント