原因不明？！HTMLとCSSに関してご相談いただく事の多かった3つの事例と解決法

弊社で作成したホームページや、依頼主の方が別で管理されていたりするホームページに関して、ご自身で更新されることもあるのですが、その際にご相談いただく事の多かった事例と解決方法をメモ。

ご相談事例

文字の頭に不要な余白が表示される。

HTMLの半角・全角スペースを見直す。

HTMLタグを記載される際に囲まれている範囲を分かりやすくするため、文字の字下げ（インデント）を行われる方に多いのですが、字下げの際に半角スペースに混じって「全角スペース」を打ち込まれていて余分なスペースが発生していることがあります。
タグ間の頭の半角スペースは文字（余白）と認識しませんが、全角スペースは文字として認識されます。
見た目では判断しにくいのですが、一文字づつ入力し直す事で解決できる事があります。

//問題のあるコード
<p>私たちのホームページ制作会社には営業専門の担当者がおりません。<br>
＿_お打ち合わせの段階から制作の知識のあるものがお伺いし、ホームページの構成や仕様、コンテンツの内容、今後の更新に至るまで、様々な可能性を考慮したうえで、最適なホームページをご提案しています。</p>

//改善後のコード
<p>私たちのホームページ制作会社には営業専門の担当者がおりません。<br>
___お打ち合わせの段階から制作の知識のあるものがお伺いし、ホームページの構成や仕様、コンテンツの内容、今後の更新に至るまで、様々な可能性を考慮したうえで、最適なホームページをご提案しています。</p>

参考例では分かりやすくアンダーバー(_)を記載しています。

ボタンが見えているのにクリックできない

CSSの「z-index」を使用して階層の順序を見直す。

CSSでネガティブマージン（マイナス方向への余白）や「position」プロパティを使用して配置されている場合に発生することが多いです。
HTMLは下の行に書かれているものが上の階層として配置されます。
背景色に透明なオブジェクトを使用している場合、分かりにくいのですが、ボタンの上に別の対象物が重なり、ボタンをクリックできない状態になっていることがあります。
ボタンに「z-index」を付与して階層を上にすることで問題を解決できることがあります。

<div class="btnarea">
<a href="○○○○">ボタン</a>
</div>
<div class="lead">
<p>私たちのホームページ制作会社には営業専門の担当者がおりません。<br>
   お打ち合わせの段階から制作の知識のあるものがお伺いし、ホームページの構成や仕様、コンテンツの内容、今後の更新に至るまで、様々な可能性を考慮したうえで、最適なホームページをご提案しています。</p>
</div>

//問題のあるコード
.btnarea {
	text-align: center;
}
.lead {
	padding: 1rem 0;
	position: relative;
}
.lead::before {
	content: "";
	display: block;
	background: url(○○○○);
	width: 100%;
	height: 1rem;
	position: absolute;
	top: -1rem;
}

//改善後のコード
.btnarea {
	text-align: center;
	position: relative;
	z-index: 1;
}
.lead {
	padding: 1rem 0;
	position: relative;
}
.lead::before {
	content: "";
	display: block;
	background: url(○○○○);
	width: 100%;
	height: 1rem;
	position: absolute;
	top: -1rem;
}

CSSを設定しているのに色が正しく反映されない

CSSの優先順位を見直す。

CSSの反映には「ID（id）　＞　クラス（class）　＞　要素（タグ）」の優先順位があり、更にその中でもCSSファイルの後の位置に書かれたものが有効となります。
指定先の要素の色やサイズなどが競合した場合に優先順序を間違わなければ、希望通りに反映されることができるのですが、分かりにくいものとして「クラス内の要素　＞　クラス」が生じる場合もあります。
この場合は対象のタグにIDを付与するか、または対象タグの親要素にクラスを指定した形で記載する事で解決できる場合があります。
「!important」を用いて強制的に順位を高める方法もありますが、乱用すると制御が難しくなるのでお勧めはしません。

<div class="comment">
<p>私たちの<span>ホームページ</span>制作会社には<span class="style01">営業専門</span>の担当者がおりません。<br>
   お打ち合わせの段階から制作の知識のあるものがお伺いし、<span>ホームページ</span>の構成や仕様、コンテンツの内容、今後の更新に至るまで、様々な可能性を考慮したうえで、最適な<span>ホームページ</span>をご提案しています。</p>
</div>

//問題のあるコード
.comment span {
	color: #00f;
}
.style01 {
	color: #f00;
}

//改善後のコード
.comment span {
	color: #00f;
}
.comment .style01 {
	color: #f00;
}

まとめ：HTMLとCSSの課題をスムーズに解決するために

HTMLとCSSに関する問題は、初心者から経験者まで誰もが直面するものです。
弊社でも解決に向けてサポートしておりますが、より効率的なコーディングができるようになるために、この記事が課題解決に少しでもお役立てますと幸いです。