-本日のアジェンダ-
1限目
学科 HTML/CSS基礎④
CSSの記述方法について
2限目
学科 HTML/CSS基礎④
CSSの記述方法について
3限目
学科 HTML/CSS基礎④
Webページ制作実践
4限目
学科 HTML/CSS基礎④
Webページ制作実践
5限目
学科 HTML/CSS基礎④
本日の講義のまとめ
【講師用カリキュラム情報】
※このブロックは公開時は非表示になります。削除しないでください。
※講師用の情報（注記）を追記して頂いても大丈夫です。
ストーリー：とにかくグラフィックソフトを使うHTMLとCSSの理解
内容1：HTMLとCSSについて
内容2：HTMLとCSSについて
内容3：
課題：練習問題提出
【注記】
・学科 HTML/CSS基礎③で学んだ内容を実践します。
本日のテーマ
CSSの記述を始めましょう
CSSの基本構造について【復習】
- HTML ファイルとは別に記述する場合
- HTML ファイル内に記述する場合
- HTML タグにインラインで記述する場合
リセットCSSついて
ブラウザは初期状態でタグ単位のデフォルトのスタイルシートを持っています。このデフォルトのスタイルシートの内容はブラウザによって異なるためブラウザ環境を変更すると意図しない表示になることがあります。このような現象を防ぐために使用するのがリセット CSS です。
リセット CSS は、ブラウザが持っているスタイルシートをリセット（クリア）するためのスタイルシートですがリセットする範囲はコーディングスタイルに依存するため、これが正解というリセット CSS は存在しません。各自のコーディングスタイルに合わせて適時変更してください。
Webページ制作実践②
①htmlにcssを反映させる準備をする
まずはhtmlファイルを準備します。今回は<body>タグ内にcssを反映されるタグを記述しておきます。
<!doctype html>
<html>
<head>
<meta ~>
<meta ~>
<title>〜〜〜</title>
</head>
<body>
<p>文字列1</p>
<p>文字列2</p>
<p>文字列3</p>
<p>文字列4</p>
<p>文字列5</p>
</body>
</html>htmlファイルが作成できたら、次にcssファイルの作成です。前項でも説明した通り、htmlファイルにcssを反映する方法は3パターンあります。
- HTML ファイルとは別に記述する場合
- HTML ファイル内に記述する場合
- HTML タグにインラインで記述する場合
まずは、HTML ファイルとは別に記述する場合（外部ファイルで紐付けする）の方法でcssを反映していきます。
cssファイルに作り方はhtmlファイルの作成と同様、文字コードの指定と拡張子（.css）の指定で作成できます。ファイルを新規で作成し、中身は空の状態で保存しましょう。
このタイミングで、手元にはhtmlファイルとcssファイル、2つのファイルが準備できました。次に、2つのファイル を紐付けしていきます。
参考元を参照し、htmlの<head>タグ内に<link>タグで外部ファイルのパスを記述します。これでhtmlにcssを反映させる準備が整いました。
<!doctype html>
<html>
<head>
<meta>
<meta>
<title>〜〜〜</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<p>文字列1</p>
<p>文字列2</p>
<p>文字列3</p>
<p>文字列4</p>
<p>文字列5</p>
</body>
</html>②htmlにcssを反映させる
cssファイル内に反映させるcssを記述しましょう。今回はhtml側に記述したタグの文字色を変えてみます。
p {
color: red;
}cssファイルに上記記述し、保存します。その後、htmlファイルをブラウザで開いてみましょう。文字の色が赤色になっていれば、cssの反映ができています。
③様々なセレクタでcssを反映させる
p {
color: red;
}このような記述だと、全ての<p>タグの文字色が赤色になります。このような記述を、型セレクタと呼びます。個別の<p>タグにcssを反映させたい場合は、classセレクタ等を使用します。class名は任意で決めれますが、今回は仮でabcとします。
p.abc {
color: blue;
}classセレクタでcssを反映する場合、htmlファイル側のタグにclassを付与する必要があります。
<!doctype html>
<html>
<head>
<meta>
<meta>
<title>〜〜〜</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<p class="abc">文字列1</p> （classを付与）
<p>文字列2</p>
<p>文字列3</p>
<p>文字列4</p>
<p>文字列5</p>
</body>
</html>htmlファイル、cssファイルを共に更新し、保存します。その後、htmlファイルをブラウザで開き、１行目の文字列1が青色になっていれば、classセレクタでのcss反映ができています。
このように、セレクタを駆使する事でcssを個別に反映させる事ができます。様々なセレクタがでの反映が可能ですが、まずはclassセレクタでの反映に慣れましょう。
④外部cssファイル以外でのcssを反映させる方法について
次に、HTML ファイル内に記述する場合と、HTML タグにインラインで記述する場合についてです。先ほどまでは外部ファイルにcssを記述しましたが、htmlファイルないにcssを記述する事でcssを反映させる事ができます。先ほど作成したhtmlファイルに記述を追加してみましょう。
HTML ファイル内に記述する場合は、<head>タグ内に<style>タグを記述し、その中にcssを記述します。
<!doctype html>
<html>
<head>
<meta>〜〜〜
<meta>〜〜〜
<title>〜〜〜</title>
<link href="style.css" rel="stylesheet">
<style type="text/css">
p {
color: green;
}
</style>
</head>
<body>
<p class="abc">文字列1</p> （classを付与）
<p>文字列2</p>
<p>文字列3</p>
<p>文字列4</p>
<p>文字列5</p>
</body>
</html>htmlファイルを更新し、保存します。その後、ブラウザでhtmlファイルを開き、文字の色が緑になっていればファイル内記述でのcss反映ができています。
HTML タグにインラインで記述する場合は、タグに直接cssを記述します。
<!doctype html>
<html>
<head>
<meta>
<meta>
<title>〜〜〜</title>
<link href="style.css" rel="stylesheet">
<style type="text/css">
p {
color: green;
}
</style>
</head>
<body>
<p class="abc">文字列1</p> （classを付与）
<p>文字列2</p>
<p>文字列3</p>
<p>文字列4</p>
<p style="color: purple;">文字列5</p>
</body>
</html>htmlファイルを更新し、保存します。その後、ブラウザでhtmlファイルを開き、文字列5の文字の色が紫になっていればインライン記述でのcss反映ができています。
リセットcssはいつ反映させる？
多くの場合、リセットcssは作業の前段階からhtmlファイルと紐づけておきます。
今後は、新規でhtmlファイルを作成する際は、同時にリセットcssも紐づけて先に反映させておきましょう。
トレーニング-２
実際のWebページを作成しましょう。
トレーニング用ファイルのダウンロードおよび解凍を行ってトレーニングを実施してください。トレーニングの実施方法は、解凍したフォルダに格納されている「readme.pdf」を参照してください。
カリキュラム資料 ダウンロード用サイト
https://samplesdl-web.com/doc/
下記のファイルをダウンロードしましょう。
「training-2.zip」
本日の課題
Webページ制作実践で作成したページのキャプチャを取得してWordPressの投稿ページに貼り付けを行いましょう。（出来たところまでで大