見出し画像

Webデザイン・マーケティング課 授業7日目

いしかわ

１、２時間目 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」になることを図を使って強調。

画像1

また、絶対パスは、住所のようなものだと説明。（東京都新宿区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は、パスの説明がまだ完璧じゃないので、なるべく早く別教材でしっかり行う方が良さそう。

この記事が気に入ったらサポートをしてみませんか？