学科 2025.9.30
授業内容
- Webページ制作実践
- 本日の講義のまとめ
習得内容
- Webページ制作実践
■9月27日の復習 【覚えておこう!】
▢CSS:擬似クラス系セレクタ
▲hover 擬似クラス(オンカーソルスタイル)
△表示例 カーソルが重なると色が変わる
△指定例 セレクタ:hover { プロパティ名: 値; }
▢CSS:擬似要素系セレクタ
▲before/after 擬似要素(要素の直前・直後にコンテンツの挿入)
△表示例 2行目の文章の前と後ろに★を入れる ※画像も配置可能
△指定例 セレクタ::before { プロパティ: 値; }
セレクタ::after { プロパティ: 値; }
▢フレックスレイアウト
floartを使わなくても横並びのレイアウトができる新しい方法。
▲HTMLの一例
フレックスレイアウトでは、親要素を Flex コンテナ、子要素を Flex アイテムと呼ぶ。親子関係が出来れば ul などの他のタグでも構成可能。
▲flex-wrap(Flex アイテム折り返し)
△指定例 flex-wrap: nowrap;(初期値)※Flex アイテムを折り返さずに一列に配置
△指定例 flex-wrap: wrap; ※複数行の Flex アイテムを上から下へと配置
△指定例 flex-wrap: wrap-reverse; ※複数行の Flex アイテムを下から上へと配置
▲justify-content(Flex アイテム水平位置)
△指定例 justify-content: space-between;
※両端の Flex アイテムを余白を空けずに配置し他の要素は均等に間隔を空けて配置
▲align-items(Flex アイテム垂直位置)
△指定例 align-items: center; ※Flex アイテムを上下中央揃えで配置
■横並びの写真3つの写真同士の隙間を作る指示のやり方
gap:10px:
width: calc (100%-20px / 3)
■横並びのレイアウトを組んでみる
htmlは基本的に縦にレイアウトが積まれていくが、cssのプロパティを使って横並びにする事ができます。
参考元
今回はcssのflexboxを使って、横並びのレイアウトを作ってみよう。
<!doctype html>
<html>
<head>
<meta>〜〜〜
<meta>〜〜〜
<title>〜〜〜</title>
<link href=”style.css” rel=”stylesheet”>
<link href=”style.css” rel=”stylesheet”>
</head>
<body>
<div class=”oya”>
<div class=”kodomo_a”></div>
<div class=”kodomo_b”></div>
<div class=”kodomo_c”></div>
</div>
</body>
</html>
.oya {
display: flex;
}
.kodomo_a{
width: 200px;
height: 200px;
background: red;
}
.kodomo_b{
width: 200px;
height: 200px;
background: blue;
}
.kodomo_c{
width: 200px;
height: 200px;
background: green; }
横積みのレイアウトを組むことが出来れば、ワイヤーフレームをhtmlとcssで作成する事ができる。

■htmlで表を作る
時刻表やメニュー表、カレンダー等はtableタグを使ってレイアウトを組むことが多い。

※文字だけを並べたカレンダーで、レイアウトなどはまだ調整できていません。

■htmlでフォームを作る
WEBサイトに設置されているお問い合わせページなどをフォームと呼ぶ。htmlでフォームを作る際、html単体でフォームは動かない。(別途phpなどでプログラムを組む必要があります)今回は、htmlで擬似お問い合わせフォームを作成してみよう。
参考サイト
HTML-CSS入門講座 | 情報デザイン工房 濱屋サイト L2.11 フォーム
https://html-css.hamaya2020.com/lesson-2.html#L2-11

- 本日の講義のまとめ
■トレーニング-4
実際のWebページを作成してみよう。
▢先生が用意してくださったテンプレートを使用して制作したWebページ

▢トレーニング-1で先生が用意してくださったテンプレートを改造したWebページ
