読者です 読者をやめる 読者になる 読者になる

Webサイト専門プログラマの言いたい放題

元システムエンジニアがサイト制作とプログラミングについて好き放題しゃべります。

【横並びのボックスの高さを揃える方法】

divタグなど、CSSのdisplayプロパティがボックスタイプに分類されるタグは
基本的に縦に並びます。
 
それを横に並べたいとき、CSSで float:left; を使うのは常套手段ですが、
float には横に配置するという役目しかありません。
 
そのため、並べたボックスの高さが違うと下の段にあるボックスを
押し下げてしまい、綺麗に並ばないことがあります。
 
そこで2つの解決法をご紹介します。
 
<方法1>
float を使わず、display: table-cell; を使う。
 
<方法2>
jQueryプラグインを酌み込んで一番高いボックスに自動で高さを揃える。
ozpa-h4.com

 
どちらが良いというものではありません。
どちらも本質的には同じことです。
 
table-cellはテーブルタグの td と同様の描画(レンダリング)方法を
ブラウザに指示する役目があります。
 
td は「セル」ですから、横並びの全てのセルが同じ高さになるよう
描画してくれるというわけです。
 
一方、プラグインを使う方法では、プログラムによってボックスの高さを調べ、
一番高さが大きいものを見つけ出し、一律で style="height:●●px" のように
CSSで高さを強制的に指定します。

↓↓↓「自分で作れる力」を身につけたいあなたへ↓↓↓

【1】CODEMYマンツーマンレッスン

codemy-lesson.office-ing.net
⇒30分無料相談あり
⇒知りたいことだけ学べる個人レッスン

▼レッスンの記録をご覧いただけます。
https://www.facebook.com/codemy.lesson/
 

【2】プログラミング講座CODEMY

office-ing.hatenablog.com
⇒動画と個別添削で学べるオンラインレッスン

自分でホームページやプログラムの制作やカスタマイズをできるようなりたい方が
業種・経験・地域を問わず参加されています。

講師実績

業界大手リクルート社が運営する総合学習サイト「おしえるまなべる」
2015年、パソコンジャンルで1位評価
2016年9月「ホームページ作成のツボとコツがゼッタイにわかる本」出版

講師が執筆した本が発売されました!

『ホームページ作成のツボとコツがゼッタイにわかる本』
定価: 2,400円(税別)出版社:秀和システム
 
Amazon購入ページはこちら!