Zenn
Open4

HTMLとCSSの復習

かいかい

HTMLの基本的なひな型を以下に示します

html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ページタイトル</title>
    <link rel="stylesheet" href="style.css"> <!-- スタイルシートのリンク -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>

    <header>
        <h1>サイトのタイトル</h1>
        <!-- ナビゲーションやロゴなどを追加 -->
    </header>

    <main>
        <section>
            <h2>セクションタイトル</h2>
            <p>ここにコンテンツを記載します。</p>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 会社名</p>
    </footer>

    <script src="script.js"></script> <!-- JavaScriptファイルのリンク -->
</body>
</html>

各要素の説明
<!DOCTYPE html>：HTML5の文書であることを宣言するための宣言です。
<html lang="ja">：HTML文書の言語を日本語（ja）に指定しています。
<head>：ページのメタ情報を格納する場所です。
<meta charset="UTF-8">：文字コードをUTF-8に指定し、文字化けを防ぎます。
<meta name="viewport" content="width=device-width, initial-scale=1.0">：レスポンシブデザイン対応のために、ページの幅をデバイスの幅に合わせます。
<title>：ブラウザのタブに表示されるページのタイトルです。
<link rel="stylesheet" href="style.css">：外部スタイルシートをリンクします。
<body>：ページのメインコンテンツを格納する場所です。

css
/* ベーススタイル */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

すべての要素の余白や内側の余白をリセットし、
box-sizing: border-box;でボックスサイズの計算を標準化します。

かいかい

画僧の表示のさせ方は？

html
<img src="画像のパス" alt="画像の説明" width="幅" height="高さ">

各属性の説明
src:
画像ファイルのパスを指定します。
例えば、画像ファイルが同じフォルダ内にある場合は、ファイル名（例: image.jpg）を記述します。

alt:
画像が表示されないときに表示されるテキストを設定します。
また、スクリーンリーダーでも読み上げられるため、アクセシビリティ向上にも役立ちます。

widthとheight:
画像の幅と高さを指定します。ピクセル単位で設定しますが、
%を使って割合で指定することもできます。

画像のパスは

このようなディレクトリ構成だと

html
<img src="img/sketch.jpg" alt="1" height="250px" width="300px" class = "portfolio-img1">

src="img/sketch.jpg" これになる

かいかい

ヘッダーの基本的な作り方

html
    <header>
      <div class="hamburger">
        <div class="logo">LOGO</div>
        <p class="btn-gNav">
            <span></span>
            <span></span>
            <span></span>
        </p>
        <nav class="gNav">
            <ul class="gNav-menu">
                <li><a href="#">要素1</a></li>
                <li><a href="#">要素2</a></li>
                <li><a href="#">要素3</a></li>
                <li><a href="#">要素4</a></li>
                <li><a href="#">要素5</a></li>
            </ul>
        </nav>
    </div>
    </header>
ハンバーガーメニューにさせるCSS
css
@charset "utf-8"; /* CSSファイルの文字エンコーディングをUTF-8に設定 */

header{
  color: #525252;
  background-color: black;
}

/* リストスタイルをリセット */
ol,
ul {
    list-style: none; /* リストのデフォルトのマーカーを無効にする */
    list-style-type: none; /* リストのタイプを指定しない（重複しているが、一応残す） */
}

/* リンクのスタイル */
a {
    text-decoration: none; /* 下線を削除 */
    color: #ffffff; /* リンクの文字色を白に設定 */
    font-size: 20px; /* フォントサイズを20pxに設定 */
    letter-spacing: 0.1em; /* 文字間隔を0.1emに設定 */
}

/* ハンバーガーメニューのスタイル */
.hamburger {
    margin: 20px auto 0; /* 上部に20pxのマージンを、左右は自動で中央揃え */
    width: 100%; /* 幅を100%に設定 */
    max-width: 900px; /* 最大幅を900pxに設定 */
    display: flex; /* フレックスボックスでレイアウト */
    justify-content: space-between; /* 要素を左右に配置 */
}

/* ロゴのスタイル */
.logo {
    font-size: 40px; /* フォントサイズを40pxに設定 */
    font-weight: 700; /* フォントウェイトを700（太字）に設定 */
}

/* ナビゲーションボタンのスタイル */
.hamburger .btn-gNav {
    position: fixed; /* 固定位置に設定 */
    top: 20px; /* 上から20pxの位置 */
    right: 20px; /* 右から20pxの位置 */
    width: 30px; /* 幅を30pxに設定 */
    height: 24px; /* 高さを24pxに設定 */
    z-index: 12; /* スタッキング順序を12に設定 */
    box-sizing: border-box; /* 幅と高さにパディングとボーダーを含める */
    cursor: pointer; /* カーソルをポインタに変更 */
    -webkit-transition: all 400ms; /* Webkitブラウザ用のトランジション設定 */
    transition: all 400ms; /* トランジションを400msで設定 */
}

/* ナビゲーションボタン内のスパンのスタイル */
.hamburger .btn-gNav span {
    position: absolute; /* 絶対位置で配置 */
    width: 100%; /* 幅を100%に設定 */
    height: 4px; /* 高さを4pxに設定 */
    background: #ffffff; /* 背景色を白に設定 */
    border-radius: 10px; /* ボーダーを丸くする */
    -webkit-transition: all 400ms; /* Webkitブラウザ用のトランジション設定 */
    transition: all 400ms; /* トランジションを400msで設定 */
}

