レスポンシブpc操作中

目次

幅と高さ
(width、height
など)のとこへ
画像
(フルードイメージ
など)のとこへ

基本

PC、スマホなど、異なる画面サイズに応じて、ページのレイアウト・デザインを調整すること。
ブラウザの横幅サイズから判断して、画面を切り替えていきます。

テキストや画像が多すぎる場合、スマホでは文字が溢れてしまうなどレスポンシブ化は難しくなる。なるべく余白を多くとる

大きい画像はスマホの3G/4G回線では読み込むのに時間がかかる。

メディアクエリ

CSS3の新しい要素。 webページの表示をデバイスに応じて切り替える機能のこと

「画面サイズの幅がこれだったら、このスタイルを適用」「横向き画面用のスタイル」など　
一つのCSSで複数の画面環境に対応することができる。

ブレークポイント 何px以上（または何px以下）なら、このCSSを適用という基準点のこと。

書き方

書き方は二つあります。
一つは、HTMLファイル内のhead内に書く方法です。 複数cssを用意して画面サイズによってcssを指定できます。
cssに記述する方法
@media の後に適用したいブラウザサイズ(クエリ)を指定します。
max-width:ブラウザ幅が指定した幅よりも小さい時に適用
min-width:ブラウザ幅が指定した幅よりも大きい時に適用
min-height:ブラウザの高さが指定した高さよりも大きい時に適用
max-height:ブラウザの高さが指定した高さよりも小さい時に適用

viewport

metaタグの一つ。表示領域を設定することができます。 　メタタグのページへ

外部リンク参考サイトさん viewportについてのサイトへ

書き方

HTMLファイルのheadタグ内に記述します
「name属性」を使い「content属性」を付けます

<meta name="viewport"content="width=device-width, サイズ">

複数のプロパティを指定する場合は、カンマ（ , ）で区切って記述します。

幅（width）と高さ（height）

幅や高さの指定はpxだとスマホでは大きすぎたりして、うまくいかないことがあり、％指定がおすすめ

max-widthとmin-width

widthを親要素として一緒に使うことが多い。

小さい画面では幅いっぱいに表示し、大きい画面では固定幅にする時などでwidthとmax-widthを使用します。

セレクタ{max-width: 数値px;}
セレクタ{min-width: 数値px;}

min-heightとmax-height

高さの最小値、最大値を指定する

セレクタ{min-height: 数値px;}

高さが数値より小さくならないようにする

セレクタ[max-height: 数値px;} 高さが数値以上大きくならないようにする

画像

「max-width: 100%;」を使い、画像が100%以上に広がらないようにする。

外部リンク参考サイトさん 画像のレスポンシブ

フルードイメージ 画像のサイズをブラウザのウィンドウ幅に合わせる方法。 cssだけに記述する。

HTMLでwidthとheightを記述しない。

img { width:100%; max-width: 100%; height: auto; }

確認

いろいろなスマホやブラウザのサイズ表示確認
Firefox
Google Chrome　デベロップツール(F12キー)→左上からサイズ選択。