![見出し画像](https://assets.st-note.com/production/uploads/images/76377196/rectangle_large_type_2_c3f9b4c9ad27cc32954c6f13b5fb9ba3.png?width=1200)
【WEBサイトの上、固定ヘッダーナビ】STUDIO学習はじめてみた。#26日目
こんにちは、yukiです♡
26日目の今日はSTUDIOで、固定ヘッダーナビ(※Webサイトの上部分)の作り方についてサクッとまとめます(^^♪
今回はロゴ(※企業ブランド例、今回はハート)とグローバルナビゲーションを【テキスト】機能を使って制作していきます。
グローバルナビ(グローバル・ナビゲーション)とは、Webサイトの原則すべてのページに共通で表示された当該サイトの主要ページへのリンクのことです。
1ヘッダー部分の中身を作る
幅を100%に指定したボックスを作成し、ロゴをまずは左に配置します。
そして、グローバルナビゲーションのテキストのタグを「li」に変更します。
「LI」とは「list item」の略で、リストの項目を表示するために使用するタグです。
![](https://assets.st-note.com/img/1649852452327-HVlfDjA14Z.png?width=1200)
![](https://assets.st-note.com/img/1649852583220-u9AkP5d7fK.png?width=1200)
2グループ化をする
ヘッダー作成後、グローバルナビゲーションのメニュー名をグループ化し、「ul」タグに変更します。
![](https://assets.st-note.com/img/1649853784793-HNdNlwFIEE.png?width=1200)
3ヘッダー(※上のところ)をheader指定する
ヘッダー部分を「header」タグを指定しておき、ボックスを固定状態にします。
![](https://assets.st-note.com/img/1649853988208-T2JC37it4d.png?width=1200)
こうする事で、ライブプレビューで確認するとスクロースしてもヘッダー部分が固定の状態にする事が出来ます!
以上です♡
応援のイイネをいただけたら、とても嬉しいです♪