CSSで装飾してみる
- #HTML
- #css
こんにちは！
上毛印刷WEB制作担当のソーヤです。
今回はCSSで文字の装飾をしてみましょう！
CSSファイルを作ってみる
それではまずCSSファイルを作成しましょう。
Visual Studio Codeを立ち上げてください。
立ち上がりましたら、command + nキーを押してください。（windowsの方はctrl + n）
言語を選択という箇所をクリックしてください。
次は、
をクリックしてください。
そうすると「Untitled-1.css」というファイルが生成されるので、
以前作成した「website」のフォルダの中に「css」というフォルダを作成して「style.css」という名前にして格納してください。
格納したらindex.htmlを開いてください。
そして<head></head>の中に
<link rel="stylesheet" href="./css/style.css">と記述してください。
ちなみにこの記述は「このページにcssフォルダに入っているstyle.cssを読み込んでね」という意味です。
こんな感じです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website</title>
<!-- ここ！ -->
<link rel="stylesheet" href="./css/style.css">
<!-- ここ！ -->
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>さあ、これでCSSを書く準備ができました！
CSSを書いてみる
では早速CSSを書いていきましょう！
style.cssをVisual Studio Codeで開いてください。
何も書かれていませんね。
ではまず、
h1{
color: #f00;
}と記述してください。
どうでしょうか。
Hello world!の文字が赤くなりましたね。
では次は青くしてみましょう。
先ほどの記述を
h1{
color: #00f;
}と書き直してください。
青くなりましたね。
では次は線をつけてみましょう。
h1{
color: #00f;
border: 1px solid #00f;
}と書いてみてください。
青文字のHello world!の周り画面いっぱいに青線の枠ができましたね。
なんとなくWEBサイトがどんな風に作られているのか、
わかってきたと思います。
WEBサイトってこうやって地道に設定していって作られているんです。
CSSの意味
h1このh1ですが、
HTMLではタグですが、CSSでは「セレクタ」と呼びます。
このセレクタはHTMLのh1タグに対して装飾を施しますよという意味です。
次に、
h1{}セレクタの隣に波括弧をつけます。
そして、わかりやすいように改行します。
h1{
}この波括弧の中に記述することで指定したセレクタに対してスタイル（装飾のこと）を設定していきます。
次は、
color: #00f;です。
「color」は「プロパティ」、「#00f」は「値」です。
つまりこの場合、color(文字色のプロパティ)に、十六進法の「00f」を指定しています。
値の最初に「#」が入っていますが、これは色を指定する場合必須の記述になるので覚えておきましょう。
日本語にするとこんな感じです。
プロパティ: 値;プロパティの終わりには必ず「：（コロン）」がついて、値の終わりには「；（セミコロン）」がつきます。
次は、
border: 1px solid #00f;「border」は線のプロパティですね。
に対して、「1px solid #00f」という値が入っています。
この値ですが半角スペースを開けて複数の値が記述されています。
例えば「1px」、これは線の太さを指定しています。
「solid」、これは実線であることを指定しています。
「#00f」、これは先ほどと同じように線の色を指定しています。
こういったような複数の値を半角スペースを空けて記述するスタイルもあるので注意してください。
で、最終的に
h1{
color: #00f;
border: 1px solid #00f;
}といったような記述になります。
まとめ
初めてのCSSいかがでしょうか。
この回でなんとなくWEBサイトがどのように作られているか、
雰囲気は掴んだんではないでしょうか。
WEBサイトって地道に細かく設定していって作られているんです。
この記事に対するご意見・ご感想・ご質問等ありましたら、
ぜひ下記フォームにてお送りください。