はじめてのHTML&CSS 超基礎編 - AtoZ School Tech...CSSの基礎知識 !...
Transcript of はじめてのHTML&CSS 超基礎編 - AtoZ School Tech...CSSの基礎知識 !...
![Page 1: はじめてのHTML&CSS 超基礎編 - AtoZ School Tech...CSSの基礎知識 ! CSSはカスケーディング・スタイル・シート [ Cascading Style Sheet ] のこと カスケーディング](https://reader033.fdocument.pub/reader033/viewer/2022050421/5f90567d9e788a71c27c1044/html5/thumbnails/1.jpg)
はじめてのHTML&CSS 超基礎編
Copyright AtoZ School.tech All Rights Reserved.
一部抜粋資料
![Page 2: はじめてのHTML&CSS 超基礎編 - AtoZ School Tech...CSSの基礎知識 ! CSSはカスケーディング・スタイル・シート [ Cascading Style Sheet ] のこと カスケーディング](https://reader033.fdocument.pub/reader033/viewer/2022050421/5f90567d9e788a71c27c1044/html5/thumbnails/2.jpg)
そもそもHTML,CSSとは?
家で例えると…
構造体 骨組み
→ HTML 装飾 外装 インテリア
→ CSS
2
基礎知識
![Page 3: はじめてのHTML&CSS 超基礎編 - AtoZ School Tech...CSSの基礎知識 ! CSSはカスケーディング・スタイル・シート [ Cascading Style Sheet ] のこと カスケーディング](https://reader033.fdocument.pub/reader033/viewer/2022050421/5f90567d9e788a71c27c1044/html5/thumbnails/3.jpg)
構造化とHTML 例 基礎知識
大見出し <h1></h1> 段落 <p></p>
中見出し <h2></h2>
段落 <p></p>
小見出し <h3></h3>
図 <img>
図 <img>
![Page 4: はじめてのHTML&CSS 超基礎編 - AtoZ School Tech...CSSの基礎知識 ! CSSはカスケーディング・スタイル・シート [ Cascading Style Sheet ] のこと カスケーディング](https://reader033.fdocument.pub/reader033/viewer/2022050421/5f90567d9e788a71c27c1044/html5/thumbnails/4.jpg)
まずは大枠の箱を作ろう
l 書いたらファイルをを保存しよう
トップページに使うHTMLの名前は [ index ]
拡張子は [ .html ]
<html> <head> <title>タイトル</title> </head>
<body> 本文テキスト </body> </html>
4
HTML
![Page 5: はじめてのHTML&CSS 超基礎編 - AtoZ School Tech...CSSの基礎知識 ! CSSはカスケーディング・スタイル・シート [ Cascading Style Sheet ] のこと カスケーディング](https://reader033.fdocument.pub/reader033/viewer/2022050421/5f90567d9e788a71c27c1044/html5/thumbnails/5.jpg)
コードとインデント
インデントをして、コードの頭をそろえて見やすくする
コードは自分だけが見るものではなく、他の人も読んだり書いたりするもの。インデントが無くても成り立つが、他の人が見た時に分かりやすく書いて おくのがマナーであり優しさなので、読みやすいコードをこころがけよう。
可読性 読みやすく
視認性 見やすく
判読性 分かりやすく
5
HTML
![Page 6: はじめてのHTML&CSS 超基礎編 - AtoZ School Tech...CSSの基礎知識 ! CSSはカスケーディング・スタイル・シート [ Cascading Style Sheet ] のこと カスケーディング](https://reader033.fdocument.pub/reader033/viewer/2022050421/5f90567d9e788a71c27c1044/html5/thumbnails/6.jpg)
CSSの基礎知識
l CSSはカスケーディング・スタイル・シート [ Cascading Style Sheet ] のこと
カスケーディング ・・・ 滝状の、階段状の、段階的に処理をする
l CSSはCSSフォルダをつくってそこに保存しよう
l CSSファイルの先頭にも文字コードのutf-8の設定を入れよう
@charset "utf-8";
l ファイル名はなんでも良いが、styleとつけることが多い 拡張子は [ .css ]
6
CSS
![Page 7: はじめてのHTML&CSS 超基礎編 - AtoZ School Tech...CSSの基礎知識 ! CSSはカスケーディング・スタイル・シート [ Cascading Style Sheet ] のこと カスケーディング](https://reader033.fdocument.pub/reader033/viewer/2022050421/5f90567d9e788a71c27c1044/html5/thumbnails/7.jpg)
CSSの記述ルール
セレクタ { プロパティ : バリュー(値);
}
l セレクタ
スタイルを設定する場所(タグなど)を指定する(どこの)
l プロパティ
どのようなスタイルを設定するのかを指定する(なにを)
l バリュー
プロパティに対して、値を設定する(どうする) 7
CSS
![Page 8: はじめてのHTML&CSS 超基礎編 - AtoZ School Tech...CSSの基礎知識 ! CSSはカスケーディング・スタイル・シート [ Cascading Style Sheet ] のこと カスケーディング](https://reader033.fdocument.pub/reader033/viewer/2022050421/5f90567d9e788a71c27c1044/html5/thumbnails/8.jpg)
色の設定の基本
l CSSで設定できる色の数は1677万色強
RGBそれぞれの光の明るさを256段階で調整できるようになっている
# f f 0 0 0 0 R G B
最初の2桁が赤(R)の明るさの指定
真ん中の2桁が緑(G)の明るさの指定
最後の2桁が青(B)の明るさの指定
8
CSS
![Page 9: はじめてのHTML&CSS 超基礎編 - AtoZ School Tech...CSSの基礎知識 ! CSSはカスケーディング・スタイル・シート [ Cascading Style Sheet ] のこと カスケーディング](https://reader033.fdocument.pub/reader033/viewer/2022050421/5f90567d9e788a71c27c1044/html5/thumbnails/9.jpg)
ボックスモデルについて
l ボックスモデルとは、ブロックレベル要素が持つ四角い領域のこと 内容(content) パディング(padding)
ボーダー(border)
マージン(margin)
から構成される
margin(枠線の外側の余白)
border(要素の枠線)
padding(枠線の内側の余白)
content(要素の内容)
height(高さ)
width(幅)
9
CSS