HTML/CSSコーディングでトラブルが発生した時の対処法

Web制作

 

こんにちは、タカキです。

 

HTML/CSSのコーディングをしてると、特に初心者のうちはうまくいかないことが多々あると思います。

「z-indexが効かない!」「position:absoluteがうまく配置できない!」「CSSそのものが効かない!」等々・・・

 

今回は、これらを解決するための手法を解説していきます。

結論としては、「起きた出来事をそのまま検索する」です。

 

また、記事の後半にありがちなトラブル・ミスもまとめたので是非ご覧ください。

 

以下、詳細に入ります。

 

トラブルの内容を言語化して検索する

まずは、トラブルの内容を言語化します。

難しそうに聞こえますがやってみると結構簡単で、起きた出来事をそのまま文字に起こすだけです。

 

例として、以下のHTML/CSSコードを見てみましょう。

 

このHTMLを開くと、以下のような結果になります。

HTMLのpタグで囲まれたテストの文字色をCSSで赤色に変えようとしてますが、色が変わってくれません

となると起きた出来事は「CSS 文字色 変わらない」あたりでしょうか。

 

これでもおそらく回答は出てくるのですが、より検索の精度を上げるために検証ツールで中身を確認してみましょう。

検証ツールについてはこちら↓

プログラミングに必須!Chromeの検証機能の便利な使い方を紹介

 

検証ツールで見た結果が以下のようになります

 

pタグにCSSそのものが適用されていないことがわかります。

これを言語化すると、「HTML CSS 適用されない」「CSS 効かない」あたりになりますね。

 

あとはこれをそのままGoogleの検索欄に打ち込んであげればOKです。

 

 

他の例でいうと、

例:「z-index: 100;」をCSSに書いたけど何も変わらない・・・

→「z-index 効かない」等で検索する

 

例:ページの右側に変な余白ができた・・・

→「HTML  右側 余白」や「ページ 右側 余白」等で検索する

 

このように、とりあえず起こった内容をそのまま検索してみましょう

Googleは検索が優秀なので、割と適当に検索しても案外答えを弾き出してくれます。

 

HTML/CSSのコーディングはそこまで複雑なものでもないので、自分が抱えたトラブルはだいたい誰かしら経験していて、ネット上に発信してくれています。

 

つまり、ググれば大抵のことは解決するので頑張って検索してみましょう!

 

※おまけ:jsやjQueryが効かない場合

jsやjQueryが効かない場合、コードミスによるエラーが発生している場合があります。

その場合は検証ツールからエラーを開いて、エラー文をコピペしてそのまま検索すると答えが出てくることがあります

 

検索してもわからない場合

検索の仕方がどうしてもわからない、検索しても出てこない場合があります。

この場合、HTMLの構造上の問題であることが多く、自分の理解度を大きく上回っているため一旦置いといて勉強し直すのをおすすめします。

 

ただ、どうしても解決したい・・・となったなら、最後の手段として有識者に質問しましょう

プログラミング質問の専用サイト「teratail」というものがあります。

https://teratail.com/

 

エンジニア専用の質問サイトなので、yahoo!知恵袋のような総合的な質問サイトより質が高く適切な回答が望めます。

質問にもテンプレートが用意されており、初心者の方にも使いやすくなっているためおすすめです。

 

よくあるトラブル

HTML/CSSのコーディングでありがちなトラブルをまとめました。

コピペなり自分なりにまとめて、検索前にすぐ見れるようにしとくといいかもです。

 

ページレイアウトが崩れている

・閉じタグ(</div>など)が抜けてる

 

ページ全体に余白が入る

・bodyにmarginが入ってる(対処法:body{margin:0; padding: 0;}を記載しておく)

 

ページの右側にだけ余白が入る

・一部の要素が大きいor長すぎてはみ出ている(対処法:折り返し表示やoverflow: hiddenなど)

 

レスポンシブ表示にならない

・viewportが指定されていない

・メディアクエリのandの後ろにスペースがない
例:

×@media screen and(min-width:768px){}

○@media screen and (min-width:768px){}

 

CSSが適用されない

・パスの記述を間違えている

例:
×<link rel="stylesheet" href="style.css">

<link rel="stylesheet" href="css/style.css">

 

・クラス名を間違えている

・idとclassを間違えている

・idの前の#、classの前の.(ドット)が抜けている

・セレクタやプロパティのスペルミス(×heiht→○height 等)

・セミコロンが抜けてる

・閉じ括弧が抜けてる

・タイプミスで変な文字やスペースが入ってる

・優先順位が負けてる

例:<p class="text">test</p>のとき

p{ font-size: 20px !important}

.text{ font-size: 16px;}

で、pタグのfont-size:20pxが優先されてしまっている

 

CSSが効かない場合、コードを検証してくれる「W3C CSS 検証サービス」を使用する手があります

https://jigsaw.w3.org/css-validator/

自分で見つけるのが難しかったらこちらを使ってもいいですね。

 

また、閉じ括弧やスペルミスはテキストエディタによってはエラー表示を出してくれるので、エディタ側に頼るのもありです。(Brackets、VScodeあたりは初期状態からこの機能を搭載してます。)

 

まとめ

HTML/CSSのコーディングでトラブルが起こった時は、

・何が起こっているかを把握し、言語化する

・トラブルやミスを経験し、自分の中でパターン化する

この2つを積み重ねていけば、仮に何か起こったとしてもすぐ解決できるようになります。

是非試してみてください