flexboxを使うと、簡単にプロフィール欄がつくれる!

2017/08/31

このブログはWordPressを使っています。

そして今はチャレンジとして、テーマを自分で作っている最中です。

テーマ名は「Too Simple」。
その名の通り、「シンプルすぎる」をコンセプトに、見やすい設計を目指しています。

トップページと、記事のページはある程度作り終え、さきほどまでフッターの作成をしていました。

フッターにプロフィールを追加したのですが、flexboxでちょちょいと作ることができたので、みなさんに共有したいと思います。

フッターに追加したプロフィールはこちらのことですね。
実際に見るには、このページの一番下までスクロールしてください。
(PCでの表示は問題なく、スマホは現在調整中です)

ポイントはflexboxの使用と、vertical-alignの設定

プロフィール欄は下記のように、HTMLとCSSで簡単につくることができます。

See the Pen Profile Box by Shogo Inamoto (@shogo0525) on CodePen.

ポイントは、画像とテキストをそれぞれ別のブロックにし、この2つのブロックを囲うブロック(ここでいうとdivのprofileクラス)に「display: flexbox」を適用することです。
(めっちゃ簡単・・・・・!)

そして、中の要素を縦方向中央に配置するために、さらに「align-items: center」を適用させてあげればOKです。

また、imgはインライン要素なので、「vertical-align: bottom」を適用させ、余計な余白が生まれないように設定してあげれば、きれいに整えることができます。

他に要素を追加しようとすると、少し複雑になるかもしれませんが、これくらいなら本当に簡単につくれてしまいますね。

以上flexboxでつくるプロフィール欄の紹介でした!