はじめに

HTMLとは = 文章構造を定義するマークアップ言語
CSSとは = WEBページのスタイルを指定するための言語
JavaScript = 動的なWEBページを作成することのできるプログラム言語
コードを書いていく中でこれからの学びをまとめます。
※不要なもの、重複するものは省くまたは他のページへ移動させます。

HTMLからCSSへ移るときに簡単にまとめる

　command+d=同時文字の同時編集
シュッとしたコード入力を目指す
「最初から癖づける！」ショートカット
矩形選択からの複数行入力
　[VSCode] Shift+Alt を押しながら下にドラッグ
　[JetBrains] Alt を押しながら下にドラッグ
　class="" ←このダブルクオーテーションの間をクリックし、クリックしたまま Shift + Alt を一緒に押してドラッグするとキャレットが下に増えます。増えた状態でキーボードから文字を入力すると、複数行に同時に入力されます。上下方向だけでなく、左右の選択も行えます。

入れ子構造が理解しにくい

要素=開始タグ〜終了タグまで　入れ子は下記親子関係がわかりやすい

同文字列選択からの複数行入力
　[VSCode] Command+D
　[JetBrains] Control+G
　文字列を選択した状態で、上記キーを押すと、同じ文字列をファイル中から検索し、選択状態にします。複数選択状態になれば、同時にその箇所を編集できます。この機能は使い勝手が良く、機械的な判定を行うので人間が目で見て判定して操作する時のようなミスがありません。使用頻度も多く、積極的に使えば速度と品質の両方の向上が期待できます。例の動画では、class 文字列を選択して同じ文字列を選択、その後文字を入力しています。上下左右のカーソル移動の他に、行頭([Mac]Control+A)、行末([Mac]Control+E)のカーソル移動も併用して行うことで、効率よくテキストの修正ができます。

mdn=信頼できるリファレンス＊（利用者多い）
web開発に関する技術情報を公開しているサイト
閉じタグが必要がどうか
mdn html <タグ名＞文章レベルメタデータ要素でググる！

ソースコードのチェックしたい

入力コードをチェックしたいときに使うサイト【無料】
1.Markup Validation Service
→「Validate by Direct Input」へコードを貼り付けてチェックする
2.Mergly 2つのコードが比較できるサイト

キャレットを増殖させて入力
　[VSCode][JetBrains] Alt を押しながらマウスボタンをクリック
　操作することで、その位置にキャレットを増やすことができます。キャレットが増えている状態でキーボード入力をすると、すべてのキャレットに文字が入力されます。

応用編　　複数位置へのペースト
　複数選択してコピーしたテキストは、複数選択したキャレットへペーストすることができます。スプレッドシート(エクセル) での結果を処理する(HTMLにする等)時に便利です。

VScodeのHTML入力

div.ooo+tab =<div class=ooo></div>になる
section/ooo+tab-<section clss=ooo></section>

Bootstanp Iconds

https://icons.getbootstrap.jp/
CDNを利用する方法=上記URLの下部にあるCDNのlinkをコピー。
HTMLにリンクを貼ってタグのcalssに対象アイコンのURLを貼れば表示
キーワード部分で検索をするとでてくる

ショートカットでのコメントアウト
Windows： Ctrl + /　　　Mac： ⌘ + /
【HTML】<!--   -->
【CSS】/* */

shift+comannd で全選択　shift+tabで全体的に左寄せにできる

Google Chromeのデベロッパーツール（別名：検証モード）
【Ctrl+Shift+I（MacではCommand + Option + I　I=英i）】or【F12】

タグ.（ドット）文字＝（tab）＝＜タグ　class=文字＞＜/タグ＞に変わる

■要素

