HTMLCSS基礎③

HTML/CSS

HTML コメントアウト

  • “:HTML 文書に記述

CSS コメントアウト

  • /* 〇〇〇〇〇 */:CSS ファイルに記述

  • HTML:テキストの意味


  • a 要素 (ハイパーリンク):他のページやファイルへのリンクを作成

  • パス:ファイルの位置を示す文字列

  • 絶対パス:Web 上の絶対的な位置を示す(例:https://www.example.com/images/logo.png)

  • 相対パス:現在のファイルからの相対的な位置を示す(例:./images/logo.png)

  • em 要素 (強調):テキストを強調(重要性、緊急性が高い場合)

  • strong 要素 (強い重要性):テキストを強く強調(最も伝えたい情報など)

  • small 要素 (免責・警告・著作権など):補足的なテキスト(免責事項、著作権表記など)

  • i 要素 (他と区別されるテキスト(思考・専門用語 等)):他のテキストと区別されるテキスト(専門用語、慣用句など)

  • b 要素 (他と区別されるテキスト(キーワード・製品名 等)):意味的な重要性なしに注目を集めるテキスト(キーワード、製品名など)

  • span 要素 (特定の範囲をグループ化):特定の範囲をグループ化し、スタイルを適用

  • br 要素 (改行):テキストの改行

文章の中の改行位置を定義します。一つの段落の中で改行を行いたい場合に使用します。
2個3個連続で使うことは良くない


<br><br>終わりの</br>はない
見た目で使用するのはよくない 
意味を持たせてなのでを連続で使わない

HTML:コンテンツの埋め込み

  • img 要素 (画像):画像を埋め込む

  • alt 属性:画像の代替テキスト(アクセシビリティのため必須)

  • width,height属性:画像の縦横比を指定する

  • src 属性:画像ファイルのパス

  • iframe 要素 (インラインフレーム):ページ内に別のページを埋め込む

  • src(必須)インラインフレームに表示するページファイルのパスを指定

  • width,heightインラインフレームの横縦幅を指定する

CSS との紐付け

id 属性と class 属性を使用して HTML タグと CSS を紐付け

CSS の基本構造

セレクタ:スタイルを適用する HTML 要素
プロパティ:適用するスタイルの種類(色、フォントサイズなど)
値:プロパティの具体的な値
CSS:セレクタの記載方法

  • 全称セレクタ (*)

  • 型セレクタ (例:p, h1)

  • id セレクタ (#)

  • class セレクタ (.)

  • 子孫結合子セレクタ

  • 子結合子セレクタ (>)

  • 隣接兄弟結合子セレクタ (+)

  • 一般兄弟結合子セレクタ (~)

CSS:幅・高さの単位

px (ピクセル値)

% (親要素に対する割合)

em (親要素に対する割合)

rem (ルート要素に対する割合)あまり固定するのは良くない

vw (画面幅に対する割合)幅 1vwが画面の1%

vh (画面高さに対する割合)

calc 関数 (値の計算)

その人が使ってるデバイスに対しての(100%-40px)とかで計算してくれる
()必須 + ー の前は半角スペース

CSS:色の指定方法

カラーネーム (例:red, blue)

#rgb (16 進数 3 桁)

#rrggbb (16 進数 6 桁)

#rrggbbaa (16 進数 8 桁)

rgb(r,g,b) 関数

rgba(r,g,b,a) 関数

hsl(h,s,l) 関数

hsla(h,s,l,a) 関数

rgb指定が多い
hsla

16進数
1→9
ABCDEF

この2つの組み合わせで出来ている(0~255全で256個になる)

関数rgb()関数べた塗

rgba()関数

覚えたくない人はrgba()関数を使用する

実践・練習:打ち込んでいき覚えていく

今後:少しでも良いんで打ち込んで覚えて意味を理解する

一気に覚えるのは無理だと思うので使っていって覚えてタグの意味も理解するように心がける

コメント