見出し画像

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/

_____________________________________

この記事が気に入ったらサポートをしてみませんか?