改行 = <br>(空要素)
区切り線 = <hr>(空要素)
リスト表示 = 順序なし<ul> 中に<li></li>~</ul>
　順序あり<ol>中に<li></li>~</ol> [Emmet]ol>li*3 =li3個出る
説明リスト = dl要素dt要素dd要素
　<Discription List,Term,Definition>
リンク＝_blankで別タグリンク　/#ページ内リンク
ストロング要素＝太字目的で使わない（重要な部分の要素となる）
small要素＝著作権要素で使う場合が多い　文字を小さくするために使わない
　[&copy;]=©︎（文字実体参照はw3cのサイトを参考にする）
header,footer,main,article,aside,navをdivに置き換えても間違いではないが、divより意味のある要素を使った方が文章構造の定義には良い
span要素＝意味を持たない要素。cssの装飾としてよく利用する
　divの中にspanは入るが、spanの中にdivは入らない div=改行
table=テーブル全体のエリア　tr=table row一行を定義
　td要素=table dataテーブルでデータが入るセルを定義
　th要素=table headerテーブルのヘッダーを定義
　キャプション＝テーブルのタイトル
　セルの結合 横=colspan属性 / 縦=rowspan属性
form要素=ユーザーがウェブページからデータをサーバへ送信する
　action要素=どこにデータを送信するのか　ダミー"#"
　method要素=HTTPリクエストメソッドの種類の記述
　get=データを取得　post=データを送信　/サーバに対して
input要素=type属性を指定することで様々な入力フォーム作成可能
　mdn input form =の検索でtype属性の値が見れる
[checked]をinput内に入れることで初期でチェックの入った状態になる
label要素=入れることでテキストをクリックすることで入力が可能
フォームバイデーション（入力制限）input内に入れる
　required=必須項目 maxlength="3" 入力３文字まで（最大）
　両方並びで入力可能、どちらだけも可能　mdnで他もあり。

■属性

属性の種類についてはmdnを参照する
たくさん種類がある為、必要なときに調べれば良い

CSSについて学習

CSS=Cascading Style Sheets
文字やサイズ、レイアウトなどを指定できる
1.インライン＝HTML内、要素にstyle属性を入れてCSSを書く
2.内部参照＝HTML内(head)にstyle属性を用意してCSSを書く
3.外部参照＝CSSフォルダ、ファイルを用意 html-head内にlinkを用意
※基本的には分けて入れる（htmlがごちゃごちゃする）
※数字順で優先。同一ファイル内は下に行くほど優先が高い。
【基本ルール】
セレクター{プロパティ:値(どうする);}
色の指定
・RGB　３色を２桁数値（255種）で表現#6桁
・カラー名で指定　red green blueなど

ボックスモデルとは

ボックスモデルを調整できる主なプロパティ

margin /マージン
padding /パディング
border /ボーダー（罫線）
width /横幅
min-width /横幅の最小値
max-width /横幅の最大値
height /高さ
min-height /高さの最小値
max-height /高さの最大値
margin-top /上,maegin-right /右,margin-bottom /下,margin-left /左
=margin:10px 20px 10px 20px;=上右下左の簡略
=margin:10px 20px 10px;=上, 左右, 下の簡略
=margin:10px 20px;=上下, 左右の簡略
マージンの相殺＝２つの要素の上下のマージンは相殺される
（大きい方に合わされる）左右は相殺されない
ボーダーは基本solid（線）だが、他のラインスタイルを設定したい場合はmdnを参照すると良い。[css demo:border-style]
padding/boederどちらもmargin同様にpxで上下左右に設定可能
marginとpaddingの違い
marginはボーダーの外側　負の値,autoが使える
paddingはボーダーの内側　負の値,auto使えない

3つのセレクター

エレメント（要素）セレクター
IDセレクター＝１つしか作成できない
クラスセレクター＝複数作成可能
※セレクター＝スタイルをどこに当てるかを指定するもの

主なリンクで使用する擬似クラス

a:link= 未訪問（通常）[black]
a:visited=訪問済み[red]
a:hobver=ホバー状態（カーソルon）[green]
a:active=クリック状態[blue]
それぞれに色を指定。styleに入れることでその状態になる。
上からの順番で記述すること。タッチで操作する場合はホバー機能は反応しない。

フォントについて

フォントはお気に入りのサイトの「検証」でfont-familyをチェックしてみる
google Fontsがおすすめ
表示したいフォントを選び<head>要素内にlink内容を貼り付ける
　→font-familyの指定をコピー
ウェブフォントメリット：システム依存なく意図したフォントが表示できる
　デメリット：ダウンロードに時間がかかるためページの表示が遅くなる
※フォント・サイトによっては有料もあるので注意！！
利用頻度の高いフォントスタイル
color：色の指定
font-size：字のサイズ(chromeでは16pxが標準)
font-weight：(bold=太字)
text-align：テキストの位置(right,left,center)
tect-decoration：line-through訂正線,underline下線

Flexboxについて

