タイトルがYouTuberすぎる.
Progateくん のHTML&CSS初級編をやったのでチートシート兼アウトプットしておく.
ほんとに列挙するだけ.
#1.HTML編
##見出し
<h1>例</h1>
##段落
<p>例</p>
##リンク
<a href = "URL"> 例 </a>
##画像
<img src = "URL">
当然だけど相対パスでもいいからディレクトリ分けて投げとこうね
##リスト
<li>
<ul> 点 </ul>
<ol> 番号 </ol>
</li>
##divタグ
<div>例</div>
単体では意味がないがブロック要素としてグループ化することができる
<span>も同じだがこっちはインラインでグループ化するので,前後に改行を含まない
##<head>
<head>
<meta charset = "文字コード">
<title>ページタイトル</title>
<link rel = "ファイルの種類" href = "ファイル名">
</head>
<link>:ファイルの種類は、目次などの外部ファイルとの関連性を書く
cssと接続したいなら"stylesheet"など
他はhtmlタグリファレンスに細かく載ってるよ
##フォーム
<input>テキストフィールド</input>
<textarea>テキストエリア</textarea>
<input type = "submit" value = "ボタン">
##クラスの利用
<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なら右から横向き
#〆
初級編ではこのくらい.
環境も作らなくていいし,空き時間にサクッとできるしで手軽にやった感が出せるのはいいね.
まだ無料の中で基本をやってるだけなので教材として評価するには早いけど,言語のとっかかりとしては優秀な気がするので,短期間なら有料でやってみてもいいかも.技術書より安いしな!!
とりあえず無料でできる他の初級編もやってみよ・・・