AREA

創作とおえかきと手芸、たまにプログラミング。

【HTML・CSS】ヘッダーを作る

現在、創作物語のアニメ風サイトを作っています。
ひとまずページのヘッダー(グローバルナビ)ができました。

こんな感じです
f:id:hkarea:20170715024944p:plain

ここまでで苦労した点と分かった事を自分用メモを兼ねて残しておきます。
最後にソースコードも載せておきました。

メイン

  • テキスト部分だけでなく、ボタン全体をクリックできるようにする

display:block

  • リンクの下線を非表示にする

text-decoration: none

  • 周りの余白をなくす

margin: 0
padding: 0


ドロップダウンリスト関連

  • 表示・非表示

visibility: hiddenは表示領域を確保して隠す
display: noneは表示領域も無くす

  • 子要素を縦並びにする

display: grid
(なかなか子要素のみが縦並びにならず虱潰しに試しました。
もっといい方法もあるかもしれません…)

HTMLはこちら

CSSはこちら

今回とてもお世話になったサイトです。
theorthodoxworks.com