CSS（Cascading Style Sheets）でのフォントとは、Webページのテキストの見た目やスタイルを定義するためのプロパティを指します。フォントは、文字の形や大きさ、太さ、スタイルを決定し、読みやすさやデザイン性を高める役割を果たします。以下に、CSSでフォントを指定するための主要なプロパティについて説明します。
1. フォントファミリー（font-family）
font-familyプロパティは、使用するフォントの種類を指定します。複数のフォントをカンマで区切って指定し、最初のフォントが利用できない場合は次のフォントを使用するというフォールバック機能があります。
body { font-family: "Arial", "Helvetica", sans-serif; }2. フォントサイズ（font-size）
font-sizeプロパティは、テキストの大きさを指定します。px、em、rem、%、vw、vhなどの単位を使用してサイズを設定できます。
h1 {
font-size: 24px;
}
p {
font-size: 1.2em;
}3. フォントの太さ（font-weight）
font-weightプロパティは、テキストの太さを指定します。値としては、数値（100〜900）やキーワード（normal, bold, bolder, lighter）を使用できます。
p {
font-weight: bold;
}
4. フォントスタイル（font-style）
font-styleプロパティは、テキストのスタイル（通常、斜体、イタリック体など）を指定します。
em {
font-style: italic;
}
5. 行の高さ（line-height）
line-heightプロパティは、行間の高さを指定します。px、em、%などの単位を使用して設定できます。
p {
line-height: 1.5;
}
6. 文字間のスペース（letter-spacing）
letter-spacingプロパティは、文字間のスペースを指定します。
h1 {
letter-spacing: 2px;
}
7. 単語間のスペース（word-spacing）
word-spacingプロパティは、単語間のスペースを指定します。
p {
word-spacing: 4px;
}
ここまでのまとめ
CSSのフォントプロパティを使用することで、テキストの見た目を細かく制御できます。これにより、Webページのデザインとユーザビリティを向上させることができます。フォントファミリー、フォントサイズ、フォントの太さ、スタイル、行間、文字間、単語間のスペースなど、さまざまなプロパティを適切に組み合わせて使用することで、美しく読みやすいテキストを作成しましょう。
CSSのフォントの単位や長さについて
CSS（カスケーディング・スタイル・シート）は、Webページのデザインやレイアウトを指定するための言語です。特にフォントのサイズや長さを指定する際に使われる単位は、ページの見栄えやユーザー体験に大きな影響を与えます。ここでは、CSSでよく使われるフォントの単位や長さの指定方法について解説します。
フォントの単位
px（ピクセル）:固定されたサイズの単位で、特定のデバイスで見たときのサイズを正確に指定します。例えば、font-size: 16px; は16ピクセルのフォントサイズを指定します。
em:相対的な単位で、親要素のフォントサイズに基づきます。例えば、親要素のフォントサイズが16pxの場合、font-size: 1.5em; は24px（16px x 1.5）になります。
rem:ルート要素（通常はhtml要素）のフォントサイズに基づく相対的な単位です。例えば、ルート要素のフォントサイズが16pxの場合、font-size: 2rem; は32px（16px x 2）になります。
%（パーセント）:親要素のフォントサイズに対する割合を指定します。例えば、親要素のフォントサイズが16pxの場合、font-size: 150%; は24px（16px x 1.5）になります。
長さの単位
px（ピクセル）:先述の通り、固定されたサイズを指定するための単位です。width: 100px; は幅100ピクセルを指定します。
%（パーセント）:親要素に対する割合でサイズを指定します。例えば、親要素の幅が500pxの場合、width: 50%; は250px（500px x 0.5）になります。
vh / vw:ビューポート（表示領域）の高さ（vh）や幅（vw）に基づく単位です。1vh はビューポートの高さの1%を表し、1vw はビューポートの幅の1%を表します。
em / rem:フォントのサイズと同様に、親要素（em）やルート要素（rem）のフォントサイズに基づく相対的な単位です。例えば、width: 10em; は親要素のフォントサイズが16pxの場合、160px（16px x 10）を指定します。
ここでのまとめ<まとめ
CSSでフォントや要素の長さを指定する際に使われる単位は多種多様で、それぞれに適した使い方があります。固定されたサイズを指定したい場合はpxを、相対的なサイズを指定したい場合はemやrem、パーセントなどを使用します。これらの単位を理解し、適切に使い分けることで、柔軟で美しいWebデザインを実現することができます。
下の空欄に16pxと入力し1emと入力して比べて見よう。emについて、単に一行の幅と思っていましたが ラテン文字の大文字”M ”の幅でエムと呼ぶとか16PXの幅が1emだとか書かれています
子要素（孫要素）がある場合ややこしい..更に rem(ルートエム)どうなってる。
実際にサイズを見てみると
愛してる
これにfont-size: 1.125em;を反映させるには、以下のようにCSSを修正します。
p {
font-family: unset;
font-size: 1.125em;
}
愛してる
{padding: 0.5rem; font-size: 1.5em;}の大きさは
愛してる上位のbody要素など計算して以下のように
=css=
html {
font-size: 16px; /* デフォルト */
}
body {
font-size: 1.125em; /* 16px × 1.125 = 18px */
}
.parent {
font-size: 1.5em; /* 18px × 1.5 = 27px */
padding: 2em; /* 27px × 2 = 54px */
}
=HTML=
<html>
<body>
<div class="parent">テキスト⪦/div>
</body>
child{padding: 0.5rem;}の大きさは
テキスト
27 × 0.5 = 13.5pxよって、13.5pxが.child要素のpadding値となります。
常にhtml要素のfont-size値を基準とするため、em単位のように要素が入れ子になっていても関係ありません。
%単位を使う場合は何を基準としているかをプロパティごとに確認しておくと安心です。
ブラウザの横幅に対する相対的な値となり、1vwはブラウザの横幅の1%に相当します。 たとえば、ブラウザ幅が1200pxのとき1vwは12px、ブラウザ幅が768pxのとき1vwは7.68pxを表すことになります。 ただ、全体的なレイアウトなどにvw単位を使うと意図しない余白が生まれることがあります。 vw単位はスクロールバーの幅を含む仕様のため、width: 100vw;を指定するとスクロールバーの幅分、横スクロールが発生します。 なので、全体的なレイアウトには%単位のほうが適しているといえます。 しかし、%単位は常に親要素に依存するため、ブラウザ幅を基準としたい場合には使えないので、その点便利ですね。 つまり、vw単位と%単位は、rem単位とem単位の関係性とほぼ同じです。
すべてのCSSをpx単位で指定する場合です。 すべてpx単位で指定するとブラウザの設定から文字サイズを変更しても一切反映されないことになってしまいます。px単位をすべてに用いるとアクセシビリティを無視してしまう可 能性があります。
文章のタグ・段落・改行・仕切り線・＜p>タグと ＜div>タグ余白の違いわかるかな
それについては、このサイト後でもう一度で勉強しましょう。
この文章のhtml＜p>タグは＜p class="sample" style="text-align:start;">と書く
CSS＜style>タグは p.sample{ padding: 1em;line-height: normal; width:900px; background-color: #e6dfdf; }
/*背景 薄い灰色*/と書くとこのよ うに表記される。
この文章のhtml＜p>タグは
＜p style="padding: 1em;
line-height: 2em; width:750px; background-color: #e6dfdf;text-align:center;"＞
と書きました、行の高さと横の位置 を変えました。
行の高さ＜line-height: 2;＞ ＜number> (単位なし)
使用値は、この単位のない ＜number> に要素のフォントサイズを掛けたものになります。
計算値は、指定された ＜number> と同じです。
ほとんどの場合、継承時の予期しない結果を避けるために、これが line-height を設定する好ましい方法です。
minの意味は
min()関数とは分（minute）・最小値（minimum）・ミネソタ州 など
UP Page
min()関数には、1つ以上のコンマ区切りの計算が含まれ、それらの最小値を表します。
つまり、最大値を設定するにはmin()を使用します。 実際に見てましょう。 要素の最大幅を500pxにしたい場合は、下記のように記述します。
-CSS-
.element { width: min(50%, 500px);}
この記述で、要素は必ず500px以下になります。
clampの意味は
かすがい。動留め金具で固定する、または留める。
- clamp()関数とは
- 2つの定義された値（最小値と最大値）の間をクランプすることです。
3つのパラメーター（最小値、推奨値、最大値）を使用します
last childの意味は
追加された新しい規格CSS3 E:nth-last-child(n)末子・季子(きし). 乙子(おとご) など
疑似クラスの一種で、後ろから数えてn番目の子となるE要素にスタイルを適用する。
擬似クラスlast-childの後に擬似要素afterをつなげて使うCSS参考例
HTML＆CSS- last-child{}値
---------CSS---------
div.sample p:last-child {background-color:#00ccff;}
---------HTML---------
＜div class="sample">
＜h3>今日の天気
＜p>今日は＜strong>晴れ＜/strong>でしょう。＜/p>
＜p>日差しが強くなるでしょう。＜/p>
＜p>日傘や帽子の使用をおすすめします。＜/p>
＜h3>明日の天気＜/h3>
＜p>明日は＜strong>雨＜/strong>でしょう。＜/p>
＜p>気温が低くなるでしょう。＜/p>
＜p>長袖の上着があると良いでしょう。＜/p>
＜/div>
今日の天気
今日は晴れでしょう。
日差しが強くなるでしょう。
日傘や帽子の使用をおすすめします。
明日の天気
明日は雨でしょう。
気温が低くなるでしょう。
長袖の上着があると良いでしょう。
---------CSS---------
table.sample tr {background-color:#CCFFCC;}
table.sample tr:nth-last-child(3) {background-color:#FFCCCC;}
---------HTML---------
＜div class="sample">
＜table class="sample">
＜tr>＜td>みかん＜/td>＜td>10箱＜/td>＜/tr>
＜tr>＜td>りんご＜/td>＜td>20盛＜/td>＜/tr>
＜tr>＜td>バナナ＜/td>50房＜/td>＜/tr>
＜tr>＜td>メロン＜/td> 8個＜/td>＜/tr>
＜tr>＜td>すいか＜/td> 2玉＜/td>＜/tr>
＜tr>＜td>レモン＜/td> 20袋＜/td>＜/tr>
＜tr>＜td>ライチ＜/td> 80個＜/td>＜/tr>
＜tr>＜td>キウイ＜/td> 50個＜/td>＜/tr>
＜tr>＜td>ぶどう＜/td> 30房＜/td>＜/tr>
＜/table>
みかん 10箱 りんご 20盛 バナナ 50房 メロン 8個 すいか 2玉 レモン 20袋 ライチ 80個 キウイ 50個 ぶどう 30房
border-widthプロパティなど
文字サイズ設定が変わっても変化させたくないものにはpx単位を使い、
それ以外はemやrem単位などの相対的な値を使う場合を考えてみましょう。
文字サイズといっしょに余白も比例して広がっているところです。
全体的なレイアウトとデザインの比率を維持しつつ、文字サイズを変化させられます。
メディアクエリの単位にも相対的な値を使っていれば、文字サイズが大きくなればなるほど、スマホのデザインに近づいていきます。これは、ブラウザの拡大率をあげる
場合と同じ挙動になります。
border-widthプロパティは
上下左右のボーダーの太さをまとめて指定する際に使用します。
上下左右を異なった太さにしたい場合には、スペースで区切って複数の値を指定します。
値を1つ指定した場合： [上下左右]がその太さになります。
値を2つ指定した場合： 記述した順に[上下][左右]の太さになります。
値を3つ指定した場合： 記述した順に[上][左右][下]の太さになります。
値を4つ指定した場合： 記述した順に[上][右][下][左]の太さになります。
尚、ボーダーは太さや色だけを指定しても表示されないので注意してください。
これは、border-styleプロパティの初期値がnoneとなっているためです。
ボーダーを表示させるには、太さや色だけでなく種類も同時に指定する必要があります。
指定の文字列を線で囲むスタイルは、
div.sample h2 ~ p {プロパティ名:値;｝
例 ｛border: 3px dotted #000000;}
div_CSS_border.html詳細は 以下に転載
全体的な＜タグ＞レイアウトを確認する上下左右のボーダーを使って試みる、赤色で ３px幅のボーダーでCSSで宣言
border: 3px solid red;
div 1あいうえお
div 2あいうえお
div 3あいうえお
div 4あいうえお
div 5あいうえお
div 6あいうえお
div 7あいうえお
div 8あいうえお
none css- p.sample1 {border-style: none; background: #ADD8E6;}
hidden css- p.sample2 {border-style: hidden; background: #B0C4DE;}
solid css- p.sample3 {border-style: solid; background:#87CEFA;}
double css- p.sample4 {border-style: double; background: #B0E0E6;}
groove css- p.sample5 {border-style: groove; background: #AFEEEE;}
ridge css- p.sample6 {border-style: ridge; background: #87CEEB;}
inset css- p.sample7 {border-style: inset; background: #66CDAA;}
outsetcss- p.sample8 {border-style: outset; background: #7FFFD4;}
dashed css- p.sample9 {border-style: dashed; background: #98FB98;}
dotted css- p.sample10 {border-style: dotted; background: #90EE90;}
上下solid、左右double css- p.sample11 {border-style: solid double; background: #F0E68C;}
上solid、左右double、下groove css- p.sample12 {border-style: solid double groove; background: #EEE8AA;}
上solid、右double、下groove、左ridge css- p.sample13 {border-style: solid double groove ridge; background: #FFE4B5;}
第74回 福岡国際マラソン
UP Page
Another Sidebar