テキストの配置・装飾 (HTML,CSS)(3ページ目)

マーカーはリストだけではない見出しのデザインとして、見出しの文字の先頭に画像を加えてみたいと思ったことはありませんか？すべての見出しに画像を表示するタグを追記するのは記述量が多くなってしまって無駄ですし、ul要素とli要素を使った「リスト」にすると「見出し」であることが表現できません。そこで、スタイ...続きを読む

疑似要素を使わない現実案見出しのデザインとして、見出しの文字の先頭に画像を加えてみたいと思ったことはありませんか？そんなとき、スタイルシートを使えば、たった1つスタイルを定義するだけで、すべての見出しの先頭に同じ画像を加えることができます。……という話を、前回の記事「見出しの頭に画像を加える(前編)...続きを読む

本のように段落の先頭を字下げしたい書籍や雑誌などの文章では、段落の先頭に1文字分ほどの空白を設ける「字下げ」が使われていることがあります。ウェブ上でこれを実現するには、どうすれば良いでしょうか？各段落の先頭に1文字の空白文字を挿入する……とすると、段落が多い場合には面倒です。最初から段落の分割がハッ...続きを読む

HTMLの文字間隔を調整するにはCSSのletter-spacingを使うウェブ上に文字を掲載する際には、文字と文字の間隔を細かく調整したい場合があります。例えば見出しとして掲載する文字なら、広いスペースに少ない文字をバランスよく配置したいこともあるでしょうし、狭いスペースにたくさんの文字を詰めて表...続きを読む

CSSの使い方！改行についてブラウザに表示される文章は、画面の端やウインドウの端などで自動改行されます。英文ならスペースで区切られた箇所で改行されるため、あまりおかしな表示にはなりません。しかし、日本語の場合は(句読点や長音の直前では改行しないといった禁則を除けば)どこを改行位置にしても構わない規則...続きを読む

<!--div.samplep{margin-top:3px;margin-bottom:3px;}-->画像を使わずに文字に影を付けよう見出しに使う場合など、周囲よりも文字を目立たせる方法として、影を付けたいと思うこともあるでしょう。しかし、影を付けたいがために文字を画像にしてしまうのは、あまり好...続きを読む