こんにちは朱夏です。
今回はulやliタグを使ってナビゲーションバーを作ってみようと思います。
本来は箇条書きの様なリスト表示をさせるためのタグですが、これでナビゲーションを作るのが今は主流の様です。
今回は、元のHTMLのコードのみの状態から順番にスタイルを充てて、段階的にナビゲーションバーにしていきたいと思います。
それではやっていきましょう。
HTMLコード
装飾（点）を消す
要素を横並びにする
リンクのスタイルを変更
あとがき
HTMLコード
最初に元となるHTMLのコードを貼っておきます。
See the Pen
WNvadap by 朱夏 (@syunatsu1)
on CodePen.
初期状態だとこんな感じで表示されます。
それでは見た目を整えていきます。
装飾（点）を消す
先ずはリストタグの装飾（点）を消します。
リストの装飾を消すには「list-style: none;」を使います。
See the Pen
BaNqJXp by 朱夏 (@syunatsu1)
on CodePen.
こんな感じで装飾が消えました。
次は配置を変更していきます。
要素を横並びにする
次は、要素の配置を横並びにします。
ここで見た目的にはそれっぽくなるかと思います。
See the Pen
vYOVdzx by 朱夏 (@syunatsu1)
on CodePen.
横並びには以前の記事で紹介した「flexbox」を使います。
あとは配置の調整や中央寄せをするために「margin」や「padding」などを使用しています。
リンクのスタイルを変更
リンクがデフォルトの青いままだとかっこ悪いので、色や下線を修正しておきます。
See the Pen
XWbxEgd by 朱夏 (@syunatsu1)
on CodePen.
こんな感じです。
「color」でテキストの色を変更して、「text-decoration」で下線を消しています。
更に、リンクにマウスカーソルを合わせた時の表示を変更させるために「:hover」も使用しています。
あとがき
というわけで、リストタグを使ってナビゲーションバーを作ってみました。
今作成中のポートフォリオにも使おうと思って、タイトル部分も含めた作り方をしてみました。
今回のまとめはこちら。
- リストの点を消すには「list-style: none;」
- 横並びには「flexbox」
- リンクの下線を消すには「text-decoration」
新しく学んだ事もアウトプットしつつ作成してみました。
今回はここまでです。
次回もよろしくお願いします。
