HTML講座

CSSの基本書式

指定場所

style属性で指定

タグ内にstyle属性を設定する

<タグ名 style="プロパティ1:値1;プロパティ2:値2;">

head>style要素内に指定

<style>
セレクタ{
    プロパティ1 : 値1;
    プロパティ2 : 値2;
}
</style>

外部スタイルシートに指定する

    <link rel="stylesheet" href="スタイルートファイルのURL">

セレクタ{
    プロパティ1 : 値1;
    プロパティ2 : 値2;
}

セレクタ

どの対象にスタイルを適用するかを指定するための書式

スタイル指定の優先順位

CSSでは一つの対象に複数のスタイルを指定することができる。仮にそのスタイル指定がバッティングしたときには以下の優先順位でスタイルが適用される。

1. !important

   値のあとに!importantを付けるとその値が最優先される

2. セレクタの種類

   指定した方法のポイントの合算で高いポイントのものから優先される

3. 指定場所
   1. style属性での指定>head要素内指定>外部スタイルシート
   2. 同じ指定場所,ポイントの時には後に記述したものが優先

ボックス

基本

margin

border

padding

content

1.top

2.right

3.bottom

4.left

※ ボックスの大きさ=コンテンツの大きさ+paddingの幅+ボーダーの幅

種類

インライン

Wordにおける「文字」に相当

「大きさ」を持たない。

<span>、<strong>、<em>、<img>、<a>など

インライン要素1インライン要素2

ブロック

改行される塊、Wordにおける「段落」および「図」などに相当

幅の指定が無ければ1行全体を領域とする。

<div>、<p>、<h1>、<table>、<figure>、<section>など

ブロック要素1

ブロック要素2

大きさ

単位

CSSで使用する単位付き数値

単位	意味
em	今の時点での基準フォントサイズの高さ
ex	小文字xの高さ
rem	html要素で設定された基準フォントサイズの高さ
px	ピクセル(絶対値)
%	基準値に対する相対的な比率

単位による動き方の違いは「大きさ設定」を参照せよ。

異なる単位の計算

[width/height/font-size…]:calc(単位付き数値   [+ - * /]   単位付き数値);

※数値と演算子の間にはスペースが必要

※未確定仕様だが主要ブラウザは正式対応済み

記述	見え方
<span style="font-size:1.5em">あ</span> <span style="font-size:calc(1.5em + 5px)">あ</span>	ああ

色

色名（カラーネーム）による指定

 black  white  blue  red  yellow  green  purple  gray  silver  gold  navy  lime  pink  orange  brown など

16進数表現

#赤[00-FF] 緑[00-FF] 青[00-FF]

RGBAカラー(半透明が使える)

rgba(赤[0-255],緑[0-255],青[0-255],透明度[0(完全に透明)-1(完全に不透明)])

※詳細はWEB色見本 原色大辞典 - HTMLカラーコードなどを参照せよ

ボックス設定

コンテンツの幅・高さ

幅

width:幅;

高さ

height:幅;

背景

background: 色指定 [url("画像のURL")];

ボーダー

上

border-top:線種 太さ 色;

右

border-right:線種 太さ 色;

下

border-bottom:線種 太さ 色;

左

border-left:線種 太さ 色;

線種

border-style:全線種 | 上下 左右 | 上 左右 下 | 上　右　下　左;

色

border-color:全色 | 上下 左右 | 上 左右 下 | 上　右　下　左;

太さ

border-width:全太さ | 上下 左右 | 上 左右 下 | 上　右　下　左;

上下左右まとめて指定

border:線種 太さ 色;

※border-top-styleといった指定も可能

記述	意味	見え方
none	罫線なし	あ
solid	一本線	あ
double	二本線	あ
groove	溝	あ
ridge	尾根	あ
inset	へこみ	あ
outset	膨らみ	あ
dashed	破線	あ
dotted	点線	あ

角を丸める

border-radius:[水平方向　左上 右上 右下 左下 / 垂直方向　左上 右上 右下 左下];

