前回の続きから始めます。
前回なにやってるんだよって方はこちらからどうぞ!
▶<https://qiita.com/akari_0618/items/3526fd7b751d9387667d>
装飾
まずHTMLの確認をします。
index.html
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><linkrel="stylesheet"href="css/style.css"><title>プロフィール</title></head><body><divclass="container"><h1class="title">自己紹介</h1><ulclass="pro"><li>名前:</li><li>趣味:</li></ul></div></body></html>
閉じタグがあるか確認をしてから、CSSに入りましょう。(たった一つのタグがないことで6時間程度時間を溶かしたことがあります笑)
確認が終わったところでコーディングに入ります。
style.css
.container{background-color:hotpink;padding:10px;margin:20px;width:50%;border:10pxdoubleblack;}.title{border:5pxsolidblack;width:30%;padding:2px0px2px20px;background-color:white;}.pro{list-style:none;}li{border:2pxsolidblack;width:30%;background-color:red;margin-bottom:10px;}
鋭い人は『ん?』って思いますよね👍
クラス名の前にあるこれ▶.(ピリオド)
これはCSSで『これからクラスの装飾始めますよ〜』
というものなのHTMLでクラスを宣言した場合は必ず忘れないようにしましょう👍 当たり前に忘れると反映されませんw
ulブロックの中にあるli要素に『点』を消す方法は list-style: none;
とします!!
全部完了するとこうなります☺️
今まで紹介した方法ですべてやりました!
もしわからなかった場合などは記事に戻って振り返ってみてください😊