HTML/CSSを勉強してる方向けに、Progateの学習順序に準拠したコードリストを作りました。
※まとめた方が良い所はまとめて書いてます。
ちょっとした空き時間での勉強にでも、よかったらご利用ください。
HTMLタグリスト
リンクタグ <a href="URL">表示させたい文字</a> 見出しタグ <h1></h1> ～ <h6></h6>段落タグ <p></p>コメント <!-- -->イメージタグ <img src="URL">親リストタグ（先頭黒点） <ul></ul>親リストタグ（先頭連番） <ol></ol>子リストタグ <li></li>DOCTYPE宣言 <!DOCTYPE html>
HTML文書宣言 <html></html>Webページの設定情報 <head></head>文字コード <meta charset="utf-8">ページタイトル <title></title>CSS読み込み <link rel="stylesheet" href="stylesheet.css">実際に表示したい内容を記載 <body></body>グループ化タグ <div></div>
クラス指定 <div class="クラス名"></div> ※divタグ以外でも同様に設定可能
複数クラス指定 <div class="クラス名 クラス名"></div>文中一部のみ指定 <span></span>一行用入力欄 <input>
※type="submit"で送信ボタン、value="保存"にすると保存ボタンになる複数行入力欄 <textarea></textarea>View port設定(メディアクエリ使用時) <meta name="viewport" content="width=device-width, initial-scale=1.0">
※メディアクエリ用のファイルを読み込む場合はこれより下に記述する
CSS表記リスト
【タグ毎指定例】
h1{
}
【クラス毎の指定例】
.content{
}
【クラス内の一要素指定例】
.content li{
}
【複数のセレクタに指定例】
h1, p{
}
【header/footer指定】
header{
}
footer{
]
【全要素にCSSを適用】
*{
}
文字色 color:文字色;文字サイズ font-size:文字サイズ(px);文字の種類 font-family: フォント名;背景色 background-color: 背景色;
背景色透過 background-color: rgba(r,g,b,a); ※aの部分を0～1で指定横幅指定 width: 幅(px)
width: 割合(%);
縦幅指定 height: 幅(px);
height: 割合(%);リスト黒点消し list-style:none;リスト横並び float:left or right;内側余白 padding:幅(px);
内側余白(個別設定) padding:上 右 下 左;
内側余白(上下と左右で設定) padding:上下 左右;ボーダー border:太さ(px) 種類(solidとか) 色 ; 外側余白 margin:幅(px);
外側余白(個別設定) margin:上 右 下 左;
外側余白(上下と左右で設定) margin:上下 左右;
要素を中央に表示 margin:0 auto; ※widthを併せて設定必要背景画像 background-image: url(画像のURL);
1枚の画像で表示範囲を埋め尽くす background-size: cover;透過 opacity:0.0(完全に透明)～1.0(完全に不透明);文字の間隔 letter-spacing:幅(px);要素変更 display:block; ※weight/height、margin/padding設定可、縦並び
display:inline-block; ※weight/height、margin/padding設定可、横並び
display:inline; ※weight/heigh設定不可、margin/padding左右のみ設定可、横並びカーソルが乗った時の動作 変化させる場所:hover{変化させたい内容} 角を丸める border-radius:幅(px);配置指定 text-align:left or center or right;アニメーション transition:変化の対象 変化時間;行の高さ指定 line-height:幅(px);文字の太さ font-weight:normal or bold;要素を重ねる position: absolute; 以下のようにサイト全体の左上部分を基準とし、そこからの位置を指定
top:幅(px);
left:幅(px);
position: relative; ※親要素にこの指定をしておくと基準点がその親要素の左上になる影を付ける box-shadow:水平方向(px) 垂直方向(px) 色 ;
box-shadow:none ※activeと合わせて使うとボタンを押しているような動作になるカーソル変更 cursor:text or pointer or default; ※aタグは初期がpointerクリック時の変化(例) 対象要素:active{
position: relative;
top:幅(px);
box-shadow:none;
} 位置を固定 position: fixed; ※以降にtop/left/right/bottomで固定位置を指定要素の重なり順序指定 z-indext:0～; ※値が大きいほど上に表示される。positionとの併用が必要メディアクエリ @media (max-width: サイズ(px)) { .... }widthにpaddingとborderを含める box-sizing:border-box;float解除 clear: left; ※これを適用するためにする為に以下のような空タグを用意する
<div class="clear"></div>要素の表示/非表示 display: none; ※非表示
display: block; ※表示flex-box display: flex ※横並びになる。親要素に指定
flex: auto; ※要素の幅を親要素に合わせて伸縮
flex-wrap: wrap; ※子要素のサイズに応じて折り返す。親要素に指定。
子要素にflex:autoと一緒にwidthを指定する（例：50％指定で2列表示）
flex-direction: column ※縦並びになる。親要素に指定。