記述	見え方
<div style="border-radius:50% 20% 50% 0 / 50% 50% 20% 0;>　</div>

マージンとパディング

上

[margin/padding]-top:幅;

右

[margin/padding]-right:幅;

下

[margin/padding]-bottom:幅;

左

[margin/padding]-left:幅;

上下左右まとめて指定

[margin/padding]:全部の幅 | 上下幅　左右幅　| 上幅　左右幅　下幅　|　上幅　右幅　下幅　左幅;

影

box-shadow:none | 水平距離 垂直距離 [ぼかし距離 広がり距離] 色 [inset];

記述	見え方
<div style="box-shadow:0.1em 0.2em #c0c0c0">影</div>	影
<div style="box-shadow:0.1em 0.2em 0.2em 0.1em #c0c0c0">影</div>	影
<div style="box-shadow:0.1em 0.2em 0.2em 0.1em #c0c0c0 inset">影</div>	影

コンテンツ付加

contentプロパティを用いるとHTMLには書かれていない文字や記号を要素の前後に表示させることができる。その際使用するセレクタはbefore疑似要素とafter疑似要素のみである。

文字・記号の付加

content:"文字・記号";

記述	見え方
.customer::before{   content:"ようこそ♡"; } .customer::after{   content:"さま♪"; } -------------------- <span class="customer">高橋愛</span>	ようこそ♡高橋愛さま♪

引用(<q>)の表示

引用符の設定

quotes:"開始記号""終了記号" ["開始記号""終了記号"];
※スペースの後にさらに開始終了のペアをおくと階層化させることができる。

引用符の付加

content:open-quote | close-quote;

初期状態

q{
  quotes: "「 " "」" "『 " "』";
}

q::before{
  content: open-quote;
}

q::after{
  content: close-quote;
}

最近のブラウザでは言語に応じた引用符が自動的に割り振られるようになっている。そのときデフォルトで設定されているスタイルが上である（改めて設定する必要はない）。

記述	見え方
同級生から<q><q>一つの妖怪がヨーロッパにあらわれている、――共産主義の妖怪が</q>って誰の言葉だっけ？</q>と聞かれた。そんなことも知らないのか。フロイトに決まっているじゃないか。	同級生から一つの妖怪がヨーロッパにあらわれている、――共産主義の妖怪がって誰の言葉だっけ？と聞かれた。そんなことも知らないのか。フロイトに決まっているじゃないか。

特別な引用符を割り振りたいときにはCSSで設定を変更する（記号部分のみを書き換える）。

他言語の引用符

他言語の引用符を使いたいときにはlang属性を変更する。

記述	見え方
<p lang="en">He cried <q>She said to me <q>You are stupid!</q></q>.</p>	He cried She said to me You are stupid!.

連番

連番初期化

counter-reset:カウンタ名;
このプロパティを指定した要素が登場するごとに「カウンタ名」の連番を初期化(カウントを0)する

インクリメント（連番の数字を進める）

counter-increment:カウンタ名;
このプロパティを指定した要素が登場するごとに「カウンタ名」の連番を一つ進める

連番の付加

content:counter(カウンタ名);
カウンタ名の現在の数字を表示する

連番の付加（階層化）

content:counters(カウンタ名,区切り文字);
階層化された連番を表示する

記述	見え方
.rank{   counter-increment:count1 } .rank::before{   content:counter(count1); } -------------------- <span class="rank">石川</span><span class="rank">松浦</span><span class="rank">加護</span>	1石川2松浦3加護
.container {   counter-reset: count2; } .item{   counter-increment:count2 } .item::before{   content:counters(count2,"."); } -------------------- <div class="container">   <div class="item">ごまっとう     <div class="container">       <div class="item">後藤</div>       <div class="item">松浦</div>       <div class="item">藤本</div>     </div>   </div>   <div class="item">後浦なつみ     <div class="container">       <div class="item">後藤</div>       <div class="item">松浦</div>       <div class="item">安倍</div>     </div>   </div> </div>	1 ごまっとう 1.1 後藤 1.2 松浦 1.3 藤本 2 後浦なつみ 2.1 後藤 2.2 松浦 2.3 安倍

