HTML講座

ボックス設定

ボックス

基本
margin
border
padding
content
1.top
2.right
3.bottom
4.left

※ ボックスの大きさ=contentの大きさ+paddingの幅+borderの幅

種類
インライン

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

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

インライン要素1インライン要素2
ブロック

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

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

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

ブロック要素1
ブロック要素2

大きさ

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

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

異なる単位の計算
[width/height/font-size…]:calc(単位付き数値   [+ - * /]   単位付き数値);

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

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

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

色

色名（カラーネーム）による指定
blackwhiteblueredyellowgreen purplegraysilvergoldnavylime pinkorangebrownなど
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といった指定も可能

線種

border-style:none
a
border-style:solid
a
border-style:double
a
border-style:groove
a
border-style:ridge
a
border-style:inset
a
border-style:outset
a
border-style:dashed
a
border-style:dotted
a
角を丸める
border-radius:水平方向　左上 右上 右下 左下 [ / 垂直方向　左上 右上 右下 左下];
border-radius:1rem 0 1rem 0;
丸
border-radius:1rem 0rem 0.5rem 1rem /
0.5rem 1rem 1rem 0;
丸
border-radius:100% 0 0 0;
丸
border-radius:100% 0 0 0 / 50% 0 0 0;"
丸
マージンとパディング
上
[margin/padding]-top:幅;
右
[margin/padding]-right:幅;
下
[margin/padding]-bottom:幅;
左
[margin/padding]-left:幅;
上下左右まとめて指定
[margin/padding]:全部の幅 | 上下幅　左右幅　| 上幅　左右幅　下幅　|　上幅　右幅　下幅　左幅;
影
box-shadow:none | 水平距離 垂直距離 [ぼかし距離 広がり距離] 色 [inset];
box-shadow:1px 2px silver;
影
box-shadow:1px 2px 5px 0px silver;
影
box-shadow:1px 2px 0px 5px silver;
影
box-shadow:1px 2px silver inset;
影