CSS display:blockなどdisplayを解除する方法
display:blockは要素をブロック要素に強制的に変更できるCSSです。
しかし、元に戻したいときがあるかと思います。
displayを解除する方法を解説します。
【方法1】元のdisplayの値で上書きする
残念ながら「これを指定すれば元に戻る」というCSSや値はありません。
元のdisplayの値で上書きしましょう。
例えばaタグをいったんdisplay:blockにした後に元の要素に戻すときはdisplay:inlineで上書きします。
下記はよく使うhtmlタグのブラウザでのdisplay初期値一覧です。
display | htmlタグ |
---|---|
block | div,p,h1,h2,h3,h4,h5,h6,ul,ol,form,option,main,header,footer,section,nav,article,aside,body,html |
inline | a,span,img,iframe,video,label,br |
inline-block | input,textarea,select |
list-item | li |
table | table |
table-row-group | tbody |
table-row | tr |
table-cell | td,th |
none | head,style,script,meta,title,link |
displayは多くの値がありますので下記記事よりご確認ください。
【注意】display:initialはinlineになる
「initial」はデフォルトに戻すCSSの値です。解除にも使えます。
ただし、displayにおいてinitialを指定するとhtmlタグに関わらず すべてinline要素になります。
下記は「div,a,span」に「display:initial」を指定した例です。
<style>
.example{
/*コレ*/display: initial;
border: 1px solid #999;
width: 100px;
}
</style>
<div class="example">div</div>
<a href="#" class="example">aタグ</a>
<span class="example">span</span>
すべて横に並んでおり、かつwidthが効いていないことからinline要素であることがわかります。
displayにおいてinitialは使わない方がいいでしょう。
また、initialはdisplayに限らず どのCSSプロパティにも使えますがIEでは使えません。
下記記事で詳しく解説します。
CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。
↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓
↑「副業してもう少し稼ぎたい!」というかたのために副業の方法も解説しています。
【方法2】メディアクエリで条件指定
これは解除・初期化というより、特定の状態の時だけCSSを指定し、それ以外のときは通常のCSSでいる、というものです。
<style>
@media(min-width:801px){
a{
display:block;
}
}
</style>
上記の場合はブラウザの幅が801px以上の時、つまりパソコン版のとき、aタグをdisplay:blockにするというものです。
そしてブラウザの幅が800px以下のときはこのCSSが無視され通常の状態つまりインライン要素になります。
【まとめ】displayを解除する方法
- 元のdisplayの値で上書き
- メディアクエリで条件指定
以上、CSS display:blockなどdisplayを解除する方法でした。
「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。