単純なhtml5とcss3で、サンプル企業サイトを作ってみたけど、やっぱりcssの値をどう設定するのが正解か分からない…。

<!DOCTYPE html> <!-- html5宣言 -->
<html lang="ja"> <!-- 日本語のhtml5文書 -->

<head> <!-- htmlのヘッダ宣言 -->
  <meta charset="UTF-8"> <!-- 文字化け防止 -->
  <!-- スマホなどレスポンシブデザイン用。デバイス幅で表示。等倍表示 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>初めてのHTML5</title> <!-- ブラウザに表示されるタイトル -->
  <link rel="stylesheet" href="styles.css"> <!-- 使うcssを指定。relはrelationship(関係性)の略 -->
</head>

<!-- htmlのbody(本体)宣言 -->
<body> 
   <!-- このページの見出し -->
  <header>
    <h1>このページのタイトル</h1> <!-- このページのタイトル -->
    <nav> <!-- ナビゲーションバー専用タグ。このサイトのリンク -->
      <ul> <!-- unorder list (順番号なしリスト)-->
        <!-- リンク先をid指定でsectionに移動する。縦長じゃないと意味ない？ -->
        <li><a href="#home">ホーム</a></li> 
        <li><a href="#services">サービス</a></li>
        <li><a href="#contact">お問い合わせ</a></li>
      </ul>
    </nav>
  </header>
  <!-- このページのメインの内容 -->
  <main>
    <section id="home">
      <h2>ホーム</h2>
      <p>ホームページの内容</p>
    </section>
    <section id="services">
      <h2>サービス</h2>
      <p>提供するサービスの内容</p>
    </section>
    <section id="contact">
      <h2>お問い合わせ</h2>
      <p>連絡先を記述</p>
    </section>    
  </main>
  <!-- このページのフッタ -->
  <footer>
    <p>@ 2024 オレオレ株式会社 All rights reserved.</p>
  </footer>
</body>
</html>

<!DOCTYPE html>

<title>初めてのHTML5</title>

</head>

<body>

<h1>このページのタイトル</h1>

<li><a href="#contact">お問い合わせ</a></li>

</ul>

</nav>

</header>

<main>

<p>ホームページの内容</p>

</section>

<p>提供するサービスの内容</p>

</section>

<h2>お問い合わせ</h2>

<p>連絡先を記述</p>

</section>

</main>

</footer>

</body>

</html>

/* 基本的なリセットとフォント設定: 全ページ共通のベーススタイル */
body {
  margin: 0; /* すべてのマージンを0に設定 */
  font-family: Arial, sans-serif; /* フォントファミリーをArial, sans-serifに設定 */
}

/* ヘッダーのスタイリング: ウェブページの上部に表示される領域 */
header {
  background-color: #333; /* ヘッダーの背景色をダークグレーに設定 */
  color: white; /* ヘッダー内のテキスト色を白に設定 */
  padding: 10px 20px; /* ヘッダー内のパディングを設定 */
  text-align: center; /* ヘッダーのテキストを中央揃えに設定 */
}

/* ナビゲーションバーのスタイリング: サイト内の主要なリンクを含むメニューバー */
nav ul {
  list-style: none; /* リストアイテムのスタイルをなしに設定し、マーカーを消去 */
  background-color: #444; /* ナビゲーションバーの背景色を少し明るいグレーに設定 */
  padding: 0; /* パディングを0に設定 */
  margin: 0; /* マージンを0に設定 */
  text-align: center; /* テキストを中央揃えに設定 */
}
nav ul li {
  display: inline; /* リストアイテムをインライン表示に設定し、横並びにする */
}
nav ul li a {
  color: white; /* リンクのテキスト色を白に設定 */
  padding: 10px 20px; /* リンクのパディングを設定 */
  display: inline-block; /* リンクをインラインブロック要素として表示 */
  text-decoration: none; /* リンクの下線を消去 */
}

/* セクションのスタイリング: ページの主要コンテンツを含むセクション */
section {
  padding: 20px; /* セクションのパディングを設定 */
  margin-top: 10px; /* セクションの上マージンを設定 */
}

/* フッターのスタイリング: ページの最下部に表示される領域 */
footer {
  background-color: #333; /* フッターの背景色をヘッダーと同じダークグレーに設定 */
  color: white; /* フッター内のテキスト色を白に設定 */
  text-align: center; /* フッターのテキストを中央揃えに設定 */
  padding: 10px 20px; /* フッターのパディングを設定 */
  position: fixed; /* フッターをページの最下部に固定 */
  bottom: 0; /* フッターをページの底辺に配置 */
  width: 100%; /* フッターの幅をページ全体に広げる */
}

/* 基本的なリセットとフォント設定: 全ページ共通のベーススタイル */

body {

margin: 0; /* すべてのマージンを0に設定 */

font-family: Arial, sans-serif; /* フォントファミリーをArial, sans-serifに設定 */

}

/* ヘッダーのスタイリング: ウェブページの上部に表示される領域 */

header {

background-color: #333; /* ヘッダーの背景色をダークグレーに設定 */

color: white; /* ヘッダー内のテキスト色を白に設定 */

padding: 10px 20px; /* ヘッダー内のパディングを設定 */

text-align: center; /* ヘッダーのテキストを中央揃えに設定 */

}

/* ナビゲーションバーのスタイリング: サイト内の主要なリンクを含むメニューバー */

nav ul {

list-style: none; /* リストアイテムのスタイルをなしに設定し、マーカーを消去 */

background-color: #444; /* ナビゲーションバーの背景色を少し明るいグレーに設定 */

padding: 0; /* パディングを0に設定 */

margin: 0; /* マージンを0に設定 */

text-align: center; /* テキストを中央揃えに設定 */

}

nav ul li {

display: inline; /* リストアイテムをインライン表示に設定し、横並びにする */

}

nav ul li a {

color: white; /* リンクのテキスト色を白に設定 */

padding: 10px 20px; /* リンクのパディングを設定 */

display: inline-block; /* リンクをインラインブロック要素として表示 */

text-decoration: none; /* リンクの下線を消去 */

}

/* セクションのスタイリング: ページの主要コンテンツを含むセクション */

section {

padding: 20px; /* セクションのパディングを設定 */

margin-top: 10px; /* セクションの上マージンを設定 */

}

/* フッターのスタイリング: ページの最下部に表示される領域 */

footer {

background-color: #333; /* フッターの背景色をヘッダーと同じダークグレーに設定 */

color: white; /* フッター内のテキスト色を白に設定 */

text-align: center; /* フッターのテキストを中央揃えに設定 */

padding: 10px 20px; /* フッターのパディングを設定 */

position: fixed; /* フッターをページの最下部に固定 */

bottom: 0; /* フッターをページの底辺に配置 */

width: 100%; /* フッターの幅をページ全体に広げる */

}

関連記事