学科 HTML/CSS基礎 – 【0184】ITクリエイティブカレッジ未経験でもOKマルチクリエイター養成科

-本日のアジェンダ-

1限目
学科 HTML/CSS基礎⑦
CSSの疑似クラス、疑似要素について

2限目
学科 HTML/CSS基礎⑦
テーブル（表組）の作り方について

3限目
学科 HTML/CSS基礎⑦
フォーム（入力）の作り方について

4限目
学科 HTML/CSS基礎⑦
フレックスレイアウトについて

5限目
学科 HTML/CSS基礎⑦
本日の講義のまとめ

【講師用カリキュラム情報】
※このブロックは公開時は非表示になります。削除しないでください。
※講師用の情報（注記）を追記して頂いても大丈夫です。
ストーリー：とにかくグラフィックソフトを使うHTMLとCSSの理解
内容1：HTMLとCSSについて
内容2：HTMLとCSSについて
内容3：
課題：なし
【注記】
・疑似クラス、疑似要素、テーブルタグ、フォームタグ、フレックスレイアウトの概要を説明します。
・わかりにくいので具体的な例を示して説明してください。
・フレックスレイアウトについては使用する機会も多くなりますので実例を示して説明してください。

本日のテーマ

レイアウト系プロパティを理解しましょう

CSSの記述・検証ツールの活用

【まとめサイト】

HTMLとCSSの基礎をまとめたサイト
https://samplesdl.me/training_html-css/

【動画】

CSSの記述方法とプロパティ・検証ツールの活用
https://youtu.be/j-LrqX5K9SM（6分43秒）

CSS：擬似クラス系セレクタ

link 擬似クラス（未訪問リンクスタイル）
visited 擬似クラス（訪問済リンクスタイル）
hover 擬似クラス（オンカーソルスタイル）
active 擬似クラス（アクティブスタイル）
first-child/last-child 擬似クラス（先頭・最終の子要素指定）
nth-child 擬似クラス（n 番目の子要素指定）
nth-of-type 擬似クラス（同一のセレクタを持つ n 番目の子要素指定）
not 擬似クラス（指定値以外の要素指定）

参考サイト

CSS：擬似要素系セレクタ

first-letter 擬似要素（要素の 1 文字目を指定）
first-line 擬似要素（要素の 1 行目を指定）
before/after 擬似要素（要素の直前・直後にコンテンツの挿入）

参考サイト

テーブル（表組）の作り方について

テーブル（表組）の作り方
table 要素（表全体の定義）
caption 要素（主題の定義）
tr 要素（1 行範囲の定義）
th 要素（見出し項目の定義）
td 要素（データ項目の定義）
border-collapse プロパティ（隣接セルの表示方法）
border-spacing プロパティ（隣接セルのボーダー間の間隔）
table-layout プロパティ（セル幅の決定方法）
vertical-align プロパティ（垂直方向位置指定）
display を用いたテーブル構造

参考サイト

ワンポイントアドバイス

楽天やヤフーショッピングの商品ページでテーブルレイアウトが必要になる場合があります。EC関連のお仕事をする場合は、想定しておきましょう。

フォーム（入力）の作り方について

フォーム（入力）の作り方
form 要素（フォーム作成）
label 要素（入力項目キャプション）
input 要素（フォーム構成部品）
button 要素（ボタン）
select 要素（セレクトボックス）
datalist 要素（入力候補選択肢）
optgroup 要素（セレクトボックス選択肢グループ）
option 要素（セレクトボックス選択肢）
textarea 要素（複数行テキスト編集項目）

参考サイト

フレックスレイアウトについて

フレックスレイアウトの作り方
display（Flex コンテナ作成）
flex-direction（Flex アイテム並び順）
flex-wrap（Flex アイテム折り返し）
flex-flow（Flex アイテム並び・折り返し一括指定）
justify-content（Flex アイテム水平位置）
align-items（Flex アイテム垂直位置）
align-content（Flex アイテム行の垂直位置）

参考サイト

本日の課題

本日学んだ内容を復習して整理しておきましょう。
WordPressの投稿ページに学んだことをまとめておくと良いです。

-本日のアジェンダ-

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の投稿ページに貼り付けを行いましょう。（出来たところまでで大

月	火	水	木	金	土	日
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

カテゴリー: 学科 HTML/CSS基礎

学科 HTML/CSS基礎⑤【オンライン】

-本日のアジェンダ-

本日のテーマ

CSSの記述・検証ツールの活用

【まとめサイト】

【動画】

CSS：擬似クラス系セレクタ

参考サイト

CSS：擬似要素系セレクタ

参考サイト

テーブル（表組）の作り方について

参考サイト

ワンポイントアドバイス

フォーム（入力）の作り方について

参考サイト

フレックスレイアウトについて

参考サイト

本日の課題

学科 HTML/CSS基礎④

-本日のアジェンダ-

本日のテーマ

CSSの基本構造について【復習】

リセットCSSついて

Webページ制作実践②

①htmlにcssを反映させる準備をする

②htmlにcssを反映させる

③様々なセレクタでcssを反映させる

④外部cssファイル以外でのcssを反映させる方法について

リセットcssはいつ反映させる？

トレーニング-２

本日の課題