プログラミングHTMLやCSSの学習をしていると、「CSSが思った通りに効かない・・・」ということってよくありますよね。学びたてのときは、CSSレイアウトあたりで苦戦することも多いです。そんな情報をまとめてみました。Chromeなど各ブラウザに搭載されている「デベロッパーツール」。HTML&CSS編HTMLやCSS、JavaScriptを使ってWeb制作・開発をするときに、なくてはならないのがデベロッパー(検証)ツール。HTML&CSS編をご覧になってみてくださいね!CSSがうまく効かない原因のパターン1:CSSの書き間違いそれではここからは、CSSがうまく効かないパターンと、パターン別対処法について紹介していきたいと思います!CSSがうまく効かない原因のパターンその1は、CSSの書き間違いです。CSSのプロパティや単位・値の書き間違いをしたり、存在しない値を入れていたりすると、デベロッパーツールで確認したときに、書き間違いを犯したCSSの部分に「黄色い警告と取り消しマーク」がつきます。line-heightというCSSプロパティを「line-haight」と書き間違えてしまったときなどが該当します。当該CSSに書き間違いがないか、プロパティ・値ともに確認をする。存在しない値、適用できない値を入力していないかを確認する。ように、単位なしで値を入力してしまう。漏れ、セミコロン(;)の漏れがある場合です。全角スペース挿入は、見た目では判別がつきづらく、わからないので注意が必要です。上記に掲載したのはAtomというテキストエディタのキャプチャですが、エディタの設定・プラグインの利用などによって余計な全角スペースも見つけやすくなるかもしれません!CSSファイル内に全角スペース挿入があったり、波かっこ({})の漏れ、セミコロン(;)の漏れがあったりすると、全角スペースや漏れがある部分の直前のCSSまでは普通に効いていたりするので、またまたミスを見つけるのがやっかいです。途中までCSSが効いているが一部CSSしか効いていない場合は、全角スペースの存在や波かっこ({})、セミコロン(;)の漏れを疑う。検索機能を使って、全角スペースを検索し発見するようにする。テキストエディタで全角スペースを表示してくれるプラグインがある場合は、利用する。ポイントは、「途中までCSSは問題なく効いている」という点でしょうか。指定したのにうまくCSSが効かない・・・」こんな時は、CSSセレクタの指定ミスをしている可能性があります。セレクタの指定ミスには、以下の2つのいずれかがほぼ該当します。セレクタの書き間違い存在しない場所や、意図と違う場所にセレクタが指定されてしまっているセレクタの指定ミスをしてしまうと、デベロッパーツールで確認しても、「おかしいな〜ここに自分が書いたCSSが適用されるはずなんだけどな〜」というボヤキがもれなくセットでついてきます。自分がCSSを指定したつもりの箇所に、自分が書いたはずのCSSがでてきません。自分がCSSを適用したはずのHTMLの箇所にCSSが全く適用されていない・デベロッパーツールで見ても表示されない時は、CSSセレクタの指定ミスを疑いましょう。取り違えていたり、id名やclass名を間違って記載していないか確認する。」などの入力漏れがないか確認する。兄弟セレクタや子孫セレクタの指定を交えたのであれば、当該HTML同士が兄弟要素や子孫要素の関係になっているのかどうかを確認する。セレクタ名の書き間違いがないかチェックするCSSがうまく効かない原因のパターン4:CSSはきちんと適用できているが、他のCSSの部分が上書きしており、思い通りにCSSが効かない次に想定されるCSSがうまく効かない原因パターンは、CSSの指定自体はできているが、他の箇所のCSSも当該箇所に適用されており、他の箇所のCSSが上書きをしてしまっているケースです。CSSには詳細度というものがあります。同じHTMLに対して、「#detail」というidセレクタと「.detail」というclassセレクタでCSSを指定した場合は、CSSの記述の順番に関わらず、「#detail」というidセレクタで指定したCSSの内容が優先的に適用されます。CSSの上書きによってCSSが意図した通りに適用されていない場合、単純にCSSの記述の順番を入れ替えれば直るのか、CSSのセレクタの指定の仕方を変更しなければならないのか、検討する必要があります。記述順を変えて上書きを防ぐ。セレクタの指定方法を変更する。そもそも、CSS設計や適用の仕方を見直す。CSSの上書きが起きてしまっているケースは、デベロッパーツールを駆使すれば、原因の特定をすること自体は簡単にできます!idを使ってCSSを指定していたりすると、CSSの上書き現象が頻発しやすいので、classを使ってCSSを指定することをお勧めします◎CSSがうまく効かない原因のパターン5:CSSの理解が間違っているこれまでご紹介したCSSがうまく効かない4つのパターンに該当しないようであれば、適用したCSSプロパティに対する理解が相違しているか、理解が足りていない可能性があります。プロパティの定義を再確認、学習してみる。有名なCSSバグに該当しないか等調べる。ちなみにCSSのバグを調べるときには、caniuse.comというWEBサイトでCSSプロパティを調べてみると便利です。Issues」という部分をチェックすると、バグ情報が掲載されている場合があります。–HTMLやCSS、JavaScriptなどをはじめとしたWeb周りの言語、プログラムは、メモ帳アプリケーション1つでも作ることができます。...記事を読むBASEのHTML編集appでデザインカスタマイズしたネットショップ制作検討時の注意点まとめ最近、無料でECサイト・ネットショップを作成できるサービス、BASE(ベイス)を触る機会がありました。BASE(ベイス)...記事を読むWordPressで現在のページに適用されているテンプレートファイルの確認方法WordPressって本当に便利だなぁって常々思うのですが、もっと効率的にできたらいいなと思うのがデバッグ。デバッグといっても色々な事象が...記事を読むJavaScript・requestAnimationFrameの基本について改めて理解してみるこんにちは!ケインコスゲです。JavaScriptのrequestAnimationFrameについて改めて理解を測ってみたいと思います。...記事を読む【HTML5】sectionとarticleの使い方・違いについて、Webサイトの使用実例から考えてみるこんにちは!ケインコスゲ(@keinkosuge)です。今日はHTMLのお話です。type=”number”の値を文字列ではなく数値として取得し扱うここのところ、プログラミング系の話を書いていませんでしたが、いきなりVue.jsの話でも書こうと思います。2015、17日目の記事です。Cloudを一番安く購入するならデジハリオンラインスクールだ!Web制作者に限らず、最近では何らかのソフトあるいはすべて一式のソフトをを所持している方も多いと聞く、Adobeのアプリケーションたち。...記事を読むCSSのtransitionとJavaScriptを使ってアコーディオンメニューを実装する時の注意点。heightの罠...こんにちは、ケインコスゲです。バス&終電の情報まとめ。