テキストプロパティコミュ

行の高さを指定する

line-height

すべての要素

<p style="line-height:normal;">行の高さをnormal（標準）、フォントサイズを14pxにしています。自動改行を伴うような長い文章を表示させる際には、行間を適当な長さに空けてやると読みやすくなります。なお、行間の求め方は行の高さ－フォントサイズです。行間は１行の上下に均等に割り振られます。</p>

<p style="line-height:120%;">行の高さを120%、フォントサイズを14pxにしています。自動改行を伴うような長い文章を表示させる際には、行間を適当な長さに空けてやると読みやすくなります。なお、行間の求め方は行の高さ－フォントサイズです。行間は１行の上下に均等に割り振られます。</p>

<p style="line-height:1.5em;">行の高さを1.5em、フォントサイズを14pxにしています。自動改行を伴うような長い文章を表示させる際には、行間を適当な長さに空けてやると読みやすくなります。なお、行間の求め方は行の高さ－フォントサイズです。行間は１行の上下に均等に割り振られます。</p>

<p style="line-height:2em;">行の高さを2em、フォントサイズを14pxにしています。自動改行を伴うような長い文章を表示させる際には、行間を適当な長さに空けてやると読みやすくなります。なお、行間の求め方は行の高さ－フォントサイズです。行間は１行の上下に均等に割り振られます。</p>

<p style="line-height:2;">行の高さを2、フォントサイズを14pxにしています。自動改行を伴うような長い文章を表示させる際には、行間を適当な長さに空けてやると読みやすくなります。なお、行間の求め方は行の高さ－フォントサイズです。行間は１行の上下に均等に割り振られます。</p>

<p style="line-height:10px;">行の高さを10px、フォントサイズを14pxにしています。自動改行を伴うような長い文章を表示させる際には、行間を適当な長さに空けてやると読みやすくなります。なお、行間の求め方は行の高さ－フォントサイズです。行間は１行の上下に均等に割り振られます。</p>

行の高さをnormal（標準）、フォントサイズを14pxにしています。自動改行を伴うような長い文章を表示させる際には、行間を適当な長さに空けてやると読みやすくなります。なお、行間の求め方は行の高さ－フォントサイズです。行間は１行の上下に均等に割り振られます。

行の高さを120%、フォントサイズを14pxにしています。自動改行を伴うような長い文章を表示させる際には、行間を適当な長さに空けてやると読みやすくなります。なお、行間の求め方は行の高さ－フォントサイズです。行間は１行の上下に均等に割り振られます。

行の高さを1.5em、フォントサイズを14pxにしています。自動改行を伴うような長い文章を表示させる際には、行間を適当な長さに空けてやると読みやすくなります。なお、行間の求め方は行の高さ－フォントサイズです。行間は１行の上下に均等に割り振られます。

行の高さを2em、フォントサイズを14pxにしています。自動改行を伴うような長い文章を表示させる際には、行間を適当な長さに空けてやると読みやすくなります。なお、行間の求め方は行の高さ－フォントサイズです。行間は１行の上下に均等に割り振られます。

行の高さを2、フォントサイズを14pxにしています。自動改行を伴うような長い文章を表示させる際には、行間を適当な長さに空けてやると読みやすくなります。なお、行間の求め方は行の高さ－フォントサイズです。行間は１行の上下に均等に割り振られます。

行の高さを10px、フォントサイズを14pxにしています。自動改行を伴うような長い文章を表示させる際には、行間を適当な長さに空けてやると読みやすくなります。なお、行間の求め方は行の高さ－フォントサイズです。行間は１行の上下に均等に割り振られます。

横方向の揃え位置を指定する

text-align

ブロックレベル要素

<p style="text-align:left;">左揃え</p>
<p style="text-align:center;">中央揃え</p>
<p style="text-align:right;">右揃え</p>

左揃え

中央揃え

右揃え

縦方向の揃え位置を指定する

vertical-align

インライン要素及びth、td要素

<p style="font-size:60px; background-color:skyblue;">例<span style="background-color:lightgreen; font-size:30px;">Example.<span style="font-size:14px; background-color:orange; vertical-align:baseline;">baselineを指定</span></span></p>

<p style="font-size:60px; background-color:skyblue;">例<span style="background-color:lightgreen; font-size:30px;">Example.<span style="font-size:14px; background-color:orange; vertical-align:top;">topを指定</span></span></p>

<p style="font-size:60px; background-color:skyblue;">例<span style="background-color:lightgreen; font-size:30px;">Example.<span style="font-size:14px; background-color:orange; vertical-align:middle;">middleを指定</span></span></p>

<p style="font-size:60px; background-color:skyblue;">例<span style="background-color:lightgreen; font-size:30px;">Example.<span style="font-size:14px; background-color:orange; vertical-align:bottom;">bottomを指定</span></span></p>

<p style="font-size:60px; background-color:skyblue;">例<span style="background-color:lightgreen; font-size:30px;">Example.<span style="font-size:14px; background-color:orange; vertical-align:text-top;">text-topを指定</span></span></p>

<p style="font-size:60px; background-color:skyblue;">例<span style="background-color:lightgreen; font-size:30px;">Example.<span style="font-size:14px; background-color:orange; vertical-align:text-bottom;">text-bottomを指定</span></span></p>

<p style="font-size:60px; background-color:skyblue;">例<span style="background-color:lightgreen; font-size:30px;">Example.<span style="font-size:14px; background-color:orange; vertical-align:super;">superを指定</span></span></p>

<p style="font-size:60px; background-color:skyblue;">例<span style="background-color:lightgreen; font-size:30px;">Example.<span style="font-size:14px; background-color:orange; vertical-align:sub;">subを指定</span></span></p>

例Example.baselineを指定

例Example.topを指定

例Example.middleを指定

例Example.bottomを指定

例Example.text-topを指定

例Example.text-bottomを指定

例Example.superを指定

例Example.subを指定

テキストに線を引く

text-decoration

すべての要素

<p style="text-decoration:underline;;">下線が引かれます</p>
<p style="text-decoration:overline;">上線が引かれます</p>
<p style="text-decoration:line-through;">打ち消し線が引かれます</p>

下線が引かれます

上線が引かれます

打ち消し線が引かれます

一行目のインデント幅を指定する

text-indent

ブロックレベル要素

<p style="text-indent:1em;">吾輩は猫である。名前はまだ無い。<br>
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。</p>

<p style="text-indent:2%;">親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。</p>

吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。

親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。

テキストの大文字・小文字を変換する

text-transform

すべての要素

<p style="text-transform:none;">Arthur Conan Doyle</p>
<p style="text-transform:capitalize;">arthur conan doyle</p>
<p style="text-transform:lowercase;">Arthur Conan Doyle</p>
<p style="text-transform:uppercase;">Arthur Conan Doyle</p>

Arthur Conan Doyle

arthur conan doyle

Arthur Conan Doyle

Arthur Conan Doyle

文字の間隔を指定する

letter-spacing

すべての要素

<p style="letter-spacing:normal;">こっちみんな！</p>
<p style="letter-spacing:10px;">こっちみんな！</p>
<p style="letter-spacing:3em;">こっちみんな！</p>

こっちみんな！

こっちみんな！

こっちみんな！