Progate初級編(~16/23)で学んだこと
HTTMLについて
始まり：< > 終わり：</ >
見出し要素：h
段落要素：p
コメント：<!-- --> ＊表示されない
リンク：a <!a herf=“URL”>リンクはこれ的な
画像：img src <!img src=“画像のURL”> ＊テキストがないから終わりのタグ不要
リスト：li <!li>なんか項目になるもの<!/li>
cf)<!ul>で囲むと黒点がつく <!ol>で囲むと連番される 行の先端でインデントをする（tabキー）と親子関係がわかりやすい
<!head>:ページに関する情報 （設定に関する情報であり、表示されない）
<!body>:実際に表示したい内容
<!DOCTYPE html> :HTMLのバージョンを宣言する（必ず記述する）
<!meta charset=“utf-8”> :文字化けを防げる
<!title> :タイトル、ブラウザの上に表示される
<!link rel=“stylesheet” href=“stylesheet.css”>: CSSファイルを読み込む宣言＆読み込むファイルを指定
<!div>~~~<!/div> :レイアウトを決める。要素をグループ化する
CSSについて（HTMLの要素に対して色、大きさ、配置を指定する言語）
!h1{ ＊どの要素の
Color:#red; ＊何を/どうするか（色を赤色に）
} ＊インデントと改行とコンロ・セミコロンは必須
コメント：/なんとかかんとか/
font-size: 10px; →文字の大きさを10に（単位であるpxが必須）
font-family: serif; →文字のフォントをserifに
font-family:”Avenir Next”; ＊フォント名の中にスペースがあれば””で囲む
background-color:#ddd; →背景の色を変える
width: 500px; →横幅を変える
height: 40px; →高さを変える
HTMLでは
<!li class=“selected”>HTML<!/li> ＊””で名前を囲む
CSSでは
.selected{ ＊CSSでは名前の前に. をつける
Color:red;
}
li{
list-style:none; ＊リストの黒点を無くせる
float:left; ＊要素を左に横並びにする
}
.logo1{
padding:20px; ＊上下左右に20pxの余白をつける
} ＊padding-top/left/right/bottom で特定方向にのみつける
Padding: 20px 10px 10px 20px ＊上右下左 の順に指定（時計回り）
Padding: 20px 10px ＊上下 左右 の順に指定