【CSS】 100％指定したdisplay: inline-block; の横幅を元に戻す方法

2024年10月30日

答え

width:auto;にすれば元に戻る

例えば、下記のようなテキストリンクをborderで囲むデザインで、スマホでは横幅は100％にして、タブレットやPCではテキストサイズに合わせたいとします。

この場合まずスマホではaタグやspanなどインライン要素を幅いっぱいに広げたい場合、display: inline-block; にして、横幅指定をします、

<a class="link" href="https://dominantmotion.com/" target="_blank" rel="noopener">株式会社ドミナントモーション</a>

　a.link{
  display: inline-block;  
  width:100%;
  margin: 1rem 0;
  border: 1px solid #333; 
  padding: 1rem 1rem 1rem 70px;
}

こんな感じで横幅を100％にすれば横いっぱいに広がります。

この場合ブロック要素でも横幅いっぱいに広げられますが、タブレットとPCではテキストのサイズに合わせたいので、display: inline-block; にしておきます。

タブレットとPCだけ指定しなおしもいいのですが、今回はこんな感じにしました。

ちなみに、aタグやspanなどインライン要素はサイズを指定できません。

ブロック要素、インライン要素、インラインブロックの違いはこんな感じ。

	横幅と高さの指定	横幅の初期値	高さの初期値	他要素との並び方
ブロックレベル要素	可能	親要素の横幅の値	内容で決まる	縦に並ぶ
インライン要素	不可能	内容で決まる	内容で決まる	横に並ぶ
インラインブロック要素	可能	内容で決まる	内容で決まる	横に並ぶ

で、ここからがこの記事の本題なんですが、タブレットとPCでの表示をテキストサイズに合わせたい（元々のdisplay: inline-block;の初期値にしたい）場合は、width:auto;にすればOKです。

これでwidth:100%;が無かったことになります。

a.link{
  display: inline-block;  
  width:100%;
  margin: 1rem 0;
  border: 1px solid #333; 
  padding: 1rem 1rem 1rem 70px;
}
@media screen and (min-width:600px) {
.test-card a.link{
  width:auto;
}
}

メディアクエリでdisplay: inline-block;とdisplay: block;を使い分けても同じですが、、、、

a.link{
  display: block;/* SPでブロック要素（親要素が100％なら横幅指定の必要なし） */
  margin: 1rem 0;
  border: 1px solid #333; 
  padding: 1rem 1rem 1rem 70px;
}
@media screen and (min-width:600px) {
.test-card a.link{
  display: inline-block;  /* TAB&PCでインラインブロック*/
}
}

株式会社ドミナントモーション

今回はこの書き方をしたのでwidth:auto;を使うとこうなるよーという記事でした。

あまり使うとこない気もしますがネタとして。