CSS

HTMLつづき
CSS
コーディング途中経過

HTMLつづき

タグ（インライン要素）

a：ハイパーリンク
href：リンク先URLを指定
target：リンク先を開くフレーム名やウィンドウ名を指定
　→_self：同じウィンドウで開く
　　_blank：新しいタブまたは新しいウィンドウで開く
rel：リンク先との関係を指定（リンク先が信頼できない場合に使用）

<a href=”リンク先URL” target=”リンク先を開く環境” rel=”リンク先との関係”> リンクコンテンツ </a>

em：強調要素。
strong：強調要素。重要性の高い情報
→デザイン的に太文字にしたいから使用するというのは間違い。HTMLは見た目よりも『意味合い』が優先される。
small：主要なコンテンツに付随する補足事項。本文には使用しない（税込み価格・免責事項・警告文・著作権など）
i：慣用句（他と区別されるテキスト（思考・専門用語等））
→フォントによって、イタリック体で表示される。
b：他と区別されるテキスト。注目してほしい部分に使用（キーワード・製品名等）
→<em>や<strong>より弱い注目
span：多用される。（特定の範囲をグループ化）
br：改行。空要素のため終了タグ無し。

コンテンツの埋め込み

画像はインライン要素とブロック要素の良いとこ取りをしたような要素（インラインブロック要素）

img：画像を埋め込む際に使用する。srcは必須属性。alt（代替テキスト）はネットワーク環境が悪いときに文字で表示され、音声読み上げソフトの利用者にも文字で内容を伝えることができ、アクセシビリティが高まる。

<img src="画像ファイルのパス"
　　　alt="代替テキスト"
　　　width="横方向ピクセル値（幅）"
　　　height="縦方向ピクセル値（高さ）"
　　　loading="画像の読み込み方"
　　　decoding="画像デコード時のヒント"
　　　srcset="画像選択リスト"
　　　sizes="画像サイズリスト">

iframe（インラインフレーム）：表示しているページの中に別のページを埋め込むための機能。
→GoogleMapやSNSページの埋め込みなどに使用する。

特殊文字

©（コピーライト）は【&copy】に書き換えなくてはいけない。<>など記号をそのまま入力してしまうと、ブラウザがコードだと勘違いして正常に表示されないことがあるため、文字の置き換えを行おう。

参考サイト
HTMLの記号・特殊文字の文字コード表

要素に名前を付ける

id：一つのidは１ページに一度しか使えない。【ページ内リンク】に名前を付けるときはidを使う。
class：何度も使える。

※複数の単語を組み合わせた名称にする場合、2単語目以降の頭文字を大文字にする。
【primarylinks】→【primaryLinks】

CSSの書き方

3種類の書き方がある。HTMLの他に別個のファイルを作成してCSSを書くことが多い。
webページはページ数が増えてもデザインが統一されているため、複数ページのデザインを一度に変更できる【1】のCSS記述方法が便利。

HTMLファイルとは別のファイルに記述する
HTMLファイル内に記述する→<head>内に記載する。<style>タグを使用。
HTMLタグにインラインで記述する→style属性を使用。

htmlにリンクする

cssファイルをhtmlファイルにリンクすることで、見た目が反映される。htmlの<head>の中に<link>タグを使用してリンクを行う。

/* 〇〇〇〇〇 */

セレクタ

全称セレクタ：*
全ての見た目を変更したいとき。
（　*{color:red;}　）
型セレクタ
htmlの要素名（タグ名）の見た目を変更したいとき。
（　h1{color:red;}　）
idセレクタ：#
（　#id名{color:red;}　）
classセレクタ：.
（　.class名{color:red;}　）
子孫結合子セレクタ
例えばフッターの中の<p>だけ変更したいとき。子・孫まですべてに反映される。
（　footer p{color:red;}　）
子結合子セレクタ：>
子だけ変更したいとき。
（　footer>p{color:red;}　）
隣接兄弟結合子セレクタ：+
後ろ隣の兄弟の見た目を変更したいとき。
一般兄弟結合子セレクタ：~

セレクタ{プロパティ:値;}

p{color:red
font-size:50px
font-weight:bold;}

命令の優先順位

命令が競合した際は、点数計算して得点が高い命令が優先される。

