~パンピーサラリーマンの為の人生逆転ブログ~

【CSS】@mediaとは? ~指定された条件の時にCSSを適用する方法~ | MUKKUN QUEST
MUKKUN QUEST     

 

【CSS】@mediaとは? ~指定された条件の時にCSSを適用する方法~

HTML&CSS

【CSS】@mediaの解説です。読み方は「メディアクエリ」
指定された条件の時にのみCSSを適用する方法を知りたい方はこちらで解決します💡
具体的には、タブレットサイズ、スマホサイズに適応できるサイト【レスポンシブデザイン】を作りたい方はこちらのページであらかた解決します。

スポンサードサーチ

【CSS】@mediaとは? ~指定した条件の時のみCSSを適用する方法~

具体的に解説していきます。

【実例】@mediaはこう打てば、こうなる


☝このように打つことで、1000px以下の画面幅の時に、h1要素の色を青色に変える。
という指示になります。

主にタブレットや、スマホで画面を見た時の型崩れを防ぐ為に使用するタグです。

【使い方】@mediaは実際にこう使う

まずは条件を指定する

上の画像の通りですが、@mediaの後に、半角カッコで条件を指定します。
※通常のCSSと違い、1000pxの後にセミコロン(;)は付けないので注意

条件のカッコの中で、いつも通りにCSSあてる

画像の通りですね。あとは、普段通りにCSSを当てるだけです。ちなみに、この画像の内容は【最大1000pxまでの画面幅の時(1000px以下の画面幅の時)、h1タグの文字の色を赤にする】です。

その他の条件

この画像の【min-width: 100px】では、最小100pxまでの画面幅(100px以上の画面幅)の場合という条件になります。

【特徴】@mediaの特徴

●他のCSSとは大きく異なるタイプのCSSなので、逆に特徴と言われても困るのですが、今の時代レスポンシブ対応(タブレットやスマホの時にしっかりサイズ等が調整される設定)がとれていないサイトは通用しないので、必ずマスターした方が良いです。

【注意】@mediaを使う時に起こりやすいミスの事例

●先ほども触れましたが、通常のCSSとは違い後ろにセミコロン(;)をつけないので、注意が必要。

【応用】レスポンシブデザイン仕様にする時のポイント

viewportを設定する

これは定型文として、HTMLの< head >内に打ち込みましょう。記憶する必要は無いので、こちらをコピペすることをオススメします。

See the Pen bGNgwyL by 勇者むっくん@人繋ぎの大秘宝Lv2.5 (@mukkun_quest) on CodePen.

レスポンシブデザイン専用のCSSを用意する

これは、絶対ではありませんが、間違えやすいので専用のCSSを用意するのが主流です。こちらも、HTMLの< head >内に定型文のようにコピペすることにしちゃいましょう💡
※その際は、かならずviewportよりも下に打ち込みましょう。

See the Pen vYEyawB by 勇者むっくん@人繋ぎの大秘宝Lv2.5 (@mukkun_quest) on CodePen.

複数コンテンツがある時の設定

引用:Progate

画像のように、横並びに複数のコンテンツを用意しているような場合、閲覧する媒体が変わると間違いなくデザインが崩れるので、それぞれのサイズを25%から50%/100%などに切り替え、調整する。

widthを%で指定した時に、padingとborderも範囲内に含める方法

画像の通り、幅を指定している要素のCSSに打つことで、paddingとborderも範囲に含めて、%で分割する仕様になります。
※marginは含めることができません。

子要素にfloatの要素しか無い時に、親要素が高さを得る方法

これは、子要素がいくつかのコンテンツの集合体である、上記のProgateの例のような場合に、親要素に高さを指定することで背景色などがズレてしまうのを防ぐのに使います。

親要素の高さをpxで指定した場合

子要素が1行の時に丁度良いサイズに指定すると、タブレットやスマホサイズになった時に高さが足りなくなってしまいます。

親要素の高さを削除した場合

floatの要素は「浮いている」という特性があるので、子要素の無い親要素は高さを持つことができません。ですが、大抵の場合左か右に並べる時に「float: right」などを使ってしまいますよね。

floatのまま「浮いている特性のみ」削除すれば解決する


その方法は、まずfloatが付いている子要素と同じ高さに、👆こちらのようにHTMLを打ち込む。要は、clearという名前の付いた、カラの要素を作るということです。


次に、CSSで👆こちらの画像のように打ち込むことで、floatの浮いた特性のみ削除できます。画像ではclear: leftとなっていますが、これは子要素がfloat: rightであれば、rightに変える必要があります。

大きすぎる画面を想定した設定

引用:Progate

👆こちらの画像の通りですが、あまりに大きい画像で横幅を%で4分割しても、見栄えが悪いケースもあるので、最大の横幅を決めておき、その幅に対してどのくらいという設定もできます。

ヘッダーのメニューをアイコンに変更する方法

スマホの画面サイズでは、横並びに沢山のメニューを表示することは難しいので、アイコンを用意して、そこをクリックすることでメニューが出てくるようになっているサイトはよく見かけますよね。

まずは、アイコンを用意する


👆ヘッダーの中に、このようにspanタグを入れ、フォントアウェサムでアイコンを用意すれば、まずは形だけのアイコンが完成します。

アイコンにCSSを付加して、形を整える


フォントアウェサムのアイコンは、CSSで色を変えたりできるようなので、👆の画像のように、形を整えましょう。

スマホの時だけ表示する設定

まず、デフォルトの時には表示されないよう【display: none】で表示を消しておきます。


次に、スマホ用の【@media】の中で👆こちらのように打ち込むことで表示されるようになります。
実際に、その中にメニューを入れる作業はjQueryなどを用いて設定することになります。