はじめに
HTML言語を全く触ったことがない超初心者が、学校で学んだことを忘れないようにすることを目的に作成しています。
HTMLとはどういったものなのか、結局何ができるのかを一緒に学んで行きましょう。
注意事項
この投稿は第3回目の続きになります。そのため、前回紹介した内容は説明せずに進めていきます。
ド素人ゆえ間違った記載(独自の解釈をしている)場合があるかもしれませんがご容赦ください。
説明に関してはできるだけ図を用いてわかりやすく、作成していこうと思います。
使用するのはGoogle Chrome、Visual Studio Codeの2点になります。
目次
1.CSSの書く場所について
2.CSSの書き方について
1.CSSの書く場所について
3つの方法を順に書いていこうと思います。
本題に入る前に一度、前回書いたbodyタグの中身は一度全て消してください。
1ｰ1 HTMLタグの中に書く方法
先ずはh1タグでCSSと表記されるようにbodyタグの中に書きましょう。
そのh1タグの中に書いて行きます。h1のとなりに半角スペース、style="color:red;"と書きます。
style属性を書くとその中でCSSを書くことができます。
色の指定の後にセミコロンを忘れないように！
参照コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>hamuo3</title>
</head>
<body>
<h1 style="color: red;">CSS</h1>
</body>
</html>
実行したときCSSの文字が赤色になっていればOKです。
1-2 HTMLファイルの中に書く方法
一度bodyタグの中をstyle属性を消してこの状態にしておいてください。
<h1>CSS</h1>
方法はheadタグの中にstyleタグを書いていきます。
そのstyleタグの中にh1{}と書きます。{}の間で改行し、その中に先ほどと同じようにcolor:blue;と書き、一度保存し、Chromeを再読み込みすれば、今度はCSSの文字が青色に変わっているはずです。
参照コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>hamuo3</title>
<style>
h1{
color: blue;
}
</style>
</head>
<body>
<h1>CSS</h1>
</body>
</html>
1-3 別のファイルに書く方法
ホームページを作成するときはCSSを別ファイルに書くことが一般的です。
なぜかというとCSSファイルを作っておくことによって修正する際にhtml内に書いているより負担が少なくて済むからです。
ではファイルを作っていきましょう。
作る場所はsampleファイル内のindex.htmlのある場所に新規作成からCSSと名前を付けて作ります。
CSSのファイルの中で右クリック→新規作成→テキストドキュメント→style.cssと名前を変更します。
次にこのテキストエディタをVSCodeにドラッグ&ドロップで読み込ませます。
ここまでできたらhtml
ファイルとcssファイルを紐付けしていきます。
方法はhtmlのheadタグから行います。
先ほど書いたstyleタグは消して、新しくlinkタグを使って紐付けを行います。
参照コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>hamuo3</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>CSS</h1>
</body>
</html>
この href="css/style.cssでcssファイルのstyle.cssを使う言うことになります。
これによって紐付けは完了です。ではcssを操作して文字の色を変えていきましょう。
style.cssにこちらのコードを入れて、style.cssとリンク付けを行ったのでindex.htmlの保存を忘れずにしてください。
h1{
color: green;
}
Chromを再読み込みさせ、文字が緑になっていれば成功です。
2.CSSの書き方について
ここまでの説明である程度、規則性に気づいていると思いますが、書き方としてはCSSを適用させたい箇所、セレクターを書き、{}を書き、その間に操作したい内容を書いて行く形になります。ここの部分のことをプロパティーといいます。
そのため、今回の文字色変換の大まかな流れとしては、**セレクター{プロパティー、コロン、値、セミコロン}**という書き方になります。
また、cssの中身は色の変換+文字サイズの変更など複数書くことができます。
いかがだったでしょうか、今回はここまでとさせていただきます。
次回は一度簡単なホームページを作ってみようと思います。
それでは皆さん、お疲れ様でした。