2. CSS

CSS は Cascading Style Sheets の略で、文章やブロックの色とかフォントサイズとかレイアウトとかのスタイル(見た目)を決める機能です。
スタイルシートと呼んでる人も多いです。

CSS を使うためにはまず以下の様なスタイル指定を HTML ファイル内または外部ファイルに記述します。

CSSの記法

セレクタ {
 プロパティ1:  プロパティ1の値;
 プロパティ2:  プロパティ2の値;
・・・
}

セレクタはスタイルを適用する対象を指定する項目で、代表的なセレクタの書き方は以下の通りです。

セレクタの代表的な記法

* (アスタリスク) ・・・全ての要素を対象とする

タグ名・・・タグ名で指定した全ての要素を対象とする (例) p

タグ名.クラス名・・・タグ名で指定された要素で、かつクラス名が同じ全て要素を対象とする (例) p.hoge

#ID ・・・ ID を指定した一つだけの要素を対象とする (例) #fuga

※ 他にも色々な書き方があります

ここで出てきた「クラス名」と「ID」は似た様な使い方をしますが、

※ 間違って同じIDを複数の要素に指定しても一応動作しますが、必ずしも正常に動作するとは限りませんのでご注意下さい。

では例を見てみましょう。
まずCSSをHTMLファイルのヘッダに直接埋め込む場合です。
この場合は style タグを使ってその中に CSS を書きます。

HTMLファイルのヘッダ内にCSSを書く例


<!DOCTYPE html>
<html lang="ja">
<head> 
 <meta charset="UTF-8">
 <title>タイトル</title>
 <style>
  div{  /* 全ての div に適用 */
   background: #ff0000;   /* 背景色をRGB で指定*/
  }
 p{ /* 全ての p に適用 */
   color: blue;   /* 文字色を色名で指定*/
 } 
 p.fuga{ /* クラス名が fuga である p にのみ適用 */
   font-size: 250%; /* 文字サイズを％で指定 */
 } 
 #fuga{ /* IDが fuga の要素にのみ適用 */
   font-size: 500%;
   color: yellow;
 } 
</style>
</head>

<body>
 <div>
  <p>クラスもIDも未指定</p>
  <p class="fuga">クラス名がfuga</p>  <!-- クラス名は class=〜 で指定する -->
  <p class="fuga">クラス名がfuga</p>  
  <p class="fuga">クラス名がfuga</p>  
  <p id="fuga">IDがfuga</p>  <!-- ID は id=〜 で指定する。文字色 blue は yellow に上書きされる -->
 </div>
</body>
</html>

外部ファイルにCSSを書きたい場合は、まず以下の様なcssファイル(今回は mycss.css とします)を用意します。

外部 CSS ファイルの例 (mycss.css)

div{  /* 全ての div に適用 */
   background: #ff0000;   /* 背景色をRGB で指定*/
}
p{ /* 全ての p に適用 */
   color: blue;   /* 文字色を色名で指定*/
} 
p.fuga{ /* クラス名が fuga である p にのみ適用 */
   font-size: 250%; /* 文字サイズを％で指定 */
} 
#fuga{ /* IDが fuga の要素にのみ適用 */
   font-size: 500%;
   color: yellow;
}

その後 HTML ファイルの head 内で link タグを使って CSS ファイルを読み込みます。

外部 CSS ファイルを読み込む例

<!DOCTYPE html>
<html lang="ja">
<head> 
 <meta charset="UTF-8">
 <title>タイトル</title>
 <link rel="stylesheet" href="./mycss.css">
</head>

<body>
 <div>
  <p>クラスもIDも未指定</p>
  <p class="fuga">クラス名がfuga</p>  <!-- クラス名は class=〜 で指定する -->
  <p class="fuga">クラス名がfuga</p>  
  <p class="fuga">クラス名がfuga</p>  
  <p id="fuga">IDがfuga</p>  <!-- ID は id=〜 で指定する。文字色 blue は yellow に上書きされる -->
 </div>
</body>
</html>

GetTitle()