2年 ago
145301 Views

テキストをデザインするtext-indentで文字下げの表現をする

text-design

印刷物などでは、段落のはじまりを分かりやすくするために先頭を1文字分下げる「文字下げ」がよく使われます。web同じ効果ができるのがtext-indentなのです。
文字下げを行う時に、スペースを直接入力する方もいらっしゃいますが、要素内先頭にある半角スペースは無視されるのがhtmlの仕様です。またスペースを入れてしまうとプログラムで文章から文字列を取り出したりそのデータを他のフォーマットで使ったりする時にわざわざ無駄なスペースを削除するための処理が必要になるなど、データの再利用が低下する場合があります。そのようなことがないように見た目の装飾はなるべくCSSで実現することをお勧めします。CSSを使えば文字下げをしたくない場合に、本文を修正することなく一括変更ができるので、作業効率が上がる利点もありますよ。

楽天のSEO対策として効果的な商品詳細内のテキストは重要です。広告に頼りがちなとこはテキストを使わず画像ペタペタが多いですが、なるべく取りたいキーワードはテキスト化しておきたいですよね。

img

↑アパレル関係やインテリアショップなどでよく見かける、画像+テキスト説明。シンプルなモノもリピートさせるとオシャレに見えますよね。
そんなテキストをより見栄え良く表現するために使いたいCSSのご紹介!今回はすぐにでもできるtext-indentを使って雑誌のように段落を見やすくしましょう。

段落をデザインするtext-indentの使い方

■使用例

多くの言語では、新しい段落をはじめる際に最初の行を字下げする習慣があります。日本でも雑誌の文章ではよく見ますよね?これは文章を読む際に段落が分かりやすく読みやすくなります。

ちなみに、話は変わりますが、私の誕生日は2月20日志村けんと同じ誕生日ですが、面白さに欠けます。たまに天然って言われるのですが、自分としては天然のつもりはなく、面白くしている時にウケないで、意図して無い時に笑いが起こるのが腑に落ちないです。

■html

<p>
多くの言語では、新しい段落をはじめる際に最初の行を字下げする習慣があります。日本でも雑誌の文章ではよく見ますよね?これは文章を読む際に段落が分かりやすく読みやすくなります。
</p>
<p>
ちなみに、話は変わりますが、私の誕生日は2月20日志村けんと同じ誕生日ですが、面白さに欠けます。たまに天然って言われるのですが、自分としては天然のつもりはなく、面白くしている時にウケないで、意図して無い時に笑いが起こるのが腑に落ちないです。
</p>

■css

p {text-indent: 1em;}

っとこんな感じです。なるべくテキストを使ってSEO対策を心がけたデザインにしてくださいね。チャオ!

12345 (No Ratings Yet)
Loading...

Comments to テキストをデザインするtext-indentで文字下げの表現をする

Leave a Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Menu Title
ツールバーへスキップ