#ffffff #bc7c43 #beb53f #85a248 #2f6850 #4f8ea4 #89bcc5 #565669 #000000 #b22222 #daa09a

web material *Essence

  1. Home
  2. DesignTips
  3. text-other

OtherTips-text

その他のテキスト小技

使い勝手の良さそうなものやユーザビリティ向上に役立ちそうなもの、且つ難しくない小技です。

行頭1文字下げる・二行目以降を1字下げる

例2:インデント無し

※文字を下げるには、text-indentを使います。
最初の1文字に適用されるので、最初の行がインデントされているように見えます。
1文字分のインデントは1emです。

例2-1:インデント有り

※文字を下げるには、text-indentを使います。
最初の1文字に適用されるので、最初の行がインデントされているように見えます。
1文字分のインデントは1emです。

例2-2:インデント有り/2行目以降を1文字下げる

※文字を下げるには、text-indentを使います。
最初の1文字に適用されるので、最初の行がインデントされているように見えます。
1文字分のインデントは1emです。

<p class="sample2-1(sample2-2)">※文字を下げるには、text-indentを使います。<br>最初の1文字に適用されるので、最初の行がインデントされているように見えます。<br>1文字分のインデントは1emです。</p>
.sample2-1{
   text-indent: 1em;
}
.sample2-2{
   margin-left: 1em; /* ブロック全体を1em右 */
   text-indent: -1em; /* 先頭の1文字のみ1em左 */
}

漢字にふり仮名(ルビ)をふる

例3:漢字(かんじ)変換(へんかん)する

<ruby>漢字<rp>(</rp><rt>かんじ</rt><rp>)</rp></ruby>に<ruby>変換<rp>(</rp><rt>へんかん</rt><rp>)</rp></ruby>する

ルビを表示させるには、ルビをふる部分を<ruby></ruby>で囲み、<rt></rt>でルビにする文字を囲みます。
<rp>は<ruby>未対応ブラウザでの表示が 「漢字かんじに変換へんかんする」となってしまわないための括弧です。
すると、対応ブラウザの場合は括弧を表示せずにルビを表示しますが、未対応ブラウザでは
「漢字(かんじ)に変換(へんかん)する」と表示されます。
また、ふり仮名の文字色やサイズも読みやすいように変更することもできます。

rt{
   color:#009900; /* ルビの文字色 */
   font-size: 10px; /* ルビの文字サイズ */
}