-本日のアジェンダ-
1限目
学科 HTML/CSS基礎⑧
Webページ制作実践
2限目
学科 HTML/CSS基礎⑧
Webページ制作実践
3限目
学科 HTML/CSS基礎⑧
Webページ制作実践
4限目
学科 HTML/CSS基礎⑧
Webページ制作実践
5限目
学科 HTML/CSS基礎⑧
本日の講義のまとめ
【講師用カリキュラム情報】
※このブロックは公開時は非表示になります。削除しないでください。
※講師用の情報（注記）を追記して頂いても大丈夫です。
ストーリー：とにかくグラフィックソフトを使うHTMLとCSSの理解
内容1：HTMLとCSSについて
内容2：HTMLとCSSについて
内容3：
課題：練習問題提出
【注記】
・学科 HTML/CSS基礎⑦で学んだ内容を実践します。
・本日でPC版のWebページ作成のスキル習得を完了させる予定で進めてください。
本日のテーマ
Webページを完成させましょう
Webページ制作実践④
横並びのレイアウトを組んでみる
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で擬似お問い合わせフォームを作成してみましょう。
トレーニング-４
実際のWebページを作成しましょう。
トレーニング用ファイルのダウンロードおよび解凍を行ってトレーニングを実施してください。トレーニングの実施方法は、解凍したフォルダに格納されている「readme.pdf」を参照してください。
カリキュラム資料 ダウンロード用サイト
https://samplesdl-web.com/doc/
下記のファイルをダウンロードしましょう。
「training-4.zip」
本日の課題
Webページ制作実践で作成したページのキャプチャを取得してWordPressの投稿ページに貼り付けを行いましょう。（出来たところまでで大丈夫です）