カテゴリー

  • Tech
  • 英語学習
  • セブ島・留学準備
  • キャリア
  • Kredo
KredoのIT留学
スタッフ募集中
留学体験談
無料相談はこちら
セブ島IT留学の「Kredo」が運営するメディア「Kredoblog」
  • TECH Tech
    • Web・プログラミング

      Web・プログラミング

    • テクノロジー

      AI・テクノロジー

  • ENGLISH 英語学習
    • 英語学習法

      英語学習法

    • 英語表現・フレーズ

      英語フレーズ

  • STUDYABROAD セブ島・留学準備
    • 語学留学

      語学留学

    • IT留学

      IT留学

    • セブ島情報

      セブ島情報

  • CAREER キャリア
    • ITキャリア

      ITキャリア

    • 転職・海外就職

      転職・海外就職

    • インタビュー

      インタビュー

  • KREDO Kredo
    • ニュース・キャンペーン情報

      ニュース・キャンペーン情報

    • CEO・STAFFブログ

      CEO・STAFFブログ

    • IT×英語留学体験談

      IT×英語留学体験談
      [Kredo公式サイトへ]

5月申し込み限定授業料半額 kredo it留学オンライン
  • TOP
  • Tech
  • Web・プログラミング
  • 【初心者向け】CSSの2大レイアウトとは?覚えておきたい基礎知識や考え方、使い方

【初心者向け】CSSの2大レイアウトとは?覚えておきたい基礎知識や考え方、使い方

太田 ヨウタ
太田 ヨウタ
公開日:2020.01.23
更新日:2021.09.13
Web・プログラミング |
  • ツイート
  • シェア
  • はてな
  • ポケット
 loading
少女

CSSを使ったレイアウトの組み方って?

少年

FlexboxやCSSグリッドの違いや考え方を知りたい

こんな疑問、要望に応えるべく、CSSのレイアウト基礎知識からFlexboxやCSSグリッドの違いについて解説する記事です。具体的には、次の順番でお話ししていきます。

  • CSSのレイアウトに関する基礎知識
  • フレックスボックスの考え方、使い方
  • グリッドレイアウトの考え方、使い方
  • CSSの位置指定5種類の解説
  • 実際に横並びレイアウトを書いてみよう

CSSのレイアウトに関して、基礎知識を身に着けたい、と考えているあなた向けの記事ですので、ぜひご覧ください。

記事のもくじ

  • CSSのレイアウトに関する基礎知識
  • フレックスボックス(flex)とは
    • レイアウトの考え方
    • 利用方法
  • CSSグリッドレイアウト(grid)とは
    • レイアウトの考え方
    • 利用方法
  • CSSのレイアウトに関する位置指定5種類
  • 横並びレイアウトを書いてみよう
  • まとめ:CSSの2大レイアウトを身に着けよう

CSSのレイアウトに関する基礎知識

基本的に、HTMLだけでは縦に並べるレイアウトしかできません。CSSは、文字装飾などでも利用しますが、レイアウトを組むことで最も効果を発揮するといえるでしょう。

CSSでレイアウトを組む際には、2つのレイアウト手法があります。それが「CSSグリッド(グリッドレイアウト)」と「フレックスボックス」です。

現在、CSSでレイアウトを組むのであれば、このどちらかを利用します。

Webデザイン黎明期は、HTMLのTableタグを使ってレイアウトを組んでいました。しかし、そもそもTableタグはレイアウト用途で利用するものではなく、本来の使い方ではないため推奨されません。

ほかにも、CSSでfloatを使った回り込み制御によってレイアウトを実現することもありましたが、ブラウザによってはきちんと表示できないことなどのさまざまな問題を抱えていました。

そこで利用されるようになったものが、フレックスボックスであり、グリッドレイアウトは最も新しいレイアウトの手法となります。

次の章からは、グリッドレイアウトとフレックスボックスについて、それぞれの詳細を解説していきます。

フレックスボックス(flex)とは

Flexbox(フレックスボックス)は、Flexible Box Layout Moduleのことであり、BootstrapなどのCSSフレームワークでも利用されるレイアウト手法です。フレキシブルにボックスレイアウトが組める特徴を持ちます。

レイアウトの考え方

フレックスボックスは、親要素となる「コンテナ」と、子要素となる「アイテム」から成り立っています。

HTMLでコンテナとアイテムを定義し、CSSでフレックスボックスを宣言するだけで横並びレイアウトが実現可能です。

フレックスボックスは、一次元のレイアウトモデルであり、基本的には「行」か「列」のいずれかの方向にしかレイアウトできません。行は横方向、列は縦方向と覚えましょう。

