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

カスタマイズ
2016/05/12 5
vanillaice (Akira)
vanillaice (Akira)
Instruction HTML CSS 初心者向け
この記事はパソコン閲覧推奨です

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

・ 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属性内に記述

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

 5

There are no comments yet.
Femma
Hello

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

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

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

あきら

2016/05/14 (Sat) 18:12
オカンチ

何も理解出来ていないと思います

コチラを拝見して <img src="画像アドレス" style="float: left; margin-right: 30px;" alt=""> を
繋げれば 画像が載るのでは…と

「崩れている」と 思っても 修正の方法が解らなく スマホ画像でも どうにか見られるから良いか~
で 今に至ってます

画像並べにそもそもfloatを使う理由が無い点を理解しているか
理解出来ていません

昔の作品などを 載せたくて 右往左往しています

2019/04/05 (Fri) 20:01
vanillaice (Akira)
Akira
To オカンチさん

こんばんは ('0')/

なるほど。そういうことだったんですね。
まずfloatを使う理由が有るか無いかなんですが、オカンチさんのこれまでの過去作品掲載については「必要なし」だと考えて良いと思います。

参考記事: floatした画像が左寄せにならない原因とfloatイコール「回り込み」ではない理由
https://vanillaice000.blog.fc2.com/blog-entry-868.html

例えば「つち仏」の記事をスマホサイズで見ると「崩れている」という印象になります。
スマホをお持ちでなければChromeのデベロッパーツールを利用してください。
崩れているように見えるのは上記参考記事そのまんまです。左に寄せたくとも途中にある画像の縦幅が邪魔をして左まで行けないんですね。

実際にはこれは「崩れている」わけではなくて、floatは本来そういう性質でありそれを具現化しているだけなので「構文ミス」の類ではありません。強いて言えば手法の選択ミスでしょうか。

あとはまた記事にしますね。

2019/04/05 (Fri) 21:00
オカンチ

細かい説明 ありがとうございます
再度 勉強し直します

2019/04/05 (Fri) 22:23

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

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧

カスタマイズ