display:blockが効かないとき確認すべき点2020年11月23日display:blockを利用するとaタグやspanタグimgタグなどのインライン要素をブロック要素にすることができます。display:blockが効かないとき確認すべき点を解説します。目次buttonタグinputタグで横幅いっぱいにならない他のdisplayが指定されていて優先度で負けているスペルミス【まとめ】display:blockが効かないときbuttonタグinputタグで横幅いっぱいにならないdisplay:blockを指定するとブロック要素になります。ブロック要素の特徴と言えば「横に並ばない」と「横幅いっぱいになる」です。buttonタグinputタグにdisplay:blockを指定すると横には並ばなくなるのですが、「横幅いっぱい」にならなくなります。class="block"><span>インライン要素</span>横幅いっぱいにする場合はwidthを指定しましょう。class="block2"><span>インライン要素</span>width:100%だけだとpaddingやborderの分はみでてしまうので、box-sizing:border-boxも指定します。横並べにするためにwidthをぴったり指定したのにborderやpaddingをつけたら崩れた。内側に指定して崩れないようにしたい。そんなときに使えるCSSで外側にあるborderを内側に指定する方法を説明します。この記事を読むCSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。この記事を読む他のdisplayが指定されていて優先度で負けているdisplay:noneやdisplay:inline-blockなど、display:block以外の要素が指定されており、かつ、優先度が高い場合、display:blockは効かなくなります。疑似クラス、属性セレクタなど含めたCSSセレクタの優先順位と点数計算方法を解説します。この記事を読むこの状態になっているか確認するにはDevToolsを使いましょう。CSSが効かないときの原因特定方法【DevToolsの使い方】CSSの一部が効かない!何が悪いのかわからない!という方へCSSが効かないの原因特定方法を説明します。この記事を読むスマホの時だけ「display:block」にしているなどのときはスマホ幅にしてから確認しましょう。PCでスマホ表示に切り替える方法【Chromeを使おう】スマホサイト開発や他社のスマホ対応動向確認のときPCで確認できれば楽です。PCのchromeでスマホ画面を表示する方法を紹介します。この記事を読むDevToolsで確認し、下記のように「display:block」に打消し線が引かれ、「display:inline」などが普通に表示されているなら「他のdisplayが指定されていて優先度で負けている」状態です。対応方法:display:blockの優先度を上げる優先度を上げる方法はいろいろありますが、てっとり早いのは「!important」をつけることです。したらどうなるのか、注意点・効かないときの確認方法などを徹底的に解説します。この記事を読むこれでdisplay:blockが効くようになります。スペルミス次に考えられるのはスペルミスなどです。DevToolsで「display:block」が表示すらされないときはスペルミスしており、任意のセレクタにCSSが指定できていない可能性があります。「background:red」などわかりやすいCSSを指定してみて、セレクタ自体が間違っていないか確認しましょう。主なミスはこちらにまとめてあります。CSSが効かない原因と回避方法【よくあるケアレスミス】CSS効かない、htmlが崩れたときは以下に当てはまらないかチェックしてみてください。この記事を読む【まとめ】display:blockが効かないときbuttonタグinputタグで横幅いっぱいにならないwidth:100%とbox-sizing:border-boxを指定しましょう。他のdisplayが指定されていて優先度で負けているdisplay:inlineなどが指定されていないか確認しましょう。!important;を指定してみましょう。スペルミス他のCSSが効いているかなど確認しましょう。display:blockが効かないとき確認すべき点でした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。