学科 HTML基礎④

By 学科 HTML基礎

-本日のアジェンダ-

1限目
学科 HTML基礎④
タグの復習

2限目
学科 HTML基礎④
CSSの書き方

3限目
学科 HTML基礎④
CSSのタグの解説

4限目
学科 HTML基礎④
font-sizeについて

5限目
学科 HTML基礎④
余白について

本日のテーマ

CSSについて学びましょう

インデント

入れ子構造（ネスト）がわかりやすく字下げをすることをインデントと呼びます。tabキーでタグの頭を字下げしてみましょう

【ルール】
親子の関係になるごとにタグを字下げする
開始タグと閉じタグの位置（ライン）を揃える

【TeraPadの設定】
見えない文字を見えるようにする。（タブ、改行、などすべてON）
⇒HTMLタグの直前または直後に入れた半角スペース・改行・タブは、Webページの表示に影響を与えない。

CSSを書いてみましょう

h1 {font-size:20px;}
p {color:red;}
セレクタ　プロパティ　値

CSSの書き方ルール

・半角英数字で！全角は使わない。
・大文字と小文字の区別はないが、小文字を推奨。

◆複数のセレクタに同じ装飾をする場合
→,(カンマ)で区切る
h1とpはどちらも文字色red

h1,p {color:red; }

◆１つのセレクタに複数の装飾をしたい場合
→;(セミコロン)で区切る
h1は文字色redかつフォントサイズ20px

h1 {color:red; font-size:20px;}

◆要素の中の要素に指定したい場合
→ (半角スペース)で区切る
pがdivの中にある場合のみ文字色red

div p { color: red;}

コメントアウト

<!-- 〇〇〇〇〇 --> ・・・HTML文章に記述
/* 〇〇〇〇〇 */ ・・・CSSファイルに記述

cssの3つの書き方

①スタイルシートのファイル（.css）を作成して、そのファイルを読み込んで使う方法

▼HTMLのhead
<link href="style.css" rel="stylesheet">
▼style.cssの一番上
@charset "utf-8";

②HTMLファイルのヘッダー内に、styleタグを書く方法

▼HTMLのhead
<style type="text/css">
　 h1 { color: red; font-size: 20px; }
</style>

③HTMLファイルの本文内に、直接スタイルシートを書く方法

▼HTMLのbody
<h1 style="color:blue;">ホームページに掲載する文章</h1>

①<②<③の順で優先順位が高くなる

余白

margin・・・要素の外側の余白
padding・・・要素の内側の余白

上・右・下・左の値を一括指定できます。
四辺全て：margin: 10px;・・・１つ
上下、左右：margin: 10px 20px;・・・２つ
上、左右、下：margin: 10px 20px 30px;・・・３つ
上、右、下、左：margin: 10px 20px 30px 40px;・・・４つ

線

border-style・・・枠線のスタイル（none,solid,dotted,doubleなど）
border-color・・・枠線の色（red,#ff0000など）
border-width・・・枠線の太さ（px,thin,medium,thickなど）

半角区切りで一括で指定できます。
border:solid 1px #ccc;

color

文字色（前景色）を指定する

color:#666666;
color:rgba(0,0,255,0.5);

text-align

ブロックコンテナ内の行の揃え位置・均等割付を指定する

text-align:center;

font-family

フォントの種類

font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",sans-serif;

CSSの記述【文字】

background-color

背景色を指定する

background-color:#333333;

CSSの記述【背景】

width

内容の幅

width:90%;

float

回り込み
※左に倣えで、横並びになる。浮くイメージ。

float:left;

clear

回り込みを解除
※タグの前に改行が入るイメージ

clear:both;

overflow

ボックスからあふれた内容の処理
※floatの親要素に指定してfloat解除に使われる事が多い

overflow:hidden;

CSSの記述【配置】

border

ボーダーのプロパティを一括で指定

border:solid 1px #ccc;
border-bottom:solid 1px #ccc;

padding

パディングに関する指定をまとめて行う
パディングとは、内容領域の外側にある「余白」

padding:5%;
padding-top:5%;

margin

マージンに関する指定をまとめて行う
マージンとは、要素の外側にある「余白」

padding:5%;
padding-top:5%;

CSSの記述【ボックス】