![見出し画像](https://assets.st-note.com/production/uploads/images/74947440/rectangle_large_type_2_59327fbb1b262de05cfbdbd8e1d34c7c.png?width=1200)
Webデザイン・マーケティング課 授業7日目
1、2時間目 Webデザイン基本知識
3時間目 HTML5・CSS3演習
使用テキスト
■1時間目
p59-p64
p64の色別の参考サイトの項目から、参考サイトを自分で見つけていく方法にシフトした。
VSCodeで、新しいフォルダを開いてHTMLを作成(コードは2時間目にまとめて記載)
また、サイトのタイトルをコピペするために、ソースコードを表示させて、titleタグの中を見たいので、CHROME上でソースコードを見るためのショートカットを説明
ctrl + u
■2時間目
p66-p68
引き続き参考サイト作り
VSCode上で、カーソルを置いて何も選択せずに、ctrl + cを押すと、一行コピーされることを説明。
alt + 下キー or 上キーで、コードが移動することを説明。
さらに、shift + alt + 下キー or 上キーで、コードをコピーできることを説明。
書いたコードは以下(bodyの中だけ)
<h1>Webデザイン参考サイト集</h1>
<section>
<h2>黄色</h2>
<input type="color" value="#FFFF00">
<p>
<a href="https://socialtower.jp/">SOCIAL TOWER MARKET</a>
</p>
<p>
<a href="https://i-taxoffice.jp/">石川隆規税理士事務所</a>
</p>
<p>
<a href="https://taishushoku.qfes.jp/">未来の大衆食FES in 京都</a>
</p>
</section>
<section>
<h2>オレンジ</h2>
<input type="color" value="#FF7300">
<p><a href="https://d21.co.jp/recruit/">ディスカヴァー・トゥエンティワン</a></p>
<p><a href="https://www.nonaka-world.co.jp/">NONAKA WORLD【野中製作所】</a></p>
<p><a href="https://www.waseda.jp/prj-foodecon/">下川研究室</a></p>
</section>
<section>
<h2>赤</h2>
<input type="color" value="#FF0000">
<p><a href="https://www.ign-m.com/">株式会社イグニッション・エム</a></p>
<p><a href="https://www.toei.co.jp/company/recruit/fresh/">ACTION! | 東映 リクルートサイト</a></p>
<p><a href="https://myset.co.jp/">マイセット株式会社</a></p>
</section>
■3時間目
p68-p71
新しくフォルダを作り、以下のような構成にする
doc
┗index.html
┗css
┗style.css
タグの入れ子構造について説明。内側同士、外側同士で閉じないといけないことを強調
<div><p></p></div>--これはOK
<div><p></div></p>--これはNG
<link ref="stylesheet" href="cssへのパス" >
これを書けと、教科書にあるが、どこに書けばいいかはこのページには書かれていない。
ちゃんとheadの中に書かなきゃいけないことを説明。
相対パス、絶対パスについて説明。
自分からみて、相手の場所を示すのが相対パスだと説明。
今回のフォルダ構成の場合、index.htmlから見て、style.cssの場所は、「cssフォルダの中の、style.css」になることを図を使って強調。
また、絶対パスは、住所のようなものだと説明。(東京都新宿区xxxxみたいな感じ)
cssの記述は、タグに対して背景色などを入れる程度。
カラーコードが、ゾロ目の時に省略して3つで書けると説明。(ff0000は、f00と同じ)
今日書いたコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section>
<h1>Web限定キャンペーン中!</h1>
<p>Webでお申込みいただいた方限定で、<em>特別価格</em>を実施中です。</p>
</section>
</body>
</html>
style.css
@charset "UTF-8";
section{
background-color: #3eb6bd;
}
h1{
color: #fff;
}
em{
font-weight: bold;
}
■まとめ
学科の授業も、ある程度手を動かしてコードを書く方式に切り替えたので、多少集中力が増したように感じる。
HTMLは、パスの説明がまだ完璧じゃないので、なるべく早く別教材でしっかり行う方が良さそう。
この記事が気に入ったらサポートをしてみませんか?