変形

回転

transform: rotate(角度deg);

※safariは正式対応前(要-webkit-)

記述	見え方
<div style="transform:rotate(45deg)">回転</div>	回転

傾斜

transform: skew(X軸の傾斜角度deg, Y軸の傾斜角度deg);

※safariは正式対応前(要-webkit-)

記述	見え方
<div style="transform:skew(25deg,20deg)">傾斜</div>	傾斜

縮尺

transform: scale(X方向の比率, Y方向の比率);

※safariは正式対応前(要-webkit-)

記述	見え方
<div style="transform:scale(0.8,1.8)">縮尺</div>	縮尺

ボックス表示切り替え

非表示1

visibility:visible(初期値) | hidden

記述	見え方
<p style="visibility:hidden">見えない</p> <p">見える</p>	見えない 見える

表示切り替え

非表示2

display:none;

記述	見え方
<p style="display:none">見えない</p> <p>見える</p>	見えない 見える

表示切り替え

ブロック→インライン

display:inline;

記述	見え方
<ul> <li style="display:">高橋</li> <li style="display:">新垣</li> </ul> <ul> <li style="display:inline">高橋</li> <li style="display:inline">新垣</li> </ul>	高橋 新垣

表示切り替え

インライン→ブロック

display:block;

記述	見え方
<span style="display:">高橋</span> <span style="display:">新垣</span> <span style="display:block">高橋</span> <span style="display:block">新垣</span>	高橋新垣

表示切り替え

疑似リスト(インライン｜ブロック→リスト)

display:list-item;

記述	見え方
<span style="display:;">高橋</span> <span style="display:;">新垣</span> <span style="display:list-item;">高橋</span> <span style="display:list-item;">新垣</span>	高橋新垣

表示切り替え

疑似テーブル（インライン｜ブロック→テーブル）

display:table | table-row | table-cell /…;

テーブルタグと同様にテーブルを組んでいく。table-cellは<td>と同等

table要素、table-row要素は省略可。

記述	見え方
<div style="display:"> <p style="display:">後藤</p> </div> <div style="display:"> <p style="display:">松浦</p> <p style="display:">藤本</p> </div> <div style="display:table-row"> <p style="display:table-cell">後藤</p> </div> <div style="display:table-row"> <p style="display:table-cell">松浦</p> <p style="display:table-cell">藤本</p> </div>	後藤 松浦 藤本 後藤 松浦 藤本

表示切り替え

Flexbox

実際の動きはFlexBoxを参照せよ

コンテナに指定

display:flex;

中の要素をフレックスボックスアイテムにする

flex-direction

flex-direction:row | row-reverse | column | column-reverse;

アイテムを並べる方向と順序－横｜横を逆順に｜縦｜縦を逆順に

justify-content

justify-content:flex-start | flex-end | center | space-between | space-around;

左揃え|右揃え|中央揃え|中央揃えでボックス間に余白を取る|中央揃えでボックスの左右に余白を取る

flex-wrap

flex-wrap:nowrap | wrap | wrap-reverse;

flexboxが横に溢れたときに折り返すかどうか。

wrap-reverseは折り返しを上に積み上げる形で行う。

align-content

align-content:flex-start | flex-end | center | space-between | space-around | stretch;

上揃え|下揃え|中央揃え|中央揃えでボックス間に余白を取る|中央揃えでボックスの左右に余白を取る|余白を均等に割り振る（初期値）

アイテムに指定

order

order:順番;

ボックスを並べる順番を指定

flex-basis

flex-basis:初期の幅;

初期状態のボックスの幅。widthで設定するのと同じ指定ができる。

初期値はauto

flex-grow

flex-grow:拡張比率;

コンテナが広がったときに各ボックスが拡張される比率。

0のときは大きさ固定

初期値は0

flex-shrink

flex-shrink:縮小比率;

コンテナが狭まったときに各ボックスが縮小される比率。

0のときは大きさ固定

初期値は1