※全称セレクタは０点なので一番最初に設定した後、細かな命令を加算していくのが良い。
※idセレクタは100点なので、他の命令に影響が及びやすい。idにしかできないことにだけ使用すると安全。

指定方法	例	点数
style属性	<p style=”color: red;”>	1000点
idセレクタ	#id名{}	100点
classセレクタ	.class名{}	10点
属性セレクタ	a[href*=”google”]	10点
要素セレクタ	h1{} など	1点
全称セレクタ	*{}	0点

幅・高さの単位

px：ピクセル値
%：要素に対する割合（百分率）
em：フォントサイズの指定に使用することが多い。親要素に対する割合（1em=１倍）
rem：フォントサイズの指定に使用することが多い。ルート要素（祖先要素=htmlタグ）に対する割合（初期値は16px）
16の倍数で計算できるため、emよりも使い勝手良いかも・・・
vw：画面の表示幅に対する割合
vh：画面の表示高さに対する割合
calc関数：値の計算式を入力することで四則演算ができる。

色の指定方法

cssに色のコードを打ち込めば、見た目に反映される。しかし透明度は反映されないため、透明度をプラスしたい時はデベロッパーツールを使用するか、rgba関数を使用する。

カラーネーム：red・blueなど。大まかな色見。

より色の精度を上げたい時

16進数：【0123456789abcdef】の16個を組み合わせて色を決定する。Fが最も大きな値。
　→000000：黒（何も光っていない）
　→FFFFFF：白（すべての色が全力で光っている）

#rgb：#で始まる16進数3桁
→6桁の簡易版。1個でも繰り返しになっていない場合は使えない。
#rrggbb：#で始まる16進数6桁
#rrggbbaa：#で始まる16進数8桁
→透明度をプラスした表記。

色に透明度をプラスしたい時

rgba(r,g,b,a)：rgba関数と呼ばれる。透明度(a)をプラスした表記。
→０：透明
→１：べた塗り

hsla(h,s,l,a)：hsla関数と呼ばれる。H=hue（色相）、S=彩度、L=輝度
→彩度と輝度を固定して色相だけ変更すると、同じトーンで違う色を作ることができる。

グラデーションを表現したい時

グラデーションのコードを作成してくれるサイトがあるので使ってみよう。
CSS Gradient

線形グラデーション（linear-gradient関数）
放射グラデーション（radial-gradient関数）

画像の取り扱い

拡張子について

SVG：ベクター画像
JPEG(JPG)、PNG、GIF：ビットマップ画像

ロゴはSVGで保存するのもおすすめ。

GIF：アニメーション、透過画像を作成できる。保存形式は可逆圧縮型式。256色使用可能。
JPEG：フルカラー（1677万色）使用可能。非可逆圧縮型式のため、圧縮率の指定値によっては大幅な画像劣化が発生する。
PNG-8：GIFと同じ性能。
PNG-24：フルカラー使用可能。圧縮率が悪くファイルサイズが大きくなりやすい欠点がある。画質は最良。

画像の推奨保存形式

アニメーション：GIF
背景透過：GIF・PNG-8・PNG-24
色数が少ないイラスト画像：GIF・PNG-8・PNG-24
色数が多いグラデーション画像：JPEG（高画質）
写真：JPEG（高画質）・JPEG（中画質）
画質を優先する場合
PNG-24を選択。但し、色数が多い場合は、ファイルサイズが大きくなるので注意が必要。
サイズを優先する場合
JPEG（サイズ優先）を選択。但し、画質劣化が発生するため、必ず元画像を保管しておくこと。

コーディング途中経過

【index.html】ファイルに、【reset.css】ファイルと【style.css】ファイルを紐づけした。
【index.html】ファイルの<class>、<id>、<a>を設定した。
リンク設定が完了したため、GoogleMapやSNSへ外部リンクを開けるようになった。
【reset.css】ファイルを紐づけたため、画像サイズが画面いっぱいに表示されたと思われる。→htmlで画像のサイズ指定をする意味があるのか？
【style.css】ファイルで<body>の<h1>～<h6>タイトルをセンター配置する指示をした。webサイトに反映されていることが確認できた。
【style.css】ファイルでheaderの設定を行った。background-imageで背景画像の挿入と、グローバルナビゲーションの高さ設定を行うことができた。

CSS