画像の表示　縮小・枠・右寄せ・センタリング・文字の回り込み・並べる

縦書き

• キャッシュ削除

　
あいうえお

ぷらいべったーでは文章中に画像を呼び出した場合
横幅が表示領域（テキスト領域）以下の画像でも、上記のように表示され
テキスト（この場合は【あいうえお】）は下に配置されます。
しかし、タグを使えばセンタリングや右揃えの他、画像に文字を回り込ませる事も可能です。
又、タグを使って縮小表示させることもできます。

【ここで使用する主なタグ】
text-align（表示位置）right（右）center（中央）float（回り込み）width（横幅）
※caution※
＜＞は大文字になってますので、使用する際は小文字<>に変更して下さい。
使用しているPCやブラウザによって、表示は大きさを含め其々ですが
ここでは表示領域（テキストエリア）の横幅を、800pxに仮定した上で
余白（margin・padding）や、横幅（width） の値を設定しています。
もっと簡単な方法もあると思うので、興味のある方は自力でファイト！

画像のオリジナルサイズ　横1200×縦900　縮小サイズを%で設定

【タグ】
＜div style="width:40%;height: 40%;"＞画像のURL＜/div＞
※%で指定した場合、横幅がインラインエリア（表示エリア）以上ある画像は
　インラインエリア（表示エリア）×〇〇%の大きさで表示されます。

画像のオリジナルサイズ　横1200×縦900　縮小サイズをpxで設定

【タグ】
＜div style="width:480px;height: 360px;"＞画像のURL＜/div＞
※画像を縮小表示する場合、同率の方が見え方は綺麗なので
　特別な理由のない限り、%を使用した方が簡単です。
　ただし、横幅がインラインエリア（表示エリア）以下の画像は、%を用いただけでは
　縮小指定が効かないので、pxでの指定を推奨。
※画像は投稿一覧でもサムネ表示されますが、UPしたタイミング等の関係で
　時系列やシリーズが、バラバラになってしまう場合があります。
　ソレを想定し、画像の縮小表示＆文字の回り込みを利用したindex（索引）を作っておくと
　閲覧者だけでなく、自分自身も便利かもしれません。
画像を用いたインデックスの例⇒　https://privatter.net/p/8551002


幅240pxの画像を、2pxの枠（直線）で囲む

【タグ】
＜div style="border:2px solid #8EBA16;width:240px;"＞画像のURL＜/div＞

幅240pxの画像を、2pxの枠（直線）＋余白5pxで囲む

【タグ】
＜div style="padding: 5px; border:2px solid #8EBA16;width:240px;"＞画像のURL＜/div＞

幅240pxの画像を2重線＋余白、更に背景色を設定して囲む

【タグ】
＜div style="padding: 6px;border:9px double #8EBA16;background-color: #FFFF80;width:240px;"＞画像のURL＜/div＞
※同じ方法で、縮小表示した画像にも枠はつけられます。


画像の上下・右に5pｘの余白 左はauto（画像は横240px・縦180px）－①

【タグ　※反映防止の為、＜＞は大文字にしてありますので、使用時は小文字に変更】
＜div style="display: block; text-align: right; width:画像の横幅; margin: 5px 5px 5px auto;"＞画像URL＜/div＞

画像の上下・右に5pｘの余白 左はauto（画像は横240px・縦180px）－②

【タグ】
＜div style="width:240px; margin: 5px 5px 5px auto;"＞画像のURL＜/div＞


画像の上下に5px・左右の余白はauto－①

【タグ】
＜div style="display: block; text-align: center; width:画像の横幅; margin: 5px auto;"＞画像URL＜/div＞
※text-align: centerを、vertical-align: middleに変更してもセンタリングできます。


画像の上下に5px・左右の余白はauto－②

【タグ】
＜div style="width:240px; margin: 5px auto;"＞画像のURL＜/div＞

文章の区切りに、テキストやcssでラインを入れる事もできますが
こんな風に、予め用意したライン画像を
任意の位置(右寄せ・センタリング)へ表示させた方が
慣れれば簡単かもしれません。

※ラインに使用する場合、画像は背景色に左右されない透過画像を推奨。


画像は左寄せ（デフォルト）
文字は右に回り込み＆左揃え
公世（きんよ）の二位のせうとに、良覚僧正と聞こえしは、きはめて腹あしき人なりけり。
【タグ】
＜span style="float: right; margin: 5px auto; width:500px;"＞画像は左寄せ（デフォルト）
文字は右に回り込み＆左揃え
公世（きんよ）の二位のせうとに、良覚僧正と聞こえしは、きはめて腹あしき人なりけり。＜/span＞画像のURL

画像は左寄せ（デフォルト）
文字は右に回り込み＆右揃え
公世（きんよ）の二位のせうとに、良覚僧正と聞こえしは、きはめて腹あしき人なりけり。
【タグ】
＜span style="float: right; margin: 5px auto; width:500px;"＞＜span style="display: block; text-align: right;"＞画像は左寄せ（デフォルト）
文字は右に回り込み＆右揃え
公世（きんよ）の二位のせうとに、良覚僧正と聞こえしは、きはめて腹あしき人なりけり。＜/span＞＜/span＞画像のURL

