Loading...

Single Post

HOME > post > Web > flexboxでブログ出力3カラム作成

flexboxでブログ出力3カラム作成

| Web
Flexboxイメージ画像

前にCSS3のFlexboxを使ってみましたという記事を掲載させて頂きましたが、今回はこちらのページを参考にさせて頂き発火ポイントにスクロールが達するとjQueryが作動しカラムが順にフェードインしてくるエフェクトを追加しました。デモページも用意していますので、動作チェック確認いただけます。

HTMLは下記

[html]

<section class="wrapper" id="scroll">

<div class="col-3 scroll_in">
<a href="#"><img src="images/top7.jpg" alt=""></a>
<section class="title border_line">
<h2 class="title_text">このタイトルはダミーです。</h2>
</section>
<div class="post-prev-info font-alt">
<time datetime="2015-01-15">2015年1月15日</time> | <a href="">Category</a>
</div>
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
<div class="post-prev-more">
<a href="" class="btn btn-mod btn-gray btn-round"><i class="fa fa-angle-double-right" aria-hidden="true"></i> Read More</a>
</div>
</div>
<div class="col-3 scroll_in">
<a href="#"><img src="images/top8.jpg" alt=""></a>
<section class="title border_line">
<h2 class="title_text">このタイトルはダミーです。</h2>
</section>
<div class="post-prev-info font-alt">
<time datetime="2015-01-15">2015年1月15日</time> | <a href="">Category</a>
</div>
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
<div class="post-prev-more">
<a href="" class="btn btn-mod btn-gray btn-round"><i class="fa fa-angle-double-right" aria-hidden="true"></i> Read More</a>
</div>
</div>
<div class="col-3 scroll_in">

<a href="#"><img src="images/top9.jpg" alt=""></a>
<section class="title border_line">
<h2 class="title_text">このタイトルはダミーです。タイトルが2行になっても大丈夫!!</h2>
</section>
<div class="post-prev-info font-alt">
<time datetime="2015-01-15">2015年1月15日</time> | <a href="">Category</a>
</div>
<p>この文章はダミーです。文字の大きさ、量、字間、行間等を</p>
<div class="post-prev-more">
<a href="" class="btn btn-mod btn-gray btn-round"><i class="fa fa-angle-double-right" aria-hidden="true"></i> Read More</a>
</div>
</div>

</section>

[/html]

CSSは下記

[css]

.wrapper {
display: flex;
-webkit-flex-wrap: wrap; /* Safari */
flex-wrap: wrap;
-webkit-justify-content:space-between;/*— safari —*/
justify-content: space-between;
padding: 0 0;
width: 1200px;
margin: 0 auto;

}
.wrapper div.col-3 {
width: calc(33.3% – 30px);

}

@media screen and (max-width:768px) {

.wrapper div.col-3 {
width: calc(33.3% – 10px);
margin: 5px;
}
.wrapper {
width: 100%;
margin: 0 auto;
padding: 10px;
}
}
@media screen and (max-width:480px) {

.wrapper div.col-3 {
width: 100%;
margin: 0 0 20px;
}
.wrapper div.col-3.infor_link{
width: calc(33.3% – 10px);
margin: 5px;
}
.wrapper {
width: 100%;
margin: 0 auto;
padding: 10px;
}
}

[/css]

まとめ

Flexboxは使いやすいので、これからカラムを組むときは重宝しそうです。css内calcの数字を25%などに変更すると4カラムができあがるという手軽さがいいですね。

関連記事

Contact Page