Chapter03 HTMLの文章

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

Chapter03 HTMLの文章

Chap3-1 文書構造について

Chap3-2 段落・改行・見出し

Chap3-3 リスト

Chap3-4 文章で使うCSS