18

08月2009年

CSSで簡単にぶら下げインデントをする方法

sakai 01:01 AM

  • はてなブックマークに登録
  • livedoorクリップに登録
  • Yahoo!ブックマークに登録
  • deliciousに追加

イメージ

自宅用に新しいパソコンを買った sakai です。
スペック重視とお店で伝えたら「ちょっと値が張りますよ~」と店員に言われたのでドキドキしていたのですが、CPU が Core i7、メモリが 6GB、ハードディスクが 1TB、ディスプレイや OS も付属して 13 万円くらいでした。前回パソコンを買ったときの感覚では 30 万円くらいなのかと思ってました。安くなりましたね…

今回は小ネタで失礼します。

Web ページ中の注意書きなどでよく使用される手法で、「※」マークを使って文字をぶら下げる方法をご紹介します。

このように表示されます。

※ここに注意書き。
改行しても見栄えがいいです。

XHTML ソースは以下です。

<p>※ここに注意書き。<br />
改行しても見栄えがいいです。</p>

CSS のソースは以下です。

p {
      margin-left: 1em; /* ブロック全体を 1em 右に */
      text-indent: -1em; /* 先頭の1文字のみ 1em 左に */
}

簡単ですが、意外と使えるテクニックです。

バシャログスタッフによるWebサイト制作サービス

トラックバック

このエントリーのトラックバックURL
http://c-brains.jp/cgi-bin/mt/###/1975
###はmt-tb.cgiに変更してください。

コメントを投稿

ページの先頭へ

POPULAR TAGS
  • バシャログスタッフによるWebサイト制作サービス

ARCHIVE

RECENT COMMENTS

Neennates on [使えるCSSテクニックVol.2] CSS を使った見栄えの良いページャー
You could easily be making mon
toyama on 【Fireworks】あなたのワークスペース、どんなレイアウト?
> maki さん コメントありがとうございます。 レイヤー
maki on 【Fireworks】あなたのワークスペース、どんなレイアウト?
初期設定のまま、パネル1列で作業してました。。 今までレイヤ
tomo on [使える CSS テクニック] CSSで実現するプルダウンメニュー
sakai様 早速ご返答ありがとうございます。 子供がho
sakai on [使える CSS テクニック] CSSで実現するプルダウンメニュー
>RodMond さん コメントありがとうございます。 自