タイトルがYouTuberすぎる．

Progateくん のHTML&CSS初級編をやったのでチートシート兼アウトプットしておく．
ほんとに列挙するだけ．

1.HTML編

見出し

<h1>例</h1>

段落

<p>例</p>

リンク

<a href = "URL"> 例 </a>

画像

<img src = "URL">

当然だけど相対パスでもいいからディレクトリ分けて投げとこうね

divタグ

<div>例</div>

単体では意味がないがブロック要素としてグループ化することができる
<span>も同じだがこっちはインラインでグループ化するので，前後に改行を含まない

<head>

<head>
    <meta charset = "文字コード">
    <title>ページタイトル</title>
    <link rel = "ファイルの種類" href = "ファイル名">
</head>

フォーム

<input>テキストフィールド</input>
<textarea>テキストエリア</textarea>
<input type = "submit" value = "ボタン">

クラスの利用

div

<div class = "クラス名">

2.CSS編

セレクタ

h1{

}

この例ならh1を使った時の振る舞いを制御する

クラス

.クラス名{

}

色

color            : カラーコード;
background-color : カラーコード;

文字

font-size   : __px;
font-family : フォント名;

サイズ

width  : __px;
height : __px;

リストスタイル

list-style : none;

この例をリストで使ったらリストの黒点を消せる

枠

border : __px 種類 カラーコード;

-top(bottom, left, right)で方向を指定できる

余白

padding : __px;
margin  : __px;

上下左右に余白を設置
-top(bottom, left, right)で方向を指定できる
paddingは枠線の内側
margin は枠線の外側の余白
ブラウザの検証で余白を可視化できるので見ながらいじろう

入れ子のセレクタ

.クラス名 h1{

}

この例なら指定したクラスのh1を使った時の制御を指定する

横向き

float : left;

左から横向き
rightなら右から横向き

〆

初級編ではこのくらい．

環境も作らなくていいし，空き時間にサクッとできるしで手軽にやった感が出せるのはいいね．
まだ無料の中で基本をやってるだけなので教材として評価するには早いけど，言語のとっかかりとしては優秀な気がするので，短期間なら有料でやってみてもいいかも．技術書より安いしな！！

とりあえず無料でできる他の初級編もやってみよ・・・

【Progate】HTML&CSS初級編やってみた