メニュー
【簡単!】cssで横並びにする方法を紹介します!
  • 中野貴登:Webクリエイター

【簡単!】cssで横並びにする方法を紹介します!

こんにちは、イデアックスの「中野」です。

グローバルナビを作成していると、要素を横並びにしたいと思いますよね。

グローバルナビでなくても、web制作を行っていると横並びにしたい要素があると思います。

どのようにすれば要素を横並びにすることができるのか、みなさんに紹介したいと思います。

横並びはflexを使用する

横並びにする場合、親要素のクラスに下記のcssコードを記入します。

display:flex;

cssファイルに上記のコードを記入することで、要素が横並びになります。


グローバルメニューを横並びにする際の流れを下記にて紹介します。

まず、<ul>、<li>タグを使用してグローバルメニューに必要な要素を書き出します。

See the Pen 0506_02 by takato (@ttakkatto) on CodePen.

<ul>、<li>タグで作成された要素は、黒点がついてしまいます。この黒点は「list-style:none;」で削除することが出来ます。


cssに「display:flex;」を追加して、要素を横並びにします。

See the Pen 0506_03 by takato (@ttakkatto) on CodePen.


このままでは各要素が窮屈なので、素白を作成します。

各メニューのクラスに、「margin-right:10px;」を追加します。すると下記のように余白が作成されたグローバルメニューが出来ます。

See the Pen 0506_01 by takato (@ttakkatto) on CodePen.


このように横並びにして各要素に余白を作成すれば、グローバルメニューの完成です。

最後に

以上が要素を横並びにする方法の紹介でした。

特にグローバルメニューは横並びにするのが主流です。横並びのやり方は是非覚えておいてください。

cssでできることは他にもあります。cssで文字を光らせる方法については、「cssで文字をキラッと光光るアニメーションの作り方」という記事を読んでください。


下記おすすめ記事