現場のプロが教える画像の回り込み(中央・右寄せ、左寄せ)【その２：display: table-cell;】
こんにちは。ビータイズの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;」とあわせて色々とためしてみてください。
書いた人：
Web制作歴は17年くらいの何でも屋。
Web/DTPデザイン・コーディングなど、制作を担当しています。
illustration: ©まいたけきの子
- 記事検索
