特殊記号の記述について

HTMLやCSSの文法に関わる特殊記号をページ上に表示させるには、代替テキストを利用しなければなりません。

「」を文字列として画面に表示するとき、これをそのままhtmlに記述すればタグとして認識されてしまいます。

この場合htmlに特殊文字の文字コードを記述して反映させなければなりません。

例えば、「<」は「<」、「>」は「>」、スペースは「 」で表現します。

なので「」を表示する場合は、「」のように記述する必要があります。

その他の特殊文字も特殊文字コード表を参考に記述しましょう。

CSSの基本文法

次はCSSの基本文法を覚えていきましょう。このルールを守らないと正しくCSSがWebページに反映されません。基本的にはCSSの記述場所で示した①または②の場合を例に書いていきます。

例えば上図を見てみましょう。CSSは基本的にセレクタ、プロパティ、値から構成されます。セレクタは「どの部分を装飾するか」を指定します。h1タグなら見出しを装飾しますし、pタグなら基本的なテキストが装飾されます。プロパティは「何を変化させるのか」、値は「どのように変化させるのか」を指定します。背景色を黒色にしたい時はbackground:black、文字色を白色にするならcolor:white、文字配置を中央揃えに変更したい時はtext-align:centerのように記述します。プロパティと値はコロン「:」で挟み、複数のプロパティを並べる時はセミコロン「;」で繋いでください。では実際に出力してみましょう。ちなみに、HTMLのコメントアウトは「」でしたが、CSSは「/* コメント */」で記述しましょう。

<head> 
 <style type="text/css"> 
  h1 { background:black;color:white;text-align:center; } /* h1の装飾 */
  h3 { color:white;font-weight:bold;text-align:center;background:linear-gradient(to right, red, orange, yellow, green, blue, purple); } /* h3の装飾 */
 </style> 
</head>

<body>
  <h1>反転したテキストはこんな感じで出力されます。</h1>
  <h3>ゆっくりしていってね！！</h3>
</body>

反転したテキストはこんな感じで出力

ゆっくりしていってね！！

どうでしょうか。構造は単純ですね？必要なのはセレクタとプロパティと値のみです。一方で、みなさんが普段目にしているWebページのデザインがCSSを基本に作られていることを考えると、プロパティの種類が豊富であることも予想できるでしょう。適切なプロパティを選択して、思い思いのデザインを作ってみてくださいね。

よく使うプロパティは後ろに載せているWebページや書籍を参考にしてみてください。

クラスとID

さて、セレクタにはh1タグやpタグがあるわけですが、さまざまなスタイルを文章の中で同時に使用する時、一つのセレクタに複数種類の異なるCSSを適用する必要がありますね？そんな時に使用できるのがHTMLの「id属性」と「class属性」です。

id属性は

【CSS】

#type1 {font-size: 20px; color: red}

【HTML】

ほげほげほげほげ

のようにCSS内で頭にシャープ（#）をつけて使用します。

class属性は

【CSS】

.type2 {font-size: 24px; color: blue}

【HTML】

ほにゃほにゃほにゃ

のようにCSS内で頭にドット（.）をつけて使用します。

このように、id属性とclass属性を用いることでpという一つのタグに異なるCSSを適用することが可能となります。

ただし、id属性とclass属性にはもちろん違いがあり、複数のidを一つの要素で使用することはできないため、複数のスタイルを使い分けたい時は異なる名前のclass属性を使用しましょう。

<head> 
 <style type="text/css"> 

.design-bold {font-size: 24px; font-weight: 800; color: #556b2f;}
.design-center {font-style: italic; text-align: center;}

 </style> 
</head>

<body>

  <p class="design-bold>スリ・ジャヤワルダナプラ・コッテはスリランカの首都である。</p>
  <h4 class="design-center">最も面積が小さい都道府県は香川県である。</h4>

</body>

スリ・ジャヤワルダナプラ・コッテはスリランカの首都である。

最も面積が小さい都道府県は香川県である。

さらに、タグのようなひとつの文章だけでなく、特定の範囲全体にid/class属性で指定したCSSのスタイルを適用したい時は<div>タグを使うことで文書の中をブロック分けし、スタイルを適用することができます（ブロック要素）。また文中の特定の文字列だけスタイルを変更したい、といった細かい範囲のスタイル適用は前後に改行が入らないタグを使用しましょう（インライン要素）。中間の性質を持つインラインブロック要素もあります。

<head> 
 <style type="text/css">

.text-citation {font-size: 18px; font-style: italic; color: #333631;}
.text-reference {font-size: 16px; font-weight: 800; text-align: right; color: #333631;}

 </style>
</head>

<body>
  <div class="text-citation">
<p>ある日の暮方の事である。
一人の下人が、羅生門の下で雨やみを待っていた。
<span style="color: #19448e">広い門の下には、この男のほかに<strong>誰もいない。</strong></span>
ただ、所々丹塗の剥はげた、大きな円柱に、蟋蟀が一匹とまっている。
羅生門が、朱雀大路にある以上は、この男のほかにも、雨やみをする市女笠や揉烏帽子が、もう二三人はありそうなものである。
それが、この男のほかには誰もいない。</p>
  </div>
<p class="text-reference">ーー芥川龍之介『羅生門』</p>
</body>

ある日の暮方の事である。一人の下人が、羅生門の下で雨やみを待っていた。広い門の下には、この男のほかに誰もいない。 ただ、所々丹塗の剥はげた、大きな円柱に、蟋蟀が一匹とまっている。羅生門が、朱雀大路にある以上は、この男のほかにも、雨やみをする市女笠や揉烏帽子が、もう二三人はありそうなものである。それが、この男のほかには誰もいない。

ーー芥川龍之介『羅生門』

★HTML/CSSによる文書の作成とデザイン: CSSの基本文法

目次