【1】画像と文字の関係。
画像と文字の関係は、基本的には「同じもの」と思ってください。最初は普段画像を(普通に)掲載する時の<IMG SRC=画像.jpg>のおさらいからです。
例えば、ホームページ上に文字を「あいうえお」と載せたかったら、普通に「あいうえお」って書きますよね。
更に例えば、「あいうえお」の「う」と「え」の間に「の」って載せたかったら「あいう の
えお」って書きますよね。
じゃあ「の」の代わりに「画像を載せる」というのも同じ発想で、画像を載せるための命令文を使って、「う」と「え」の間に挟んで書きますよね。
そう、つまり、HTMLを書く時の扱いとしては文字も画像もほぼ同じ取り扱いなんです。ページを見ている側の立場としても、画像の大きさが文字とほぼ同じ大きさだったら、きっとホームページに載った時の印象も文字とさほど変わらずに受け止めるはずですよね。
●1●画像が小さい場合の例 あいう |
●1●書き方 あいう<IMG SRC=small.gif>えお |
●2●画像が大きい場合の例 あいう えお |
●2●書き方 あいう<IMG SRC=big.gif>えお |
こんな感じです。
さすがにあまり見栄えはよくないですよね。これを、
← ページ幅 →
春はあけぼのやうやう白くなりゆく、山ぎはすこしあかりて、紫だちたる雲のほそくたなびきたる。とか
ああおとうとよ君を泣く君死にたもうことなかれ 末に生まれし君なれば親のなさけはまさりしも 親は刃をにぎらせて人を殺せとおしえしや人を殺して死ねねよとて二十四までをそだてしや例文で不快な気分になられましたらお詫び申し上げ ます。
こんな感じでレイアウトできる方法をご案内します。
繰り返しますがものすごく簡単です。(^-^)
【2】レイアウト方法(書き方)
ウチが一番よく使っている(ほぼこれしか使っていない)のはこのパターンです。
●1●画像を左に寄せる場合の例 春はあけぼのやうやう白くなりゆく、山ぎはすこしあかりて、紫だちたる雲のほそくたなびきたる。 |
●1●書き方 <IMG SRC=sample01.gif ALIGN=LEFT >春はあけぼのやうやう白くなりゆく、山ぎはすこしあかりて、紫だちたる雲のほそくたなびきたる。 |
●2●画像を右に寄せる場合の例 春はあけぼのやうやう白くなりゆく、山ぎはすこしあかりて、紫だちたる雲のほそくたなびきたる。 |
●2●書き方 <IMG SRC=sample02.gif ALIGN=RIGHT >春はあけぼのやうやう白くなりゆく、山ぎはすこしあかりて、紫だちたる雲のほそくたなびきたる。 |
こんな感じです。
ページの幅とかテーブルの幅にあわせて自動改行します。自動改行した際の改行先は、画像のすぐ右側(左側)になります。画像の指定の命令に続けて長い文章を書けば、改行の命令などせずとも自動的に画像の下に折り返して回り込んでくれます。
【3】改行のこと
「改行」について補足します。
上記にも書きました通りこの方法を使って書く時には(本当はそれに限りませんが)ページの端まで行けば自動的に画像のすぐ隣りに続きが来てくれるので意識しなくても構いません。逆に、無理に改行を自分のイメージ(見ているパソコンの画面上の見栄え)で決めてしまうと他の人の見ている環境によってはガタガタになってしまいますので極めて強くオススメしません。
自分の見ている画面では、たまたま1行35文字の部分で端まで来るので念のため34文字ごとに改行の命令(
)を入れたとします。確かに自分の見ているパソコンの画面ではきれいに改行されて見えるのですが、誰か他の人のパソコンの画面ではウィンドウの幅の問題や、フォントの大きさの設定の関係で1行の幅に30文字しか入らないとしたら、34文字ごとの改行の命令をしていると、「30文字目で自動改行」が入り、自動改行後4文字目に「 <BR>
(改行)」が入るということになります。
そうすると、この場合2行目は4文字だけの行となってしまうのです。これはかなりイタイです。
心当たりありませんか?簡単なチェック方法は
(1)ウィンドウの幅を縮めて見てみる。 (2)文字のサイズを大きく/小さくして見てみる。
です。
注意点としては、楽天広場の日記の場合、 <BR> しなくても、普通に改行を入れるだけで <BR> と同じ扱いになってしまうところです。日記以外の部分ではその限りではありません。
少し余談が過ぎました。画像と文字のレイアウトに関しての改行の扱いの説明をします。
先の例の「春はあけぼの」ですが、「春」の段が終わり、「夏」に行こうと思うのですが、その場合改行をして書かないとおかしく見えてしまいます。
●1●おかしく見えてしまう例 春はあけぼの やうやう白くなりゆく、山ぎはすこしあかりて、紫だちたる雲のほそくたなびきたる。 夏
はよる。月のころはさらなり、やみもなほ、ほたるの多く飛びちがいたる。また、ただ一つ二つなど、ほのかにうちひかりて行くもをかし。雨など降るもをかし。 |
●1●書き方 <IMG SRC=sample01.gif ALIGN=LEFT >春はあけぼのやうやう白くなりゆく、山ぎはすこしあかりて、紫だちたる雲のほそくたなびきたる。 夏 はよる。月のころはさらなり、やみもなほ、ほたるの多く飛びちがいたる。また、ただ一つ二つなど、ほのかにうちひかりて行くもをかし。雨など降るもをかし。 |
●2●画像のとなりに改行した場合の例 春はあけぼの やうやう白くなりゆく、山ぎはすこしあかりて、紫だちたる雲のほそくたなびきたる。夏 はよる。月のころはさらなり、やみもなほ、ほたるの多く飛びちがいたる。また、ただ一つ二つなど、ほのかにうちひかりて行くもをかし。雨など降るもをかし。 |
●2●書き方 <IMG SRC=sample02.gif ALIGN=LEFT >春はあけぼのやうやう白くなりゆく、山ぎはすこしあかりて、紫だちたる雲のほそくたなびきたる。 <BR> 夏 はよる。月のころはさらなり、やみもなほ、ほたるの多く飛びちがいたる。また、ただ一つ二つなど、ほのかにうちひかりて行くもをかし。雨など降るもをかし。 私は「 <BR> 」 は改行を入れる直後の行の行頭に書くようにしています。普通は改行を入れる所(行末)に入れる人が多いようですが、絶対に次の行の行頭に入れた方が整理がいいはずです。強くオススメします。是非お試しください。 |
画像のとなりに改行ではなく、画像の下から始めたい、という場合もあると思います。「春はあけぼの」の例で言えば、載せている画像が「春」をイメージした画像だった場合などはその必要がありますよね。
「夏」は夏のイメージの写真を用意していて、それを載せたいというケースもあるでしょう。
●1●改行後画像のすぐ下から続きを載せたい場合の例 春はあけぼの やうやう白くなりゆく、山ぎはすこしあかりて、紫だちたる雲のほそくたなびきたる。夏はよる。月のころはさらなり、やみもなほ、ほたるの多く飛びちがいたる。また、ただ一つ二つなど、ほのかにうちひかりて行くもをかし。雨など降るもをかし。 |
●1●書き方 <IMG SRC=sample01.gif ALIGN=LEFT >春はあけぼの やうやう白くなりゆく、山ぎはすこしあかりて、紫だちたる雲のほそくたなびきたる。 <BR CLEAR=ALL> 夏はよる。月のころはさらなり、やみもなほ、ほたるの多く飛びちがいたる。また、ただ一つ二つなど、ほのかにうちひかりて行くもをかし。雨など降るもをかし。 |
●2●「夏」のイメージを入れた場合の例(ちょこっと応用) 春はあけぼの やうやう白くなりゆく、山ぎはすこしあかりて、紫だちたる雲のほそくたなびきたる。 夏はよる。月のころはさらなり、やみもなほ、ほたるの多く飛びちがいたる。また、ただ一つ二つなど、ほのかにうちひかりて行くもをかし。雨など降るもをかし。 |
●2●書き方 <IMG SRC=sample02.gif ALIGN=LEFT >春はあけぼの やうやう白くなりゆく、山ぎはすこしあかりて、紫だちたる雲のほそくたなびきたる。 <BR CLEAR=ALL> <IMG SRC=sample02.gif ALIGN=RIGHT >夏はよる。月のころはさらなり、やみもなほ、ほたるの多く飛びちがいたる。また、ただ一つ二つなど、ほのかにうちひかりて行くもをかし。雨など降るもをかし。 |
【4】画像の左右・上下の余白のこと
上記の改行のサンプルをご覧になって「画像の下、次の行くっつき過ぎだなぁ」という印象を持たれる方も少なくないかと思います。そういうご不満を解消する方法もありますので紹介します。
画像の周囲に好きな幅で余白を設けることができます。半角・全角のスペースを入れるということではなく、ピクセルを数字で指定して隙間を作らせます。
●1●画像の左右に隙間の例 枕草子 春はあけぼの やうやう白くなりゆく、山ぎはすこしあかりて、紫だちたる雲のほそくたなびきたる。 夏はよる。月のころはさらなり、やみもなほ、ほたるの多く飛びちがいたる。また、ただ一つ二つなど、ほのかにうちひかりて行くもをかし。雨など降るもをかし。 |
●1●書き方 <FONT SIZE=+1><B>枕草子</B></FONT> <BR><IMG SRC=sample02.gif ALIGN=LEFT HSPACE=10 >春はあけぼのやうやう白くなりゆく、山ぎはすこしあかりて、紫だちたる雲のほそくたなびきたる。 <BR CLEAR=ALL> <IMG SRC=sample02.gif ALIGN=RIGHT HSPACE=10 >夏はよる。月のころはさらなり、やみもなほ、ほたるの多く飛びちがいたる。また、ただ一つ二つなど、ほのかにうちひかりて行くもをかし。雨など降るもをかし。 |
●2●画像の上下に隙間の例 枕草子 春はあけぼの やうやう白くなりゆく、山ぎはすこしあかりて、紫だちたる雲のほそくたなびきたる。 夏はよる。月のころはさらなり、やみもなほ、ほたるの多く飛びちがいたる。また、ただ一つ二つなど、ほのかにうちひかりて行くもをかし。雨など降るもをかし。秋は夕暮れ。夕日のさして山の端いとちかうなりたるに、からすのねどころへ行くとて、三つ四つ、二つ三つなど飛び急ぐさへあはれなり。まいて雁などのつらねたるが、いと小さく見ゆるはいとをかし。 日入りはてて、風の音、虫の音などいとあはれなり。 |
●2●書き方 <FONT SIZE=+1><B>枕草子</B></FONT> <BR><IMG SRC=sample02.gif ALIGN=LEFT VSPACE=10 >春はあけぼの やうやう白くなりゆく、山ぎはすこしあかりて、紫だちたる雲のほそくたなびきたる。 <BR CLEAR=ALL> <IMG SRC=sample02.gif ALIGN=RIGHT VSPACE=10 >夏はよる。月のころはさらなり、やみもなほ、ほたるの多く飛びちがいたる。また、ただ一つ二つなど、ほのかにうちひかりて行くもをかし。雨など降るもをかし。 <BR CLEAR=ALL> 秋は夕暮れ。夕日のさして山の端いとちかうなりたるに、からすのねどころへ行くとて、三つ四つ、二つ三つなど飛び急ぐさへあはれなり。まいて雁などのつらねたるが、いと小さく見ゆるはいとをかし。 日入りはてて、風の音、虫の音などいとあはれなり。 |
●3●全部の要素を入れこんだ例 枕草子 春はあけぼの やうやう白くなりゆく、山ぎはすこしあかりて、紫だちたる雲のほそくたなびきたる。 夏はよる。月のころはさらなり、やみもなほ、ほたるの多く飛びちがいたる。また、ただ一つ二つなど、ほのかにうちひかりて行くもをかし。雨など降るもをかし。秋は夕暮れ。夕日のさして山の端いとちかうなりたるに、からすのねどころへ行くとて、三つ四つ、二つ三つなど飛び急ぐさへあはれなり。まいて雁などのつらねたるが、いと小さく見ゆるはいとをかし。 日入りはてて、風の音、虫の音などいとあはれなり。 |
●3●書き方 <FONT SIZE=+1><B>枕草子</B></FONT> <BR><IMG SRC=sample02.gif ALIGN=LEFT VSPACE=10 HSPACE=10 >春はあけぼの やうやう白くなりゆく、山ぎはすこしあかりて、紫だちたる雲のほそくたなびきたる。 <BR CLEAR=ALL> <IMG SRC=sample02.gif ALIGN=RIGHT VSPACE=10 HSPACE=10 >夏はよる。月のころはさらなり、やみもなほ、ほたるの多く飛びちがいたる。また、ただ一つ二つなど、ほのかにうちひかりて行くもをかし。雨など降るもをかし。 <BR CLEAR=ALL> 秋は夕暮れ。夕日のさして山の端いとちかうなりたるに、からすのねどころへ行くとて、三つ四つ、二つ三つなど飛び急ぐさへあはれなり。まいて雁などのつらねたるが、いと小さく見ゆるはいとをかし。 日入りはてて、風の音、虫の音などいとあはれなり。 |
個人的には、VSPACEは不要かな、と思っていたりします。が、こうして見るとなかなか悪くないですね。(^^;)
ちなみに、眠れる森ではあまり(というか2003年3月現在ではまったく)この「余白」については左右も上下も使っていません。
今後は検討しようかしら。
【5】画像と文字を横に並べて均等に割り付け
画像に対するキャプションのようなイメージで、画像ごとに、その上下に文字を配置して、かつそれを並べたい...。そんなご要望は結構あるんじゃないかと思いますので、ここに方法を記載します。
【4】までは、文字と画像を扱うHTMLタグだけで何とかなったのですが、ここでやろうとしていることは、新たに「表組み」を行うためのHTMLタグを導入しないと実現できません。
その「表組み」を書くためのHTMLタグというのは<TABLE>(テーブル)タグと呼ばれるものです。
[春]![]() 春はあけぼの |
[夏]![]() 夏は夜 |
[秋]![]() 秋は夕暮れ |
[春]![]() 春はあけぼの |
[夏]![]() 夏は夜 |
[秋]![]() 秋は夕暮れ |
[春]![]() 春はあけぼの。 だね! |
[夏]![]() 夏は夜。月のころはさらなり、 |
[秋]![]() 秋は夕暮れ。夕日のさして山の端いと… |
[春]![]() 春はあけぼの。 だね! |
[夏]![]() 夏は夜。月のころはさらなり、 |
[秋]![]() 秋は夕暮れ。夕日のさして山の端いと… |
[春]![]() |
[夏]![]() |
[秋]![]() |
|---|---|---|
|
春はあけぼの。
だね! |
夏は夜。月のころはさらなり、 | 秋は夕暮れ。夕日のさして山の端いと… |
[春]![]() |
[夏]![]() |
[秋]![]() |
|---|---|---|
|
春はあけぼの。
だね! |
夏は夜。月のころはさらなり、 | 秋は夕暮れ。夕日のさして山の端いと… |
[春]![]() |
[夏]![]() |
[秋]![]() |
|---|---|---|
|
春はあけぼの。
だね! |
夏は夜。月のころはさらなり、 | 秋は夕暮れ。夕日のさして山の端いと… |
[春]![]() |
[夏]![]() |
[秋]![]() |
|---|---|---|
|
春はあけぼの。だね!
|
夏は夜。月のころはさらなり、 | 秋は夕暮れ。夕日のさして山の端いと… |
| ・ <TABLE> : | 「表組み」開始の宣言。必ず最後に </TABLE> がある。 |
| ・ <TR> : | 「行」開始の宣言。必ず最後に </TR> がある。 |
| ・ <TD> : | 「列(マス目)」開始の宣言。必ず最後に </TD> がある。 |
| ・ ALIGN=… : | 左寄せ(= LEFT )、中央揃え(= CENTER )、右寄せ(= RIGHT )。 |
| * | <TABLE> の宣言内に書けば、その表組み全体共通に、 <TR> の宣言内に書けば、その行の全てのマスに、 <TD> の宣言内に書けば、そのマスに対して有効となります。 |
| ・ VALIGN=… : | 上詰め(= TOP )、中央揃え(= MIDDLE )、下詰め(= BOTTOM )。 |
| * | <TABLE> の宣言内に書けば、その表組み全体共通に、 <TR> の宣言内に書けば、その行の全てのマスに、 <TD> の宣言内に書けば、そのマスに対して有効となります。 |
| ・ WIDTH=… : | 「幅」(= 数字 )の指定。 |
| * | <TABLE> の宣言内に書けば、その表組み全体の横幅、 <TR> の宣言内に書けば、その行の横幅、 <TD> の宣言内に書けば、そのマスの横幅として有効となります。 |
| * | ※ただし、「幅」は各マス目の足し上げたものになるし、1行目と2行目の幅を違えて指定しても、当然広い方に合せた表組みとなります。 |
[春]![]() |
[夏]![]() |
[秋]![]() |
|---|---|---|
|
春はあけぼの やうやう白くなりゆく、山ぎはすこしあかりて、紫だちたる雲のほそくたなびきたる。
|
夏はよる。月のころはさらなり、やみもなほ、ほたるの多く飛びちがいたる。また、ただ一つ二つなど、ほのかにうちひかりて行くもをかし。雨など降るもをかし。 | 秋は夕暮れ。夕日のさして山の端いとちかうなりたるに、からすのねどころへ行くとて、三つ四つ、二つ三つなど飛び急ぐさへあはれなり。まいて雁などのつらねたるが、いと小さく見ゆるはいとをかし。 日入りはてて、風の音、虫の音などいとあはれなり。 |
[春]![]() |
[夏]![]() |
[秋]![]() |
|---|---|---|
|
春はあけぼの やうやう白くなりゆく、山ぎはすこしあかりて、紫だちたる雲のほそくたなびきたる。
|
夏はよる。月のころはさらなり、やみもなほ、ほたるの多く飛びちがいたる。また、ただ一つ二つなど、ほのかにうちひかりて行くもをかし。雨など降るもをかし。 | 秋は夕暮れ。夕日のさして山の端いとちかうなりたるに、からすのねどころへ行くとて、三つ四つ、二つ三つなど飛び急ぐさへあはれなり。まいて雁などのつらねたるが、いと小さく見ゆるはいとをかし。 日入りはてて、風の音、虫の音などいとあはれなり。 |

![]()
