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