2022年2月21日：Udemy「WEBデザイン講座 Level0」前半
本日はこちらの講座をやっていきます！
<!DOCTYPE html>
- HTML5で記述しているHTML文書であることを宣言する
- バージョンによって記述が異なる
<html>
- lang属性：属性値はja
- 他のすべての要素は、<html>要素の子要素以下となる
- lang属性では、言語コードを指定します
- 日本語の場合は、lang="ja"と指定する
<head>
- METAデータを記述します
- <title>要素を除き、ブラウザ上には表示されません
- 子要素は<title><style><link><base><script><meta>
- 親要素は<html>のみ
<meta> charset属性：属性値はutf-8
<title>
- 要素内容にWEBページのタイトルを記述する
- HTML文章の中には、一つしか記述できない
- ブラウザのタブに表示されます
- ブックマークや検索結果のタイトルに使用される
<body>
- <body>要素に記述された内容は、原則ブラウザ上に表示される
<a>
- ハイパーリンクを指定する要素
- href属性：属性値はリンク先のURL
- targrt属性：ウィンドウの指定
CSS作成のルール
1．CSSとは
CSSとは、「Cascading Style Sheets」の略である
現時点での最新バージョンは、CSS3
HTMLは…文章構造を記述するためのもの
CSSは…見栄え「デザインやレイアウト」を指定するもの
2．CSSを記述する場所
1．タグのstyle属性に記述する
2．head要素内の<style>要素に記述する
3．別ファイルに記述し、link要素で呼び出す
3．CSSの記述形式
セレクタ {プロパティ:値;}
h1 {color:red;}
4 ．CSSの値と単位
・値…各プロパティには、初期値が設定されている
例） font-style… nomal Italic oblique
※親要素からプロパティの値を継承する「inherit」も指定可能
・単位
px 相対単位
→ユーザーのディスプレイの画像解像度に依存する
em 相対単位
→親要素のfont-sizeに依存
rem 相対単位
→<html>要素のfont-sizeに依存
→<html>要素の初期値サイズは16pxであるため、font-sizeを62.5％に指定すれば、1remは10pxになる
% 相対単位
→親要素のfont-sizeに依存
pt 絶対単位
→1pt＝1/72in=0.3528mm
単位なしが推奨される場合もある
→ line-height
5 ．スタイルの優先準備
CSSの指定が重複した場合、どのスタイルが優先されるか？
スタイルの優先順位
1）タグのstyle属性に記述する
2）<head>要素内の<style>要素に記述する
3）CSS専用のファイルを作成する
6 ．デフォルトスタイルシート ※user agent stylesheet
HTMLの要素には、プロパティの値に初期値が設定されている
各ブラウザには、独自のデフォルトスタイルシートが設定されている
デフォルトスタイルシートによる表示の違い
↓
スタイルを標準化するリセットCSS
7．コメント
/* この部分にコメントを記述します */
▼練習で作成
