ブラウザで表示される見栄えを変更してみましょう。

本講座ではCSSに触れていきます。

CSSとは?

CSSは、HTMLで作成された要素がブラウザ上でどのように表示されるかを指定するための言語です。
「Cascading Style Sheets (※1)」の頭文字を取ってCSSと呼んでいます。

少し難しく書いていますが、つまりはCSSを使うとHTMLを装飾できるということです。


※1 「Cascading Style Sheets」の意味については別講座で取り上げます

下準備

CSSを書くために、TeraPadでgieerディレクトリのindex.htmlを開きましょう。

<!doctype html>
<html>
<head>
<title>はじめてのHTML</title>
</head>
<body>
<h1>はじめてのHTML</h1>
</body>
</html>

コードはこのようになっていますね。

現状のブラウザでの表示も確認しておきましょう。
index.htmlをダブルクリックします。

はじめてのHTML

CSSを書いてみよう

"はじめてのHTML"の文字列を装飾してみましょう。

h1の開始タグを以下のように変更します。

<h1 style="color: red;">

h1要素全体で見ると以下のようになります。

<h1 style="color: red;">はじめてのHTML</h1>

ファイルを保存して、ブラウザを更新してみましょう。

CSSで文字色を変更

文字色が変わりましたね。

文字サイズが大きいので、小さくするための記述も追加しましょう。

<h1 style="color: red; font-size: 20px;">はじめてのHTML</h1>

ファイルを保存してブラウザを更新しましょう。

CSSで文字サイズを変更

先ほどに比べて文字が小さくなりました。

CSSの書き方

CSS部分を抜き出してみます。

style=""(※2)という記述は"ここにCSSを書くよ"という宣言のようなものなので、CSS部分はこの中の記述になります。 (分かりやすいように文字色と文字サイズの指定を改行で分けています。)

color: red;
font-size: 20px;

指定の対象: 指定の値という形になっていますね。

このように、指定の対象指定の値:(コロン)で区切り、終了を表すために;(セミコロン)を書きます。
指定の対象指定の値に入る文字列は様々ですが、CSSを書く場合は必ずこのルールになります。


※2 HTMLのstyle=""のような書き方については別記事で取り上げます

CSSで出来ること

下のテキストにマウスカーソルを合わせてみてください。

装飾サンプルテキスト

テキストの色が変わったり、カーソルが変わったりしたと思います。

このように、単純な見栄えだけではなく、操作に応じた見栄えもCSSで指定することができます。

まとめ

本講座では

  • CSSを使ってHTMLを装飾する
  • CSSの書き方を知る

に絞って学んできました。

これから覚えることはたくさんありますが、まずはCSSの便利さや可能性を感じてもらたら幸いです。

本講座の最終コード

  • index.html
<!doctype html>
<html>
<head>
<title>はじめてのHTML</title>
</head>
<body>
<h1 style="color: red; font-size: 20px;">はじめてのHTML</h1>
</body>
</html>

次の記事

これまでの記事

隠します!
Loading...