news

Web制作の仕事で欠かせないのが HTML と CSS。
その中でも、コードを「分かりやすく」「整った形」にする技術として注目されているのが BEM（ベム）設計 です。

就労継続支援A型でも、Webサイトの更新や簡単なページ制作、パーツのコーディングなどを行う機会が増えています。
今回は、業務でも役立つ「HTML」と「BEM設計」について、初心者にも分かりやすく解説します。

1. HTMLとは？

HTML（エイチ・ティー・エム・エル）は、Webページの「骨組み」を作る言語です。

見出し

文章

画像

ボタン

メニュー

フォーム

これらを表示するための土台を作るのがHTMLの役目です。

HTMLが正しく書けると、検索エンジンにも評価されやすくなり、デザインや動きも安定します。

2. BEM設計とは？

BEMは、CSSのクラス名の付け方をルール化したものです。
「Block（ブロック）」「Element（エレメント）」「Modifier（モディファイア）」の頭文字からできています。

簡単に言うと…

誰が見ても何のパーツか分かるクラス名を付ける書き方。

例えば、このような形です。

.block {}
.block__element {}
.block–modifier {}

block：パーツそのもの

element：パーツの中の部品

modifier：色違い・サイズ違いなどの変化

名前だけで「どこを編集すればいいか」が一目で分かるため、複数人での作業や修正がとても楽になります。

3. HTML × BEM設計がA型の仕事で役立つ理由
① コードが読みやすいので、作業がしやすい

BEMに沿ってコーディングされていると、クラス名を見ただけで構造が分かります。
そのため、修正・差し替え・追加作業がスムーズになります。

② チームで作業しても混乱しにくい

A型では複数の利用者さんがWeb業務に関わることがあります。
バラバラの書き方だと管理が難しくなりますが、BEMを使うと統一しやすくなります。

③ コーディングの品質が安定する

BEMは「崩れにくいCSS」を作るための設計方法でもあります。
余計なスタイルの上書きが減り、トラブル防止にも効果的です。

4. BEMを取り入れた簡単なHTML例
<div class=”card”>
<h2 class=”card__title”>タイトル</h2>
<p class=”card__text”>文章が入ります。</p>
<a class=”card__button card__button–large”>もっと見る</a>
</div>

この書き方をしておくことで：

「card」のどこを変えたいかがすぐ分かる

「button」のバリエーション（–large など）を簡単に作れる

担当者による書き方の違いが減る

といったメリットがあります。

5. A型の業務で取り組みやすいポイント

就労A型でHTMLやBEMを使った業務がある場合、次のような作業が取り組みやすいです。

既存HTMLの修正

簡単なパーツのコーディング

コピペでのブロック追加

クラス名の整理

デザインをHTMLに落とし込む作業の補助

WordPressのテンプレート編集（簡単な部分）

特に 「決まったルールに従って作業するのが得意」 な方に向いており、A型の仕事としてとても相性の良い分野です。

6. まとめ

HTMLはWebページの骨組み。
BEMはクラス名を整理して「分かりやすいコード」を作るためのルール。

この2つを意識すると、

きれい

崩れにくい

他の人が読みやすい

といった、品質の高いコーディングができるようになります。

Web制作の仕事はニーズが高く、A型事業所でも継続的に受託しやすいジャンルです。
少しずつHTMLとBEMのルールを覚えるだけで、できる仕事の幅が大きく広がります。