毎週恒例、HapInS塚本のテックブログ！
始まるよー！
冗談です(´・ω・)
HapInS Advent Calendar 18日目です。
今回もたまたま僕のターンなだけです。
皆様、前回の記事「HTML/CSSが苦手なそこのあなた！そう、あなたです！」は
ご覧頂いたでしょうか？
あの記事を読んでくださった方はある程度HTML/CSSが書けるようになったかと思います。
「全然分かんねえよ！」
「CSS書いたのに効かねえよ！」
「噓つき！ペテン師！」
という声もあるかと思います。
特に「CSS書いたのに効かねえよ！」ってやつ。
これは少し知識が必要になります。
なので今回のテーマは…
CSSが効かない原因についてです。
やっていきましょう。
CSSが効かない原因
いきなり答えを言ってしまうとCSSが効かない原因は大体以下のパターンです。
- 記述ミス
- 詳細度
- 仕様
- ブラウザ
聞きなじみのない単語もありますが一つずつ解説します。
記述ミス
ただの凡ミスです。
コードを確認しましょう。
単位は合っていますか？pxのはずが%になっていたりしませんか？
文末にセミコロンは書いていますか？
タイポしていませんか？
凡ミスなだけに未だに僕もやってしまいます…
詳細度
聞きなじみのない単語が来ましたね。
これはCSSの優先度、強さのことです。
大前提としてHTML/CSSはプログラミング言語と同じくファイルの上から処理されます。
なので後から書いたHTML/CSSの方が強いです。
以下の例では文字色を赤を設定、その後に青で上書きされています。
codepen.io
このことを頭に入れつつ他を見てみましょう。
おや？
一つ目の単語ですがHMTL上ではclass="hoge--important hoge"と書いてありますね。
hogeクラスが後に指定されているのでcolor: red;で上書きできるはず…
二つ目の単語もstyle="color: #00ffff;" class="hoge"と書いてあり、
同様にhogeクラスが後に指定されているのに何故…
そうです、これが詳細度です。
え？ピンと来ない？
分かりました、こちらをどうぞ。
* !important * style="~~~;" * id="" * class="" * HTMLタグ指定 * 後勝ち
このリストの上の行けば行くほど優先されます。
!importantが最強という事です。
これらを踏まえて先ほどのコードを見てみてください。
上記リストの優先度を理解していないと想定通りにCSSが効かないというパターンに陥ります。
ちなみにですが、!importantを上書きするには!importantを使用するしかありません。
他も同様にstyle="~~~;"を上書きするには!importantもしくはstyle="~~~;"を使用するといった具合ですね。
!important やstyle="~~~;"といった詳細度の高いCSSを乱用するとどのようなことが起きるか…
修正したはずなのに想定通りCSSが機能しないといった事態に陥りやすくなります。
なので基本的には使用しないのが良いですね。
だからといって詳細度の低いHTMLタグ指定でCSSを適用してしまうと…
影響範囲がとんでもなく広く関係ない部分にまでCSSが適用されてしまいます。
面倒ではありますが、しっかりとclass=""でクラスを付与しCSSを最低限のスコープ、適切なスコープに適用できるようにしましょう。
仕様
こんな事態に遭遇した経験ありませんか？
height: 100%を指定したのに高さが画面いっぱいにならない…
codepen.io
widthもmarginも定義したのに想定通りにならない…
codepen.io
これはそれぞれ定義したCSSの仕様です。
なので想定とは異なりますが挙動としては正しいです。
一つずつ見ていきましょう。
まずはheight: 100%です。
少し考えてみましょう、height: 100%と記述しましたが何を基準に100%なのでしょうか？
CSSで100%と書いた場合、heightに限らずwidthもそうなのですが親要素を基準に100%の領域を確保します。
親要素でheightが指定されていない場合、デフォルトのheight: autoが適用されます。
つまり親要素は内部のコンテンツ分の高さしか保持しません。
親要素の高さがコンテンツ分しかないのであれば子要素でheight: 100%指定をしても画面いっぱいの高さにならず先ほどの結果は仕様通りとなります。
次はwidthもmarginが効かない件です。
こちらもCSSの仕様です。
widthもmarginもinline要素には適用されません。
inline要素とはHTMLにおいて文章の一部を表すものになります。
例えば、spanタグやaタグ等ですね。
先ほどのコードの「hoge」という文字はspanタグで囲まれています。
という事はinline要素なのでwidthもmarginが効かないという事になります。
余談ですがHTMLで一番使われるdivタグはblock要素です。
block要素、inline要素に関しては解説するとそれだけで一つの記事になりそうなのでまたの機会に…
このように親要素を参照したり、block要素やinline要素といった様々な要因でCSSが想定通りに効かないという事があります。
こればっかりは経験するしかないです…
実装 → 詰まる → 調べる → 解決の繰り返しで覚えていくハマらなくなるしかないです…
ブラウザ
一番厄介な奴です。
そもそも定義したCSS自体がブラウザでサポートされていな場合ですね。
最近だとブラウザ毎の差異というのがほとんどなくなっているのであまり詰まることは無いかと思いますが、
ハマるととことん時間を持っていかれます。
そんな時は「（CSSプロパティ名）MDN」や「（CSSプロパティ名）ブラウザ」等で検索しましょう。
一昔前だとIEと旧edgeは特にハマることが多く、
IEと旧edgeの為だけに個別実装するといった事態も少なくありませんでした。
（現在はIEが滅び、edgeもchromeベースになったので気にしなくてよいです。）
個人的にはIE、旧edgeに次いでSafariが厄介なブラウザの印象で未だに開発対象ブラウザになっていることが多く結構警戒しています…
おわりに
先週に引き続きHTML/CSSについて解説してきましたがいかがだったでしょうか？
昨今のフロントエンドの開発ではReactやvue + CSSフレームワークを使用することが多く、
CSSを書く機会が減ったように思います。
とはいえ、0になった訳ではないのでCSSを書く際にこの記事で触れた部分を意識して頂ければ少しはハマる確率が減らせるかと思います。
おまけ
えー、メンバーから質問を頂きました。
Q 今からだとCSSとCSSフレームワークどっちを勉強すればよい？
A CSSフレームワークでいいと思ふ（塚本個人の感想です）
理由はCSSを習得していてもフレームワークを使うときはフレームワークの勉強するし、
素のCSSを書く機会減ってるし、それならフレームワークだけ学ぶ方が無駄な時間使わなくていいので。
まあ両方とも知ってるに越したことはないですが…
Q SCSSやSASSもあるけどCSSとの違いは？
A for文が使えたりする。コンパイルが必要。
正直最近は使ってないです。
以前までは入れ子にできたりCSSでできないことが多かったけど、
最近はあまりメリットを感じないです。
ただアニメーション関係でfor文で座標を規則的に指定したりCSSだけではできないことが出来たりするので、
オサレで動きのあるサイト作るなら使うかもしれないです。