フレックスボックスは従来の回り込み制御をより簡単に行えるようにしたものであり、比較的簡単に利用できるレイアウト手法です。

利用方法

フレックスボックスを利用する際は、CSSで「display: flex;」の記述をすることで利用できます。

具体的には、次のHTMLとCSSで簡単に実現可能です。

HTML
<div class="container">
    <div class="item">アイテム1</div>
    <div class="item">アイテム2</div>
    <div class="item">アイテム3</div>
    <div class="item">アイテム4</div>
</div>
CSS
.container {
    display: flex;
}

.item {
    margin: 5px;
    border: solid 1px #00ff7f;
    background-color: #87c3fa;
}

 

itemクラスには、わかりやすくするための装飾を記載していますが、重要なのはcontainerクラスの「display: flex;」となります。

フレックスボックスを利用しない場合は、縦方向にコンテンツが羅列されますが、フレックスボックスを利用すると簡単に横並びレイアウトが実現できます。

CSSグリッドレイアウト(grid)とは

CSSグリッド・グリッドレイアウトは、近年注目を浴びているレイアウト手法です。今までは、一次元のレイアウトモデルであり、回り込みの制御を行わなければなりませんでした。

しかし、グリッドレイアウトでは、二次元レイアウトモデルを採用しています。

レイアウトの考え方

グリッドレイアウトは二次元レイアウトモデルを採用しており、今までの回り込み制御を行う一次元レイアウトモデルとは考え方が異なります。

フレックスボックスも該当しますが、今までの考え方はブロックを作成して並べ、回り込みを制御していました。

しかし、グリッドレイアウトでは、ブロックを作成して列や行方向に区切っていきます。

グリッドレイアウトでは、次の7つの概念を抑えておかなければなりません。

グリッドレイアウトの7つの概念
  1. グリッドコンテナ
  2. グリッドアイテム
  3. グリッドライン
  4. グリッドセル
  5. グリッドトラック
  6. グリッドエリア
  7. グリッドギャップ

グリッドコンテナ、グリッドアイテムは、フレックスボックスと同様に親要素と子要素の考え方です。

3~6の概念については、こちらの画像をご覧ください。

グリッドラインは、列(縦方向)は左側から、行(横方向)は上から順番に1・2・3~と数えていきます。

グリッドレイアウトでは、グリッドラインで要素を二次元的に分けることを覚えておきましょう。

また、グリッドギャップに関しては、グリッドトラック間の空白スペースを表し、「ガーター」とも呼ばれることがあります。

利用方法

グリッドレイアウトは、CSSで「display: grid;」を記載することで利用できるようになります。

あわせて、「grid-templete-columns」「grid-template-rows」によって、親要素の列・行を定義することで実現可能です。

HTML
<div class="grid-parent">
    <div class="child1">アイテム1</div>
    <div class="child2">アイテム2</div>
    <div class="child3">アイテム3</div>
    <div class="child4">アイテム4</div>
    <div class="child5">アイテム5</div>
    <div class="child6">アイテム6</div>
</div>
CSS
.grid-parent {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px;
    grid-gap: 10px;
}

.child1, .child2, .child3, .child4, .child5, .child6 {
    background-color: #7fffd4;
    border: dotted 1px #000;
}

 

このCSSの例では、横方向に1フレームずつ3列、縦方向に100pxずつ2行配置することを表しています。例によって「child」クラスには、わかりやすくするための装飾文が記載されています。重要なのは「grid-parent」クラスの内容です。

CSSのレイアウトに関する位置指定5種類

CSSでレイアウトを組む際には、要素の位置指定(position)についても理解しておくと役立ちます。代表的な5種類の位置指定について、簡単に表にまとめました。

位置指定の種類 意味・動き
静的指定(static) デフォルト値。特別指定することはない
相対指定(relative) 現在の位置を基準に「相対的」な位置を決める
絶対指定(absolute) 親要素を基準に「絶対的」な位置を決める
固定指定(fixed) 画面の決まった位置に固定。スクロールしても同じ場所にとどまる
粘着指定(sticky) 静的指定と固定指定を合わせた動きをする。指定要素までは静的指定のように動き、指定要素以降はスクロールしても同じ場所にとどまる

要素の位置指定は、画像の上に文字列を表示させたり、追従メニューを作成する際に利用されるものです。

それぞれの用途に合わせて、適した位置指定の種類を選択します。

この記事の中では詳しくは解説しませんが、CSSでレイアウトを組む際には、位置指定もよく利用します。

Webページのさまざまな要素は、フレックスボックスやグリッドレイアウトだけでは実現が難しい部分もありますので、あわせて覚えておきましょう。

