HTML/CSS基礎⑧ – Sekine Hisako Portforio

学科 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で作成する事ができる。