見出し画像

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

いしかわ

１、２時間目 Webデザイン基本知識
3時間目 HTML5・CSS3演習

使用テキスト


■１時間目

p70-p74

pcトラブル発生。画面が映らなくなる。。。しばらくして治った。。

お伝えしたショートカット

ctrl + F
ブラウザ上で検索

また、Chromeの検証ツールの使い方も紹介した。


■2時間目

p76-p82

ソースコード上の属性値などは、ダブルクリックでテキスト選択すると便利と説明

また、たまたま見たサイトにあったネガティブマージンの説明


■3時間目

p72-p74

・HTMLタグのカテゴリーとコンテンツモデル

以前用意したブログを紹介

HTMLタグは、タグによって各々カテゴリー分けされている事、括ることのできるものに制限があることを説明。


・ブロックレベルとインラインの説明。

実際に、pタグとspanタグを使って、改行されるされないを紹介。

また、displayプロパティを使って、切り替える事が出来ることも紹介。

なぜ、displayプロパティを使って、見た目を切り替える必要があるかを、フッターメニューなどにたまにある、以下の様なパーツで引き合いに出して解説。

会社概要    アクセス   コンタクト

こんな感じのフッターナビを作るときに、HTMLの意味合い的には、箇条書きを使いたい。

<ul>
    <li>会社概要</li>
    <li>アクセス</li>
    <li>コンタクト</li>
</ul>

しかしこれだと、横並びにならず改行されて表示される。

なので、displayプロパティにinlineを指定して横にすると説明。


つまり、
1.HTMLの意味合い的には、箇条書きを使いたい
2.しかし見た目は横並びにしたい

こんなときに、displayプロパティを使うと説明。

なお、本来あるであろうaタグは省略。


・ボックスモデルの話

ボックスモデル

この図を使って説明。

言葉だけだとわかりにくいので、実際にコードを書いて説明。

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="style.css">
</head>

<body>
   <p>
   文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文
   字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
   文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文
   字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文
   字文字文字文字文字文字文字文字文字文字文字文字文字文字
   </p>
</body>

</html>


style.css

p{
   border: 5px solid red;
   padding: 50px;
   margin: 50px;
   background-color: pink;
}

スクリーンショット 2022-03-25 20.02.54

まず最初にborderを書き、その内側にpaddingを追加、さらにマージンを追加の順で説明。

最後に背景色は、paddingの所にかかると説明。


■まとめ

pcトラブルがあり、若干焦ったがなんとかなった。

ボックスモデルなどの説明は、もう少し順番を工夫すると良いと感じた。

ボックスモデルの説明をするのに、paddingなどのまだやっていないプロパティやショートハンドが普通に出てきてしまう。こっちのプロパティを試してからボックスモデルの説明をすると、もう少しストレスなく覚えられるかも？と感じた。

教える順番大事。

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