実技WEBページ制作実習

2025.05.10

アジェンダ

1. CSSプロパティについて
2. CSSプロパティについて
3. FTP操作訓練
4. Webページ制作実践
5. Webページ制作実践

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

復習

HTML
昔は論文として使うために開発、現在はブログなど様々な用途で使われる
グーグルのクローラーが構造を確認＝正しい情報か

構造
head内：文書情報・タイトル
body内：本文・目に見えるもの・本体記述

構造化タグ
<開始タグ></閉じタグ>
<開始タグ>のみ

タグ
属性　+　属性値　が持てる
例）<meta（タグ） name（属性）=”属性値”>

CSS
HTMLの装飾をするもの
プロパティ
h1 { color: #ffcccc; }
セレクタ｛ プロパティ:値; }

レイアウト系プロパティ

要素の配置
・position
・top
・left
・bottom
・right

重なりの順序方法
・z-index

親子構造
・親　→　子　→　孫
＊指定がなければ左上基準に重なっていく