眠 れ る 森

  眠 れ る 森

画像と文字のレイアウト

←眠れる森TOPへ戻る

~~画像を載せる時に文字をきれいに配置したい!そんな時~~


眠れる森の日記には画像がいっぱいです。
その秘密は前段で紹介してまいりましたが、今回はその大量の画像を効果的に文章中に配置していくレイアウト方法について紹介します。
時々掲示板や私書箱でご質問をいただくことがあるのですが、規則性さえ覚えてしまえば決して難しくないので試してみてくださいね。絶対にオススメです。
ちょっとしたHTMLを利用します。本当に単純ですから、ぜひ試してくださいね。

■目次
[導入] 【1】画像と文字の関係
[初級] 【2】レイアウト方法(書き方)
[中級] 【3】改行のこと
[中級] 【4】画像の左右・上下の余白のこと
[上級] 【5】画像と文字を横に並べて均等に割り付け




【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> 」 は改行を入れる直後の行の行頭に書くようにしています。普通は改行を入れる所(行末)に入れる人が多いようですが、絶対に次の行の行頭に入れた方が整理がいいはずです。強くオススメします。是非お試しください。
とまぁ、ただ <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>(テーブル)タグと呼ばれるものです。


●1●単純に並べる
[春]

春はあけぼの
[夏]

夏は夜
[秋]

秋は夕暮れ

【参考】
一見、これのどこが「表組み」なのか分からないと思いますが、実は見えないだけで線が引いてあります。線を可視化すると以下のようになり、上記のものも実は「1×3の表」であることが分かります。
[春]

春はあけぼの
[夏]

夏は夜
[秋]

秋は夕暮れ


●1●書き方
<TABLE>
<TR ALIGN=CENTER>
<TD> [春]<BR><IMG SRC=sample03>
  <BR>春はあけぼの </TD>
<TD> [夏]<BR><IMG SRC=sample03>
  <BR>夏は夜 </TD>
<TD> [秋]<BR><IMG SRC=sample03>
  <BR>秋は夕暮れ </TD>
</TR>
</TABLE>

■基本説明
・ <TABLE> :「表組み」開始の宣言。必ず最後に </TABLE> がある。
・ <TR> :「行」開始の宣言。必ず最後に </TR> がある。
・ <TD> :「列(マス目)」開始の宣言。必ず最後に </TD> がある。

分かりやすく(?)書くと以下になります。
<TABLE> ←外枠の開始
     <TR> ←1行目の開始
       <TD> 1マス目(春) </TD>
       <TD> 2マス目(夏) </TD>
       <TD> 3マス目(秋) </TD>
     </TR> ←1行目の終了
</TABLE> ←外枠の終了

上記の表は前述の通り、1行×3マスの構成ですが、お分かりの通り、表組み自体を2行×3マスの構成にしたければ、上記の<TR>から</TR>をもう1パターン増やせばいいということになります。
同様に、1行×5マスの構成にしたければ、ご想像の通り、上記の<TD>?マス目</TD>を増やせば良いということになります。

これが基本構造です。

2行目に、 <TR ALIGN=CENTER> という部分がありますが、これにより、この行の「マス目内」を“中央揃えにする”という処理をさせています。

しかしながらセンタリングを行ってしまうと、画像の高さが異なる場合や、画像下の文章の長さによって、全体の縦位置がまちまちになるのが気に入らない、といった場合( ※1 )もあるかもしれません。
また、画像下の文章が2行にまたがった場合、2行目が中途半端にセンタリングされてしまうのは嫌だから、画像下の文章は左寄せがいい、といった場合( ※2 )にもこれでは理想系にはなりません。

【例】
[春]

春はあけぼの。
だね!
[夏]

夏は夜。月のころはさらなり、
[秋]

秋は夕暮れ。夕日のさして山の端いと…


●2●縦位置をそろえる(※1のその1)
[春]

春はあけぼの。
だね!
[夏]

夏は夜。月のころはさらなり、
[秋]

秋は夕暮れ。夕日のさして山の端いと…


●2●書き方
<TABLE>
 <TR ALIGN=CENTER VALIGN=TOP >
  <TD>[春]<BR><IMG SRC=sample03>
  <BR>春はあけぼの…</TD>
  <TD>[夏]<BR><IMG SRC=sample03>
  <BR>夏は夜…</TD>
  <TD>[秋]<BR><IMG SRC=sample03>
  <BR>秋は夕暮れ…</TD>
 </TR>
</TABLE>

2行目に、新たに VALIGN=TOP という部分が追加されました。これにより、この行の「マス目内」の縦位置を全て“上揃えにする”という処理をさせています。
確かに開始位置は上揃えになりましたが、画像の高さが異なるため、画像下の文章の開始位置はまちまちになってしまったままですね。この修正は●3●で行います。

●3●縦位置をそろえる(※1のその2)
[春]
[夏]
[秋]
春はあけぼの。
だね!
夏は夜。月のころはさらなり、 秋は夕暮れ。夕日のさして山の端いと…


【参考】
[春]
[夏]
[秋]
春はあけぼの。
だね!
夏は夜。月のころはさらなり、 秋は夕暮れ。夕日のさして山の端いと…



●3●書き方
<TABLE>
 <TR ALIGN=CENTER VALIGN=TOP>
  <TD>[春]<BR><IMG SRC=sample03></TD>
  <TD>[夏]<BR><IMG SRC=sample03></TD>
  <TD>[秋]<BR><IMG SRC=sample03></TD>
 </TR>
