初心者webデザイナー・コーダーのための備忘録|Tech Stock 【テックストック】

Switch language

当Webサイトのコンテンツ内にはアフィリエイト広告、Googleアドセンス広告が含まれます。
広告主によって不適切な広告が表示されていることに気付いた方は、お手数でございますが該当の広告の「×」を押していただき、「この広告の表示を停止」し所定の流れに従ってください。

【超常用】要素を横並びにする方法【IE8対応】(HTML・CSS実践 )

> HTML・CSS

このサイトは駆け出しのコーダーやwebデザイナーのためにテクニックをストックするサイト『TechStock(テックストック)』である。

この記事ではweb制作の現場で必ず使われている、要素を横並びする方法を紹介する。

また、この方法は、何かとバグの多いIE8でも対応できる方法だ。

ぜひ参考にしていただきたい。

まずは結論から。

floatclearfix

筆者が超常用するCSSでの横並びの方法だ。

例えば、下記のサンプルようなhtmlがあったとする。

 

<div>

 <div><img src=#></div>

 <div><img src=#></div>

 <div><img src=#></div>

 <div><img src=#></div>

</div>

 

このようなhtmlに出くわしたとき、筆者ならこうする。

 

<div class=wrapper clearfix>

 <div><img src=#></div>

 <div><img src=#></div>

 <div><img src=#></div>

 <div><img src=#></div>

</div>

 

一番外側の<div>タグに

class=wrapper clearfix

とつけて、css

 

.clearfix:after{

 content: “”;

 clear: both;

 display: block;

}

.wrapper > div{

 float:left;

 width:25%;

}

.wrapper > div img{

 max-width:100%;

 width:auto;

 height:auto;

}

 

floatを使う人にとってはおなじみだろうが、お初にお目にかかる人に向けて記す。

floatプロパティは本来、テキストとセットで使うことが多く、画像をテキストの中に埋め込む時に使う。

そしてfloatが影響して欲しくない、次の要素が始まる直前にcssの『clear:both;』をつけることによってfloat特有のバグを回避することができる。

その特性を利用して要素を横並びにしようというのが『clearfix』という技だ。

任意の要素のクラスかidに擬似クラス『after』を付与して

 

.clearfix:after{

 content: “”;

 clear: both;

 display: block;

}

 

cssを書く。

次に横並びにしたい要素を囲んでいるタグに先ほど設定したクラス(この例では『clearfix』)を付ける。

 

<div class=wrapper clearfix>

 <div><img src=#></div>

 <div><img src=#></div>

 <div><img src=#></div>

 <div><img src=#></div>

</div>

 

そして、横並びにしたい要素には

 

.wrapper > div{

 float:left;

 width:25%;

}

 

floatwidthを設定してやる。

今回の例では width:25%; とcssで書いているが、これは、横並びにしたい要素が4つだからだ。

100 ÷ 4 25

というわけだ。

 

ついでに、横並びにする要素の中に画像 imgタグがある場合に注意したcssを書いておいた。

横並びにする要素のwidthを%で指定すると、要素が可変になり、要素の中身が画像の場合は、要素の幅が画像の幅よりも小さくなった時、画像が要素の外にはみ出してしまうのだ。

それを防ぐため、下記のcssを追記した。

 

.wrapper > div img{

 max-width:100%;

 width:auto;

 height:auto;

}

 

画像にwidth:100%; をつけてしまうと画像がぼやけてしまう可能性がある。

今回の場合、要素の幅がいちばん外側の要素、つまりウィンドウ幅の25%の横幅に合わせて画像が引き延ばされてしまうのです。

 

その結果、画像が引き延ばされてぼやけてしまうのです。

 

そこで、max-width:100%; と設定し、画像の幅は、、最大で画像の幅としている。

つまり、画像が300pxならば、横並びにする要素の横幅が400pxであっても画像自体は、画像の横幅である300pxを超えることはなくなる。

 

しかも、width:auto;とheight:auto; を設定しているので、画像の縦横比(アスペクト比)は一定で崩れることなく画像が可変する仕組みだ。

 

画像の最大サイズを指定し、そのサイズよりも小さくなったら可変して画像の縦横比(アスペクト比)を固定する。

 

こうすることで横並びにする要素の中の画像も要素に合わせて可変になる。

 

 

関連記事

【脱Atom】VSCodeでscssの出力先をcssフォルダ内にする方法
2022年12月15日にAtomエディタがサービス終了し、私を含め、コーディングエンジニアたちはAtomに替わるエディタソフトを探さなければ
【初心者向け】サイト作成に必要なツール
駆け出しのwebデザイナー、webコーダーや、これからweb業界のエンジニアを目指す方にとっては、どのソフトが良くてどのツールが便利で、、、
display flex と over-flow auto を併用すると横スクロールできなくなった話と解決策
上記二つを併用したときに、横スクロール内の左側の要素が画面内に入ってこなくなる問題でドツボにはまったので解決策をメモ。 結論を先に言うと、上
Live Sass Compilerでコンパイル後にインデントがスペースになってしまう時の解決策【VSCode】
Atomがサービス終了してVSCodeに乗り換えようとしていました 2022年12月15日にAtomエディタがサービス終了し、私はAtomか
【Web初心者必見】CSS が効かない時はこの7つを確認せよ!
こんにちは、管理人です。 今回は初心者必見シリーズ【CSS編】です。 初心者必見シリーズ【CSS編】では、まだコーディングに不慣れな方がCS



コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です