HTML/CSS基礎③
CSSの構造について
- 絶対パス…ウェブ上のドメイン、フォルダ名、ファイル名を順に記載したファイルの表記方法。ドメイン、フォルダ名、ファイル名といった各階層の区切りは「/」で区切り、ファイルの居所を最初から最後まで完全に記述する。
- 相対パス…現在のファイルから目的となるファイルまでの行き道を示す。
HTML：テキストの意味
- a 要素（ハイパーリンク）…「A」とは、「Anchor（アンカー）」の略で、リンクの出発点や到達点を指定するタグ。
リンクの出発点を示す場合は、href属性でリンク先を指定し、到達点を示す場合はname属性やid属性を使用し、その場所の名前（識別子）を指定。インライン要素/ブロックレベル要素といったタグの分類に変更があり、<a>タグの中に<div>タグなどの元ブロックレベル要素を含めてもよい。 - em 要素（強調）…英文だとイタリックになる。「emphasis」の略で、強調を表すタグ。Windowsでメイリオのフォントを指定している場合、日本語が斜体にならないことがあります。
- strong 要素（強い重要性）…テキストの強調を表す際に使用するタグです。～で囲んだテキストを強調。
- small 要素（免責・警告・著作権など）…「SMALL」とは、テキストを一回り小さくするためのタグ。免責や警告などの注釈や細目などを表す際に活用される。
- i 要素（他と区別されるテキスト（思考・専門用語 等））…「I」とはフォント（文字）をイタリック体にするためのタグ。～のタグで囲まれたテキストはイタリック体になる。日本語フォントの場合はイタリック体や斜体が用意されていることはほとんどないので多くの場合は標準フォントを斜めに傾けた表示になる。
- b 要素（他と区別されるテキスト（キーワード・製品名 等））…「B」とはフォント（文字）を太字（bold）にするためのタグ。
- span 要素（特定の範囲をグループ化）…単体では特に意味を持たないタグですが、～で囲った部分をインライン要素としてグループ化することができるタグ。
- br 要素（改行）…改行を行うためのタグ。終了タグなしで使用。
HTML：コンテンツの埋め込み
- img 要素（画像）…画像を示すための要素。UR を指定することで、表示する画像を設定することができる。
- iframe 要素（インラインフレーム）…HTMLの要素で、入れ子になった閲覧コンテキストを表現、現在の HTML ページに他のページを埋め込むことができる。
※基本HTMLでは文章の意味で「em」「strong」「small」を使う。それ以外の文字の飾りはCSSで記載する。
「アクセシビリティ」…守られていないと海外では罰則のある国もある。サービスや製品の使いやすさを表す用語。
CSSの基本構造について
CSSとはCascading Style Sheets（カスケーディングスタイルシート）の略。
- HTML ファイルとは別に記述する場合
HTML文書以外にスタイル定義のみのファイル（スタイルファイル）を記述。HTML文書内から参照してスタイルを指定する方法。 - HTML ファイル内に記述する場合
HTML文書のheadタグ内に、スタイルをまとめて記述する。複数ページあるうちの特定のページにだけ優先的に反映させたいスタイルがある場合に使用する。 - HTML タグにインラインで記述する場合
HTMLのタグに直接スタイルを記述し、そのタグにのみ反映。スタイルをテスト的に表示したい場合に使われる。
CSS：セレクタの記載方法
全称セレクタ
型セレクタ
id セレクタ（#）
class セレクタ（.）
子孫結合子セレクタ
子結合子セレクタ（>）
隣接兄弟結合子セレクタ（+）
一般兄弟結合子セレクタ（~）
セレクタの得点について
セレクタには優先順位があり、点数計算して高得点のものが適用される。
※セレクタの記載に関してはGoogle Chromeで確認（検証）することが出来る。
CSS：幅・高さの単位
- px（ピクセル値）…ピクセル値で指定
- %（要素の割合（百分率））
- em（要素の割合）…
- rem（ルート要素の割合）…
- vw（画面の表示幅の割合）…
- vh（画面の高さの割合）…
- calc 関数（値の計算）…
CSS：色の指定方法
カラーネーム
#rgb（ハッシュ（#）で始まる 16 進数 3 桁）
#rrggbb（ハッシュ（#）で始まる 16 進数 6 桁）
#rrggbbaa（ハッシュ（#）で始まる 16 進数 8 桁）
rgb(r,g,b)（rgb 関数）
rgba(r,g,b,a)（rgba 関数）
hsl(h,s,l)（hsl関数）
hsla(h,s,l,a)（hsla関数）
感想
本日のリモート授業に関しては、実践してみないとわからない感じなので、明日確認しながら進めて行きたい。
あと、まだ、理解度が途中なので、もう一度復習しながら本日の日誌を記載したいと思っています。