spanやaタグのCSSやclassが効かない原因と解決方法

CSSはhtml属性とは違い、基本的にどのhtmlタグにも指定することができます。

しかし、spanやaタグに指定したCSSが効かないことがあります。

spanやaタグのCSSやclassが効かない原因と解決方法を解説します。

【原因】インライン要素に効かないCSSがあるから

spanやaタグはインライン要素と呼ばれる要素です。

インライン要素とはテキストのように横に並ぶ要素です。

反対にdivのように縦に並ぶ要素をブロック要素と言います。

そしてインライン要素には効かないCSSがあります。

下記はよく使うCSSでインライン、ブロック要素に効く・効かない表です。

	a,span(インライン)	div(ブロック)
width	×	○
height	×	○
margin-top,bottom	×	○
margin-left,right	数値は○ autoは×	○
padding	△ （上下に重なる）	○
background	○	○
border	○	○

下記は実際に指定したときのブラウザの表示状態です。

<style>
.example>*{
    width: 200px;
    height: 100px;
    margin: 20px auto;
    padding: 10px;
    background: #b7c4dd;
    border: 1px solid #333;
}
</style>
<div class="example">
    <div>div</div>
    <a href="#">aタグ</a><br>
    <span>span</span>
</div>

【解決】ブロック要素にする

てっとりばやく解決するにはspanやaタグに「display:block」を指定してブロック要素にすることです。

下記はspanとaタグにdisplay:blockを指定した例です。

先ほどまで効いていなかったCSSが効いていることがわかります。

<style>
.example2>*{
    /*コレ*/display: block;
    width: 200px;
    height: 100px;
    margin: 20px auto;
    padding: 10px;
    background: #b7c4dd;
    border: 1px solid #333;
}
</style>
<div class="example2">
    <div>div</div>
    <a href="#">aタグ</a>
    <span>span</span>
</div>

CSS displayについて詳しくはこちら↓

ブロック要素にすることで元のspanやaとは違う性質になるので注意しましょう。

blockの代わりに「display:inline-block」を指定する方法もあります。

inline-blockでも「margin-left:auto」「margin-right:auto」は効きません。

その他CSSが効かない原因

colorが効かない場合はこちら↓

hoverが効かない場合はこちら↓

それ以外にも優先度のミスやスペルミスなどが考えられます。

下記を参考にCSSのよくあるミスをしていないか確認しましょう。

classが効かない原因

spanやaタグだからといってclassが効かないということはありません。

下記を参考にclassの使い方を間違えていないか確認してみてください。

【まとめ】spanやaタグのCSSが効かない原因

spanやaタグはインライン要素であり、インライン要素に効かないCSSがあるから。

→spanやaタグに「display:block」を指定してブロック要素にする。

以上、spanやaタグのCSSやclassが効かない原因と解決方法でした。