1. TOP
  2. WEBサイト制作
  3. CSSトレーニング①「レスポンシブで崩れにくいレイアウトの基本」

CSSトレーニング①「レスポンシブで崩れにくいレイアウトの基本」

 2018/03/26 WEBサイト制作 コーディング Fumio Sakurai
この記事は約 7 分で読めます。 760 Views

CSSトレーニング vol.01「レスポンシブで崩れにくいレイアウトの基本」

この章で学ぶこと

  1. Positionを使ったレイアウト配置を理解する
    (relativeとabsoluteの違い)
  2. width・heightの設定の仕方
  3. 要素を並べる方法
    (float → flex-boxレイアウトへ ※次講で解説)

主に使うタグ

【HTML5】

  • header
  • main
  • aside
  • footer

【CSS】

  • position(relative, absolute)
  • float(left, right) → 覚えなくていいです。
  • display(flex, block)
  • clear(both)
  • width
  • height
  • background-color

デモページ(PCで別ウィンドウ表示を推奨)

https://stakeholdersuccess.com/web_training/sec_01/

 

サンプルコード(html)

 

サンプルコード(CSS)

上記のデモページを開いて、ブラウザの幅を縦横に動かしてみてください。

ブラウザ内の表示エリアに追随する形で、四つの要素が動いていると思います。
(header:緑、main:赤、aside:青、footer:オレンジ)

レスポンシブデザインにおいては、ブラウザの幅が変わったときにどのような表示をさせるのかを考えながらコーディングを進めていくことが重要です。

その際に重要になる要素が大きく3つあります。

  • Position(relative・absolute)
  • 縦横(width・height)の単位指定
    (px, vw/vh , %)
  • float or flex-box

①positionプロパティ(relativeとabsolute)について

Positionプロパティは、要素をどのように配置するのかを指定する最も重要な要素です。

以下のようなケースでよく使います。

  • 一部の要素だけを動かしたい
  • 複数の要素を隙間なく埋めたい(上記コード例)
  • 要素の上に要素を重ねたい(次項で解説します)

それぞれの細かい解説については、以下のサイトにまとまっているのでここでは割愛します。

【サルワカくん】 CSSのpositionを総まとめ!absoluteやfixedの使い方は?

上記サイトで解説されているfixedプロパティについては、iOS(iPhoneやiPad)での表示不具合が多発するため、別の機会に回避策を解説します。

表示が思い通りにいかないケースは大きく以下の3つです。

  • 基準点となる親要素にrelative指定をし忘れている
  • top・left・bottom・rightのうち2要素と組み合わせて場所指定するべきなのに、1要素しか設定していない場合。
  • 3つ以上要素を指定していて、全ての条件を満たすことができない場合などがあります。(最後に指定されたものから優先適用されます)

CSS習得の最短の道は「習うより慣れよ」です。

サンプルページを参考に、自分でパラメーターをいじってみて、表示がどう変わるかを試してみてください。

②幅と高さの指定(width・height)

全ての要素は、幅と高さを指定することができます。

レスポンシブデザインを行う上で非常に重要なのが、この幅・高さ指定の方法です。

基本的な指定の仕方は以下の3つを覚えておけば大丈夫です。

  • px(ピクセル)での指定
  • %(割合)での指定
  • vw / vh での指定

下にいくほど最近になって使えるようになった指定方法です。

サイトの基本的な単位をpx(ピクセル)といい、最小単位は1pxです。

pxでの指定は「絶対値指定」となってしまうため、レスポンシブデザインをする際には、%やvw/vhを使います。

%での指定は、親要素の幅や高さを基準に値を算出するのに対して、vw(view width)やvh(view height)は、ブラウザの画面幅や画面高さを基準に値を算出します。

レスポンシブデザインについて

レスポンシブデザインについては、上記の記事でも解説しましたが、スマホなどの画面幅を基準にデザインを考える必要があるため、vwやvhの使い方にもしっかり慣れていきましょう。

③要素を並べる方法(旧式)※floatの利用

本講のサンプルで作成したページは「旧式」(IE10以前でも表示可能)の今までよく使われてきた方法で作成しました。

どこが旧式かというと、「main」と「aside」を横に並べるのに、floatプロパティを使っていることです。

CSS3が普及する前(flex-box登場前)では、上記のサンプルのようにfloatを使って作成していました。

しかし!この方法は最早、時代遅れです。

なので、これからコーディングを覚える皆さんは、あまり覚えてなくていいです。

float プロパティに置き換わった、flex-boxについては、色々な実装例を出しながら次項で解説します。

floatを使わないほうがいい理由は以下のものです。

  • clearfixとセットで使わないと、floatプロパティの指定が解除されない
  • floatはブラウザごとに表示が崩れやすい。

 

本日はここまで。

次回は、flex-boxの活用方法と、レスポンシブデザイン用のメディアクエリについて解説します。

Make the world better place

シェア大歓迎です!

 

 

\ SNSでシェアしよう! /

Stakeholder Successの注目記事を受け取ろう

この記事が気に入ったら
いいね!しよう

Stakeholder Successの人気記事をお届けします。

  • 気に入ったらブックマーク! このエントリーをはてなブックマークに追加
  • フォローしよう!

    この記事をSNSでシェア

ライター紹介 ライター一覧

Fumio Sakurai

Fumio Sakurai

株式会社NEXT Innovation 代表取締役
小3からプログラミング(Basic)を学び、法学部 → 財務系コンサル → 外資系生保営業 → ITスタートアップ起業という異色の経歴を持つ。
職種は「ビジネスデザイナー」
事業の戦略・戦術立案から実際の運営支援、マーケティング、ブランディング、社員育成、業務改善、システム制作を行う。

おそらくアスペルガー症候群であり、常にやりたいこと・アイデアが止まらなくなってしまうため、一社専属での会社員を勤められず、起業に至った。
現在5社の顧問を行いながら、コンサルティング・ブランディング指導を行なっている。

この人が書いた記事  記事一覧

  • リスクを恐れ、縛られて生きますか? ー 「自分の人生を自分でコントロールする生き方」

  • 「投資」していますか?継続的に売上を上げ続ける会社の特徴について

  • CSSトレーニング②「Flexboxを使い倒して、PC・スマホの表示切り替えを簡単に」

  • AdobeMUSEの開発終了にみるWEB制作の潮流

この記事もあわせて読みたい!

  • AdobeMUSEの開発終了にみるWEB制作の潮流

  • 伝わりやすいサイト作りのための「戦略」

  • 最短で「今どきの」サイト制作スキルを身につける手順(随時更新)

  • クライアントとのイメージのズレをなくす「ディレクション」と「プロトタイピング」

  • CSSトレーニング②「Flexboxを使い倒して、PC・スマホの表示切り替えを簡単に」

  • 【即、実戦で使えるサイト制作】htmlタグは用途別にこう覚える!Part 2〜レイアウト編〜