HTMLひな型
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>タイトル</title>
<link rel="stylesheet" href="cssファイルのリンク">
<script src="jsファイルのリンク"></script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
DOCTYPE宣言と呼ばれるもので、HTMLのバージョンを指定するためのもの。
<head>
Webページの設定に関する情報を書く、
文字コードの指定やタイトル、CSSの読み込みなどを行う。
<meta charset="utf-8">
文字コードを指定することでページの文字化けを防げる
UTF-8は、HTMLで推奨されている文字コード。
<meta name="viewport">
ウェブページがさまざまなデバイスや画面サイズで適切に表示されるようにする
width=device-width:デバイスの画面幅にページを合わせる
initial-scale=1.0:ページの初期スケールを1倍(100%)に設定。
<title>
ページのタイトルを指定する
<title>要素で指定されたタイトルはブラウザのタブ上に現れる
HTMLとかいう
DOM（Document Object Model）
HTMLやXMLの文書をプログラムが扱いやすいようにツリー構造で表現する仕組みのこと
（枝分かれ構造的な...）
セマンティックタグ
意味を持つタグのこと（header,main,section,article...）
HTMLのタグ
| タグ | 結果 |
|---|---|
| <p> | 段落を作成 |
| <h1>...<h6> | 見出しを作成 |
| <br /> | 改行 |
| <a> | リンクを作成href属性でURLを指定する |
| <img> | 画像を表示するsrc属性でURLを指定する |
| <ul>,<ol> | リストを作成する<ul>が順序なし<ol>が順序あり |
| <li> | リストの項目 |
| <table> | テーブルを作成する |
| <th> | 見出しセル(太字・中央揃え) |
| <td> | データセル(通常文字・左揃え) |
| <input> | 1行のテキスト入力欄 |
| <textarea> | 複数行のテキスト入力欄 |
| <header> | ヘッダー |
| <footer> | フッター |
CSS
HTMLの要素に対して色・大きさ・配置などを指定し、ページをデザインするための言語
以下は基本的に使うプロパティ一覧
| プロパティ | 値 |
|---|---|
| color | 色の名前、カラーコード又はRGBAで指定する |
| background-color | 色の名前、カラーコード又はRGBAで指定する |
| background-image | url属性で画像を指定する |
| background-size |
contain : アスペクト比を保ったまま要素内に収まるように拡大・縮小 cover : アスペクト比を保ったまま要素を完全に覆うように拡大 length : 幅と高さを指定する auto : 元のサイズのまま使用 |
| font-size | px : ピクセル単位でサイズを指定する em : 現在のフォントサイズに基づく相対サイズ (2emは2倍のサイズ) |
| font-family | フォント名を指定 |
| font-weight |
normal : デフォルト値（h1などに指定する） bold : 太字 または数値による指定 |
| text-align |
left : 左揃え right : 右揃え center : 中央揃え justify : 両端揃え（均等配置） |
| letter-spacing |
normal : デフォルト値 ピクセルまたはem(相対サイズ)で指定 |
| line-height | 行間スペースを指定する normal : デフォルト値 数値指定(例:1.5など)・%も可 : 相対倍率で指定 ピクセル指定(px) : ピクセル単位で行間を指定 |
| opacity | 要素の透明度を指定する 0～1で指定（0が完全に透明1が完全に不透明） |
| width | pxまたは%で指定 calc対応。vw(ビューポートの幅)も可能 |
| height | pxまたは%で指定 calc対応。vh(ビューポートの高さ)も可能 |
| padding | 余白を数値・pxまたは%で指定 デフォルト値 : initial又は0 すべての方向を指定 : 数値A 上下左右を指定 : 数値A 数値B 上と左右と下を指定 : 数値A 数値B 数値C 上右下左を個別に指定 : 数値A 数値B 数値C 数値D |
| margin | 余白を数値・pxまたは%で指定 auto : 横方向に自動で中央揃え すべての方向を指定 : 数値A 上下左右を指定 : 数値A 数値B 上と左右と下を指定 : 数値A 数値B 数値C 上右下左を個別に指定 : 数値A 数値B 数値C 数値D |
| list-style | リスト項目の記号や番号のスタイルを指定 none : リスト記号を表示しない disc : 黒い丸（デフォルト） circle : 空心の丸 square : 四角い記号 decimal : 数字（1,2,3...） list-style-imageで画像を指定することも可能 |
| float | 要素を左右どちらかに配置し 親要素内の他の要素がその横に回り込むようにする left : 左側に配置 right : 右側に配置 |
| clear | 要素の前に浮動要素（floatが設定された要素）を回り込ませないようにする none : デフォルト値 left : 左側に浮動要素を回り込ませないようにする right : 右側に浮動要素を回り込ませないようにする both : 左右両側の浮動要素を回り込ませないようにする |
| display | 要素の表示方法やレイアウトを指定 none : 要素を非表示にする initial : 初期値にリセット block : 要素をブロックレベル要素として表示 inline : 要素をインラインレベル要素として表示(横並び) inline-block : インライン要素のように横並びになるが幅・高さの指定が可能（ブロック要素の特性） flex : 子要素をフレックスボックスとしてレイアウトする grid : 子要素をグリッドレイアウトで配置する contents : 要素を非表示にし子要素のみを表示 |
| flex-wrap | フレックスボックスで配置される要素を複数行に折り返すかを指定 nowrap : 子要素が1行に収まるように配置される wrap : 子要素が親要素の幅を超えた場合に折り返す |
| flex-direction | フレックスボックス内の子要素を並べる方向を指定 row : デフォルト値（水平方向に左から右） column : 垂直方向に上から下 row-reverse : 水平方向に右から左 column-reverse : 垂直方向に下から上 |
| align-items | フレックスボックスやグリッドレイアウトの 子要素の縦方向の整列方法を指定 stretch : 子要素がコンテナの高さにフィットする flex-start : 子要素をコンテナの開始位置（上端）に揃える flex-end : 子要素をコンテナの終了位置（下端）に揃える center : 子要素をコンテナの中央に揃える |
| justify-content | フレックスボックスやグリッドレイアウトの 子要素の水平方向の整列方法を指定 flex-start : 子要素をコンテナの開始位置（左端）に揃える flex-end : 子要素をコンテナの終了位置（右端）に揃える center : 子要素をコンテナの中央に揃える space-between : 子要素を均等に配置する |
| grid-template-rows | グリッドレイアウトの各行の高さを指定 数値又は比率（fr）で指定 3行個別に指定 : 数値A 数値B 数値C 同じ数値を繰り返す : repeat(行数,数値) |
| grid-template-column | グリッドレイアウトの各行の幅を指定 ピクセル又は比率（fr）で指定 3行個別に指定 : 数値A 数値B 数値C 同じ数値を繰り返す : repeat(行数,数値) |
| grid-row | グリッドレイアウトで要素が占める行の範囲を指定 要素の始めと終わりを指定 : 行数 / 行数 要素が始まる行からまたがるように指定 : span 行数 |
| grid-column | グリッドレイアウトで要素が占める列の範囲を指定 要素の始めと終わりを指定 : 行数 / 行数 要素が始まる行からまたがるように指定 : span 行数 |
| gap | フレックスボックスやグリッドレイアウトの子要素間の間隔を指定 行間と列間を同じ値で指定 : 数値A 行間・列間を指定 : 数値A 数値B |
| border | 要素の周囲に枠線を追加 border : 太さ スタイル 色 スタイル solid : 実線 dashed : 破線 dotted : 点線 double : 二重線 |
| border-radius | 要素の角を丸くする ピクセル又は%で指定 すべての角を丸くする : 数値A 左上右下・右上左下を丸くする : 数値A 数値B 個別に指定 : 数値A 数値B 数値C 数値D 楕円形（縦と横の半径を個別に指定） : 数値A/数値B |
| box-shadow | 要素に影を追加 box-shadow: 水平位置 水平距離 ぼかし範囲 色 内側に影を作る場合insetを追加する |
| transform | 要素を回転・拡大縮小・移動・傾斜させる none : デフォルト translate(数値A,数値B) : 要素を水平・垂直に移動する scale(数値A,数値B) : 要素の幅・高さを拡大又は縮小する rotate(角度A) : 要素を指定した角度で回転させる skew(角度A,角度B) : 要素を水平・垂直方向に傾斜させる |
| transition | 要素の状態が変化する際にアニメーション化する transition-property : プロパティを指定 transition-duration : アニメーションの所要時間を指定 transition-timing-function : 変化の速度を指定(ease-in-out等) transition-delay : 遅延時間を指定 複合指定 transition : プロパティ 所要時間 変化速度 遅延時間 プロパティの複合指定(例) transition : color 1s,top 0.5s |
| position | 要素の位置を指定 static : デフォルト relative : 元の位置を基準にする absolute : 親要素の位置を基準に配置 （親要素にはrelative又はabsoluteが設定されている必要有） fixed : ビューポート（画面）を基準にして配置する スクロールしても位置が固定される |
| z-index | 要素のスタッキングオーダー（重なり順）を指定 数値又はautoで指定負の数値も可能 positionプロパティが必須（staticは不可） |
| box-sizing | 要素の幅や高さの計算方法を指定 content-box : デフォルト値 パディングやボーダーは計算に含まれない border-box : パディング・ボーダーを含める |
CSSの変数
スタイルシート内で値を再利用できる仕組み
変数は--を使って定義し、var()を使って呼び出す。
変数の値は書き換え（指定クラスない等）可能。
以下の例はbody内の文字は赤でフォントサイズは16pxだが、
blueクラスの物に限り文字の色が青になる。
:root{
--main-color: red;
--font-size:16px;
}
body{
color: var(--main-color);
font-size: var(--font-size);
}
.blue{
--main-color: blue;
}
paddingとmargin
位置：
padding：要素とボーダー（枠線）の間にできる内側の余白
margin：要素の外側にできる隣接する要素との余白
影響範囲：
padding：要素の背景色やボーダーの内側に影響する部分
（背景色がpadding部分に適用される）
margin：他の要素との間隔を作るための外側の余白。要素自体の背景には影響しない
position
positionのabsoluteとrelativeはわかりづらすぎてCSSファイルごと破壊したい衝動がでたのでまとめておく
absolute：位置指定のある親要素が基準。位置指定がない場合はHTML全体が基準。
relative：自身の通常位置が基準。要素を通常の位置から値分（top等）だけ移動する
下図からの読み取り
左：要素Bだけにabsoluteが設定されておりHTMLを基準に位置が指定されている。
右：要素Aにrelative,要素Bにabsoluteが設定されており要素Bは要素Aの位置を基準に位置が指定されている。
Flexbox
ここで最強のflexboxについて触れておく
displayプロパティの値にはblockやらinlineやらinline-blockやらがあり
その特徴は下の画像の通り。
そしてflexboxの特徴はブロック要素とインラインブロック要素の特徴を合わせたものだと思っていい（最強）
子要素の整列やサイズ調整ができ水平方向・垂直方向に要素を配置できる。
他も色々設定可能（詳しくは上のCSSのプロパティ一覧から）
FontAwesome
ソーシャルメディア、UIデザイン、ビジネス関連など幅広いカテゴリのアイコンを提供している。サイズ、色、影、回転などを簡単にカスタマイズ可能。
下画像のようなアイコンをCDNを利用して1行のコードをHTMLに追加するだけで利用可能。
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
レスポンシブデザイン
ウェブサイトやアプリケーションをあらゆるデバイス(スマートフォン・タブレット・デスクトップなど）で快適に利用できるようにする設計手法のこと。
画像サイズや解像度に応じてレイアウトやコンテンツを動的に調整する。
＠mediaを利用した方法
ブレイクポイントを指定し指定値以下の時に特定のCSSを適用できる。
ブレイクポイントは670px/1000pxでよく指定される
670px以下がスマートフォン670px~1000pxがタブレット
1000px以上がデスクトップの想定。
@media(max-width:ブレイクポイント){
/*適用したいCSS*/
}
/*例*/
@media(max-width:670px){
p{
color:red;/*スマートフォンで表示する時、pの文字色を赤にする*/
}
}
%・vw・vhを利用した方法
親要素に対する割合（%）や画面サイズに応じたサイズ指定（vw・vh）を使用する
.container{
width: 100vw; /*画面の横幅全体を使用*/
height: 50vh; /*画面高さの半分を使用*/
}
.btn{
width:50%; /*親要素の50%の幅*/
}