デザイナーではないので、web開発に必要最低限の知識をメモしておく。
・HTMLの最低限のタグの役割を理解する。
・CSSにより画面がどう見えるのかを理解する。
##HTML&CSS 実習に使用したサイト
Progate ･･･ とにかく実習できるサイトが必要だった。途中までは無料で使用でき、実習の有効性が満足のいくものだったので、引き続き、月額料金を支払い学習を継続した（このサイトの宣伝をしている訳ではありません。念の為）。
##HTML&CSS 初心者向け参考記事
「【初心者向け】CSSセレクタとは？セレクタの種類や指定方法を解説！（基礎編）」株式会社アーティス様 ブログ記事より
##HTML とりあえず覚えておきたいタグ
・見出し： <h1>~<h6>
・リンク： <a href="url">
・画像 ： <img src="url">
・リスト： <ul>または<ol>、<li>
・構成 ： <div class="構成名"> ･･･ 文章の構成を作る場合はこちらを推奨。
・段落 ： <p> ･･･ 大きな構成の中での纏まりに使用する（改行あり）。
・集約 ： <span> ･･･ 文中の一部のみ装飾する（改行なし）。
・複数クラス指定： class="xxx yyy"
※CSSの子孫セレクタと記法が類似しているが、親子関係等ではないので注意。
※CSSの設定を目的別に設定したい時などに使用。
※JavaScriptでクラスを動的に付加して処理を変えたい場合などに使用。
・CSSファイル読込： <link rel="stylesheet" href="stylesheet.css">
・閉じるアイコン（×）： <i class="fa fa-times"></i>
##CSS 基本の記法例
凡例）セレクタ␣ {プロパティ（何を:␣どうする）}
li {
color: red;
}
.selected {
color: red;
}
#selected {
color: red;
}
/* 親の設定が別にあり、該当子孫の設定のみ別に実施したい場合。*/
.list-item h3 {
color: red;
}
h1, p {
color: red;
}
対象HTML
<input type="text" name="user-name" value="user-value">
CSSセレクタ例（上記inputタグのname属性の属性値を参照）
$('input[name="user-name"]')
##レスポンシブデザイン
PC／スマフォ等の画面サイズに応じて表示を変える手法。
メディアクエリーを使用して実現する（CSSファイルに定義）。
凡例）
@media( 条件式 ){ CSS定義 }
@media (max-width: 670px) {
h1 {color: blue;}
}
@media (max-width: 1000px) {
h1 {color: red;}
}
/* 条件式は、CSSの定義に類似（末尾にセミコロンはつけない）。 */
/* 条件式の閾値（670px, 1000px）をブレイクポイントと呼称する。 */
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
##調べたHTML要素を随時記載
■classとidの使い分け
学級名(class)、学籍番号(id)
■<link>
リンクする外部リソースを指定する際に使用する。rel属性とhref属性が必須。
rel属性：リンク先との関係。relationの略。
href属性：リンク先アドレス。hypertext referenceの略。
■<link rel="dns-prefetch" href="アドレス">
rel="dns-prefetch"：リンク先を事前読み込み。
■<link rel="canonical" href="アドレス">
rel="canonical"：URL正規化タグ。
ウェブマスターやサイトオーナーが検索エンジンのインデックス内での重複コンテンツ問題を解消できる。
■<link rel="alternate" href="アドレス">
非公開ページでは不要。
スマホサイトURLの存在をGoogle検索エンジンに伝えるのに役立ちます。
■<meta>
SEO対策用タグ（検索エンジン対策）。非公開ページでは不要。name属性で種類を、 content属性でその内容を指定。
■schema.org
SEO対策用のタグ
itemscope、itemtype、itemprop等
■OGP設定
SNSシェア時の要約情報。非公開ページでは不要。
<meta property="og:title" content="タイトル">
property：og:title, og:type, og:url等
■viewport 表示領域
どの端末でも下記記述でOK。
<meta name="viewport" content="width=device-width,initial-scale=1">
■divとspanの違い
div⇒display: block。
span⇒display: inline。
divはCSSで幅（width）と高さ（height）の指定ができます。一方でspanは幅と高さを指定しても反映されません。