HTML/CSS フロントサイド

ナビゲーションメニューの作り方

どうも、シローです。

Webサイトで必ずといってあるナビゲーションメニューの作り方を今回はまとめようと思います。

ヘッダーナビゲーションの作り方

ヘッダーナビゲーションはサイトの上の方に横一列で配置されているナビゲーションメニューのことです。

実際のコードはこちらです。

 

See the Pen
header navigation menu
by shirosmith1793 (@phantom1793)
on CodePen.

ポイントは<li>要素をfloatで横一列に並べて、親要素の<ul>にfloat解除用のcssを当て込むことです。

cssの.clearfixにそこら辺の処理が書いてあります。

 

サイドバーナビゲーションの作り方

サイドバーナビゲーションはサイドバーに設置されているナビゲーションメニューのことです。

 

実際のコードはこちら

 

See the Pen
sidebar-navigation-menu
by shirosmith1793 (@phantom1793)
on CodePen.

block要素を横に並べたい時はfloatとclearfixの組み合わせが大事です。

今回は以上となります。

  • この記事を書いた人

シロー

Webシステムの開発のお仕事をさせて頂いております。 フリーランスの日常、Web開発に関する情報を発信しています。 趣味はゲーム、映画鑑賞、個人サービスを作ることです。

-HTML/CSS, フロントサイド
-,

© 2021 Shiro's secret base