【CSS】画像を隙間無く横並びにするいくつかの方法

CSSで画像を隙間無く横並びにするいくつかの方法
この記事は約3分で読めます。
広告

画像を横並びにする時なぜか空く隙間。
その隙間を埋めてレイアウトする方法をいくつか紹介します。
CSSでのレイアウトで利用しやすいものをご利用ください。

【inline-block】で横並び

要素を横並びにする時よく使うのが「display:inline-block」。
でも「inline-block」で横並びにすると横に隙間ができる。
それを解消して横並びにできるCSSのご紹介。
下記のDEMOでは横並びにする要素を「li」にしましたが、これは「span」や「p」、「a」でも構いません。
横並びにする親要素に、「letter-spacing:-.4em;」「font-size:0;」を指定すると全ブラウザで無駄な隙間が消え、ぴったりと横並びにできます。
さらに横並びにする要素の幅は、「100% ÷ 4 = 25%」にして「display:inline-block;」にします。

DEMO

HTML

<ul class="demo1">
 <li></li>
 <li></li>
 <li></li>
 <li></li>
</ul>

CSS

.demo1 {
 width: 100%;
 height: 100px;
 display: block;
 letter-spacing: -.4em;
 font-size: 0;
}
.demo1 li {
 width: 25%;
 height: 100%;
 display: inline-block;
}

【inline】で横並び

「display: inline;」でも横並びにできるが、一つ欠点がある。
それは要素に高さがなくなってしまうことだ。
下のDEMOでは、「font」に高さと幅を持たせているから見えているが、要素の中に何もないといくら「height」や「padding」で高さを出そうとしても、高さは出なくなってしまう。

DEMO

  • 1
  • 2
  • 3
  • 4

HTML

<ul class="demo2">
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
</ul>
.demo2 {
 display: block;
 letter-spacing: -.4em;
 font-size: 0;
}
.demo2 li {
 display: inline;
 letter-spacing: normal;
 font-size: 32px;
 padding: 29px 10%;
}	

【float】で横並び

全ての要素を「table」で組んでいたはるか昔。
古(いにしえ)より伝わる横並びの伝統技法。
昔から使われる横並び方法だが「float」にも、欠点がある。
横並びする要素のすぐ下の要素には必ず「clear:both;」が必要な点。
横並びし終わったら必ず入れるのはめちゃくちゃ忘れがちなので、「それ以降全て横並びになる現象」がたびたび起こっていた。

DEMO

ここまで

HTML

<ul class="demo3">
 <li></li>
 <li></li>
 <li></li>
 <li></li>
</ul>
<p class="float-end">ここまで</p>
.demo3 {
 width: 100%;
 height: 100px;
 display: block;
}
.demo3 li {
 float:left;
 width: 25%;
 height: 100%;
}
.float-end {
 clear:both;
}
エンデ・バタローをフォローする
CSS

埼玉県北本市に住み始めて2年目。

前は東京都の京王線沿線に。
その前は神戸の三宮に。
その前は名古屋の八事霊園の近くに住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30代(男)です。

フロントエンドを始めて9年目になります。
最近は、ずっとwordpressをいじっており
エディタはVSCodeに乗り換え、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
広告
初めてのブログ

コメント

タイトルとURLをコピーしました