【HTML&CSS】初心者向けメモ #HTML,CSS

デザイナーではないので、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;
}

id（先頭#）

#selected {
  color: red;
}

子孫セレクタ（親␣子孫）

/* 親の設定が別にあり、該当子孫の設定のみ別に実施したい場合。*/
.list-item h3 {
  color: red;
}

複数セレクタ（複数のセレクタに同一設定）

h1, p {
  color: red;
}

CSSセレクタ例（理解不足で間違ってるかも）

  対象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）をブレイクポイントと呼称する。 */

スマフォ・タブレット用にviewport定義が必要

<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は幅と高さを指定しても反映されません。