【CSS講座②】テキストを見やすく装飾する

今回はCSS（ Cascading Style Sheets ）を使って、テキストをカッコよく装飾したいと思います。

CSSの基本を理解する

CSS（ Cascading Style Sheets ）とは、Webサイトをデザインするためのマークアップ言語です。CSSは、セレクタ・プロパティ・バリューの構成で成り立っていることを最初に理解してください。

CSSの書き方 … セレクタ { プロパティ : 値 }

  1. セレクトとは、スタイルをHTMLのどの要素に適用するのかを決める役割になります。
  2. 次のプロパティとは、どんな種類のスタイルを適用するのかを決める役割になります。
  3. 最後のバリューとは、どのように適用するか値を決める役割になります。

テキストをカッコよく装飾する

文字サイズ、文字色を指定する

  1. ｐ{
  2.   font-size: 12pt;
  3.   color: brown;
  4. }

説明：font-sizeプロパティを使えば、フォントサイズが指定できます。また、colorプロパティを使えば、文字色が指定できます。ちなみに、文字色を指定する場合は、①光の３原色をそれぞれ２桁の16進数で表した#rrggbb 形式、もしくは、②色の英語名で表記する2パターンがあります。

太文字、斜体文字にする

  1. ｐ{
  2.   font-weight: bold;
  3.   font-style: oblique;
  4. }

説明：font-weightプロパティの値を”bold“とした場合は、フォントを太文字にすることができます。また、font-styleプロパティの値を”oblique“とした場合は、フォントを斜体文字にすることができます。

単位のpx（ピクセル）とem（エム）を理解する

CSSには多くの単位が存在します。今回は、pxとem単位について、詳しく説明します。

①px単位…px（ピクセル）とは、デジタル画像を構成するドット（小さな四角い点）に対する絶対単位になります。デジタル画像はドット（小さな四角い点）が集まり、この点が光を放つことで、画像・動画などを表示しています。ちなみに、1pxの大きさはディスプレイの規格（4Kや8Kなど）によって違ってきます。

②em単位…em(エム）とは、文字の高さを基準とした単位です。 emは使われている書体（フォント）や、CSSで指定している文字の大きさによって変化する相対単位です。例えば、Webブラウザの文字サイズが14pxだった場合は、1em=14pxという値になります。

インデントを付ける

  1. ｐ {
  2.   text–indent: 1em; /*1em下げる*/
  3. }
  4. ～～～～～～～～～～～～～～
  5. <p>
  6. あいうえお</br>
  7. かきくけこ</br>
  8. さしすせそ
  9. </p>

説明：text-indentプロパティを使えば、文章の先頭をインデント（字下げ）することができます。

文章の行間を空ける

  1. p {
  2.   line-height: 1.0em; /*行間を1.0em分だけ空ける*/
  3. }

説明：line-heightプロパティを使えば、文章の1行間の高さを変更できます。

文字の間隔を空ける

  1. p {
  2.   letter-spacing: 0.12em; /*文字間隔を0.12emだけ空ける*/
  3. }

説明：letter-spacingプロパティを使えば、文字間隔を変更できます。

テキストの両端を合わせる

  1. p {
  2.   text–align:justify;
  3. }

説明：text-alignプロパティを使えば、テキストを左寄せ=left・右寄せ=right・中央寄せ=centerにすることができます。また、テキストの両端を合わせ=justify、見栄えを良くすることもできます。

テキストをデコレーションする

  1. span {
  2.   text-decoration: underline solid red;
  3. }
  4. ～～～～～～～～～～～～～～
  5. <p>あいうえお<span>かきくけこ</span>さしすせそ</p>

説明：text-decorationプロパティを使えば、テキストをデコレーションすることができます。例えば、値を”underline”で指定すれば、指定されたテキストに下線が付きます。

※デコレーションラインを使う場合は、下線は”underline“、上線は”overline”、取消線は”line-through”で指定します。

※デコレーションラインスタイルを使う場合は、実線は”solid“、二重線は”double“、点線は”dotted“、破線は”dashed“、波線は”wavy”で指定します。

今日の問題

まず始めに、以下をメモ帳で記述し、CSS_Chapter02.htmlファイルとして保存してください。

  1. <html>
  2. <head>
  3. <meta charset=”UFT-8″>
  4. <title>ここページのタイトルです</title>
  5. <style>
  6.   H2 { color: blue }
  7. </style>
  8. <meta name=”description” content=”ページの要約文”>
  9. </head>
  10. <body>
  11. <h2>坊ちゃん</h2>
  12. <p>親讓りの無鐵砲で小供の時から損ばかりして居る。小学校に居る時分学校の二階から飛び降りて一週間程腰を拔かした事がある。</p>
  13. <p>親類のものから西洋製のナイフを貰つて奇麗な刃を日に翳（かざ）して、友達に見せて居たら、一人が光る事は光るが切れさうもないと云つた。</p>
  14. </body>
  15. </html>

問1

テキストの文字色を灰色、文字サイズを14pxに変更してください。

問2

テキストをインデントしてください。

問3

テキストの行間と文字間隔を変更して、文章を見やすくしてください。

問4

テキストにある”親讓りの無鐵砲”に下線を引いてください。

宿題

テキストをオリジナルのスタイルで作ってみてください。

コメント