【サンプルコードあり】 ナビゲーションバー(nav)をinline-blockを使って作った方法。

ナビゲーションバー（nav）の作成方法はいろいろあります。
今回はその一例

navをulのliで作成して、liをinline-blockにすると
横並びになるのでその方法で、作成。
横並びのレイアウトには、calcで均等配置してます。

今回作成したnavの図はこちら

ナビゲーション全体

各リストの表示方法

今回作成したコードはこちら

HTML

CSS

今回はh-list
display: inline-block;で横並び
width: calc(100%/6);
ここは、横幅全幅を6等分で配置。
h-boxを配置する為
position: relative;設定。

今回、文字が２段で配置したいので、
その２文字を、h-boxで囲むことで動かしやすい。
transform: translate(-50%, -50%);
で中央配置にしてる。

navの文字の配置や場所の指定は、文字を囲んでる
h-boxで指定する。

文字のカラーやサイズ。
上下間のスペースはh-topで指定。

position: absolute;を指定すると、その要素は高さが
認識されないので、親要素で高さの指定をする。

navをinline-blockとcalcを使って作成は以上です。

よかったら、参考にしてください。

CodePen での確認はこちら

最近思うのですが、独学もいいのですがわからない所や、
コーディング時のルールなど教えてもらえる環境も必要かなと
感じています。

そこでプログラミングスクールの記事も書いてみました。

おすすめのプログラミングスクール5選　HTML・CSSからJavaScript やPythonなどいろいろありますよね

プログラミングスクールの需要が、ここ最近は高まってる傾向にあります。 近年は、プログラミングを勉強して、ネット制作の仕事をされる方が 多くなり、独学で勉強されてる方や、塾などに通って勉強される方 様々です。 また、プログラミングスクールいろ...

inopro.jpn.org

2022.04.08

おすすめ教材

最後に、この記事見てるあなたは、独学中ですか？
私も最初は、独学でやろうとしました、プログラミング
を独学はちょっとしんどい。。。
私のだした結論は、お金出して学ぼうでした。
独学で時間かけるよりも、お金出して、早くマスター
して、早く収益を上げれるようにした方がいいと思いました。

高単価案件が最短二日で決まる！フリーランスエンジニア案件情報サイト【ポテパンフリーランス】

1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座 新品価格 ￥1,243から (2021/12/27 20:38時点)