HTML&CSS入門！7日間でマスターする方法

はじめに

この記事を読めば、HTMLとCSSを7日間でマスターすることができるようになります。

これからWebデザインを学びたい初心者の方に向けた、徹底解説記事です。

使い方、対処法、注意点、カスタマイズ、サンプルコード、応用例を含め、わかりやすく説明していきます。

●Day1: HTMLとCSSの基本

まずは、HTMLとCSSの基本を理解しましょう。

HTML（HyperText Markup Language）は、ウェブページの構造を作るための言語です。

一方、CSS（Cascading Style Sheets）は、ウェブページの見た目をデザインするための言語です。

○HTMLの基本構造

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ページタイトル</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- ここにコンテンツを書く -->
</body>
</html>

このサンプルコードは、HTMLの基本構造を示しています。

<head>タグ内に<link>タグを使って、CSSファイル（style.css）を読み込んでいます。

○CSSの基本構造

/* style.css */
セレクタ {
  プロパティ: 値;
}

CSSは、セレクタとプロパティで構成されています。

セレクタで対象となるHTML要素を指定し、プロパティでその要素の見た目を設定します。

/* style.css */
body {
  background-color: lightblue;
}

このサンプルコードでは、body要素の背景色を薄い青色（lightblue）に設定しています。

●Day2: セレクタとプロパティの基本

○セレクタの種類

タグセレクタ: HTMLのタグ名をそのまま指定します。例: body, h1
クラスセレクタ: HTML要素に付与したクラス名を指定します。例: .button, .header
IDセレクタ: HTML要素に付与したID名を指定します。例: #main, #nav

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>セレクタのサンプル</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1 class="title">タイトル</h1>
  <p id="main">メインの文章</p>
  <button class="button">ボタン</button>
</body>
</html>

/* style.css */
h1 {
  font-size: 24px;
}

.title {
  color: red;
}

#main {
  font-weight: bold;
}

.button {
  background-color: blue;
  color: white;
}

○プロパティの基本

プロパティは、スタイルを設定するための様々な項目です。

例えば、font-sizeはフォントサイズを、colorは文字色を設定します。

●Day3: レイアウトとデザイン

○グリッドシステム

グリッドシステムは、ウェブページを整理された矩形のグリッドに分割するデザイン手法です。

この方法を用いることで、ウェブページが整然と見えるようになります。

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>グリッドシステムのサンプル</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-4">1/3</div>
      <div class="col-4">1/3</div>
      <div class="col-4">1/3</div>
    </div>
  </div>
</body>
</html>

/* style.css */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.row {
  display: flex;
}

.col-4 {
  width: 33.3333%;
}

○レスポンシブデザイン

レスポンシブデザインは、ウェブページが様々なデバイスで適切に表示されるようにデザインする方法です。

メディアクエリを使用して、デバイスの画面サイズに応じたスタイルを適用することができます。

/* style.css */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.col-4 {
  width: 100%;
}

@media (min-width: 768px) {
  .col-4 {
    width: 33.3333%;
  }
}

このサンプルコードでは、画面幅が768px以上の場合にcol-4クラスの要素の幅を1/3に設定しています。

●Day4: FlexboxとGrid

○Flexbox

Flexboxは、柔軟なボックスレイアウトを実現するCSSの機能です。

親要素にdisplay: flex;を指定することで、子要素を簡単に整列させることができます。

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Flexboxのサンプル</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
  </div>
</body>
</html>

/* style.css */
.flex-container {
  display: flex;
  justify-content: space-around;
}

.flex-item {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  text-align: center;
}

○Grid

Gridは、2次元のグリッドレイアウトを実現するCSSの機能です。

親要素にdisplay: grid;を指定し、grid-template-columnsやgrid-template-rowsでグリッドの構造を定義します。

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Gridのサンプル</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
  </div>
</body>
</html>

/* style.css */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.grid-item {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  text-align: center;
}

●Day5: カスタマイズと対処法

○カスタマイズの方法

クラス名やID名を工夫して、より具体的な名前にする。
CSSプロパティを組み合わせて、デザインのバリエーションを増やす。
コメントを使って、コードの目的や機能を明確にする。

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>カスタマイズのサンプル</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <button class="btn btn-primary">Primary Button</button>
  <button class="btn btn-secondary">Secondary Button</button>
</body>
</html>

/* style.css */
/* ボタンの共通スタイル */
.btn {
  padding: 8px 16px;
  font-size: 14px;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}

/* プライマリーボタン */
.btn-primary {
  background-color: blue;
  color: white;
}

/* セカンダリーボタン */
.btn-secondary {
  background-color: gray;
  color: white;
}

○対処法

ブラウザの開発者ツールを利用して、エラーや問題を特定する。
ググる！質問サイトやブログ記事、ドキュメントから解決策を見つける。
CSSの初期設定をリセットする（リセットCSSやNormalize.cssを利用）。

●Day6: 注意点

○CSSの読み込み順序

CSSは、後に記述されたスタイルが優先されます。

そのため、外部ライブラリやフレームワークのCSSよりも、独自のCSSを後に読み込ませることが重要です。

○セレクタの詳細度

CSSセレクタには、詳細度という概念があります。

詳細度が高いセレクタほど、そのスタイルが優先されます。

詳細度が同じ場合は、後に記述されたスタイルが優先されます。

●Day7: 応用例とサンプルコード

○画像ギャラリー

画像ギャラリーを作成するには、Gridを利用すると簡単に実現できます。

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>画像ギャラリーのサンプル</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="gallery">
    <img src="img1.jpg" alt="画像1" class="gallery-item">
    <img src="img2.jpg" alt="画像2" class="gallery-item">
    <img src="img3.jpg" alt="画像3" class="gallery-item">
  </div>
</body>
</html>

/* style.css */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 16px;
}

.gallery-item {
  width: 100%;
  height: auto;
}

このサンプルコードでは、画像ギャラリーをGridを使ってレイアウトしています。

grid-template-columnsのrepeat(auto-fit, minmax(200px, 1fr))により、各画像が最低200pxの幅を持ち、画面幅に応じて自動的に並び替えられます。