CSS

レスポンシブデザインで便利なCSS[メディアクエリ・Flexbox・CSS Grid]

イケゾー
この記事は、こんな人におすすめ!
・レスポンシブWebデザインってなに?
・レスポンシブデザインのためのCSSを学習したい

このような疑問にお答えします。

本記事の内容

  • レスポンシブデザインとは
  • レスポンシブデザインで使うCSSを紹介

筆者情報

Ikezooo

 
  • Web制作フリーランス
  • ブログ3年目。
  • 執筆記事数200本以上
  • ブログ実績:最高15万円
  • SEO検定2級保有
  • Twitterフォロワー3,100人
   

レスポンシブデザインを実現するためのCSSを紹介します。
>>レスポンシブデザインとは

今回紹介するのは、メディアクエリ・Flexbox・CSS Gridです。
FlexboxとCSS Gridは、新しめの技術なので、押さえておきましょう。

それでは、どうぞ!

当ブログでは、WordPressテーマ 「ACTION(AFFINGER6)」 を使用しています。

レスポンシブデザインとは

現在のWebページは、レスポンシブデザインが当たり前になっています。

これは、さまざまなデバイスに合わせてデザインを変化させ、表示するデザインのことです。
詳しくはこちらをご覧ください。

このレスポンシブなWebサイトを制作するためには、CSSが必要になります。
今回は、そのCSSの種類について解説します。

今後のWebページ制作では、必須のテクニックですね

イケゾー

レスポンシブデザインで便利なCSS 3つ

これまでのレスポンシブCSSは、メディアクエリが中心でした。

それに加え、最近では便利なFlexboxCSS Gridが定番になってきました。
うまく併用してレスポンシブデザインを作成していきましょう。

今回は次の3つの基本を解説します。

  1. メディアクエリ
  2. Flexbox
  3. CSS Grid

メディアクエリ

メディアクエリ@mediaを利用すると、画面幅に応じて表示を変えることができます。

ブレークポイントを設定して、表示を切り替える画面幅を決定します。

スマホのタッチ操作と、PCのマウス操作の切り替えを同時に設定できます。

Flexbox

Flexboxは、要素を軸に沿って配置できます。

Flexboxの登場によって、要素を横並びに配置することが簡単になりました。

スマホでは縦並びにして、PCで閲覧するときには横並びに変更するといった用途で使います。

CSS Grid

CSS Gridは、行列にそって要素を配置することが可能です。

最初は、Flexboxとどう使い分けて良いか悩むかもしれませんが、これもまた便利なんです。
他の記事で紹介しますね。

Flexboxと異なるのは、基本は縦並びに配置にする点です。横並びに変更も可能です。

この3つを習得すれば、レスポンシブデザインは作れます

イケゾー

WordPressで高品質なホームページ制作します 初心者でも安心の「1ヶ月間無料サポート」付き!

まとめ

レスポンシブデザインを実現するためのCSSを紹介しました。

ポイント

・レスポンシブデザインは、CSSメディアクエリを使う

・便利なFlexbox・CSS Gridと組み合わせると良い

イケゾー
最後まで読んでいただき、ありがとうございました。
ご不明点やご意見は、コメントやTwitterにて、お寄せください 🙂
では、またお会いしましょう

  • この記事を書いた人

ikezooo

愛知県30歳のフリーランスエンジニア。 サイト制作とブログで生き抜く。 ブログでは、月10〜15万ほど稼いでいます。 SEO検定3級保有。

-CSS