完成イメージ
- BEM記法（Block / Element / Modifier）を使って、構造を意識したクラス名の設計を体験する
- 記事ごとの構造をパーツ化し、保守しやすく再利用可能なCSS設計を目指す
- HTMLとCSSを分かりやすく連携させる練習を行う
作成ファイル・保存場所
css-class フォルダ内に以下のファイルを用意してください。
今回トレーニングするための HTMLファイルをダウンロードします。そのファイルに classの設定を行い、そのclassに対して、CSS ファイルを作成し、プロパティの設定を行います。
| ファイル名 | 内容 |
|---|---|
| css-class06.html | BEM記法の練習クラス名を追加するためのHTMLファイルを使用 コピーしてご利用ください。 |
| style-class06.css | CSSファイル（クラス名に沿ってスタイル指定） |
Classをつける前の、HTMLコードは下記をコピーして使用してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- サイト全体のヘッダー -->
<header>
<h1>ブログタイトル</h1>
</header>
<!-- メインコンテンツ -->
<main>
<!-- 記事1 -->
<article>
<header>
<h1>HTMLとCSSの違いとは？</h1>
<p>投稿日：2025年4月15日</p>
</header>
<p>
HTMLはウェブページの構造を定義するマークアップ言語であり、CSSはその見た目や装飾を整えるスタイルシートです。
両者は組み合わせて使用されることが一般的で、Web制作の基礎となる重要な技術です。
</p>
<footer>
<p>執筆：Nakamura</p>
</footer>
</article>
<!-- 記事2 -->
<article>
<header>
<h1>Webアクセシビリティとは何か</h1>
<p>投稿日：2025年4月10日</p>
</header>
<p>
アクセシビリティとは、障害のある方を含むすべてのユーザーにとって利用しやすいウェブを目指す考え方です。
適切なマークアップとサポート技術への配慮により、情報の公平なアクセスが実現できます。
</p>
<footer>
<p>執筆：Nakamura</p>
</footer>
</article>
</main>
<!-- サイト全体のフッター -->
<footer>
<p><small>© 2025 MyBlog</small></p>
</footer>
</body>
</html>
※ CSSファイルはエディタで新規作成し、以下のように <head> にリンクしてください
<link rel="stylesheet" href="style-class03.css">
BEM記法ってなに？
BEM（Block / Element / Modifier）は、クラス名の設計方法のひとつです。
「どこに属する何か」を明確にすることで、CSSの管理をしやすくする考え方です。
| 部品 | 書き方の例 | 説明 |
|---|---|---|
| Block | .blog-post | 再利用可能な構造のかたまり（例：1記事） |
| Element | .blog-post__title | Block内の要素（例：記事の見出し） |
| Modifier | .blog-post--highlight | 状態やバリエーション（例：目立たせたい） |
書き方のルール
__（ダブルアンダースコア）：Block と Element をつなぐ--（ダブルハイフン）：Modifier（状態）を表す- 1つのブロック名を軸に構成することで、CSSが読みやすく・管理しやすくなります
例：.button（Block）
→ .button__icon（中のアイコン要素）
→ .button--primary（強調ボタンのバリエーション）
チェックポイント
- ブロック名（例：
.blog-post）がページ内で一貫して使われているか - 要素名（例：
.blog-post__title）がブロックに属する形で命名されているか - クラス名の意味が明確で、スタイル指定と紐づいて管理しやすくなっているか
指示
css-class06.htmlを保存し、style-class06.cssと連携させてください。- 以下のように、BEM記法に沿ってクラスを追加しましょう：
| ターゲット要素 | クラス名（例） | 意味・構造 |
|---|---|---|
<article> | blog-post | 1つの記事（ブロック） |
<h1> タイトル | blog-post__title | 記事の見出し（要素） |
<p> 投稿日 | blog-post__date | 投稿日（要素） |
<p> 本文 | blog-post__text | 記事本文（要素） |
<footer> | blog-post__footer | 記事内のフッター（要素） |
<p> 執筆者名 | blog-post__author | 執筆者（要素） |
HTMLにclassをつけた参考例
HTMLに class をつけた参考例です。
この「css-class03.html」は、クラス名を設定した一例として作成しています。
正解というわけではありませんが、参考として、自分のファイルと見比べてみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS（BEM記法）</title>
<link rel="stylesheet" href="style-class03.css">
</head>
<body>
<!-- サイト全体のヘッダー -->
<header class="site-header">
<h1 class="site-header__title">ブログタイトル</h1>
</header>
<!-- メインコンテンツ -->
<main class="content">
<!-- 記事1 -->
<article class="blog-post">
<header class="blog-post__header">
<h1 class="blog-post__title">HTMLとCSSの違いとは？</h1>
<p class="blog-post__date">投稿日：2025年4月15日</p>
</header>
<p class="blog-post__text">
HTMLはウェブページの構造を定義するマークアップ言語であり、CSSはその見た目や装飾を整えるスタイルシートです。
両者は組み合わせて使用されることが一般的で、Web制作の基礎となる重要な技術です。
</p>
<footer class="blog-post__footer">
<p class="blog-post__author">執筆：Nakamura</p>
</footer>
</article>
<!-- 記事2 -->
<article class="blog-post">
<header class="blog-post__header">
<h1 class="blog-post__title">Webアクセシビリティとは何か</h1>
<p class="blog-post__date">投稿日：2025年4月10日</p>
</header>
<p class="blog-post__text">
アクセシビリティとは、障害のある方を含むすべてのユーザーにとって利用しやすいウェブを目指す考え方です。
適切なマークアップとサポート技術への配慮により、情報の公平なアクセスが実現できます。
</p>
<footer class="blog-post__footer">
<p class="blog-post__author">執筆：Nakamura</p>
</footer>
</article>
</main>
<!-- サイト全体のフッター -->
<footer class="site-footer">
<p class="site-footer__text"><small>© 2025 MyBlog</small></p>
</footer>
</body>
</html>
- CSSでは、以下のようなスタイルをつけてみましょう：
.blog-postにボーダー・背景色・パディング.blog-post__titleに文字サイズ・余白.blog-post__dateに色や小さめのフォント.blog-post__footerを薄背景にして著者情報を区切る
応用ポイント
- Modifier（修飾）を使えば
.blog-post--highlightなど「特別な記事」も表現できます - 記事一覧やカードレイアウトでも、BEM設計はそのまま活用可能
.block__element形式の命名を統一すると、CSSファイルの構成もシンプルになります
CSS解答例
解答例ですので、他の記述方法でも問題ありません。自身のコードと照らし合わせみましょう
/* ベーススタイル */
body {
margin: 0;
font-family: "Segoe UI", sans-serif;
background-color: #f5f7f9;
color: #333;
line-height: 1.6;
}
/* ヘッダー */
.site-header {
background-color: #4aaf7c;
padding: 1.5em 2em;
color: #fff;
text-align: center;
}
.site-header__title {
margin: 0;
font-size: 1.8rem;
}
/* メインエリア */
.content {
padding: 2em;
max-width: 800px;
margin: 0 auto;
}
/* ブログ記事全体 */
.blog-post {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 8px;
margin-bottom: 2em;
padding: 1.5em;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}
/* 記事のヘッダー部分 */
.blog-post__header {
margin-bottom: 1em;
}
.blog-post__title {
font-size: 1.5rem;
margin: 0;
color: #333;
}
.blog-post__date {
font-size: 0.9rem;
color: #888;
margin-top: 0.2em;
}
/* 本文 */
.blog-post__text {
margin: 1em 0;
}
/* フッターと著者名 */
.blog-post__footer {
border-top: 1px solid #eee;
margin-top: 1.5em;
padding-top: 1em;
}
.blog-post__author {
font-size: 0.9rem;
color: #555;
}
/* サイト全体のフッター */
.site-footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 1em;
font-size: 0.85rem;
}
.site-footer__text {
margin: 0;
}