はじめてのHTML&CSS 超基礎編 - AtoZ School Tech...CSSの基礎知識 !...

はじめての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

最初の２桁が赤（R）の明るさの指定

真ん中の２桁が緑（G）の明るさの指定

最後の２桁が青（B）の明るさの指定

8

CSS

ボックスモデルについて

l ボックスモデルとは、ブロックレベル要素が持つ四角い領域のこと内容（content）パディング（padding）

ボーダー（border）

マージン（margin）

から構成される

margin（枠線の外側の余白）

border（要素の枠線）

padding（枠線の内側の余白）

content（要素の内容）

height（高さ）

width（幅）

9

CSS

はじめてのHTML&CSS 超基礎編 - AtoZ School Tech...CSSの基礎知識 !...

Documents

Transcript of はじめてのHTML&CSS 超基礎編 - AtoZ School Tech...CSSの基礎知識 !...