2カラム・3カラムのレイアウトを作ってみる。(※初めてやったので参考程度にお願いします。)
2カラム
TITLE
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年も生きるなど、上流にこそ未練がなければ、私にそれらが打ち壊すであろう事を見せることはないだろう。それで場合によっては、全く受売であっても、相当にさきほどのように遠慮がなければ、いろいろ独立した風聞吹聴は、使ってはみてもそのものが実は時代遅れであり、人に聞かせても意味のないことなのかもしれない。
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;
}
/* ↑ フッター ↑ */
/* ↓各部サイズ↓ */
.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年も生きるなど、上流にこそ未練がなければ、私にそれらが打ち壊すであろう事を見せることはないだろう。それで場合によっては、全く受売であっても、相当にさきほどのように遠慮がなければ、いろいろ独立した風聞吹聴は、使ってはみてもそのものが実は時代遅れであり、人に聞かせても意味のないことなのかもしれない。
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;
}
/* ↑ フッター ↑ */
/* ↓各部サイズ↓ */
.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は楽ですね(^^)
コメント