画像は左寄せ（デフォルト）
文字は右に回り込み＆センタリング
公世（きんよ）の二位のせうとに、良覚僧正と聞こえしは、きはめて腹あしき人なりけり。
【タグ】
＜span style="float: right; margin: 5px auto; width:500px;"＞＜span style="display: block; text-align: center;"＞画像は左寄せ（デフォルト）
文字は右に回り込み＆センタリング
公世（きんよ）の二位のせうとに、良覚僧正と聞こえしは、きはめて腹あしき人なりけり。＜/span＞＜/span＞画像のURL

画像は右寄せ
文字は左に回り込み＆左揃え
公世（きんよ）の二位のせうとに、良覚僧正と聞こえしは、きはめて腹あしき人なりけり。
【タグ】
＜span style="float: left; margin: 5px 5px 5px 0; width:500px;"＞画像は右寄せ
文字は左に回り込み＆左揃え
公世（きんよ）の二位のせうとに、良覚僧正と聞こえしは、きはめて腹あしき人なりけり。＜/span＞画像のURL

画像は右寄せ
文字は左に回り込み＆左揃え
指定サイズ(width:500px)より
文字数(幅)が、少ない(狭い)場合の表示例
【タグ】
＜span style="float: left; margin: 5px 5px 5px 0; width:500px;"＞画像は右寄せ
文字は左に回り込み＆左揃え
指定サイズ(width:500px)より
文字数(幅)が、少ない(狭い)場合の表示例＜/span＞画像のURL

画像は右寄せ
文字は左に回り込み＆右揃え
公世（きんよ）の二位のせうとに、良覚僧正と聞こえしは、きはめて腹あしき人なりけり。
【タグ】
＜span style="float: left; margin: 5px auto; width:505px;"＞＜span style="display: block; text-align: right;margin: 0 10px 0 auto;"＞画像は右寄せ
文字は左に回り込み＆右揃え
公世（きんよ）の二位のせうとに、良覚僧正と聞こえしは、きはめて腹あしき人なりけり。＜/span＞＜/span＞画像のURL
※widthの値が、今までの500pxから505pxに変更されてるのに注目

画像は右寄せ
文字は左に回り込み＆右揃え
指定サイズ(width:500px)より
文字数(幅)が、少ない(狭い)場合の表示例
【タグ】
＜span style="float: left; margin: 5px auto; width:505px;"＞＜span style="display: block; text-align: right;margin: 0 10px 0 auto;"＞画像は右寄せ
文字は左に回り込み＆右揃え
指定サイズ(width:500px)より
文字数(幅)が、少ない(狭い)場合の表示例＜/span＞＜/span＞画像のURL

画像は右寄せ
文字は左に回り込み＆センタリング
公世（きんよ）の二位のせうとに、良覚僧正と聞こえしは、きはめて腹あしき人なりけり。
【タグ】
＜span style="float: left; margin: 5px 5px 5px 0; width:500px;"＞＜span style="display: block; text-align: center;"＞画像は右寄せ
文字は左に回り込み＆センタリング
公世（きんよ）の二位のせうとに、良覚僧正と聞こえしは、きはめて腹あしき人なりけり。＜/span＞＜/span＞画像のURL
※caution※
説明文の行数は画像の縦幅以内を想定しているので、回り込みの解除は省略しています。


・同じ横幅の画像を、２つ並べた場合

【タグ】
＜div style="display: flex; flex-direction: row;"＞
＜div style="text-align: center; width:350px;margin : 5px auto 5px 0;"＞画像のURL＜/div＞
＜div style="text-align: center; width:350px;margin : 5px 0 5px auto;"＞画像のURL＜/div＞
＜/div＞

・同じ横幅の画像を、３つ並べた場合

【タグ】
＜div style="display: flex; flex-direction: row;"＞
＜div style="text-align: center; width:240px;margin : 5px 0;"＞画像のURL＜/div＞
＜div style="text-align: center; width:240px;margin : 5px auto;"＞画像のURL＜/div＞
＜div style="text-align: center; width:240px;margin : 5px 0;"＞画像のURL＜/div＞
＜/div＞

・異なる横幅の画像を、2つ並べた場合①

【タグ】
＜div style="display: flex; flex-direction: row;"＞
＜div style="text-align: center; width:350px;margin : 5px auto 5px 0;"＞画像のURL＜/div＞
＜div style="text-align: center; width:240px;margin : 5px 0 5px auto;"＞画像のURL＜/div＞
＜/div＞

・異なる横幅の画像を、2つ並べた場合②　※marginの値に注目

【タグ】
＜div style="display: flex; flex-direction: row;"＞
＜div style="text-align: center; width:350px;margin : 5px auto;"＞画像のURL＜/div＞
＜div style="text-align: center; width:240px;margin : 5px auto;"＞画像のURL＜/div＞
＜/div＞

---

46いいねされました！

• お気に入り
• いいね
• Share
• Tweet