注釈(※)の文章をきれいに整える:CSS小技

ブログが作りたい!CSSの小技 > 注釈(※)の文章をきれいに整える:CSS小技

注釈(※)の文章をきれいに整える:CSS小技

注釈(※)の文章をきれいに整える:CSS小技

CSSの小技(5)

注釈(ちゅうしゃく)」って、ご存知でしょうか?あまり言葉と一致しない人もいらっしゃるかもしれませんが、次のような形式で書くものを注釈と言います。

※:「注釈」とは、補足や解説、ちょっとした留意点などを別途記述する文章のことです。

一般的に、「※(こめ印)」などを付けて、読み手が分かり良いように、ちょっとした補足を書くわけですね。

さて、今回の CSSの小技は、この注釈表示をしたときにうまいこと2行目を良い位置にインデントさせる方法です。


「注釈(※)の文章をきれいに整える」とは?

例えば、この CSS小技を使わないで注釈を書くと、次のようになるのではないかしら?

※:何もなしに注釈を書くと、2行目が「※(こめ印)」の前からはじまってしまいます。これは、かっこう悪い。

これじゃあ、注釈だか何だか分らない感じさえしてしまいます。これを、きちっと整えたいわけです。

そこで、CSSの出番なのです。

CSSを付けて注釈を書くと、2行目を「※(こめ印)」の後からはじめることができます。


注釈(※)の文章をきれいに整える方法

1:ソースコード

(1)HTMLコード
(2)CSSコード

2:ポイント解説

ポイントは、インデント(text-indent)をマイナスにすることで、通常の何もない文章の形式よりも、1行目を左側に突き出す形にしていることです。

-1.5emですから、一文字半分ですね。

そしてさらに、padding-leftで左側にスペースを作ることで、全体的に右側に戻すようなことをしているわけです。(言い方が難しいですけど)

また、注釈に「:」を付けたくない人や、「注:」とか、「(注)」としたい人もいらっしゃるかと思います。

あるいは、その状況によってもずれるかもしれませんので、数値などは見ながら変更してみてください。

前の記事へ
次の記事へ

次回予告

次回は、Firefoxのスクロールバーを、常に表示する CSSの小技をご紹介します。


関連記事

CSSに関連する記事を、ご紹介します。

作成日:2009/04/21 更新日:2009/04/21

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/488-bbc4cf1b
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて