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

1〜3時間目 HTML5・CSS演習

使用テキスト

初心者からちゃんとしたプロになる HTML+CSS標準入門〈モバイルファースト、レスポンシブ、Flexbox〉

■1時間目

明後日から始まるzoom授業の準備と練習で全て終わる。

■2時間目

p84-p86

・メディアクエリに関して

@media screen and (min-width:960px){
処理
}

こう書くと、960px以上の時にcssが反映される。

・hoverとactiveの擬似クラスについて

マウスを乗せた状態がhoverで、クリックしている状態がactive

a:hover{
マウスが乗った時
}

a:active{
クリックした時
}

また、ボタンから、別のファイルへのリンク方法も説明。今回は、center.htmlへ飛ぶように、一番下のボタンにhrefを設定。

角丸のborder-radiusに関して以下の画像で説明。

書いたコードは以下

index.html

<a href="#" class="text-link">テキストリンク</a>
<a href="https://www.yahoo.co.jp/" class="button-link" target="_blank">ボタンリンク</a>
<a href="center.html" class="button-link2">ボタンリンク2</a>

style.css

@charset "UTF-8";
a{
   /* background-color: pink; */
   display: block;
   width: 200px;
   margin: 40px auto;
   text-align: center;
   padding: 1em;
}

.text-link{
   color:#000000;
   text-decoration: none;
}

.button-link{
   background: #ffd700;
   text-decoration: none;
   color: #ff4500;
   font-size: 20px;
}

.button-link2{
   background: #1e90ff;
   text-decoration: none;
   color: #fff;
   font-size: 20px;
   border-radius: 10px;
   border-bottom: 4px solid #191970;
}
.button-link2:active{
   border-bottom: none;
   transform: translateY(4px);
}


@media screen and (min-width:960px){
a:hover{
   opacity: 0.7;
}
}

■3時間目

p87-p89

・リストについて

ul、li、olについて説明

listフォルダを作って、以下の様にファイルを作る。

list
┗index.html
┗css
    ┗style.css
┗img
    ┗check.png
    ┗arrow.png

<h2>こんなお悩みありませんか？</h2>
<ul>
   <li>肩こりや頭痛がひどい</li>
   <li>手足が氷のように冷える</li>
   <li>寝ても疲れがとれない</li>
</ul>
<h2>ご旅行の申込みから出発まで</h2>
<ol>
   <li>Webでお申し込み</li>
   <li>期限までにお支払い</li>
   <li>約1週間前に航空チケットのお届け（代表者住所に全員分が届きます）</li>
   <li>ご出発</li>
</ol>

また、headタグ内に、cssの読み込み

<link rel="stylesheet" href="css/style.css">

テキストには、paddingの値がショートハンドで書かれているが、あえてショートハンドを使わずに記述。

@charset "UTF-8";
ul{
   border: 10px solid #aae5e7;
   padding-top: 1em;
   padding-right: 1em;
   padding-bottom: 0;
   padding-left: 1em;
   list-style: none;
}

ul li{
   border-bottom: 4px dotted #6baeb3;
   margin-bottom: 1em;
}

ul li::before{
   content: url(../img/check.png);
   margin-right: 4px;
   vertical-align: middle;
}

beforeの擬似要素について説明。

また、VSCode上のファイルを、右クリックして、エクスプローラーで表示をクリックすると、フォルダを開いてくれる事を説明。

emmetのチートシートも紹介

Cheat Sheet

■まとめ

今日は、明後日から始まるオンライン授業の対策で1時間使った。最初にしっかり準備しておくのが良いはず。

HTMLは、新しいタグがいくつかと、新しいプロパティがいくつか出て来た感じ。

VSCodeのemmetの記法なども、ちょいちょい慣れて来た感じ。

ただ、pc自体に慣れていない方も多いので引き続き注意。