【簡単！】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で文字をキラッと光光るアニメーションの作り方」という記事を読んでください。

下記おすすめ記事