■HTML・CSS 文法最終とtraining-3 実習
HTML・CSS 文法最終日
文法の復習
flex 横並び
hover カーソルが乗ったときに変化する
10／24日の修正 htmlにcssがうまく反映せずにいた
１）HTML ファイルとは別に記述する場合
「文字をすべて赤くする 文法の間違いを訂正」
①スペースは全角でなく半角
②style.cssの頭に記述忘れ @charset “utf-8”;
③{ 中括弧 が大文字になっていた （sift+ {中括弧）)
background-color
raining-3 実習
style.css 12個 訂正
（行目）
① 4 背景色: xxx; /* 問題01：背景色を指定 /
color:
color: #333;
——————————————————————————————
② 11 背景画像: xxx; /問題02：背景画像を指定 / （TOPのバックに画像）
background-image: hero1.jpg;
background-image: url(‘../images/hero1.jpg’);
——————————————————————————————
③ 18 xxx: xxx; / 問題03：文字サイズを指定 / （見出し文字サイズ）
xxx: xxx;
font-size: 3.5em;
——————————————————————————————
④ 20 xxx: xxx; / 問題04：文字色を指定 / （見出し説明分）
xxx: xxx;
color: #fff;
——————————————————————————————
⑤ 37 xxx: xxx; / 問題05：ボックスの横幅を指定 / （imgを960px内に表示）
xxx: xxx;
width: 960px;
——————————————————————————————
⑥ 43 xxx: xxx; / 問題06：マージンを指定 / （marginは要素外の余白）ボックスモデル)
.spots h2 {
xxx: xxx;
.spots h2 {
margin: 0 0 30px 0;
——————————————————————————————
⑦ 45 xxx: xxx; / 問題07：文字の太さを指定 / （ｈ２）
xxx: xxx;
font-size: 1.8em;
——————————————————————————————
⑧ 48 xxx: xxx; / 問題08：行間を指定 / （ｈ２ ボーダーボタン行の高さ1.4倍）
xxx: xxx;
line-height: 1.4
——————————————————————————————
⑨ 55 xxx: xxx; / 問題09：ボックスの高さを指定 /
xxx: xxx;
height: 44px;
——————————————————————————————
➉ 62 xxx: xxx; / 問題10：パディングを指定 / （要素内側上0右0下20左０要素の下が20px）
.spots .spots-photo {
xxx: xxx;
.spots .spots-photo {
padding: 0 0 20px 0;
——————————————————————————————
⑪ 69 xxx: xxx; / 問題11：角のセキュリティを指定 * （imgの角に丸み）
xxx: xxx;
border-radius: 10px;
——————————————————————————————
⑫ 111 xxx: xxx; /* 問題12：文字の配置位置を指定 */ （txtを水平方向に中央揃え）
xxx: xxx;
text-align: center; （hero2 頁下部の文字）
コメント