CSSのFlexboxを使ってシェアボタン一覧を作成してみた

2024/04/19

この記事では、Flexboxを使ってシェアボタン一覧のデザインを作成する方法について解説します。

このサイトのシェアボタンも自作したものになりますが、Flexboxをうまく使用することによって、以下のような簡単なシェアボタン一覧をすぐに作成することができます。

＼シェアしてね／

シェアボタン1

シェアボタン2

シェアボタン3

このシェアボタン一覧を作成する際に重要となるFlexboxの振る舞いを以下で少し紹介します。

Flexboxとは何か

Flexboxとは、Webサイトに表示される平面的なコンテンツの配置を簡単に操作できるようにCSSで記述するモジュールです。

例えば、横向きに並べることができないpタグ、divタグなどのブロック要素を横向きに均等に配置したり、幅を揃えることができます。

以下にその例を示します。

以下にFlexboxを使用せずにそのままpタグでテキスト並べただけの表示例を示します。

See the Pen test1 by Lio (@lionooil) on CodePen.

このようにブロック要素であるpタグはデフォルトで親要素の横幅いっぱいに範囲が指定されるので、pタグを続けて記述しても、横向きに並んでくれません。

しかし、Flexboxを使用すると、画面上での振る舞いが一気に変わります。

先ほど示した3つのpタグの親要素を作成し、その親要素にCSSでFlexboxを指定すると、以下のように要素の並び方が変化します。

See the Pen Untitled by Lio (@lionooil) on CodePen.

flexboxを指定すると、その子要素はフレックスアイテムとして扱われ、デフォルトの設定で、左からに議へ横並びに表示されます。

このフレックスアイテムとして扱われているpタグなどのブロック要素も、そのコンテンツ幅にあわせて自動で調節されるため、非常にすっきりと要素が並べられます。

上で示したFlexboxは、特に何も値を設定していないため、全てデフォルトの設定値ですが、CSSでこれらの設定値を変更すると、要素間のスペースを等間隔にしたり、垂直方向に並べたりといろいろな配置を実装することができます。

上で示したFlexboxの機能を使うことで、冒頭で示したシェアボタン一覧を簡単に作成する事ができます。

Flexboxの子要素はデフォルトでは、左側に寄せられてしまうため、これを中央に寄せたいと思います。

とても簡単で、「justify-content」プロパティに「center」を指定するだけです。

See the Pen test3 by Lio (@lionooil) on CodePen.

これで全てのフレックスアイテムが一度に中央に寄せられました。

ちなみに、「justify-content」プロパティに指定できる値は「center」だけでなく、よく使われるものとしては、以下のような値があげられます。

justify-contentプロパティに指定できる値の例
flex-start	左詰めでフレックスアイテムを配置。デフォルトの値
center	中央に寄せてフレックスアイテムを配置。今回使用したもの。
flex-end	右詰めでフレックスアイテムを配置。

見た目は、シェアボタン一覧の形に近づいてきましたが、フレックスアイテム同士が隣接しており、テキストと要素の境界の間にもスペースがなく、窮屈に見えるので、もう少しCSSで見た目を整えてみます。

See the Pen test3-1 by Lio (@lionooil) on CodePen.

要素間の距離感を調節するための「margin」「padding」「border」の基本の3種類を使ってフレックスアイテムをボタンらしい見た目に作りました。

「margin」「padding」「border」それぞれの役割を、Google Chromeのディベロパーツールを用いて可視化してみると、以下の表のように分かりやすくなります。