さいごに
なるべくメディアクエリを使わないでどこまでできるかを試してみました。
個人的に感じた難しかった点…
・デザインカンプを忠実に再現するのが難しい。手間がかかりそうに思う。
・どこまで相対値で指定すればいいのかわからなくなってきた。
・メディアクエリと合わせて書くときに、ブレイクポイントをどう調整するのか。
メディアクエリを使わなくなることはなさそうですが、
レスポンシブ対応のためのプロパティがいくつも用意されていることがわかり、
実際に使ってみてとても勉強になりました。
おまけ(PHPで共通部分を外部ファイル化)
ヘッダーとフッターを各ページで使い回すため、外部ファイル化して読み込んでみました。
【HTMLの記述例】
ヘッダーの場合 <?php include(dirname(__FILE__)."/inc/header.php"); ?> ・<header>~</header>間のコードのみ別のファイルにします。 ・incというフォルダを作成し、その中に保存します。 ・HTMLでヘッダーの記述があるべき箇所に、上記のコードを記述します。
参考サイト・書籍
- しっかり理解しておくと便利なCSSのテクニック、minmax()関数の使い方【minmax()】
- CSS aspect-ratioプロパティの使い方、レスポンシブやレイアウトシフトで大活躍【acpect-ratio】
- メディアクエリを使わずにcss1行だけでフォントサイズをレスポンシブ対応にする方法【CSS】【font-size】
- flex-basisとは?widthとの違いや効かないときの対処を解説【Flex-basis】