HTMLを雑誌っぽく見せるヒント 01

※この記事は11年以上前の記事です。
現在は状況が異なる可能性がありますのでご注意ください。

うん。うだるな、この暑さは。
ほんと、北海道の残暑ではないぞ。

そんななか、こんな時間に起きて壮大に体力の無駄遣いしてますｗｗｗ

さて、今日は、タイトルの通り、HTMLで雑誌っぽくテキストを表示させるヒントといいましょうか、クールなテキストの表示のさせかたを一つ紹介。
もう一個くらいは次もやりたい。

というのも、みやびは、ずっと、WEBのテキストなんてちんけなことしかできないと思ってました。クールなことするには、FlashやJavascript使わないとできない、ってね。
だってーのに、前の会社の上司には、「お客様に、WEB画面になるとがっかりされるんだよ！」って言われて、カッチーンってきて、思いっきりしっかりデザインしたら、コーディング大変だったけど、けっこうクールなページができて、けっこう喜ばれたんだ。
何が言いたいかってーと、人間本気になれば、どんなんだってできるってことだ。

前置き長すぎｗｗｗ

さて本題に入ろう。
今回は頭だしだ。

デザインにこだわるクライアントによく言われることナンバーワンといえば......。
リストの先頭行以下を字下げしてほしいというもの。
以下のソースとリストを見てほしい。

●HTMLソース

<ul class="bottom-margin">
<li>※みやびプリンの正しい食べ方に関しては、カップ下部の注意書きをご覧下さい。（本当の事が書いてあるとはかぎりません。）</li>
<li>※ペットにみやびプリンを与えないで下さい。爆○する恐れがあります。</li>
<li>※食べることによって、万が一健康を害するようなことがあっても、当社は一切責任を負いかねます。予めご了承下さい。</li>
</ul>

●実際の表示

雑誌では、こんなの一発で字下げできる。
AIとPSならば、テキストボックスの設定で、文章の全体を字下げし、テキストの先頭行のみ頭出しができる。
（やり方詳しくはご自分でググって下さい・・・。）

しかし、WEBのテキストでは中々できることではなく、やり方も思いつかないもんだ・・・。
だってーのに、雑誌感覚でWEBを見る人ってのはまぁ、無茶な要求をしてくるわけで、平気で字下げしてといってくるもんだ。
そして、なんでできないかを説明しても理解してくれないもんなんだ。
こうなりゃ、tableで、※と文章分けるか・・・？
いや、それでは、文章構造的にクールじゃない・・・・。
（現に、みやびは過去にこういった注文を受けた時、tableタグを使ったことがある）

・・・・・・・・・・・・・・と、泣き寝入りするのは早い。
字下げくらい、CSS一本でできる。

●HTMLソース

<ul class="sagesage">
<li>※みやびプリンの正しい食べ方に関しては、カップ下部の注意書きをご覧下さい。（本当の事が書いてあるとはかぎりません。）</li>
<li>※ペットにみやびプリンを与えないで下さい。爆○する恐れがあります。</li>
<li>※食べることによって、万が一健康を害するようなことがあっても、当社は一切責任を負いかねます。予めご了承下さい。</li>
</ul>

●CSSソース

.sagesage li {
text-indent: -1em;
margin-bottom: 10px;
padding-left: 1em;
}

●実際の表示

あぁ、なんて地味な小技だろう！
しかし、見た目とソース的にはなんとクールか！
そう、これを考えるならば、WEBのテキストにも無限の可能性があり、雑誌風にいくらでもできるかも、なんと思えてくるだろう。
そう、探せば、知恵を絞ればいくらだって、クールな表示ができるもんだ。

長くなってしまったが（前置きが）とかく、いろいろやりようがあるんです。
今はCSS3も出てきてるし、かなり可能性が広がっています。

泣き寝入りせず、いろいろ探してみよう。
次回は、画像と文章の絡ませ方をやろうと思う。
次回はかなり雑誌ぽいことやります。乞うご期待？？