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

HTMLとCSSの基本を学ぶ初心者が参考にするイメージHTML
この記事は約12分で読めます。

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、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: セレクタとプロパティの基本

○セレクタの種類

  1. タグセレクタ: HTMLのタグ名をそのまま指定します。例: body, h1
  2. クラスセレクタ: HTML要素に付与したクラス名を指定します。例: .button, .header
  3. 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-columnsgrid-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: カスタマイズと対処法

○カスタマイズの方法

  1. クラス名やID名を工夫して、より具体的な名前にする。
  2. CSSプロパティを組み合わせて、デザインのバリエーションを増やす。
  3. コメントを使って、コードの目的や機能を明確にする。
<!-- 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;
}

○対処法

  1. ブラウザの開発者ツールを利用して、エラーや問題を特定する。
  2. ググる!質問サイトやブログ記事、ドキュメントから解決策を見つける。
  3. 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-columnsrepeat(auto-fit, minmax(200px, 1fr))により、各画像が最低200pxの幅を持ち、画面幅に応じて自動的に並び替えられます。

まとめ

この記事では、HTMLとCSSの読み込み方法から、基本的な使い方、対処法、注意点、カスタマイズ方法、応用例まで幅広く解説しました。

これらの知識を活用して、ウェブページのデザインやレイアウトを自由自在に制御できるようになります。

練習を重ねることで、さらにスキルを向上させましょう。