HTML&CSS基礎
職業訓練に通っていた頃大好きだったコーディングですが、
学び直すと結構変わっていたり、忘れていたりするところがあるので、
こちらにメモとして残していきます。
_____________________________________
HTML
●フォルダ構造
相対パス → ../○○○○○ で上の階層を参照する
ルート相対パス → /○○○○○ で必ずルート(一番上の階層)に戻る(ローカル環境では動作しない)
●テーブル
<table></table>タグ → テーブル全体
<tr></tr>タグ → 行
<th></th>タグ → 見出し
<td></td>タグ → セル
<thead><tbody><tfoot> → テーブルのアウトラインタグ
colspan="○" → 横方向に結合
rowspan="○" → 縦方向に結合
☆複雑な形のテーブルはテーブルタグジェネレーターを使おう!
_____________________________________
CSS
● CSSの特殊な書き方
CSS親要素 > 子要素 → 最初の子要素にだけ適用
親要素 子要素 + 子要素 最初の子要素を基準としてそれ以下に適用
● インライン要素とブロック要素
ブロック要素 → ・前後には改行が入る・幅、高さ指定が出来る・上下左右余白設定出来る(h1,p etc...)
インライン要素 → ・横並びになる・幅、高さ指定出来ない・左右余白設定出来る、上下は出来ない(a,img,strong,br etc...)
display:block,inline,inlineblok で性質を変える事が出来る
●擬似クラス
firstchild → 最初の要素に適用
lastchild → 最後の要素に適用
nthchild(n) → n番目の要素に適用
nthchild(odd) → 奇数の要素に適用
nthchild(even) → 偶数の要素に適用
○○○○○ :: before{ content : " " ; } → 要素の前に適用
○○○○○ :: after{ content : " " ; } → 要素の後ろに適用
●positionプロパティ
position: relative; 現在位置を基準にして要素を移動する
position: absolute; 親要素を基準にして要素を移動する
position: fixed; 画面を基準にして要素を移動(固定)する
z-index: 数字; 要素の重なり順
●flexbox
display : flex ;
↓
・justify-content(水平方向の揃え)
justify-content: space-between; → 等間隔
justify-content: center; → 中央揃え
justify-content: flex-end; → 右揃え
justify-content: flex-start; → 左揃え
・align-items(垂直の揃え)
align-items: center; → 垂直に中央揃え
align-items: flex-startr; → 上揃え
align-items: flex-end; → 下揃え
・flex-direction(子要素の並ぶ向き)
flex-direction: row; → 右から左へ並ぶ(初期値)
flex-direction: row-reverse; → 左から右へ並ぶ
flex-direction: column; → 上から下へ並ぶ
flex-direction: column-reverse; → 下から上へ並ぶ
・order
order:n; → n移動する
・flex-wrap(子要素の折り返し)
flex-wrap: nowrap; → 全てのアイテムがひとつの行におさまる
flex-wrap: wrap; → アイテムは他の行へ折り返す
flex-wrap: wrap-reverse → アイテムは逆順になり他の行へ折り返す
●calc()関数
自動で計算してくれる
width: calc(100% / ○); etc...(カラム並べる時に便利)
●transitionプロパティ
変化するまでの時間を設定するプロパティ
①transition-duration → 変化が始まって終わるまでの時間を設定
②transition-property → 変化が適用されるCSSのプロパティを指定
③transition-timing-function → 変化の度合いを設定
・ease
・linear
・ease-in
・ease-out
・ease-in-out
④transition-delay → 変化が始まる時間を設定 例)文字が1つ1つ遅れて出てくる etc...
⑤transition → ①〜④までを一括で指定出来るショートハンドプロパティ
例)transition : color 2s ease 0.5s;
★かけるのは擬似クラスがついていない要素。
(参考)https://qiita.com/7968/items/812d6a21fc4dd9ae9c75
●animationとkeyframes
2つを組み合わせて使う。
例) @keyframes ○○○{
0%{
width : 0;
}
100%{
width : 100%;
}
}
.btn{
animation-name:○○○;
animation-duration:2s;
}
・animation-name → アニメーションの名前
・animation-duration → アニメーションが開始してから終了するまでの時間
・animation-timing-function → アニメーションのイージング
・animation-delay → アニメーションが開始するまでの時間
・animation-iteration-count → アニメーションを繰り返す回数
・animation-direction → アニメーションの再生方向(順番・逆再生)
・animation-fill-mode → アニメーション開始と終了時のスタイルの状態
・animation-play-state アニメーションの再生・停止
・animation → 上記のプロパティを一括で指定できるショートハンド
(参考)https://webdesignday.jp/inspiration/pickup/5167/
●Transformプロパティ
移動、回転、伸縮、傾斜の変形を加えることが出来る
2D(XY方向)と3D(XYZ方向)の変形
・translate → 移動
・rotate → 回転
・scale → 伸縮
・skew → 傾斜
・translate
セレクタ名{
tranform : translate(X軸方向の移動距離,Y軸方向の移動距離)
}
・rotate
セレクタ名{
tranform : rotate(回転角度deg)
}
・scale
セレクタ名{
tranform : scale(数値,数値)
} 画像を拡大する時などに使う?
・skew
セレクタ名{
tranform : scale(X軸方向の傾斜角度,Y軸方向の傾斜k角度)
}
(参考)https://haniwaman.com/css-transform/
_____________________________________
この記事が気に入ったらサポートをしてみませんか?