/* ナビゲーションボタンの最初のスパンの位置 */
.hamburger .btn-gNav span:nth-child(1) {
    top: 0; /* 上からの位置を0に設定 */
}

/* ナビゲーションボタンの2番目のスパンの位置 */
.hamburger .btn-gNav span:nth-child(2) {
    top: 10px; /* 上から10pxの位置 */
}

/* ナビゲーションボタンの3番目のスパンの位置 */
.hamburger .btn-gNav span:nth-child(3) {
    top: 20px; /* 上から20pxの位置 */
}

/* ハンバーガーメニューが開いているときのスタイル */
.hamburger .btn-gNav.open span:nth-child(1) {
    background: #ffffff; /* 背景色を白に設定 */
    top: 6px; /* 上から6pxの位置に移動 */
    -webkit-transform: rotate(-45deg); /* 45度反時計回りに回転 */
    -moz-transform: rotate(-45deg); /* Mozillaブラウザ用 */
    transform: rotate(-45deg); /* 回転を適用 */
}

/* ハンバーガーメニューが開いているときの2番目と3番目のスパンのスタイル */
.hamburger .btn-gNav.open span:nth-child(2),
.hamburger .btn-gNav.open span:nth-child(3) {
    top: 6px; /* 上から6pxの位置に移動 */
    background: #ffffff; /* 背景色を白に設定 */
    -webkit-transform: rotate(45deg); /* 45度時計回りに回転 */
    -moz-transform: rotate(45deg); /* Mozillaブラウザ用 */
    transform: rotate(45deg); /* 回転を適用 */
}

/* デフォルトではナビゲーションボタンは表示しない */
.btn-gNav {
    display: none; /* 非表示 */
}

/* ナビゲーションメニューのスタイル */
.gNav .gNav-menu {
    display: flex; /* フレックスボックスでレイアウト */
    justify-content: space-between; /* 要素を左右に配置 */
}

/* ナビゲーションメニューのリストアイテムのスタイル */
.gNav .gNav-menu li {
    margin: 0 auto; /* マージンを自動で中央揃え */
    padding: 0 5px; /* 左右に5pxのパディングを設定 */
}

/* 画面幅が600px以下の場合のスタイル */
@media screen and (max-width: 600px) {
    .btn-gNav {
        display: block; /* ナビゲーションボタンを表示 */
    }

    .gNav {
        position: fixed; /* 固定位置に設定 */
        top: 0; /* 上から0の位置 */
        right: -100%; /* 画面外から開始 */
        width: 100%; /* 幅を100%に設定 */
        height: 100%; /* 高さを100%に設定 */
        background-color: rgba(0, 0, 0, 0.8); /* 半透明の黒い背景 */
        font-size: 16px; /* フォントサイズを16pxに設定 */
        box-sizing: border-box; /* 幅と高さにパディングとボーダーを含める */
        z-index: 1; /* スタッキング順序を1に設定 */
        padding-top: 50px; /* 上部に50pxのパディングを設定 */
        transition: .3s; /* トランジションを0.3秒で設定 */
    }

    .gNav.open {
        right: 0; /* メニューが開いたときの位置 */
    }

    .gNav .gNav-menu {
        padding: 0; /* パディングを0に設定 */
        width: 100%; /* 幅を100%に設定 */
        height: 100%; /* 高さを100%に設定 */
        display: block; /* ブロック要素として表示 */
        flex-direction: column; /* 縦に並べる */
        text-align: center; /* テキストを中央揃え */
        /*justify-content: center;*/ /* コメントアウトされた要素 */
    }

    /* ナビゲーションメニューのリストアイテムのスタイル */
    .gNav .gNav-menu li {
        width: 86%; /* 幅を86%に設定 */
        padding: 15px; /* 上下に15px、左右は自動でパディングを設定 */
        border-bottom: #525252 1px solid; /* 下に1pxのグレーのボーダーを設定 */
    }
}
かいかい

main要素を中央に揃える

htmlのコード
html
<main>
      <div class="main">
        <section>
          <div class = "box">
            <h2>セクションタイトル</h2>
            <p>ここにコンテンツを記載します。</p>
          </div>
        </section>

        <section>
          <div class = "box">
            <h2>セクションタイトル</h2>
            <p>ここにコンテンツを記載します。</p>
          </div>
        </section>

        <section>
          <div class = "box">
            <h2>セクションタイトル</h2>
            <p>ここにコンテンツを記載します。</p>
          </div>
        </section>

        <section>
          <div class = "box">
            <h2>セクションタイトル</h2>
            <p>ここにコンテンツを記載します。</p>
          </div>
        </section>

        <section>
          <div class = "box">
            <h2>セクションタイトル</h2>
            <p>ここにコンテンツを記載します。</p>
          </div>
        </section>

        <section>
          <div class = "box">
            <h2>セクションタイトル</h2>
            <p>ここにコンテンツを記載します。</p>
          </div>
        </section>
      </div>   
    </main>
cssのコード
css
.main {
  max-width: 800px; /* 任意の最大幅を設定 */
  margin: 0 auto;   /* 左右のマージンを自動にして中央揃え */
  padding: 20px;    /* 内部の余白を追加（任意） */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 影を追加（任意） */
}

.box {
  margin-bottom: 20px; /* 各ボックスの下に余白を追加 */
  padding: 20px;       /* ボックス内のパディング */
  border: 1px solid #ccc; /* ボックスの枠線 */
  border-radius: 5px;   /* ボックスの角を丸める */
  background-color: #f9f9f9; /* ボックスの背景色 */
}