HTMLとCSSの概要
- インターネットで見ているWebページの見た目を作る
- ページの情報は、HTMLとCSSという2つの言語によって構成されている
HTML
- ウェブサイトに表示される情報を記載する言語
- HTMLだけでも情報を表示することは可能
- 例：test.html
CSS
- HTMLに装飾を加えるための言語
- HTMLとCSSはセットで使用するもの
- 例：style.css
拡張子
ファイルに書かれる言語の種類を識別するためにファイル末尾につける文字列
- htmlのファイルを作成する場合は〇〇.html
- CSSの場合は〇〇.css
HTMLのコード
test.html
<!DOCTYPE HTML><html><head><metacharset="UTF-8"><title>HTML学習用ウェブサイト</title><linkrel="stylesheet"href="style.css"></head><body><h1>これが<spanclass="blue">見出し</span>要素
</h1><p>１つ目の段落
</p><pclass="second-message">
2つ目の段落
</p><pid="third-message">
3つ目の段落<b>この部分は太字</b></p><ahref="https://www.google.com/">クリックしてGoogleへ遷移</a></body></html>HTMLの要素
< >...</ >
この記述ひとつひとつが要素
数多くの要素が積み重なってHTMLは構成されている
見出しであることを表している要素
リンクであることを表している要素
タグ
要素の始まりを示す開始タグ
終わりを示す終了タグ(終了タグが無い要素もある)
<h1>...</h1><a href="https://www.＊＊＊＊＊.com/">...</a>
cssのコード
style.css
.body{color:white;height:100px;}p{color:red;font-size:24px;}.first-message{color:red;}.second-message{color:orange;font-size:12px;}#third-message{color:blue;}.blue{color:blue;}セレクタ
どの部分のHTMLに適用するかを選択するための記述
.body{
color: white;
height: 100px;
}
プロパティ
セレクタで指定したHTMLの「何を変えるのか」を選択するための記述
.body {
color: white;height: 100px;
}
値
値でどのような色にするのかを決める
.body {
color: white;
height: 100px;
}
classセレクタ
class名をCSSのセレクタとして使用する
.first-message{
color: red;
}
idセレクタ
id名をCSSのセレクタとして使用する
#third-message{
color: blue;
}
span要素
テキストの一部だけを装飾する
.blue {
color: blue;
}