入門1はこちら
CSS
最初は次のように書きます。
文字の色を変える
<!DOCTYPE html>
<html>
<head>
<!--ここにページの情報を書きます-->
<title>ページのタイトル</title>
</head>
<body>
<!--ここにページの本文を書きます-->
<h1>この文章の色を変えます。</h1>
</body>
</html>
まずcssは使わずに結果を表示してみましょう。
次のようになります。
ここでcssのファイルを作りましょう。
CSSのファイルをhtmlのファイルとは別に用意します。
今回はファイル名をstylesheet.cssとします。
h1{
/*色を赤に変える*/
color:red;
}
このとき、htmlのファイルとcssのファイルは同じ階層に置くようにしましょう。
これでブラウザを更新すると、あれ？
変わらない…
実はcssファイルを作ったからといって勝手に読み込んでくれる訳ではなく、
htmlのファイルで「このcssファイルを読み込んでね！」と指定する必要があります。
次のように書きます。
<!DOCTYPE html>
<html>
<head>
<!--ここにページの情報を書きます-->
<title>ページのタイトル</title>
<!--CSSの読み込み-->
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<!--ここにページの本文を書きます-->
<h1>この文章の色を変えます。</h1>
</body>
</html>
rel="stylesheet"はCSSファイルを読み込むという意味です。
今回作成したstylesheet.cssを読み込ませるものではないので注意しましょう。
href="stylesheet.css"がstylesheet.cssを読み込むという文です。
すると…
色が変わります。
もう一度コードを見てみましょう。
h1{
/*色を赤に変える*/
color:red;
}
h1と書いてあるのは
「今からh1要素の設定をします。」ということを言っています。
{}に囲われたところがその内容です。
;(セミコロン)は「ここまでで1つの命令です。」という意味です。
これを書かないとバグの原因になります。
(プログラムもそうだけどこれがすごい忘れがち)
CSSではコメントは/*と*/で挟みます。
HTMLと違うのはややこしいけど覚えるしかない。
colorは要素の色を変えるものでプロパティの一つです。
プロパティは後ろに:(コロン)をつけて設定の中身を指定します。
今回はred(赤色)と指定しています。
また、色を記号で指定することもでき、赤は#ff0000と書くことができます。
h1{
/*色を赤に変える*/
color:#ff0000;
}
色は様々な色が混ざり合った色も指定できます。
カラーコードを一度参照してみるといいでしょう。
文字の大きさを変える
一度CSSなしで実行してみましょう。
<!DOCTYPE html>
<html>
<head>
<!--ここにページの情報を書きます-->
<title>ページのタイトル</title>
<!--CSSの読み込み-->
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<!--ここにページの本文を書きます-->
<h1>文字の大きさを変えます。</h1>
<h2>文字の大きさを変えます。</h2>
</body>
</html>
このようになります。
文字の大きさを変えるには次のように書きます。
h1{
font-size: 30px;
}
h2{
font-size: 40px;
}
pxはピクセルと読みます。
結果は次の通り。
<h1>タグや<h2>タグに関係なく文字の大きさが変わっていることがわかると思います。
特定の要素だけCSSを適用する
ここまでの知識で実際に何か作ろうとなったとき、必ず大きな問題に直面します。
実際にコードを書いて見てみましょう。
<!DOCTYPE html>
<html>
<head>
<!--ここにページの情報を書きます-->
<title>ページのタイトル</title>
<!--CSSの読み込み-->
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<!--ここにページの本文を書きます-->
<h1>色を変えたい</h1>
<h1>色を変えたくない</h1>
</body>
</html>
h1{
color: red;
}
御覧の通り、h1タグにcolorを指定するとh1タグの文字が全て赤色に変わってしまいます。
これでは不便でしょうがない。
しかし、解決する術があります。
同じ<h1>タグを色を変えたいのか変えたくないのか見分けることができれば解決ですね。
見分けるために何をするのかといえば、名前を付けます。当然の流れ。
実際に書いていきましょう。
<!DOCTYPE html>
<html>
<head>
<!--ここにページの情報を書きます-->
<title>ページのタイトル</title>
<!--CSSの読み込み-->
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<!--ここにページの本文を書きます-->
<h1 class="change-color">色を変えたい</h1>
<h1>色を変えたくない</h1>
</body>
</html>
.change-color{
color: red;
}
このように特定の要素にだけcssの設定を適用したい場合はclass属性を付けます。
今回はchange-colorとしていますがここは自由に決められます。
このclassで名前を付けた後は、cssではその名前で呼んであげることでchange-colorと指定された要素だけ色が変わります。
先ほどの<h1>などタグの名前を使うときと違ってclassで指定するときはclassの名前の前に.が必要なので注意しましょう。
これで思い通りに…!
まとめ
ここまでCSSの大まかな使い方を説明してきました。
CSSでサイトの見た目をいろいろ変えられることがわかっていれば十分です。
ここまでくれば「文字を中央に寄せるにはどうしたらいいのかな？」と思った時にgoogleで検索するなど自分で調べながらサイトを作れると思います。