横並びレイアウトを書いてみよう

ここまでの内容を踏まえて、実際にCSSでレイアウトを組んでみましょう。ここでは、グリッドレイアウトを使用した簡単な例を紹介します。

HTMLとCSSは、OSに付属のテキストエディタで記述できます。Windowsであれば「メモ帳」、Macであれば「テキストエディット」に、以下のコードをコピー&ペーストしてみましょう。

保存する際は、HTMLを「index.html」、CSSを「grid.css」として保存してください。

HTML
<!DOCTYPE html>
<html>
<head>
<title>グリッドレイアウト</title>
<link rel="stylesheet" type="text/css" href="./grid.css">
</head>
<body>

<div class="main-grid">
    <header>
        <h2>ヘッダー</h2>
    </header>
    <aside>
        <h3>左側メニュー</h3>
        <p>メニューの内容</p>
    </aside>
    <article>
        <h3>メインコンテンツ</h3>
        <p>メインコンテンツの内容</p>
    </article>
    <footer>
        <h2>フッター</h2>
    </footer>
</div>

</body>
</html>
CSS
.main-grid {
    display: grid;
    grid-template-areas:
    "header header"
    "left main"
    "footer footer";
    grid-template-columns: 1fr 3fr;
    grid-gap: 20px;
}

header {
    grid-area: header;
    background-color: #7fffd4;
}

aside {
    grid-area: left;
    background-color: #98fb98;
}

article {
    grid-area: main;
    background-color: #e6e6fa;
}

footer {
    grid-area: footer;
    background-color: #7fffd4;
}

 

保存した「index.html」をブラウザで開くと、グリッドレイアウトで構成されたページが表示されます。

グリッドレイアウトの簡単な例ですが、実際にHTMLやCSSを修正して、グリッドレイアウトの動きを確認してみましょう。

今回紹介しているグリッドレイアウトの例は、ほんの一例です。ほかにも、多くの構成要素があります。

まとめ:CSSの2大レイアウトを身に着けよう

CSSでレイアウトを組む際には、Flexbox(フレックスボックス)やCSSグリッド(グリッドレイアウト)を利用しましょう。

今回紹介した2つのレイアウト手法は、CSSを扱う上で覚えておきたいレイアウト手法です。

この記事で紹介した内容は、基礎的な部分だけであり、CSSのレイアウトは非常に奥が深いものです。

実際にコードを書いて試してみながら、CSSのレイアウトの組み方を学んでいくとよいでしょう。

はじめは難しく感じるかもしれませんが、試行錯誤を繰り返すことで身についていきますので、まずは今回紹介したサンプルコードを参考に、いろいろと試してみてはいかがでしょうか。

Kredo オンラインキャンプなら

新規CTA

プログラミング×英語を身につけてグローバルに活躍しませんか?

当メディアを運営しているKredoでは、プログラミング × 英語が学べる人気オンラインサービス『Kredoオンラインキャンプ』を運営中です。コロナ禍でもオンラインで、プログラミング×英語を身につけた卒業生は海外企業、外資系企業、グローバル企業への就職を果たしています。コロナ禍の今だからこそ、スキルを身につけ転職の準備をしませんか?

Kredo オンラインキャンプへ
  • ツイート
  • シェア
  • はてな
  • ポケット
この記事を書いた人
太田 ヨウタ
太田 ヨウタ

IT関連企業にてインフラエンジニア(SE)として官公庁や銀行などのシステム更改をメインに約10年従事。基本情報技術者・ネットワークスペシャリスト・情報セキュリティスペシャリストなどの資格も取得。その後、IT・Web専門ライターとして、プログラミング、ネットワーク、セキュリティ、AIなどの解説記事を中心に執筆している。「専門知識を初心者でも理解できるようにわかりやすく書く」ことを心がけている。

関連記事

  •  loading
    Web・プログラミング

    【IT転職成功した私が語る】progateが終わったらプログラミングスクール受講が効果的

    2022.06.08
  •  loading
    Web・プログラミング

    【2022年最新】フロントエンドエンジニアを目指せるおすすめスクール5選

    2022.05.16
  •  loading
    Web・プログラミング

    転職保証付きプログラミングスクールは危険!?口コミを元にリアルを解説

    2022.05.02
  •  loading
    Web・プログラミング

    主婦・ママが在宅で・スキマ時間でも学べるプログラミングスクール5選

kredo it 英語 留学