<TR ALIGN=CENTER VALIGN=TOP >
  <TD>春はあけぼの…</TD>
  <TD>夏は夜…</TD>
  <TD>秋は夕暮れ…</TD>
 </TR>
</TABLE>

今回から、表組み自体が「2行×3マス」の構成(左参照)になりました。ずいぶんと「表組み」であることが分かりやすくなりました。
具体的には、画像下の文章部分を新たに「別の行(<TR>~</TR>)」として独立させました。
これで、画像も画像下の文書も開始位置は上揃えになりすっきりしました。(好みの問題ですが。)後はセンタリングされてしまうところを直せば良いということになります。この修正は●4●で行います。

●4●文章を左揃えにする(※2)
[春]
[夏]
[秋]
春はあけぼの。
だね!
夏は夜。月のころはさらなり、 秋は夕暮れ。夕日のさして山の端いと…



●4●書き方
<TABLE>
 <TR ALIGN=CENTER VALIGN=TOP>
  <TD>[春]<BR><IMG SRC=sample03></TD>
  <TD>[夏]<BR><IMG SRC=sample03></TD>
  <TD>[秋]<BR><IMG SRC=sample03></TD>
 </TR>
 <TR ALIGN=LEFT VALIGN=TOP>
  <TD>春はあけぼの…</TD>
  <TD>夏は夜…</TD>
  <TD>秋は夕暮れ…</TD>
 </TR>
</TABLE>

「2行×3マス」の表組みの2行目を開始する宣言である<TR>の中に「 ALIGN=LEFT と入ったのが分かると思います。
これで、2行目の「各マス」は全て左寄せになります。

●5●注意点
楽天広場の日記スペースでは「編集上の改行(PCのEnter Key)」に関して「変な処理」をしてしまいますので、ここでサンプルとしてあげているものに関しては「編集上の改行」を取り除いて(長~い、1行としてつなげて)書き込まないと変な間があいた状態になってしまいますのでご注意ください。

その他、TABLEに関しての注意点としては、 「幅を決める癖をつけましょう」 ということです。
幅を決めないと、表が中に入る文章などによってだらしなく間延びしてしまう可能性が高いです。
【例】(分かりやすくするために、表に「線」を入れています。)
[春]
[夏]
[秋]
春はあけぼの。だね!
夏は夜。月のころはさらなり、 秋は夕暮れ。夕日のさして山の端いと…

こんな感じです。 文章の長さに依存して「マス」が伸びてしまっています。これは「許す限り」伸びます。具体的には、ウィンドウの幅、または、楽天広場の日記のスペースなどのような、あらかじめ決められている幅などに依存します。
これを発生させないために、各マス目に対して「 自分で絶対的な幅を決める指示 」を設定しておきます。

「各マス目」ということで、お分かりの通り「 <TD> 」に対して設定する指示です。

具体的には、<TD>の中に、「 WIDTH="100" 」などと書けばOKです。


■いったん、おさらいの基本説明
・ <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行目の幅を違えて指定しても、当然広い方に合せた表組みとなります。

「画像」のように幅が絶対的に決まっているものは気にしなくてもいいのですが、文章のように「可変長」だと、どこかで決めてあげないとだらしない表組みになりますのでご注意ください。
ちなみに、ここでの例では、画像の幅に合せて、文章部分のマス目の幅を指定しています。(画像の幅よりも短く指定しても、「広い方に合せる」ことになるので意味はない。)

【<TD>の幅に150を指定した例】(分かりやすくするために、表に「線」を入れています。)
[春]
[夏]
[秋]
春はあけぼの やうやう白くなりゆく、山ぎはすこしあかりて、紫だちたる雲のほそくたなびきたる。
夏はよる。月のころはさらなり、やみもなほ、ほたるの多く飛びちがいたる。また、ただ一つ二つなど、ほのかにうちひかりて行くもをかし。雨など降るもをかし。 秋は夕暮れ。夕日のさして山の端いとちかうなりたるに、からすのねどころへ行くとて、三つ四つ、二つ三つなど飛び急ぐさへあはれなり。まいて雁などのつらねたるが、いと小さく見ゆるはいとをかし。 日入りはてて、風の音、虫の音などいとあはれなり。


【<TD>の幅を指定しなかった例】(分かりやすくするために、表に「線」を入れています。)
[春]
[夏]
[秋]
春はあけぼの やうやう白くなりゆく、山ぎはすこしあかりて、紫だちたる雲のほそくたなびきたる。
夏はよる。月のころはさらなり、やみもなほ、ほたるの多く飛びちがいたる。また、ただ一つ二つなど、ほのかにうちひかりて行くもをかし。雨など降るもをかし。 秋は夕暮れ。夕日のさして山の端いとちかうなりたるに、からすのねどころへ行くとて、三つ四つ、二つ三つなど飛び急ぐさへあはれなり。まいて雁などのつらねたるが、いと小さく見ゆるはいとをかし。 日入りはてて、風の音、虫の音などいとあはれなり。





質問はこちら からどうぞ

←眠れる森TOPへ戻る



© Rakuten Group, Inc.
X

Design a Mobile Site
スマートフォン版を閲覧 | PC版を閲覧
Share by: