学科 HTML/CSS基礎⑦【オンライン】ｰCSSレイアウトについてｰ　　2025･10･24

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

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

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

※クラスを付与せずに特定のものだけ変化させる方法。何の何番目だけという書き方。HTMLを書けない時などに使用する。

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

参考サイト

よく使うサイト　https://webliker.info/css-selector-cheat-sheet　CSSセレクタのチートシート

CSS：擬似要素系セレクタ

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

参考サイト

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

※表を作成するのに使用。時刻表・劇場リストなど。楽天のECサイトで使われている。

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

参考サイト

ワンポイントアドバイス

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

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

※HTMLとCSSで描画はできるが、動かすためにはPHPやJavascriptが必要。
　HTMLのフォームタグによって文章情報がPHPなどに伝わる仕組み。

フォーム（入力）の作り方
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の投稿ページに学んだことをまとめておくと良いです。

マージンの相殺

HTML

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="description" content="">
		<title></title>
		<link href="css/reset.css" rel="stylesheet">
		<link href="css/style.css" rel="stylesheet">
	</head>
	<body>
		<div class="test1"></div>
		<div class="test2"></div>
	</body>
</html>

CSS

@charset "utf-8";

div.test1 {
			width: 500px;
			height: 500px;
			background-color: blue;
			margin-bottom: 100px;				
}

div.test2 {
			width: 500px;
			height: 500px;
			background-color: red;
			margin-top: 200px;⇐大きいほうが採用される。
}

マージンの中央配置

CSS

div.test1 {
			width: 500px;
			height: 500px;
			background-color: blue;
			margin: 0 auto;	⇐中央配置　※ 0 auto 0 auto　を省略して上下　左右と書くこともできる。			
}

入れ子構造について

　　<body>
		<div class="test1">
			<div class="kodomo1">
			</div>
　　　　　　　<div class="kodomo2">
　　　　　　　</div>
		</div>
		<div class="test2">
　　　　　　　<div class="kodomo3">
　　　　　　　</div>
　　　　　　　<div class="kodomo4">
　　　　　　　</div>
		</div>
	</body>

kodomo１～４はbodyにとって孫ではあるが、kodomo1と同じ階層にいるのはkodomo2だけ
kodomo3,4は別の部屋にいるイメージ。

左右に余白をとるレイアウト

body {
		padding: 0 50px;
}

div.test1 {
			/*width: 500px;*/
			height: 500px;
			background-color: blue;
			padding: 50px 0 0 50px;
						
}

div.test2 {
			/*width: 500px;*/
			height: 500px;
			background-color: red;
			
}

div.kodomo1{
			width: 200px;
			height: 200px;
			background-color: yellow;

text-align　文章の開始位置

p {
	background-color: #ccc;
	text-align: center;
	width: 300px;　　⇐横幅指定されたらそれに対してセンターをとる。
}

span {
	background-color: yellow;
	
}

display　インラインのタグをブロックにする

p {
	background-color: #ccc;
	text-align: center;
	width: 300px;
}

span {
	background-color: yellow;
	display: block;
	width: 500px;
	height: 200px;
	text-align: center;
}

display none　非表示になる。　なぜ？？⇒PC・スマホでの見方を変えるため。

p {
	background-color: #ccc;
	text-align: center;
	width: 300px;
	display: none;
}

span {
	background-color: yellow;
	display: block;
	width: 500px;
	height: 200px;
	text-align: center;
}

擬似クラス系セレクタ

@charset "utf-8";

a:hover {　　　　　　　⇐カーソルを合わせると色が変わる。これはaタグですよ、触ったら移動しますよとユーザーに教えてくれる役割。
		color: red;　　　これはリンクだよのとこがフォバーすると赤に変わる。
}

li:last-child {　　　⇐最後のliタグすべてが赤色になる。※どこの中にいるかは関係ない。
		color: red;
}

フレックスレイアウトについて　横並びのレイアウト

HTML

<body>
		
		<div class="oya">
			<div class="kodomo_01">
			</div>
			<div class="kodomo_02">
			</div>
			<div class="kodomo_03">
			</div>
		</div>
		
	</body>

CSS

@charset "utf-8";

div.oya{
		background-color: #ccc;
		height: 500px;
		width: 1000px;
		display: flex;
		justify-content: space-around;
		align-items: center;
}

div.kodomo_01 {
		width: 200px;
		height: 200px;
		background-color: red;
}

div.kodomo_02 {
		width: 200px;
		height: 200px;
		background-color: yellow;
}

div.kodomo_03 {
		width: 200px;
		height: 200px;
		background-color: blue;
}

display　flexを使うと自由自在にレイアウトが組めるようになる

HTML

<body>
		
		<div class="oya">
			<div class="kodomo_01">
			<p>ここに文章が入るよ</p>
			</div>
			<div class="kodomo_02">
			<p>ここに画像が入るよ</p>
			</div>
		</div>
		<div class="oya">
			<div class="kodomo_02">
			<p>ここに画像が入るよ</p>
			</div>
			<div class="kodomo_01">
			<p>ここに文章が入るよ</p>
			</div>
		</div>
		<div class="oya">
			<div class="kodomo_01">
			<p>ここに文章が入るよ</p>
			</div>
			<div class="kodomo_02">
			<p>ここに画像が入るよ</p>
			</div>
		</div>
		<div class="oya">
			<div class="kodomo_02">
			<p>ここに画像が入るよ</p>
			</div>
			<div class="kodomo_01">
			<p>ここに文章が入るよ</p>
			</div>
		</div>
	</body>

CSS

@charset "utf-8";

div.oya{
		background-color: #ccc;
		height: 500px;
		width: 1000px;
		display: flex;
		margin: 0 auto 50px auto;
}

div.kodomo_01 {
		width: 50%;
		background-color: red;
		
}

div.kodomo_02 {
		width: 50%;
		background-color: yellow;
}

※ページを見たときに親子関係がどうなっているのか、レイアウトが分かるようになれば、その先の細かい設定は検証ツールを見ながら作ることが出来る。まずは森⇒木⇒枝⇒葉の順に大まかな部分を理解できるように。

本日の感想

フレックスレイアウトによってぐっとデザインっぽくなったのが印象的だった。使いこなすためには基本の親子関係をしっかり把握していないといけないこともよく分かった。次回の来校でもっといろいろなレイアウトに挑戦したいと思う。また普段からページを見る際は親子関係を意識してどうレイアウトが組まれているのか考えながら見ていきたいと思う。

学科 HTML/CSS基礎⑦【オンライン】ｰCSSレイアウトについてｰ　　2025･10･24

-本日のアジェンダ-

本日のテーマ

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

参考サイト

CSS：擬似要素系セレクタ

参考サイト

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

参考サイト

ワンポイントアドバイス

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

参考サイト

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

参考サイト

本日の課題

コメントを残すコメントをキャンセル

訓練日誌

実技デザイン総合制作実習③【成績考査⑥】-ポートフォリオサイト発表会-　2026･02･12

学科デザイン概論⑤【オンライン】-クリエイターに求められるスキルについて-　2026･02･10

実技デザイン総合制作実習②-課題制作-　2026･02･06

学科 WEBマーケティング基礎④【オンライン】-WebマーケティングAIの未来について-　2026･02･05

実技デザイン総合制作実習①-各自課題制作-　2026･02･03

学科 HTML/CSS基礎⑦【オンライン】ｰCSSレイアウトについてｰ 2025･10･24

-本日のアジェンダ-

本日のテーマ

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

参考サイト

CSS：擬似要素系セレクタ

参考サイト

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

参考サイト

ワンポイントアドバイス

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

参考サイト

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

参考サイト

本日の課題

コメントを残す コメントをキャンセル

実技 デザイン総合制作実習③【成績考査⑥】-ポートフォリオサイト発表会- 2026･02･12

学科 デザイン概論⑤【オンライン】-クリエイターに求められるスキルについて- 2026･02･10

実技 デザイン総合制作実習②-課題制作- 2026･02･06

学科 WEBマーケティング基礎④【オンライン】-WebマーケティングAIの未来について- 2026･02･05

実技 デザイン総合制作実習①-各自 課題制作- 2026･02･03

学科 HTML/CSS基礎⑦【オンライン】ｰCSSレイアウトについてｰ　　2025･10･24

コメントを残すコメントをキャンセル

実技デザイン総合制作実習③【成績考査⑥】-ポートフォリオサイト発表会-　2026･02･12

学科デザイン概論⑤【オンライン】-クリエイターに求められるスキルについて-　2026･02･10

実技デザイン総合制作実習②-課題制作-　2026･02･06

学科 WEBマーケティング基礎④【オンライン】-WebマーケティングAIの未来について-　2026･02･05

実技デザイン総合制作実習①-各自課題制作-　2026･02･03