初めに
みなさん、こんにちは！
オブジェクティブグループ（以下OBG）と申します。
この度私たちが社内で行っているフロントエンド講習会の記事をお届けすることになりました！
今回は初級と中級に分かれて2025年2月に開かれた模様をお伝えしていこうと思います！
フロントエンド講習とは？
OBGで毎月第2土曜日11:00~19:00にて行われている講習となります。
主にHTML、CSS、JavaScript（以下JS）を使ったWeb制作に関しての内容を中心に行っております。
初級コース
初級講座では、ひとりでLP（ランディングページ）を作成できるようになるのを目指した講習を実施しております。
LPはざっくりと説明をすると、縦長1ページのWEBページで広告や検索結果から訪れた訪問者の方にインパクトを与えて、購入や申し込み、資料請求など企業などが達成したい成果を得るために作られるページとなります。
今回は、そんなインパクトのあるページをつく上でも、HTML/CSSを扱っていく上でも大事なポイントの一つ、「ボックスレイアウト」について詳しくご紹介していきます。
1. ボックスレイアウトとは？
HTMLの要素は、すべて ボックス（箱） として扱われます。これを ボックスモデル と呼び、レイアウトの基本になります。
ボックスは以下の4つの領域で構成されます。
- コンテンツ（content）: 実際の内容（テキストや画像）が入る部分
- パディング（padding）: コンテンツと枠（ボーダー）の間の余白
- ボーダー（border）: ボックスの枠線
- マージン（margin）: 他の要素との間隔
ボックスモデルの構造図
実際のCSS例
.box {
width: 200px;
height: 100px;
padding: 10px;
border: 2px solid black;
margin: 20px;
}
2. ボックスの種類
ボックスには ブロックレベル要素 と インラインレベル要素 の2種類があります。
ブロックレベル要素
ブロックレベル要素は 幅いっぱい に広がり、改行されます。
特徴
- 自動的に幅が親要素いっぱいになる
- 他の要素の前後で改行が入る
- 高さや幅の指定が可能
例: <div>, <p>, <h1> など
インラインレベル要素
インライン要素は コンテンツの幅だけ で、改行されません。
特徴
- 要素の内容の幅だけを占める
- 他のインライン要素と同じ行に配置される
- 高さや幅の指定ができない（display: block; で変更可能になる）
例: <span>, <a>, <strong> など
3. ボックスレイアウトの応用
フレックスボックス（Flexbox）
要素を簡単に並べるために 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）
複雑なレイアウトを作るなら 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 を使うと、より柔軟なレイアウトが作れる。
上記にさらに、ボックスレイアウトをいくつも重ねたり並べたりと自由自在にページのデザインを実施する際は、親子関係の把握も必要になってきますので、そういったポイントをおさえて講習では解説をしております。
中級コース
中級コースでは現在一人でWebアプリを制作できるようになる事を目標に講習を行っております。
2月の開催では実在する企業様のサイトを参考に、模写コーディングを行って頂きました。
題材とさせて頂いた企業名は今回伏せさせて頂きますが、
- レスポンシブ対応（これがないサイトは今時少ないと思いますが……）
- フルスクリーンのヒーローヘッダーで、かつ一部の画像がアニメーションされている
- 1ページで完結したサイトであり、各コンテンツはスクロールで遷移可能
- スクロールするとフワッとした表現で各コンテンツは表示させる
以上の特徴が見受けられるサイトとなっておりました。
今回取り組んで頂いた受講生側の皆さんの様子を見ると、取引先の企業の表の作りに苦労されておりました。
表といえばtableタグが私の中では真っ先に挙がるのですが、最近のwebサイトではスマートフォンで見る前提のシンプルな表現が多く、参考書などでも見かける機会が減った印象です。
他にもGridレイアウトで作るなど方法はあるかと思いますが、いざという時の頭の引き出しがないと「どう作れば良いのか分からない」という状態になってしまいますので、講習会でもその点を補強してあげる必要があると、講師側としても色々と課題と反省が生まれる講習会となりました。
時間制限を設けておりましたので、終了後は皆さんの結果から苦労された点を含めて解説する流れで進めていきました。
時間の都合上、全ての解説は出来なかったものの、今後のWeb制作のご参考と自身のどこが苦手かを見つめ直すきっかけになって頂ければと思います。
オブジェクティブグループでは X の投稿も平日毎日行っています！
IT 関連の小ネタや便利技から、日常のアニメ・ゲーム布教なども幅広く投稿してるので、
ご興味のある方は是非フォロー・いいねをお願いします。
https://x.com/obg_ocr