知識を取り込み、そして発信する
ここでは、文字そのものの見た目を整えるためのCSSを扱います。
テキスト装飾系のプロパティは、要素の配置や並びを変えるものではなく、displayで理解した要素の枠の中で、文字をどのように見せるかを調整するためのものです。
なお、これらのプロパティの中には、インライン要素やインラインブロック要素では、見た目に反映されないものがあります。
これはCSSが効いていないのではなく、要素の表示形式による挙動の違いです。
以降のコード例と出力例では、ブロック要素を使って確認します。
line-heightは行と行の間隔を調整するプロパティです。
行間が狭いと文字が詰まって読みにくくなり、広すぎると文章のまとまりが感じにくくなります。
適切なline-heightを設定すると、同じフォントサイズでも落ち着いて読みやすいレイアウトになります。
構文
セレクタ{
line-height:値;
}
line-heightには数値だけを指定する方法とpxなどの高さを指定する方法があります。
数値だけを指定した場合はフォントサイズに対する倍率として扱われ、1.5であれば文字サイズの1.5倍の行として使われる高さが確保されます。
コード例
<p>line-heightを指定しないテキスト</p>
<p class="lineheight">line-heightを指定したテキスト</p>.lineheight{
background-color: #d1fc91;
line-height: 3;
}出力例
line-heightを指定しないテキスト
line-heightを指定したテキスト
line-heightはフォントサイズや1行の文字数とセットで考える必要があります。
小さい文字で行間も狭いと一気に読みにくくなり、大きい文字で行間を取りすぎるとページが間延びして見えます。
本文はやや広め、見出しは少し詰め気味など、要素ごとに値を変えて試しながら最も読みやすいバランスを探ることが重要です。
vertical-alignは、インライン要素・インラインブロック要素の縦方向の並び方を調整するプロパティです。
行中のbaselineを基準にして、要素を上寄せ・下寄せ・中央寄せなどに調整できます。
構文
セレクタ{
vertical-align:値;
}
vertical-alignの値には、baseline・top・middle・bottomがあります。
デフォルトの値はbaselineですが、まずはbaselineの概念について図説します。
文字と画像では、持っているbaselineが異なります。
画像のbaselineは、画像の下端が基準線として扱われます。
一方で文字のbaselineは、文字の一番下を表す線ではありません。
フォントが内部的に定義している、文字を横方向に並べるための基準線です。
日本語フォントは、ひらがな・カタカナ・漢字・英数字を同じ行で自然に並べる必要があるため、フォント全体で共通のbaselineが定義されています。
分かりやすい例として、アルファベットのgは他の文字より下にはみ出しています。
それでも行として表示したときにガタついて見えないのは、適切なbaselineが定義されているためです。
コード例
<div>
<span>朝は英語でMorningです。</span>
<img src="../img/flower.png" class="vertical-align-top">
</div>
<div>
<span>朝は英語でMorningです。</span>
<img src="../img/flower.png" class="vertical-align-middle">
</div>
<div>
<span>朝は英語でMorningです。</span>
<img src="../img/flower.png" class="vertical-align-bottom">
</div>div{
border: 1px solid #aaaaaa;
}
.vertical-align-top{
vertical-align: top;
}
.vertical-align-middle{
vertical-align: middle;
}
.vertical-align-bottom{
vertical-align: bottom;
}出力例
それぞれtop・middle・bottomを指定すると、おおよそではありますが、上揃え・中央揃え・下揃えになります。
ブロック要素に指定しても一切効果がないため、それほど使用頻度は高くないですが、フォームの部品を揃える際には効果を発揮します。
text-alignはテキストを左寄せや中央寄せなどどの位置に揃えるかを決めるプロパティです。
見出しを中央に配置するとタイトルらしさが強調され、本文を左揃えにすると行の先頭が一直線に並んで読み進めやすくなります。
構文
セレクタ{
text-align:値;
}
text-alignにはleft、right、center、justifyといったキーワードを指定します。
leftは左揃え、rightは右揃え、centerは中央揃え、justifyは両端揃えで、指定した要素の中にあるテキスト全体の揃え方が変わります。
コード例
<div>
<p class="left">左揃えにします。</p>
<p class="center">中央揃えにします。</p>
<p class="right">右揃えにします。</p>
<p class="justify">両端揃えにします。複数行のときのみ有効で、brタグで改行した短い行では、効果が分かりにくくなります。</p>
</div>.left{
width: 250px;
text-align: left;
}
.center{
width: 250px;
text-align: center;
}
.right{
width: 250px;
text-align: right;
}
.justify{
width: 250px;
text-align: justify;
}出力例
左揃えにします。
中央揃えにします。
右揃えにします。
両端揃えにします。複数行のときのみ有効で、brタグで改行した短い行では、効果が分かりにくくなります。
中央揃えは短い見出しやボタンに向いていますが、長文を中央揃えにすると行頭の位置が毎回変わり読みづらくなります。
逆に左揃えは文章の読みやすさには優れますが、装飾的なタイトルには少し地味に見えることもあります。
要素の役割に合わせてtext-alignを選ぶことで、見た目と可読性の両方を両立できます。
text-decorationはテキストに下線や取り消し線などの装飾を付けるプロパティです。
リンクに下線を付けてクリックできることを示したり、価格の変更前の数字に取り消し線を付けて割引を表現したりと、線を使って意味を補足する目的で使われます。
構文
セレクタ{
text-decoration:値;
}
text-decorationにはunderline、overline、line-through、noneといった値を指定します。
underlineは下線、overlineは上線、line-throughは文字の中央に引かれる取り消し線、noneは装飾を行わない指定で、特にリンクの下線を消したいときによく使われます。
コード例
<div>
<p class="underline">下線を追加します。</p>
<p class="overline">上に線を追加します。</p>
<p class="linethrough">取り消し線を追加します。</p>
</div>.underline{
text-decoration: underline;
}
.overline{
text-decoration: overline;
}
.linethrough{
text-decoration: line-through;
}出力例
下線を追加します。
上に線を追加します。
取り消し線を追加します。
text-decorationでリンクの下線を消すとすっきりしたデザインになりますが、そのままだとどこがクリックできるのか分かりにくくなります。
下線を外す場合は色の変化や背景色、ボーダーなど別の視覚的な手がかりを必ず用意して、ユーザーが迷わずリンクだと認識できる状態を保つことが大切です。
装飾線は文字の一部として扱われるため、要素そのものの大きさやレイアウトには影響しません。
text-shadowは、文字に影を付けるプロパティです。
影を付けることで、文字を背景から浮き上がらせることができます。
構文
セレクタ{
text-shadow: 横方向（値） 縦方向（値） ぼかし半径（値） 色;
}
text-shadowの値には、影の位置やぼかし、色を指定します。
また、影は複数指定することもできますが、ここでは基本的な使い方を確認します。
コード例
<p class="text-shadow-rb">右下の方向に影を追加します。</p>
<p class="text-shadow-lt">左上の方向に影を追加します。</p>.text-shadow-rb{
text-shadow: 5px 5px 10px #000000;
}
.text-shadow-lt{
text-shadow: -5px -5px 10px #000000;
}出力例
右下の方向に影を追加します。
左上の方向に影を追加します。
1つ目は右に5px、下に5pxずらした場所に10pxのぼかしを付けた影を追加しました。
2つ目は負の数値を使って、左に5px、上に5pxずらした場所に10pxのぼかしを付けた影を追加しました。
ぼかしの値は大きくすればぼかしが強くなり、小さくすればぼかしが弱くなります。
見出しなどに使用すると効果を発揮しますが、使いすぎると読みにくくなるため、あくまで補助的な装飾として使うのが基本です。
text-indentは、テキストの1行目だけを横方向にずらすプロパティです。
段落の始まりを視覚的に分かりやすくしたい場合に使用します。
構文
セレクタ{
text-indent:値;
}text-indentの値はpx、remなどの単位を使い指定します。
コード例
<p class="text-indent1">段落の最初を1文字分字下げします。<br>
2行目以降は字下げされません。</p>
<p class="text-indent2">段落の最初を2文字分字下げします。<br>
2行目以降は字下げされません。</p>
<p class="text-indent3">段落の最初を25px分字下げします。<br>
2行目以降は字下げされません。</p>.text-indent1{
text-indent: 1rem;
}
.text-indent2{
text-indent: 2rem;
}
.text-indent3{
text-indent: 25px;
}出力例
段落の最初を1文字分字下げします。
2行目以降は字下げされません。
段落の最初を2文字分字下げします。
2行目以降は字下げされません。
段落の最初を25px分字下げします。
2行目以降は字下げされません。
このようにremで指定すると文字サイズを基準にした字下げができ、pxで指定すると細かく調整できます。
ただし、半角数字が最初にあると字下げの調整が必要になります。