フロントエンド講習とは？
みなさん、こんにちは！
オブジェクティブグループ（以下OBG）に所属している @scrashim9R と @ume_work0831 と申します。
弊社では月に1回、フロントエンドの講習会を開催しており、今回はそのご紹介をいたします。
前回の記事はこちら：
https://qiita.com/scrashim9R/items/fe5bb6411d9a9035159d
HTML/CSS 初級
こんにちは、初級講座を担当している @ume_work0831 です。
この講座では、「ひとりでLP（ランディングページ）を作成できるようになること」を目標にしています。
LPとは、簡単に言えば縦長1ページ構成のWebページのことで、広告や検索結果などから訪問したユーザーにインパクトを与え、購入や申し込み、資料請求など、企業が達成したい成果を得るために作られるページです。
今回は、完全に初めての方と、久しぶりに初級講座を受ける方にご参加いただきました。
復習も兼ねて、フロントエンドの役割とは何かというところから丁寧に解説させていただきました。
◆講習内容◆
・フロントエンドとは？
・HTML/CSSの役割と正しい記述の必要性
・Visual Studio Codeとおすすめプラグイン
・GitとGitHubについて
・親子関係とID／クラスの違い
・命名規則について
・ブロックレベル要素とインラインレベル要素
・ボックスモデルについて
・命名規則BEMについて
・レイアウトの基礎（FlexboxやCSS Gridなど）
今回は、講習内容の中でも特に重要な「ボックスモデル」について詳しく解説します。
※親子関係についてはこちらの記事をご覧ください。
1. ボックスモデルとは？
HTMLの要素はすべてボックス（箱）として扱われます。これをボックスモデルと呼び、レイアウトの基本となる考え方です。
ボックスは以下の4つの領域で構成されています。
- コンテンツ（content）：テキストや画像などの実際の内容
- パディング（padding）：コンテンツと枠線（ボーダー）の間の余白
- ボーダー（border）：ボックスの枠線
- マージン（margin）：他の要素との間隔
ボックスモデルの構造図
実際のCSS例
.box {
width: 200px;
height: 100px;
padding: 10px;
border: 2px solid black;
margin: 20px;
}
2. ボックスの種類
ブロックレベル要素
ブロックレベル要素は幅いっぱいに広がり、自動的に改行されます。
特徴
- 親要素の幅いっぱいに広がる
- 要素の前後で改行が入る
- 高さや幅の指定が可能
例：<div>, <p>, <h1> など
インラインレベル要素
インライン要素はコンテンツの幅のみを持ち、改行されません。
特徴
- 内容の幅だけを占める
- 他のインライン要素と同じ行に並ぶ
- 高さや幅の指定ができない（ただし
display: blockなどで変更可）
例：<span>, <a>, <strong> など
3. ボックスモデルの応用
Flexbox（フレックスボックス）
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 1px solid black;
}
.item {
width: 50px;
height: 50px;
background-color: coral;
margin: 5px;
}
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
CSS Grid（グリッドレイアウト）
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.grid-item {
background: lightcoral;
padding: 20px;
text-align: center;
}
<div class="grid">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</div>
4. まとめ
- ボックスレイアウトはHTML要素の配置における基本。
- ボックスモデルを理解することで、余白やサイズ調整がしやすくなる。
- ブロックレベル要素とインラインレベル要素の違いを把握することが重要。
- FlexboxやCSS Gridを使えば柔軟で整ったレイアウトを実現できる。
フロントエンド中級
こんにちは、中級講座を担当している @scrashim9R です。
今回の講習では、架空のECサイトを題材に、商品一覧の表示や機能追加を行いました。
JSONとは？商品データの準備
今回使用するのはJSONファイルというデータ形式です。
詳しくは以下の記事をご参照ください：
https://developer.mozilla.org/ja/docs/Learn_web_development/Core/Scripting/JSON
[
{
"name": "リネン半袖シャツ",
"image": "linen_shirt01.jpg",
"price": 4990,
"release_date": "2025-06-01"
},
{
"name": "コットンTシャツ（ユニセックス）",
"image": "cotton_tshirt01.jpg",
"price": 2990,
"release_date": "2025-05-25"
},
{
"name": "ワイドシルエットショートパンツ",
"image": "wide_shorts01.jpg",
"price": 4590,
"release_date": "2025-05-15"
}
]
JSONデータをHTMLに反映する
let products = [];
fetch('../json/data.json')
.then(response => response.json())
.then(data => {
products = data;
})
.catch(error => {
console.error('商品データの読み込みに失敗しました:', error);
});
HTMLへの表示処理
const list = document.getElementById('product-list');
list.innerHTML = '';
products.forEach(item => {
const product = document.createElement('div');
product.className = 'product';
product.innerHTML = `
<img src="images/${item.image}" alt="${item.name}">
<h3>${item.name}</h3>
<p>価格: ¥${item.price.toLocaleString()}</p>
<p>発売日: ${item.release_date}</p>
`;
list.appendChild(product);
});
テンプレートリテラルを使えば、HTML内に変数を埋め込むことができます。
参考：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Template_literals
おわりに
JSONからデータを取得してWebページに表示する流れを体験いただきました。
今後はソート機能やデザイン調整など、さらにECサイトとしての機能を追加していく予定です。
お知らせ
オブジェクティブグループでは X（旧Twitter）にて
ITの小ネタや便利技、アニメやゲームの話題などを平日毎日投稿中！
ぜひフォロー＆いいねをお願いします👇
https://x.com/obg_ocr