letter-spacingとline-heightの基本的な使い方。本来は部分的にを設定するものではなく、本文を読みやすくするために全体に設定するものなんだろうけど。このブログの本文も行間と文字間隔を調整している。
font-size: 100%;
line-height: 1.7em;
letter-spacing: 0px;タイトルと言えば昔はフォトショップでGIF画像を何種類も作成していた。結構面倒だった。ウェブフォントやスタイルシートでフォントの種類や太さ、さらにletter-spacingとline-heightを使うことによってそれなりのものができる。
画像よりも劣化もせず鮮明だ。以下の例で使っているtext-shadowはよくIllustratorで使ったドロップシャドウそのものだ。影の横位置、縦位置、ぼかし度合（太さ）を設定する。
/*GooglFontsへのlink設定はヘッダーに記載済*/
<link href="https://fonts.googleapis.com/css2?family=Peralta&display=swap" rel="stylesheet">
<div class="sample000">
MEMORANDUM
</div>
<style>
.sample000 {
font-family: 'Peralta', cursive;/*フォントの指定*/
font-size:250%; /*フォントのサイズ*/
font-weight:700; /*フォントの太さ*/
letter-spacing: -0.05em;/*文字と文字の間のスペース相対的比率*/
text-shadow: 5px 5px 3px #999999; /*横・縦・ぼかし・色*/
}
</style>自分が文字の設定に使う基本セット。一度これをコピペしていろいろ設定してみて不要な設定を消し最終の設定にしていく。
私的ルール
・文字は<body>でベースとなるサイズ（本文）を決めてそれ以外は％比率で設定
→文字を大きくしたくなった場合はベースサイズを変えるだけでいいから
・行間や高さもできるだけemや％の比率にしておく
→文字の大きさ基準の比率となるのでサイズが変わっても間隔の比率は変わらず
・ネット上のサンプルをスタイル名を変えずに都度コピペして数を増やさない
→ついやってしまう
font-family:'Montserrat', sans-serif;/*フォントの種類*/
font-size:110%;/*文字サイズ*/
font-weight:600;/*文字サイズ*/
letter-spacing:-1em;/*文字と文字の間のスペース相対的比率*/
line-height:0.8em;/*行間（文字の上下の余白）相対的比率*/
margin-top: 10px;/*文字上の外側の余白*/
margin-bottom: 10px;/*文字下の外側の余白*/
margin-left: 10px;/*文字左の外側の余白*/
margin-right: 10px;/*文字右の外側の余白*/
padding-top: 5px;/*文字上の内側の余白*/
padding-bottom: 5px;/*文字下の内側の余白*/
padding-left: 5px;/*文字左の内側の余白*/
padding-right: 5px;/*文字右の内側の余白*/
border-left: solid 0px #292F33;/*実線*/
border-right: dashed 0px #292F33;/*点線*/
border-top: double 0px #292F33;/*二重線*/
border-bottom: dashed 0px #292F33;/*破線*/以下の文字のフォントの種類とサイズと太さのみ指定したものをベースにして設定を変えてみる。
.sample001 {
font-family:'Montserrat', sans-serif; /*フォントの指定*/
font-size:150%; /*フォントのサイズ*/
font-weight:600; /*フォントの太さ*/
}文字と文字との間隔を広げる。1em＝「フォントの幅」0.1emは「フォントの幅の1/10の幅」0.5emだと「文字の幅の1/2の幅」となる。これは幅を0.5emの例。
.sample002 {
font-family:'Montserrat', sans-serif; /*フォントの指定*/
font-size:150%; /*フォントのサイズ*/
font-weight:600; /*フォントの太さ*/
letter-spacing: 0.5em;
}文字と文字との間隔を狭めてみる。幅を詰めると雑誌のタイトルとかでやる文字詰めと同じような効果が得られる。これは幅を-0.06emの例。
.sample003 {
font-family:'Montserrat', sans-serif; /*フォントの指定*/
font-size:150%; /*フォントのサイズ*/
font-weight:600; /*フォントの太さ*/
letter-spacing: -0.06em;
}上記フォント設定の状態で改行してみる。
NAO10.COM
この行間をもうちょっと狭める。line-height行間（文字の上下の余白）は標準は1〜1.2程度らしいが0.9emとしてみる。単純に改行にするとそれぞれの文字の大きさも変えられない。
NAO10.COM
<div class="sample004">
MEMORANDUM<br>
NAO10.COM
</div>
<style>
.sample004 {
font-family:'Montserrat', sans-serif; /*フォントの指定*/
font-size:150%; /*フォントのサイズ*/
font-weight:600; /*フォントの太さ*/
letter-spacing: -0.06em;
line-height:0.9em;/*行間（文字の上下の余白）相対的比率*/
</style>以下のようにMEMORANDUMとNAO10.COMとそれぞれにスタイルを別指定し、線を加えたり文字サイズを変えたりして装飾しやすくなる。
サンプル本文あいうえおかきくけこなのでさしすせそでした。
<div class="sample005">
MEMORANDUM
</div>
<div class="sample006">
NAO10.COM
</div>
<p>サンプル本文あいうえおかきくけこなのでさしすせそでした。</p>
<style>
.sample005 {
font-family:'Montserrat', sans-serif; /*フォントの指定*/
font-size:180%; /*フォントのサイズ*/
font-weight:600; /*フォントの太さ*/
letter-spacing: -0.06em;
border-bottom: solid 1px #292F33;
}
.sample006 {
font-family:'Montserrat', sans-serif; /*フォントの指定*/
font-size:150%; /*フォントのサイズ*/
font-weight:600; /*フォントの太さ*/
letter-spacing: 0.38em;
line-height:1.2em;
}
</style>文字の上下に間隔を設定する場合はpadingでもできる。
サンプル本文あいうえおかきくけこなのでさしすせそでした。
<div class="sample007">
MEMORANDUM
</div>
<div class="sample008">
NAO10.COM
</div>
<p>サンプル本文あいうえおかきくけこなのでさしすせそでした。</p>
<style>
.sample007 {
font-family:'Montserrat', sans-serif; /*フォントの指定*/
font-size:180%; /*フォントのサイズ*/
font-weight:600; /*フォントの太さ*/
letter-spacing: -0.06em;
border-bottom: solid 1px #292F33;
margin-bottom: 1px;/*文字下の外側の余白*/
}
.sample008 {
font-family:'Montserrat', sans-serif; /*フォントの指定*/
font-size:150%; /*フォントのサイズ*/
font-weight:600; /*フォントの太さ*/
letter-spacing: 0.38em;
}
</style>タイトル上の実線を近くして本文上の点線を少し離してみたい場合、paddingではこんな感じで設定できるが。
サンプル本文あいうえおかきくけこなのでさしすせそでした。
<div class="sample009">
MEMORANDUM
</div>
<p>サンプル本文あいうえおかきくけこなのでさしすせそでした。</p>
<style>
.sample009 {
font-family:'Montserrat', sans-serif; /*フォントの指定*/
font-size:180%; /*フォントのサイズ*/
font-weight:600; /*フォントの太さ*/
letter-spacing: -0.06em;
border-top: solid 1px #292F33;
border-bottom: dashed 1px #292F33;
margin-top: 15px;/*文字上の外側の余白*/
margin-bottom: 15px;/*文字下の外側の余白*/
padding-top: 5px;/*文字上の外側の余白*/
padding-bottom: 20px;/*文字下の外側の余白*/
}
</style>line-hightは文字の上下間隔が上下同寸法空いてしまう。
サンプル本文あいうえおかきくけこなのでさしすせそでした。
<div class="sample010">
MEMORANDUM
</div>
<p>サンプル本文あいうえおかきくけこなのでさしすせそでした。</p>
<style>
.sample010 {
font-family:'Montserrat', sans-serif; /*フォントの指定*/
font-size:180%; /*フォントのサイズ*/
font-weight:600; /*フォントの太さ*/
letter-spacing: -0.06em;
border-top: solid 1px #292F33;
border-bottom: dashed 1px #292F33;
margin-top: 15px;/*文字上の外側の余白*/
margin-bottom: 15px;/*文字下の外側の余白*/
padding-top: 0px;/*文字上の外側の余白*/
padding-bottom: 0px;/*文字下の外側の余白*/
line-height:2.9em;
}
</style>こんな感じでletter-spacingとline-heightで最低限の装飾ができる。 paddingとmarginの基本的な使い方はここに書いてある。
NOTICES
- 記事内容は実装させたものがほとんどですが自己責任で参考にしてください。