HTML
CSS
Progate

HTML&CSS 初級編(Progate) 備忘録

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 *上下 左右 の順に指定