ホーム > 30日チャレンジ > 【初心者向け】30日間でWebサイト作成チャレンジ｜3日目：CSSの基礎とデザインの考え方

【初心者向け】30日間でWebサイト作成チャレンジ｜3日目：CSSの基礎とデザインの考え方

投稿日：2026/04/12

最終更新日：2026/04/12

3日目です！今回はHTMLでのタグを囲むことについての理解を深めるのとCSSのについて学んでいきます。

フォルダは2日目で作った「MySite」を使っていきます。

サイトを装飾するにはこのCSSを学ぶ必要があります。

今回はHTMLのタグの囲み方と簡単なCSSを学んでいきます。

今回の記事でわかること

HTMLにおいてのタグを囲むとは
CSSの基本的な概念

HTMLのタグを囲む練習をしよう

こちらはHTMLにおいてタグを囲むということに慣れていない方向けの記事となっています。

すでに理解している方CSSのことを知りたいという方は次のトピックにお進みください。

前回HTMLにおいてはタグを囲むこと重要ということを学びました。

今回はもっと例を見ていきます。

以下のHTMLのコードをご覧ください

                
<h1>山田です。</h1>

これはシンプルなh1タグで文字を囲った例です。次にこちらをご覧ください

                
<body>
  <main>
    <p>ここはメインです</p>
  </main>
  <footer>
    <p>ここはフッターです</p>
  </footer>
</body>

bodyタグが1番外側で囲っていて、mainタグとfooterタグがbodyタグの中にいます。

またmainタグの中にはpタグという段落を定義するタグがあります。

footerタグの中にもpタグがあります。

これらのようにタグ同士を囲っているという関係性です。

以下は全てHTMLの実際のコードですので是非どのタグがどのタグに囲まれているのかを観察してみてください。
タグの意味は理解できなくて大丈夫です。
どのタグがどのタグに囲まれているかだけに着目してください

                
<main>
    <header>
      <div class="title">
        <p>ここにはサイト名</p>
      </div>
    </header>
    <div>
      <h1>記事タイトル</h1>
    </div>
    <div>
      <p>
        ここには記事の内容
      </p>
    </div>
  </main>

                
<footer>
  <div>
    <a href="#">ホーム</a>
    <a href="#">プロフィール</a>
    <a href="#">利用規約</a>
  </div>
</footer>

独学でプログラミング学習に時間がかかってしまっている方に朗報です！

プログラミングを理解するのにはどうしても時間がかかってしまうものです。

本を買うにしても結局わからなくなってしまう

AIに聞いても結局理解できずになんとなく作ってしまう

そんな時に心強いのがこちらのプログラミングスクールですカウンセリングが無料で受けることができます。

↓↓↓

CSSとは？CSSの基本を解説

CSSはHTMLで作られたコードを装飾するために用いられます。

実際のコードを見てみましょう。

                
footer {
  width: 100%;
  height: 400px;
  background-color: #a3d4eb;
  display: flex;
  flex-direction: column;

}

.foot-top {
  height: 375px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;

}

.foot-top p {
  font-weight: bold;
}

1番上の集団はfooterタグに適用されます。

.foot-topというのはクラス名であり、HTMLのタグにクラスを指定した場合に適用されます。

.foot-top pとは「foot-top」というクラスの中にあるpタグにスタイルを適用させるという意味があります。

Yama

ここで1番理解していただきたいのがCSSはタグごとにスタイルを決めたり、クラスごとにスタイルを決めるということです

ではどんな効果があるのかをみていきます。以下のHTMLコードとCSSを組み合わせたものです

HTML

                
<h1>こんにちは</h1>

CSS

                
h1 {
  color: red;
}

これらは1番シンプルな組み合わせです。実際にページ上ではどうなっているのかを見てみます。

では次にこれらをどうやったら繋げることができるのかをご紹介していきます。 HTMLファイルのheadタグ内に以下のコードを入れる必要があります。

                
<link rel="stylesheet" href="./style.css" type="text/css">

よってHTMLファイルのheadタグは以下のような見た目になります

                
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./style.css" type="text/css">
</head>

また着目して頂きたいのが、hrefにはCSSファイルへのリンクを記述します。

つまり以下の画像のようにCSSとHTMLファイルが同じ層にいるなら./style.cssと書いて大丈夫です。

またcssのファイル名は一般的にstyle.cssと書くのが一般的です。

まとめ

以上がHTMLのタグの囲みとCSSの基本についての解説でした。

細かいことについては次回以降の記事にて説明していきます。

今回の記事はCSSについての最低限の知識について学びました。

HTMLとCSSを繋げる動作が必要ということを必ず覚えて頂きたいです。

他の方法も存在しますが、将来的なことを考えるとファイル同士を繋げた方があとあと便利です。

次回の4日目も頑張りましょう！！

ネットだけの情報だとどうしても分かりにくい部分があります。

そんな時に助けになるのがこちらの書籍です。

Amazonでベストセラー1位を獲得しています

↓
1冊ですべて身につくHTML & CSSとWebデザイン入門講座［第2版］