ファイル・フォルダの構成について

danger

  • 同じ Web サイトのファイルは一つのフォルダにまとめる。
  • Web 上であつかうフォルダやファイルの名前は
    • 空白を含まない
    • 英語
    • 小文字
  • ファイルの拡張子は必ずつける。

例：

folder

コーディングについて

HTMLやCSSの文法をおさらいして、間違いがないか確認しましょう。特に以下の点に注意してください。

danger

  • 開始タグと終了タグは対応しているか。（終了タグには
    /
    が必要）
  • 入れ子の関係が崩れていないか

英語入力で「option + shift + F」を入力してコードを整頓すると良い

1. HTML全体の構造

まずHTML全体の構造を確認しましょう。すべてのWebページが以下の形です。

head
要素や
body
要素は１ページに1つずつです。

<!-- 全体がhtmlで囲まれている -->
<!DOCTYPE html>
<html>

<head>
    <!-- ページの設定がheadで囲まれている -->
</head>

<body>
    <!-- ページに表示される内容がbodyで囲まれている -->
</body>

</html>

2. headの中に書くこと

<head>
要素の中には、そのページの設定を書きます。

<head>
要素の例：

<head>
    <!-- 文字化けを防ぐ -->
    <meta charset="utf-8">
    <!-- タブに表示されるタイトル -->
    <title>タイトル</title>
    <!-- Google Fontを追加する -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
    <!-- 自分のCSSを読み込む -->
    <link href="style.css" rel="stylesheet">
</head>

3. bodyの中に書くこと

<body>
要素の中には、Webページとして表示される内容を書きます。
<header>
要素の中にはヘッダー部分の内容を、
<footer>
要素の中にはフッター部分の内容を書きます。
<nav>
要素にはメニューを入れます。
<main>
要素にはそのページの内容を入れます。
<div>
要素はレイアウトやグループ化のために使います。

<body>
要素の例：

<body>
    <!-- ヘッダー -->
    <header class="header">
        <h1>タイトル</h1>
        <nav class="nav">
            <ul>
                <li><a href="リンク先">リンク</a></li>
                <li><a href="リンク先">リンク</a></li>
                <li><a href="リンク先">リンク</a></li>
            </ul>
        </nav>
    </header>
    <!-- メイン（ページごとの内容） -->
    <div class="main">
        <h1>トップページのタイトル</h1>
    </div>
    <!-- フッター -->
    <footer class="footer">
        ©️ Copyright 著作権表示など
    </footer>
</body>

4. 各ページへのリンク

warning

すべてのページをリンクで相互に移動できるようにしましょう。

リンクは

<a>
要素を使います。

<a href="リンク先">リンク</a>

リンク先は

href
属性で指定します。

5. 各ページの内容

ページの内容を作っていきましょう。

6. 画像の入れ方

画像は

<img>
要素を使います。画像ファイルは
src
属性で指定します。

画像の大きさはCSSで横幅

width
を指定すると良いです。
親要素に合わせてはみ出さないようにしたい場合は、以下のようにCSSに
img
の最大の幅
max-width
を書くと良いです。

例：

HTML

<img src="画像ファイル" alt="画像の説明文">

<!-- 大きさを設定する場合 -->
<img src="画像ファイル" alt="画像の説明文" width="横幅">

CSS

img {
  max-width: 100%;
}

背景に画像を入れたい場合は、CSSで

background-image
を設定します。大きさや位置を設定すると、ボックスの大きさに合わせて表示することもできます。

例：

HTML

<div class="image">
    <!-- 背景を画像にするボックス -->
</div>

CSS

.image {
    background-image: url(画像ファイルのパス);
    background-size: cover; /* 要素に合わせて拡大・縮小 */
    background-repeat: no-repeat; /* 繰り返さない */
    background-position: center; /* 中央 */
}

7. 各ページのレイアウト

CSSをおさらいして、Webページのデザインを整えましょう。 クラスセレクタを使ってCSSを適用する方法がおすすめです。

例：

HTMLの要素に

class
属性を追加します。

<div class="container">
    中央寄せ
</div>

CSSのセレクタを「ドット + クラス名」と書くことで、HTMLを指定できます。
横幅

width
または
max-width
を決めて、左右の
margin
を
auto
にすると中央寄せです。

.container {
  /* 中央寄せ */
  width: 100%;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}

横並びにしたい場合はフレックスボックスを使いましょう。

display: flex;
をつけると子要素が横並びになります。

HTML

<div class="container">
    <div>
        左
    </div>
    <div>
        右
    </div>
</div>

CSS

.container {
  /* フレックスボックス（横並び） */
  display: flex;
}

画像について

画像が大きすぎるとWebサイトは表示に時間のかかる思いWebサイトになってしまいます。画像の大きさは通常は1920pxあれば十分です。

danger

Photoshopで画像のサイズを変更する。

Photoshopで画像解像度を変更する。

Photoshopで画像を開いたら
「イメージ」→「画像解像度」を選択。

ps1

単位を「pixel」にして「幅」を変更して「OK」。
鎖（くさり）のアイコンが高さは自動で設定されるようにしましょう。

ps2