Illust & Music 月の高いところ

今日のプリン言

謎のプリン語る。
一人書く人増えました。

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

2012年08月31日

みやびプリン 140 87

144 144

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

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

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

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

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

前置き長すぎwww

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

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

●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も出てきてるし、かなり可能性が広がっています。

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

大航海時代V - メイン

トラックバック(0)

トラックバックURL:

コメントする