KYO

Bootstrapとフレックスボックスで記事一覧部分のデザインを作る

2018年7月28日 CSS , , , ,

ワードプレスのテーマを自作している時に、トップページに新着記事一覧を表示することが多いのですが、その記事一覧部分のデザインは非常に重要ですね。どんな記事なのか知る前に、視覚的に見やすいか見やすくないかという情報が入ってきてしまうので考えて作るべきです。

記事一覧部分を作る

まずはBootstrapを使って作るパターンと、Bootstrapを使わずに同じように作るパターンを考えてみます。

作ったデモページ

作ったのはこんな感じのものです

アイキャッチ画像を表示させて、右上にカテゴリーのリンクを付けます。
記事のタイトルと抜粋文の下に、記事ページへのリンクボタンと、その横に投稿日時を表示しています。

Boostrap4で作る

Bootstrap4にはカードという機能があるのでこれを使いました。
Cards(公式サイト)

Bootstrapのルールに沿って作ればこんな感じです。
ボタンと日付の部分を横並びにしたいので
<div class=”d-flex flex-wrap”>
で囲っています。

これもBootstrap4の機能で、フレキシブルボックスを作ってくれます。
flex-wrapは画面幅によって折り返しをしてくれます。

画像の右上にカテゴリータグを付けたいので
画像はposition: relative;
カテゴリー部分はposition: absolute;
にして位置を調整します。

フレックスボックスで記事一覧部分を作る

次にBootstrapを使わずに同じようなデザインで作ります

フレキシブルボックスの小要素の幅を45%くらいにして、横並びにしています。
画面幅が小さい時はflex-direction:column;にします
さらに子要素の幅を95%にしmargin:10px auto;で中央寄せします

htmlはこんな感じにしました。
posts-areaの中にpostを並べていく感じです。
カテゴリータグの設置方法などは変わりません。

post-bottom-areaもjustify-content: space-between;を設定しておくことで、左右に並べます。
これはposts-areaにも適用されています。2つ並んだ時の感覚を調整するためです。

ボタン部分は擬似的なボタンで再現しました

だいたい同じようなデザインになっています。

 

応用すればもっとオシャレなデザインとかが簡単に作れると思います!


関連記事

ERROR: Could not find a valid gem ‘sass’でsassがインストールできない

2018年8月2日

Mac環境で sudo gem install sass ERROR: Could not find a valid gem 'sass' (>= 0), here is why: みたいなエラー起きた とりあえずググる Error: SASS installation for windows 英語でよくわからんが gem sour...

パーツを組み合わせてレスポンシブなサイトを作った

2018年7月28日

過去の3つの記事で、記事一覧部分のデザイン、ヘッダーメニュー部分のデザイン、なんかスライダー部分のデザインを作りました。 これらの3つの記事の応用で一つのレスポンシブなサイトを作ってみました Bootstrapとフレックスボックスで記事一覧部分のデザインを作る 記事やコンテンツが流れていくスライダーのアレを作ってみた オーバーレイをかけた...

cssだけでレスポンシブなナビゲーションメニューを作る

2018年6月27日

ソースコード   ヘッダーのメニューが横一列に並んでいて、画面幅が狭くなるとアイコンが出てきて、クリックするとメニューが表示されるという、スマホサイトではあるあるの仕組み。 だいたいが、jQueryのトグルクラスを使って実現しているのですが、今回はcssだけで作ってみました。 まだまだ改良の余地があるのですが、一応機能的には十分...

高さの違う画像を揃えてレスポンシブに横並び表示する

2018年8月20日

今回は高さの違う画像を横並びで表示した時に高さを揃えて表示させます。 さらにレスポンシブに表示させます。 高さを具体的な固定値で指定せずに%で指定することで、凝り固まったデザインでないレスポンシブなデザインになります。 イメージとしてはこんな感じです。画像の元のサイズはそれぞれ高さも幅も違いますが、きっちり揃えて表示できています。 [ca...

cssデザインメモ。自分の勉強用

2018年8月27日

cssでちょっとしたデザインをメモしていきます。背景画像系はまだまだ面白く操作できそうだ。 ボックスの左上と右下にアイコン画像を設置して、引用文などに使えるデザイン .box{ padding:30px 60px; margin:100px 100px; color:#333; text-align: center; display: i...