flex

flex:flex-grow flex-shrink flex-basis;

3つのプロパティをこの順に指定する。

個別要素のプロパティ

文字(インライン)

文字色

color: 色指定;

記述	見え方
<span style="color:#00FF00">緑</span>	緑

フォント指定

大きさ

font-size: 大きさ;

記述	見え方
通常<span style="font-size:1.5em">大</span>	通常大

イタリック

font-style: normal | italic;

記述	見え方
<span style="font-style:italic">斜Ii</span>	斜Ii

太さ

font-weight: normal | bold;

記述	見え方
<span style="font-weight:bold">太</span>	太

種類

font-family:フォントの種類(sans-serif/serif/etc);

記述	見え方
<span style="font-family:'Hiragino Mincho Pro','MS Mincho';font-size:2em">明</span>	明

文字飾り

text-decoration:none | underline | overline | line-through;

記述	見え方
<span style="text-decoration:overline line-through">線</span>	線

影

text-shadow:none | 水平距離 垂直距離 [広がり距離] 色;

記述	見え方
<span style="text-shadow:0.5em 0.2em 0.1em #FF0000">影</span>	影

文字間隔

letter-spacing:none | 間隔;

記述	見え方
<span style="letter-spacing:1em">間隔</span>	間隔

段落(ブロック)

間隔（行間）

line-height:高さ;

記述	見え方
<p style="line-height:2.5em">後藤</p> <p style="line-height:0">松浦</p> <p>藤本</p>	後藤 松浦 藤本

配置（行揃え）

text-align:left | right | center | justify;

記述	見え方
<p style="text-align:right">右</p>	右

インデント

text-indent:インデント幅;

記述	見え方
<p style="text-indent:1em">小学校のときに段落を作るときには「改行して一文字あける」と習った。 Wordでは勝手にそうなるようだ。ではHTMLではどうするのだろう。</p>	小学校のときに段落を作るときには「改行して一文字あける」と習った。 Wordでは勝手にそうなるようだ。ではHTMLではどうするのだろう。

リスト(ブロック)

マーカーの書式

list-style:[マーカー形状] [url('画像のURL')] [outside/inside];

記述	意味	見え方
none	マーカーなし	中澤 石黒
disc	黒丸	飯田 安倍
circle	白丸	福田 保田
square	黒四角	矢口 市井
decimal	算用数字	小川 紺野
decimal-leading-zero	先頭に0	新垣 亀井
lower-roman	小文字のローマ数字	後藤 石川
upper-roman	大文字のローマ数字	吉澤 加護
lower-alpha	小文字のアルファベット	道重 田中
upper-alpha	大文字のアルファベット	久住 光井
lower-greek	ギリシャ文字	辻 高橋
cjk-ideographic	漢数字	李 銭
hiragana	あいう	譜久村 生田
hiragana-iroha	いろは	鞘師 鈴木
katakana	アイウ	飯窪 石田
katakana-iroha	イロハ	佐藤 工藤

表(ブロック)

キャプション位置

caption-side:top | bottom;

セル内の縦位置

vertical-align:baseline | top | middle | bottom;

記述	見え方
<td style="vertical-align:top">上</td>	上

セル内の横位置

text-align:left | right | center;

記述	見え方
<td style="text-align:center">中</td>	中

罫線→ボーダー

border:線種 太さ 色;

記述	見え方
<td style="border:2px dotted #F00">点線</td>	点線

境界線の重なり

border-collapse:collapse | separate;

記述	見え方
<table style="border-collapse:separate">分離する</table>	分離する

記述	見え方
<table style="border-collapse:collapse">重ね合わせる</table>	重ね合わせる

境界線の重なりの幅

border-spacing:左右の間隔　上下の間隔;

記述	見え方
<table style="border-collapse:separate;border-spacing:0.5em 0.1em">分離</table>	分離

空白セル

empty-cells:show | hide;

記述	見え方
<td style="border:solid 1px #F00;empty-cells:show"></td>
<td style="border:solid 1px #F00;empty-cells:hide"></td>