フロントエンド講習とは？
みなさん、こんにちは！
オブジェクティブグループ（以下OBG）に所属している@ume_work0831 と申します。
弊社では月に1回、フロントエンドの講習会を開催しており、今回はそのご紹介をいたします。
前回の記事はこちら！
https://qiita.com/ume_work0831/items/a336a959fe12a53b1a53
HTML/CSS 初級
この講座では、「ひとりでLP（ランディングページ）を作成できるようになること」を目標にしています。
LPとは、簡単に言えば縦長1ページ構成のWebページのことで、広告や検索結果などから訪問したユーザーにインパクトを与え、購入や申し込み、資料請求など、企業が達成したい成果を得るために作られるページです。
Web ページを作っていて、
「ボタンを横に並べたい」
「真ん中にしたい」
「スクロールしてもついてくるメニューを作りたい」
と思ったことはありませんか？
これらはCSSのレイアウトを理解すると簡単にできます。
今回は、初級中級の皆さん合同で初心者がよく使うdisplayとpositionなどレイアウト関連をメインにご案内いたしました。
1. よく使う display プロパティ
① display: flex;（フレックスボックス）
要素を横や縦に並べるのが得意です。
ナビゲーションやボタン並びに便利！
<div class="container">
<div class="box">A</div>
<div class="box">B</div>
<div class="box">C</div>
</div>
.container {
display: flex;
justify-content: center; /* 横方向を中央 */
align-items: center; /* 縦方向を中央 */
height: 200px;
border: 1px solid #333;
}
.box {
width: 50px;
height: 50px;
background: skyblue;
margin: 5px;
}
② display: grid;（グリッドレイアウト）
縦 × 横のマス目でレイアウトできます。
カードやギャラリーにおすすめ！
<div class="grid-container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr; /* 2列 */
gap: 10px;
}
.item {
background: lightgreen;
padding: 20px;
text-align: center;
}
③ display: table;（テーブル風）
テーブルの構造を使って疑似的に、縦中央揃えに使えます。
<div class="table-container">
<div class="table-cell">縦も横も中央！</div>
</div>
.table-container {
display: table;
width: 100%;
height: 200px;
border: 1px solid #333;
}
.table-cell {
display: table-cell;
vertical-align: middle;
text-align: center;
}
2. よく使う position プロパティ
① fixed（固定配置）
画面を基準に配置され、スクロールしても動きません。
<button class="to-top">▲ TOP</button>
.to-top {
position: fixed;
bottom: 20px;
right: 20px;
padding: 10px 15px;
background: orange;
border: none;
cursor: pointer;
}
② relative（元の位置からずらす）
要素の本来の位置を基準に移動し、表示できる。
少しだけ位置を調整したいときに使います。
<div class="relative-box">ずらしたボックス</div>
.relative-box {
position: relative;
top: 20px;
left: 10px;
background: pink;
width: 100px;
height: 100px;
}
③ absolute（自由配置）
親要素を基準に配置します。
※ 親に position: relative; をつけるのがポイント！
<div class="parent">
<div class="child">右上に配置</div>
</div>
.parent {
position: relative;
width: 200px;
height: 200px;
background: lightgray;
}
.child {
position: absolute;
top: 0;
right: 0;
background: tomato;
padding: 5px;
}
3. 中央揃えいろいろ
CSS初心者が一番迷うであろうもの、それは中央揃え。
代表的な方法をまとめました。
横方向の中央揃え（ブロック要素）
<div class="center-box">横中央</div>
.center-box {
width: 200px;
margin: 0 auto;
background: lightblue;
}
横方向の中央揃え（インライン要素）
<div class="center-text">
<span>横中央のテキスト</span>
</div>
.center-text {
text-align: center;
}
縦横の中央揃え（flexboxで一発！）
<div class="flex-center">
<div class="content">中央！</div>
</div>
.flex-center {
display: flex;
justify-content: center; /* 横中央 */
align-items: center; /* 縦中央 */
height: 200px;
border: 1px solid #333;
}
.content {
background: yellow;
padding: 10px;
}
まとめ
display: flex; → 横並び・中央揃えに最適
display: grid; → 複雑なレイアウトに便利
position: fixed; → 画面に固定するボタンなど
position: absolute; + relative → 自由な配置
中央揃えなら flexbox が一番簡単！
CSS レイアウトはたくさん方法がありますが、
まずは flex と grid を使いこなすのがおすすめです。
これをベースに、ナビゲーションバーやカードデザインなどに応用していくと一気に見た目が良くなりますよ！
お知らせ
オブジェクティブグループでは X（旧Twitter）にて
ITの小ネタや便利技、アニメやゲームの話題などを平日毎日投稿中！
ぜひフォロー＆いいねをお願いします👇
https://x.com/obg_ocr