見出し画像

HTML・CSSの備忘録②

ZOE

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

　デバイスや画面サイズによってコンテンツのレイアウトを調整するためのもの。タブレットやスマートフォン表示に対応したサイトの制作では必須の技術です。

メディアクエリ

　ブラウザの画面サイズに応じてCSSのスタイルを設定する手法です。

/* stylesheet.css */

@media(条件)　{
 /* 適応したいCSS */
}

 　メディアクエリの条件には、CSSを適応したい幅を指定する。max-width(最大幅)とmin-width(最小幅)が指定できる。


@media(max-width: 1000px ) {
 /* 幅１０００pxの時に適応したいCSS */
}
h1 {
 color: red;
}

@media(max-width: 1000px ) {
 h1 {
  color: blue;
 }
}

レイアウトの崩れを修正する

　box-sizing: border-box; を適応することでレイアウトを維持することができます。

.item {
 width: 25%;
 padding: 15px;
}

　上記の場合、要素の幅＝ width ＋ padding となるので、 widthで指定した25％を超える幅になってしまいます。box-sizing: border-box; を適用することで、widthにpaddingやborderの値を含めることができレイアウトを維持することができます。
　box-sizing: border-box; を適用する際は、*(アスタリスク)に対して指定することが推奨されています。*はすべての要素に対してCSSを適用したい場合に用います。border-boxをすべての要素に対して適用することで、レイアウトを管理しやすくなります。

/* HTML全体に適用する　*/

* {
 box-sizing: border-box; 
}