デイトラWeb制作コース 初級編DAY5の学び
【この記事に書いてあること】
プログラミング学習5日目⏩
— ふりっく💻トリプルゼロの（これから）Webマーケター (@FuRiC_twi) January 16, 2021
目標:Web制作コース 初級編DAY5💻
学習時間:2h27min⏳
学習内容:ゼロからサイトを作る✏
学び📚
・リセットCSSの下にスタイルシートを記述する
・クラス名は基本「親要素の名前＋用途」にする
・floatさせたら親要素の高さが0になってズレる
→解決方法あり#デイトラ pic.twitter.com/CxqZzAfEYa
【学習時間】
2時間27分
【学び】
1.Emmentを使ったdescriptionの簡略化
index.html
meta:desc → <meta name="description" content="">
2.command＋方向キーで行を入れ替えることができた
3.リセットCSSの下にスタイルシートを記述する
リセットCSSの上にスタイルシートが来るとそれもリセットされてしまうから
style.css
<link rel="stylesheet" href="css/reset.css">リセットCSS
<link rel="stylesheet" href="css/style.css">スタイルCSS
4.クラス名は基本「親要素の名前＋用途」にする
index.html
<body>
<header>
<div class="container clear">
<div class="header-left">
<h1 class="header-title">30DAYSトライアル</h1>
5.・floatさせたら親要素の高さが0になってズレる→.clear::after を使う
style.css
.clear::after { /*clearのクラスをつけた要素の後ろ（after)を変更したい*/
content: ""; /*afterとbeforeの疑似要素にはcontentが必要*/
clear: both; /*空白を作る*/
display: block;
} /*これらはセットで覚える！*/
6.思い通りの見た目にならない時の☑チェックリスト
① コロン（:）とセミコロン（;）を間違えていないか
② 全角スペースが入っていないか
③ つなげる文字を書き忘れてないか。例えば、アンダーバー（_) ハイフン(-) ドット（.）など
④ 「閉じタグ」の数が不足してないか
⑤ classを定義するときに「ドット（.）」を書き忘れてないか
⑥ 単純なスペルミス