htmlタグ:Webサイトでのメルマガ・サンプルなどの表示方法

上記のようなタイトルを掲げておきながら、どうかとも思いますが、メルマガのサンプルの代わりに、ある詩を掲載させていただきます。

ここでいうメルマガ・サンプルとは、読みやすいようにある程度の(1行の)文字数で改行された文章のことです。

雨ニモマケズ
風ニモマケズ
雪ニモ夏ノ暑サニモマケヌ
丈夫ナカラダヲモチ
慾ハナク
決シテ瞋ラズ
イツモシヅカニワラッテヰル
一日ニ玄米四合ト
味噌ト少シノ野菜ヲタベ
アラユルコトヲ
ジブンヲカンジョウニ入レズニ
ヨクミキキシワカリ
ソシテワスレズ
野原ノ松ノ林ノ蔭ノ
小サナ萓ブキノ小屋ニヰテ
東ニ病気ノコドモアレバ
行ッテ看病シテヤリ
西ニツカレタ母アレバ
行ッテソノ稲ノ朿ヲ負ヒ
南ニ死ニサウナ人アレバ
行ッテコハガラナクテモイヽトイヒ
北ニケンクヮヤソショウガアレバ
ツマラナイカラヤメロトイヒ
ヒドリノトキハナミダヲナガシ
サムサノナツハオロオロアルキ
ミンナニデクノボートヨバレ
ホメラレモセズ
クニモサレズ
サウイフモノニ
ワタシハナリタイ

南無無辺行菩薩
南無上行菩薩
南無多宝如来
南無妙法蓮華経
南無釈迦牟尼仏
南無浄行菩薩
南無安立行菩薩

上記の「雨ニモマケズ」の詩の前後を、<pre>タグと</pre>タグではさむと、上記のように表示されます。

タイトルで「メルマガ・サンプル」と書いておきながら、上記では、宮澤賢治の「雨ニモマケズ」の詩を例文のように用いさせていただきました。
ちなみに、「雨ニモマケズ」の詩は、青空文庫に掲載されているものを元にさせていただきました。

通常、HTMLタグで改行したい位置に、<br>タグを用いる必要があるのですが、<pre>タグと</pre>タグではさむと、テキストとして表示していた、改行そのままに表示されるのです、便利ですよね。

これ、<br>タグを用いると改行されるということは、逆にいえば、<br>タグを使わなければ、まったく改行されないということ。といっても、表示可能領域の幅で文字が折り返されますが。ただ、この表示方法では読みづらい感じになることが少なくありません。

Yasu
  • Yasu
  • デザイナーを経て、クリエイティブディレクター、コピーライター、ライターに。「ベースボール」代表。広告&Web企画・制作、インタビュー構成をはじめ『深川福々』で4コマ漫画「鬼平太生半可帳」連載中。書籍企画・編集協力に『年がら年中長嶋茂雄』など。ラフスケッチ、サムネイル作成、撮影も。