文字や文章で使う、CSSデザインの種類を理解することが目的です。
「chap03」フォルダの2-1.htmlを使って、エンベディングスタイルで記述します。
<h2>の文字の色を赤色にする
<title>の下に<style>を追加し、h2をセレクタにして文字の色を赤色にします。
<title>段落・改行・見出し</title>
<style>
h2{ color:red;}
</style>See the Pen 3-4 by Rayout-gw (@Rayout-gw) on CodePen.
うまく表示できない場合は、入力する箇所とブラウザの表示を確認しておきましょう
<h2>の文字サイズを18pxにする
h2セレクタに、文字サイズが18pxになるように記述を追加します。
カラーパレットを使って文字の色を変えてみましょう。
<title>段落・改行・見出し</title>
<style>
h2{ color: rgb(159, 200, 226);
font-size:18px;}
</style>See the Pen 3-4-1 by Rayout-gw (@Rayout-gw) on CodePen.
うまく表示できない場合は、入力する箇所とブラウザの表示を確認しておきましょう
文字の太さを変える
<h3>の文字を細文字、文章の一部分を<span>で囲んで太文字に変えます。
<span>はデザインするために、文字をグループ化するタグです。
見出しを細くする
h3セレクタで文字の太さを細くします。
<title>段落・改行・見出し</title>
<style>
h2{ color: rgb(159, 200, 226);
font-size:18px;}
h3{ font-weight:normal;}
</style>See the Pen 3-4-3 by Rayout-gw (@Rayout-gw) on CodePen.
うまく表示できない場合は、入力する箇所とブラウザの表示を確認しておきましょう
文字の一部分を太くする
文章中の「”ひとかたまり”」を<b>で、「前後」を<span>で囲みます。
<h2>pタグ（段落/Paragraph）</h2>
<p>段落は、文章の<b>"ひとかたまり"</b>を表し、文章にある話題・内容の最小単位。<br>
文脈が変わるごとに「段落」を使うと、文章が読みやすく、わかりやすくなる。<br>
ブラウザ上では、段落の<span>前後に、</span>1行の空白を開けて表示される。</p>spanセレクタで文字の太さを太くします。
<title>段落・改行・見出し</title>
<style>
h2{ color: rgb(159, 200, 226);
font-size:18px;}
h3{ font-weight:normal;}
span{ font-weight:bold;}
</style>See the Pen 3-4-3 by Rayout-gw (@Rayout-gw) on CodePen.
font-familyプロパティのチートシート
文字の種類を変える場合は、以下のコードをコピーして使うと便利です。
ゴシック・明朝のいずれかを選んで、bodyセレクタに記述します。
ゴシック体の設定
body{
font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}明朝体の設定
body{
font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}See the Pen 3-4-4 by Rayout-gw (@Rayout-gw) on CodePen.
ブラウザで表示する文字の書体を明朝体に変える
チートシートの記述を使って、bodyセレクタで文字の書体を明朝体に変えてみましょう。
See the Pen 3-4-5 by Rayout-gw (@Rayout-gw) on CodePen.
文章の行の高さ（行間）を変える
全ての文章の行間を100%（指定は1.0が推奨）に変えてみましょう。
See the Pen 3-4-6 by Rayout-gw (@Rayout-gw) on CodePen.
line-heightの100%は1文字の大きさと同じ
推奨される記述は「line-height : 1.0 ; 」と100%は1.0となり、
200%の時は「line-height : 2.0 ; 」となります