画像と文章を並べる-いろいろ比較

画像と文章とを横並びにする方法についてです
画像と文章というのは通常では文章一行分しか横並びにならず それ以降は画像の下へポーンと飛ばされてしまいますよね
そこでパっと思いつくのは

・ tableを利用する
・ floatを利用する
・ displayのinline-blockで並べる

この3つです
どうちらの見た目がどうで どちらのメリット・デメリットがどうで
という内容です


ここから実際の例ですが
横幅最大600px, 画像と文章との距離は30px, ボーダーは無しに設定します


● tableを利用した例① 画像サイズ 334✕334

私も一番初めて大したお話し院という点のところをもったな。いくら一部が安心人はさきほどその存在たらでしまでにいうてみたには発展描いませますので、そうにはなるでしょなでる。責任をなりだろのはひとまず翌日に最もないたな。やはり嘉納さんより教育主人実際助言が起るう手伝いこんな科学彼らか忠告をというご病気ですないでまして、この時間はそれか足差を用いて、ネルソンさんの事を責任の私でどうしても実馳走と考えて私がたにおお話しを出さようにひとまず大経過をありんたて、よくおもに発見となれたて切ったのをするたう。
たとえばまた今教師に散らかす事も少し重宝と出んて、その口からは使いこなすだてという責任がいうてしまうなあっ。


<table style="width: 100%; max-width: 600px; border-spacing: 0;"><tr><td style="padding: 0; vertical-align: top; width: 334px;"><img src="画像アドレス" alt=""></td><td style="padding-left: 30px; vertical-align: top;">文章</td></tr></table>


● floatを利用した例

私も一番初めて大したお話し院という点のところをもったな。いくら一部が安心人はさきほどその存在たらでしまでにいうてみたには発展描いませますので、そうにはなるでしょなでる。責任をなりだろのはひとまず翌日に最もないたな。やはり嘉納さんより教育主人実際助言が起るう手伝いこんな科学彼らか忠告をというご病気ですないでまして、この時間はそれか足差を用いて、ネルソンさんの事を責任の私でどうしても実馳走と考えて私がたにおお話しを出さようにひとまず大経過をありんたて、よくおもに発見となれたて切ったのをするたう。
たとえばまた今教師に散らかす事も少し重宝と出んて、その口からは使いこなすだてという責任がいうてしまうなあっ。


<div style="overflow: hidden; width: 600px; max-width: 100%;"><img src="画像アドレス" style="float: left; margin-right: 30px;" alt="">文章</div>


● inline-blockを利用した例

私も一番初めて大したお話し院という点のところをもったな。いくら一部が安心人はさきほどその存在たらでしまでにいうてみたには発展描いませますので、そうにはなるでしょなでる。責任をなりだろのはひとまず翌日に最もないたな。やはり嘉納さんより教育主人実際助言が起るう手伝いこんな科学彼らか忠告をというご病気ですないでまして、この時間はそれか足差を用いて、ネルソンさんの事を責任の私でどうしても実馳走と考えて私がたにおお話しを出さようにひとまず大経過をありんたて、よくおもに発見となれたて切ったのをするたう。
たとえばまた今教師に散らかす事も少し重宝と出んて、その口からは使いこなすだてという責任がいうてしまうなあっ。


<div style="width: 600px; max-width: 100%;"><img src="画像アドレス" alt="" style="display: inline-block; vertical-align: top; padding-right: 30px;"><div style="display: inline-block; width: 236px; max-width: 100%; vertical-align: top;">文章</div></div>



パソコンで一見したところ どれも同じように見えるかと思います
がしかし この記事を現在スマホからご覧の方はものすごく鬱陶しいことになってます(笑)
特に①なんてのはひどいですね (´・ω・`)
パソコンからアクセス中の方は ブラウザの横幅を目一杯小さくしてください
それがスマホでの見え方とほぼ同じです
それぞれの違いもよくわかると思います

①のtableの特徴というのは セルを自動的に折り返してくれるわけではない
というのが一番大きいですね
セルが横並びに10あるのならば その10は画面幅が狭かろうとなんだろうと 強引に横に並びます
あと雛形ソース内にはtableにmax-widthの指定がありますが
これは基本的には効きません
tableというのは max-widht/ height 及び min-width/height は効果がありません
ただ効いてしまうブラウザというのもありますので 一応入れてある(笑)

一方②と③については 横幅が足りなくなると自動で下へ繰り越します
繰り越しはしますが ②のfloatというのは中途半端にしか横幅が残っていないときでもそれを使いきろうとしますので
3〜4文字だけ画像横に並んじゃった… ということが起こります

で ③のinline-blockなんですが これは結構使える子ではあります
でも600pxから画像の横幅334pxと画像横に設けた空白分の30pxを差し引いて
残り横幅 236px という指定があるもんだから 繰り越した時に自身の横幅がえらくちっさい(笑)


とまあ どれも一長一短なのですが
結局ですね
「初期の見た目を何px」という指定をしてしまうと
固定幅レイアウトではそれでも良いんだけれど レスポンシブとなると話しが違ってきます
画面幅が小さくなった時にどうなるか
というのをよくよく考えないといけません
それには 600px縛りが大変邪魔 本末転倒ですが (´・ω・`)
レスポンシブデザインのテンプレートの場合
pxやemなどの具体的数値設定は避ける
というのがセオリーです
じゃあどうするかというと
%で指定するか あるいは 指定しない

結局どの方法を選ぶかというのは好みの問題になってきますが
最低でも①はもう絶対に避けたいですよね
今回は比較検証のために画像の縦横サイズを重要視してソースを書きましたが
画像が縮小されてもいいやー な方は画像側セルのwidth334pxは指定しない方が良いですね
tableというのはセルに具体的数字を設けなければ tableの好き勝手にサイズ調整されます(笑)
ちなみにセルを等分にするには

table-layout: fixed;

を指定します
こちらもstyle属性内に記述

今まで固定幅レイアウトで表など掲載されていた方は
必ずここでつまずくんですよね
何かを得るには何かを捨てないと!
でございますー (´・ω・`)
関連記事

Comments 2

Femma  
Hello

Hello Akira-san, i really love all your templates, it's beautifulv-20

2016/05/14 (Sat) 05:09 | EDIT | REPLY |   
Akira  
To Femmaさん

I'm so happy to hear that :)
Thx to u too! Xx

あきら

2016/05/14 (Sat) 18:12 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い