![見出し画像](https://assets.st-note.com/production/uploads/images/75368867/rectangle_large_type_2_d0d588a2e5722afc07ac46e788b47555.png?width=1200)
Webデザイン・マーケティング課 授業11日目
1〜3時間目 HTML5・CSS演習
使用テキスト
■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のチートシートも紹介
■まとめ
今日は、明後日から始まるオンライン授業の対策で1時間使った。最初にしっかり準備しておくのが良いはず。
HTMLは、新しいタグがいくつかと、新しいプロパティがいくつか出て来た感じ。
VSCodeのemmetの記法なども、ちょいちょい慣れて来た感じ。
ただ、pc自体に慣れていない方も多いので引き続き注意。
この記事が気に入ったらサポートをしてみませんか?