( ~ᐛ )~web制作勉強記録④~( ᐖ~ )

( ~ᐛ )~もくじ~( ᐖ~ )

・CSSの優先順位

・画面サイズ別のCSS設定の適用方法(メディアクエリ)

・ChromeやSafariのテキスト拡大機能の無効化

・CSSの優先順位

IDセレクタ＞クラスセレクタ＞条件付きセレクタ(条件が多いほど優先度が高い)

#title h1{～}
.midashi h1{～}
article h1{～}
h1{～}

(上にいく程優先順位が高くなっているように並べています( ᐛ ))

※同列の優先度のセレクタが複数存在していないので、ここでは並び順が優先順位に影響することはありません( ᐛ )

・画面サイズ別のCSS設定の適用方法(メディアクエリ)

例えばですが、ブラウザの横幅が「500px以上のとき」と「1000px以上のとき」でそれぞれ違うCSSを適用させたいとします。

適用させるためにメディアクエリを利用します。

ブラウザの横幅が500以上のときに適用させたいCSSの設定を以下の{}の中に入るようにします( ᐛ )

()の中はCSSを適用させるときの条件が入り、

今は「500px以上のとき」なのでmin-width:500pxとなっています( ᐛ )

@media (min-width:500px){～}

これでブラウザの横幅が500px以上のときは{}の中身のCSSが適用されるようになりました。

続いて、横幅が1000px以上でのCSSも加える場合も同じく、後から追加した1000pxの方の{}の中に適用させたいCSSを入れるようにします( ᐛ )

@media (min-width:500px){～}
@media (min-width:1000px){～}

これで、ブラウザの横幅が500px以上の場合と1000px以上の場合で適用させるCSSを分ける事ができました( ᐛ )

この例ではどちらも条件が1つのみでしたが、メディアクエリでは複数の条件を指定することも可能です( ᐛ )

・条件Aのとき

@media (条件A){～}

・条件Aもしくは条件Bのとき

@media (条件A),(条件B){～}

・条件Aかつ条件Bのとき

@media (条件A) and (条件B){～}

@media (条件A){@media (条件B){～}}

・ChromeやSafariのテキスト拡大機能の無効化

ChromeやSafariには小さい文字だと認識された場合テキストが自動で拡大される機能があります( ᐛ )

これらを無効にするにはtext-size-adjustプロパティでnoneと設定します( ᐛ )

body{
     text-size-adjust:none;
}

ただ、Safariでは画面を横向きにした際にも自動拡大機能があるため、無効化するには追加で先程のtext-size-adjustプロパティに「-webkit-」を付けたものも必要になります( ᐛ )

body{
     -webkit-text-size-adjust:none;
     text-size-adjust:none;
}

今回は以上です٩( ᐖ )۶

ありがとうございました(っ*´ω｀*c)