現場のプロが教える画像の回り込み(中央・右寄せ、左寄せ)【その2:display: table-cell;】

公開日:2017年12月12日 更新日:2017年12月12日 HTML・CSS基本やコツ

d02_eyecatch

こんにちは。ビータイズのWeb職人まいたけです。

ホームページを自分で作成していると、htmlで画像を表示する際に画像の回り込み(中央・右寄せ・左寄せ)方法で困ることがあるかと思います。前回同じテーマでCSSの「display: inline-block;」を使用した方法を説明しましたが、今回は別のやり方をご紹介します。

ケースバイケースになりますが、テキスト・画像が横並びになる完全固定のレイアウトにしたい場合などは、今回ご紹介する方法の方が思った通りに配置できるかも。是非ためしてみてください。

 

本記事は前回の記事の内容を基本としていますので、こちらもあわせてどうぞ。

※本ページの内容は、html及びCSSの基本を理解していることを前提に掲載しています。

それぞれ基本知識をまとめた記事もありますので、htmlやCSSにあまり詳しくない方、学び始めたばかりの初心者の方はこちらも 参考にしてみてください。

画像を右寄せ/左寄せにする

画像をテキストの右・または左に回り込み表示させるにはいくつか方法があり、前回は「display: inline-block;」を使用した方法をご説明しましたが、今回は別のCSSプロパティ「display:table-cell;」を使用してみます。

 

画像を右寄せにする

画像を右、テキストを左に表示する方法です。

まずはサンプルコードを参考に、試してみてください。

サンプルコード:

 

基本的には前回の「display: inline-block;」を用いた方法と変わりませんが、「display: table-cell;」を使用する場合、親であるボックス要素にまず「display:table;」を指定します。

 

サンプルでは、一行目の「<div class=”box”>」にCSSで「display:table;」を指定し、その中の子要素「<div class=”box-img”><div class=”box-text”>」に「display: table-cell;」を指定しています。

 

ここで「display:table;」の設定をしない場合、縦位置の「vertical-align」プロパティがききませんので、「display: table-cell;」を使用するときは必ず親要素に「display:table;」を指定しましょう。

 

「display:table;」は、「display: inline-block;」と異なりhtmlの「table」と同じような挙動をします。横幅を指定しなくても段が落ちることがなく、ブラウザの横幅を100%として「display: table-cell;」の数や幅に合わせて自動で設定してくれます。

画像を左寄せ

今度は画像を左、テキストを右に表示してみます。

こちらも「display: inline-block;」のときとほぼ同じですが、右寄せのときとの違いはhtmlの「<div class=”box-text”>」と「<div class=”box-img”>」を書く順番だけです。

 

サンプルコード:

 

このように「display: table-cell;」を使用すると、左寄せや右寄せの変更も簡単に行うことが出来ます。これは「display: inline-block;」を使用したときと同じですね。

テキストの縦位置を調整する

テキストと画像との縦位置を変更したいときは、サンプルコードの「vertical-align」のプロパティを変更するだけで実現できます。

このあたりは前回の「display: inline-block;」を使用したときと全く同じですので、参考にしてみてください。

まとめ

画像の回り込みについて、固定レイアウトの場合に使い勝手のよい「display: table-cell;」を使用した方法を説明しました。

もちろん画像とテキストだけでなく画像と画像、テキストとテキストを横並びにすることも簡単にできますので、「display: inline-block;」とあわせて色々とためしてみてください。

書いた人:

まいたけ

BtiesのWeb職人まいたけです。

Web制作歴は17年くらいの何でも屋。

Web/DTPデザイン・コーディングなど、制作を担当しています。


illustration: ©まいたけきの子


PAGE TOP