More than 3 years have passed since last update.

ヘッダーメニューの作り方【基本的なテンプレの型】

Posted at 2020-09-30

無料学習サイトでヒントを元にhtmlとcssを学習したけど、いざゼロからheaderを作成していくとなると(・・?)←こんな状態（笑）

そうならないために初めから型を用意してみました

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>サイトのタイトル</title>
    <link rel="stylesheet" href="stylesheet.css">
  </head>
  <body>
    <header>
    </header>
  </body>
</html>

htmlの型はこんな感じ

では次にcssを見てみましょう

css

/* CSSのリセット（消さないでください） */
html, body,
ul, ol, li,
h1, h2, h3, h4, h5, h6, p,
form, input, div {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif;
}

li {
  list-style: none;
}

以上になります

ここからどんどんカスタマイズしていき理想のサイトを制作していきましょう。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up