よく読まれている記事

  •  loading
    2022.05.25

    【6/23(木)~ 24(金)20:00 ~ 無料オンラインセミナー】プログラミング×英語を身につけろ!アフターコロナ時代を勝ち抜くキャリア戦略

  •  loading
    2022.04.19

    「好きなことを仕事に」IT初心者からプログラミング×英語を身に付けフリーランスエンジニアへ

  •  loading
    2021.07.08

    【7/4(月)~ 7/8(金)20:00 ~ 無料オンラインセミナー】プログラミング×英語習得で時代に左右されない海外フリーランスを目指す方法

  • Kredo CEO横田猛夫さん
    2019.06.26

    IT×英語を学ばなければ取り残される!Kredo CEOが日本衰退とIT業界の未来を解説

  • バックエンドエンジニアのコーディングのイメージ画像
    2019.06.05

    未経験でも習得できる実務レベルのプログラミングを学ぶコツを紹介!

IT留学オンライン
新規CTA

まずはお気軽にカウンセラーへご相談ください!

無料カウンセリングを予約する

IT×英語留学体験談

  • 10代
  • 20代
  • 30代
  • 40代~
  • 1〜4週間の短期留学
  • 5〜23週間の中期留学
  • 24週間以上の長期留学
  • WEBベーシックコース
  • WEBデザインコース
  • WEBデベロップコース
  • Ruby on Railsコース
  • AIコース
  • 英語留学コース

Kredo Blog

Tech 英語学習 セブ島・留学準備 キャリア Kredo
クレドページ
学校案内
  • Kredoの想い
  • Kredoが選ばれる理由
  • なぜ今、ITと英語なのか
  • 卒業実績
施設案内
  • 校舎・宿泊施設
  • セブ島・生活環境
留学準備
  • お申し込みまでの流れ
  • ご留学までの準備
  • 現地到着後の流れ
  • 留学中の1日のスケジュール
留学コース・料金[コース概要]
  • コース一覧
  • あなたに合ったコース選び
  • ITクラス・カリキュラム・教員
  • 英語クラス・カリキュラム・教員
  • 留学料金一覧
留学コース・料金[各コース一覧]
  • WEBベーシックコース
  • WEBデザインコース
  • WEBデベロップコース
  • Ruby on Railsコース
  • AIコース
  • 英語留学コース
  • 無料留学プログラム
  • 海外ITインターン留学(LIG)
  • 海外ITインターン留学(Sprobe)
  • 海外ITインターン留学(Alliance)
  • 親子留学 Kredo Kids
その他
  • Kredo Blog
  • Kredoスタッフ
  • 留学体験談
  • よくある質問
  • お問い合わせ
  • 法人のお客様
  • 会社概要
  • KREDO JAPAN株式会社
  • 特定商取引法に基づく表示
  • 採用情報
  • プライバシーポリシー
学校案内
  • Kredoの想い
  • Kredoが選ばれる理由
  • なぜ今、ITと英語なのか
  • 卒業実績
施設案内
  • 校舎・宿泊施設
  • セブ島・生活環境
留学準備
  • お申し込みまでの流れ
  • ご留学までの準備
  • 現地到着後の流れ
  • 留学中の1日のスケジュール
留学コース・料金 [コース概要]
  • コース一覧
  • あなたに合ったコース選び
  • ITクラス・カリキュラム・教員
  • 英語クラス・カリキュラム・教員
  • 留学料金一覧
[各コース一覧]
  • WEBベーシックコース
  • WEBデザインコース
  • WEBデベロップコース
  • Ruby on Railsコース
  • AIコース
  • 英語留学コース
  • 無料留学プログラム
  • 海外ITインターン留学(LIG)
  • 海外ITインターン留学(Sprobe)
  • 海外ITインターン留学(Alliance)
  • 親子留学 Kredo Kids
その他
  • Kredo Blog
  • Kredoスタッフ
  • 留学体験談
  • よくある質問
  • お問い合わせ
  • 法人のお客様
  • 会社概要
  • KREDO JAPAN株式会社
  • 特定商取引法に基づく表示
  • 採用情報
  • プライバシーポリシー
セブ島IT×英語留学の「Kredo」

14th Floor Central Bloc Corporate
Center Tower 1, Block 10, Geonzon St.,
Cebu IT Park, Apas Cebu City

セブ島医療専門の英語学校・看護留学の「HLCA」(姉妹校)

14th Floor Central Bloc Corporate
Center Tower 1, Block 10, Geonzon St.,
Cebu IT Park, Apas Cebu City

スクールやコースをもっと知りたい人へ 資料請求・お問い合わせ

  • fb
  • tw
  • ig
弊社顧問弁護士

Copyright© 2019 KREDO IT ABROAD INC. All rights reserved.