Flexコンテナ（親要素）とFlexアイテム（子要素）で構成
flex-directionプロパティ
row(初期値)左右,row-reverce右左,column上下,column-reverse下上
flex-wrapプロパティ
nowrap(初期値)左右,wrap折り返し上下,wrap-reverse折り返し下上
justify-contentプロパティ
空きスペースがあった場合子要素を水平方向の位置の配置指定
flex-start(初期値)左寄,flex-end右寄,center真中,spave-between両端なし均等,space-around両端半分の均等,space-evenly両端間隔込みの均等
align-itemsプロパティ
子要素の垂直方向揃えが指定できる
stretch(初期値)親要素の高さ合わせ,flex-start親要素高さ内上揃え,flex-end高さ内下揃え,center高さ内中央揃え,baceline子要素のベースライン揃え
align-contentプロパティ
子要素が複数行にわたって配置した場合の垂直方向の揃えの指定
stretch(初期値),flex-start,flex-end,center,space-between
配置は[align-items]と同じ感じ
flex-flowプロパティ
flex-directionとflex-wrapをまとめれる
row nowrapv(初期値),row-reverse wrap
【暗記でなく必要に応じで使える様にしておくのが良い】
→「Flexbox チートシート」図でわかりやすいのある。

CSSグリッドレイアウト

格子状のマス目をベースにしてCSSでWebサイトレイアウトを組む
Flexboxよりも複雑なレイアウトを効率よく作成できる
Gridコンテナー(親要素)とGridアイテム(子要素)で構成
Gridアイテム間の余白はGridギャップというプロパティで指定できる
grid-temlate-columsプロパティ
横並びの指定(pxをfr fractionにするとレスポンシブル対応）
grid-temlate-rowsプロパティ
縦の並びの指定
　colums=横幅の指定/rows=縦幅の指定
gapプロパティ
余白の値を設定する
gap,column-gap横/row-gap縦,一括指定gap: 30px 16px;(縦:横)
repeat関数
repeat(繰り返す数,要素の幅)/1fr 1fr 1fr=repeat(3,1fr);
minmax=最小値の設定/repeat(3,minmax(240px,1fx)
auto-fillプロパティ/auto-fitプロパティ
グリッドコンテナー(親要素)にスペースがあると
auto-fill＝からのグリッド/auto-fit＝余白として扱われる

レスポンシブ対応の仕方

スマホ用のサイト表示の変更
@media(max-width:750px)=750px以下で起立するスタイルの適用
クラスやIDを指定してやりたい項目を入れる（下記）
検索boxの非表示(none)やflexを3カラムから2カラムに変更など
スマホ対応用に変更していく

Bootstrapについて

レスポンシブ対応のwebサイトのレイアウトが簡単に作れる。
CSSフレームワークとも呼ばれる。
開発スピード向上・コスト削減ができる。
メリット：素早くアイデアのプロとタイプを形にできる
　アプリケーション全体を構築できる
デメリット：テンプレートなので、似たようなデザインになりがち
【テーマを買う】
　Bootstrap公式のテーマを購入することも可能
　一部Bootstrapのテーマを販売しているサイトもある
　（creatibe-tim）→ 一部無料のテーマもある
【Bootstrap向けの便利なサイト】
　Theme Selectuion/Bootstrap Cheet Sheet
　カテゴリごとにコンポーネントが並んでいて中から欲しいものを選べる

【Bootstrapを使ってみる】
サイトページより　https://getbootstrap.jp/
　現在はbootstrap5が主流。「はじめる」を選ぶ
ダウンロードよりもCDNで進めるCDN=Contents Delivery Network
でBootstrapを読み込む方法。シンプルな使い方（こっちの方が多い）
　1.CSSのコードをtitleタグの下に貼り付ける
　2.JSのコードを</body>の上に貼り付ける
あとは入れたいコードを入力すると表示される。
　指定されているクラスが重要になる。
[Grid system]
　rowは行 colは列の略　col(カラム)
グリッドオプション　ブレークポイントは次の通り
クラス /ブレークポイント /コンテナの幅
col-nn /<576px /None(auto)
col-sm-nn />=576px /540px
col-md-nn />=768px /720px
col-lg-nn />=992px /960px
col-xl-nn />=1200px /1140px
col-xxl-nn />=1400px /1320px
　画面幅が指定以下になると縦並びになる
container-fluid :ウィンドウズサイズを変えても常に画面いっぱいになる
ガターとは溝の意味。コンテンツの感覚を調整するのに用います

Bootstrapの活用について

Bootstrap Iconds
CDNでの利用が良い
→linkをhtmlのheadに入れて欲しいiconのタグを入れる