デザインの学校

注意書きなどを記述する時に頭に「※」マークなどをつけて

※イラストレーター、フォトショップまたはワード、エクセル使用可能な方、インストラクター、サブインストラクター経験者優遇

などと書きますが、文章が長くなると自動的に折り返されて「※」マークの下に文字が続いて書かれてしまいます。こんな時「※」だけ前に出ていたらいいな…と思うことがよくあります。これをCSSで設定することができます。

CSS 記述例)
p{
	padding-left:1em; /* 注意書き部分を本文より1文字文字下げ */
	text-indent:-1em; /* ※を「-(マイナス)」方向に寄せる */
}

さらに応用
※イラストレーター、フォトショップまたはワード、エクセル使用可能な方、インストラクター、サブインストラクター経験者優遇
※MOT所有者、インストラクター経験者優遇

上記のように項目が2個以上の場合、リストタグを使って表記することがあります。

表示例) ul li をそのまま記述

• ※イラストレーター、フォトショップまたはワード、エクセル使用可能な方、インストラクター、サブインストラクター経験者優遇
• ※MOT所有者、インストラクター経験者優遇

表示例) CSS の text-indent を使って ul li をインデント(字下げ)

• ※イラストレーター、フォトショップまたはワード、エクセル使用可能な方、インストラクター、サブインストラクター経験者優遇
• ※MOT所有者、インストラクター経験者優遇

CSS 記述例)
ul.hedge li{
	list-style-type:none; /* li で表示される「・」を非表示にする */
	padding-left:1em; /* 注意書き部分を本文より1文字文字下げ */
	text-indent:-1em; /* ※を「-(マイナス)」方向に寄せる */
}