roy > naoya > カスケーディングスタイルシート（CSS）
カスケーディングスタイルシート（CSS）
[1]HTMLとCSS
HTMLは文書構造を示すために利用する
HTML言語を用いたWebページによる情報交換は、どこにいても、どのようなコンピュータ環境であっても、ネットワークにつながりさえすれば、同じ情報を入手、伝達できることを目的としている。特定のソフトウェアで作成した文書は、相手がそのソフトウェアを持っていない場合はファイルを開くことができない場合が多い。
特定のソフトウェアに依存した情報伝達は、このような点で問題点がある。HTML言語を用いたWebページによる情報交換は、Webページの作成、閲覧いずれも特定のソフトを必要としない。ネットワーク接続環境があれば誰でも等しく情報を収集することが可能な仕組みであるといえる。
しかし、本当に「誰でも等しく」情報を収集できるようにするためには、Webページ作成者が留意すべき事項がある。まずは様々なWebページ閲覧状況を想定してみよう。
- 白黒のディスプレイを用いている
- 画面の小さいディスプレイを用いている
- テキストブラウザを用いている（画像が表示できない、文字の大きさを変更できない）
- 読み上げブラウザを用いている（視覚障害者、画像や色が見えない）
- 携帯電話で見ている（文字の大きさを変えられない）
こうした様々な状況で、ある特定の文章が重要であるということを伝達する方法を考えてみよう。重要であることを示す場合、一般的には以下に示すような方法が考えられ、実際に対応する要素も存在している。
| 方法 | 要素名 | 使用例 | 記法 |
|---|---|---|---|
| 大きな字で書く | big | ここはとても重要です | <big>重要</big> |
| 赤い字で書く | font | ここはとても重要です | <font color="red">重要</font> |
| 太字にする | b | ここはとても重要です | <b>重要</b> |
| 下線を引く | u | ここはとても重要です | <u>重要</u> |
我々が目で見た場合、これらはいずれも重要であることがわかる。しかし、本来、赤色や下線、太字に重要であるという意味はない。それを見た人が勝手に重要であると判断しているに過ぎない。
このような方法はあまりよろしくない。というのも、白黒のモニタでは赤色は表現できないし、読み上げブラウザでも文字の色や下線を表現できない。携帯電話の場合は文字の大きさを変えることができないこともある。
この結果として、こうした環境下でWebページを閲覧している人に対して、重要であるという情報を伝達することができなくなってしまう。重要であることを伝えるためには、特定の部位を強調する<strong>タグや<em>タグを用いるのがよい。これにより、コンピュータは当該部位が強調されていると解釈できるため、何らかの表現方法（大きな声で読むとか、少し間を空けて読むとか）を用いて他の部分との差別化をはかることができる。
かつてはHTMLのタグの中には、文字の色や大きさを変える<font>タグや下線を引く<u>タグ等、単に見栄えを規定するものが含まれていた。現在はこれらのタグは非推奨要素とされ、利用は可能であるが出来る限り使わないことが推奨されている。
HTMLは文章の構造を表すために用いるものであり、文章の見栄えはCSS（カスケーディングスタイルシート）を用いて指定する。
CSSはデザインを付加するために利用する
HTMLでは各要素に対してあらかじめデザインが設定されている。例えばh1であれば大きな文字で表示するし、emは斜体で表示する。しかし、もっと自由にデザインを指定したい場合がある。CSSはHTMLと組み合わせて使用することで、例えばh1タグを使用した場合は赤色で表示する、h2は青色、emは太字というように自由にデザインの設定を行うことを可能とする。
[2]CSSの適用方法
CSSによるデザインの指定にはいくつかの方法があるが、ここでは1種類だけ取り上げて説明する。
これまで作成してきたindex.htmlやintroduction.htmlの<head></head>内には次のような記述があった。
<link rel="stylesheet" href="style.css" type="text/css">
これはstyle.cssというCSSによるデザイン設定が書かれたファイルを読みこんで内部に記載された設定を反映せよという指示である。
しかし、現時点ではstyle.cssというファイルを作成していないので、作成したWebページには何のデザインも付加されていない。
では、デザイン設定の効果を確認する為、emacsでstyle.cssを新規作成し、以下の枠内に記載された内容を貼り付けて保存してみよう。作成方法はhtmlファイルと同じであるが、念のため手続きを確認しよう。
- emacsでCtrl+x Ctrl+fと入力
- Find File:~/public_html/style.css[Enter]と入力
- 以下の枠内をコピーし、emacsに移動してマウスの右クリックで貼り付け
- Ctrl+x Ctrl+sで保存
- ブラウザで確認
body {
background-color: #ffcc99;
}
h1 {
font-size: xx-large;
background-color: #ffff99;
color: #ff0066;
padding: 1ex;
border: 3px outset #00ff00;
}
h2 {
font-size: x-large;
color: #999966;
}
p {
font-size: large;
color: #000066;
text-indent: 1em;
}
address {
text-align: right;
}
a:link {
color: #000080;
text-decoration: underline;
}
a:visited {
color: #000080;
text-decoration: underline;
}
a:hover {
color: #ffff00;
background-color: #000080;
}
a:active {
color: #ff0000;
background-color: #000080;
}これまでは白と黒のみのページがカラフルになったことが確認できただろうか。では、さらにデザインを変えてみよう。
以下の説明に従って、style.cssの内のデザイン設定を一部変更してみよう。変更後、保存をして再度ブラウザの再読み込みを行ってみよう。
変更前
h1 {
font-size: xx-large;
background-color: #ffff99;
color: #ff0066;
padding: 1ex;
border: 3px outset #00ff00;
}
変更後
h1 {
font-size: xx-large;
background-color: #ffff99;
color: #ff0066;
padding: 1ex;
border: 3px outset #00ff00;
}
変更前と変更後を見比べてみると、<h1></h1>で囲われた範囲のデザインが変化していることがわかる。この点を踏まえてCSSによる設定方法を確認していこう。
[3]CSSの基本構造
CSSを指定する際の基本構造は次の通りである。
CSSの指定方法
要素名 {プロパティ1:値; プロパティ2:値}
例えば
h1 {color:#ffccff; text-align:center; text-decoration:blink}
はh1要素に対して
- color（文字の色）を#ffccff（ピンク）に
- text-align（行ぞろえ）をcenter（中央ぞろえ）に
- text-decoration（文字飾り）をblink（点滅）に
せよと指示している。ここでcolor、text-align、text-decorationをプロパティ、各プロパティに対応付けられた設定値である#ffccff、center、blinkを値と呼ぶ。プロパティと値の間は:（コロン）でつなぎ、値の後は;（セミコロン）をつけて次のプロパティを記載する。
なお、上記は各プロパティの設定を横に並べて1行で記述しているが、
h1 {
color:#ffccff;
text-align:center;
text-decoration:blink
}
というように改行して書いても良い。
[4]class属性を用いたCSSの指定
[3]で示した方法では、特定の要素（例えばh1）を使用する際は、全ての場所で同じスタイルが適用されることになる。しかし、場合によっては特定の場所のみでスタイルを適用したいこともある。そのような時に使用するのがclass属性である。CSSファイルでは次のように設定する。
class属性を用いたCSSの指定方法
.hoge {color:#ffccff}
p.piyo {color:#ffccff}
.任意の名称（先頭のドットを忘れずに）が基本である。ここでは.hogeとしているが、名称は自由に決めて構わない。その上で
body内でのclass属性の使用
<要素 class="hoge">～</要素>
というように、HTMLファイル内で開始タグにclass属性を追加すると、.hogeとして設定したスタイルが適用される。この際class="hoge"の部分では先頭の.(ドット)は記載しない。
なお、p.piyoというように要素をドットの前につけておくと、class属性によるpiyoスタイルの適用はp要素に対してのみ有効となる。いくつか例を見てみよう。
.hogeはp要素、h2要素いずれにも適用されているが、.piyoはp要素にのみ適用され、h2要素には適用されていないことを確認しよう。
なお、上記ではp要素に対して文字色を青と設定し、.hogeや.piyoで他の色の設定をしている。よってp要素でhogeやpiyoをclass属性として指定した場合に、色の指定が競合することになる。この場合は、より個別的な指定であるclass属性の設定が優先される。
[5]色とサイズの指定
色指定
色は"red"や"blue"等の具体的な名称か、#ff0000のような#+16進数6桁で指定する。後者はR（赤）G（緑）B（青）の混色で色を指定する方法で、#ff0000は先頭の2桁がR、中間の2桁がG、最後の2桁がBを指定している。それぞれの光の強さを16進数の00～ffまでの256段階で指定する。#ff0000であれば、Rの強さが256、GとBは0なので赤色になる。
具体的な色名で指定可能な色は以下の16色のみである。その他の色を色名で指定すると閲覧環境によって再現される色が変化する場合があるため使用は避けた方が良い。
| black | silver | gray | white |
| maroon | red | purple | fuchsia |
| green | lime | olive | yellow |
| navy | blue | teal | aqua |
16進数6桁による色指定では、2563種類の色を表すことができる。以下では代表的な色216色を示す。
| #000000 | #003300 | #006600 | #009900 | #00cc00 | #00ff00 |
| #000033 | #003333 | #006633 | #009933 | #00cc33 | #00ff33 |
| #000066 | #003366 | #006666 | #009966 | #00cc66 | #00ff66 |
| #000099 | #003399 | #006699 | #009999 | #00cc99 | #00ff99 |
| #0000cc | #0033cc | #0066cc | #0099cc | #00cccc | #00ffcc |
| #0000ff | #0033ff | #0066ff | #0099ff | #00ccff | #00ffff |
| #330000 | #333300 | #336600 | #339900 | #33cc00 | #33ff00 |
| #330033 | #333333 | #336633 | #339933 | #33cc33 | #33ff33 |
| #330066 | #333366 | #336666 | #339966 | #33cc66 | #33ff66 |
| #330099 | #333399 | #336699 | #339999 | #33cc99 | #33ff99 |
| #3300cc | #3333cc | #3366cc | #3399cc | #33cccc | #33ffcc |
| #3300ff | #3333ff | #3366ff | #3399ff | #33ccff | #33ffff |
| #660000 | #663300 | #666600 | #669900 | #66cc00 | #66ff00 |
| #660033 | #663333 | #666633 | #669933 | #66cc33 | #66ff33 |
| #660066 | #663366 | #666666 | #669966 | #66cc66 | #66ff66 |
| #660099 | #663399 | #666699 | #669999 | #66cc99 | #66ff99 |
| #6600cc | #6633cc | #6666cc | #6699cc | #66cccc | #66ffcc |
| #6600ff | #6633ff | #6666ff | #6699ff | #66ccff | #66ffff |
| #990000 | #993300 | #996600 | #999900 | #99cc00 | #99ff00 |
| #990033 | #993333 | #996633 | #999933 | #99cc33 | #99ff33 |
| #990066 | #993366 | #996666 | #999966 | #99cc66 | #99ff66 |
| #990099 | #993399 | #996699 | #999999 | #99cc99 | #99ff99 |
| #9900cc | #9933cc | #9966cc | #9999cc | #99cccc | #99ffcc |
| #9900ff | #9933ff | #9966ff | #9999ff | #99ccff | #99ffff |
| #cc0000 | #cc3300 | #cc6600 | #cc9900 | #cccc00 | #ccff00 |
| #cc0033 | #cc3333 | #cc6633 | #cc9933 | #cccc33 | #ccff33 |
| #cc0066 | #cc3366 | #cc6666 | #cc9966 | #cccc66 | #ccff66 |
| #cc0099 | #cc3399 | #cc6699 | #cc9999 | #cccc99 | #ccff99 |
| #cc00cc | #cc33cc | #cc66cc | #cc99cc | #cccccc | #ccffcc |
| #cc00ff | #cc33ff | #cc66ff | #cc99ff | #ccccff | #ccffff |
| #ff0000 | #ff3300 | #ff6600 | #ff9900 | #ffcc00 | #ffff00 |
| #ff0033 | #ff3333 | #ff6633 | #ff9933 | #ffcc33 | #ffff33 |
| #ff0066 | #ff3366 | #ff6666 | #ff9966 | #ffcc66 | #ffff66 |
| #ff0099 | #ff3399 | #ff6699 | #ff9999 | #ffcc99 | #ffff99 |
| #ff00cc | #ff33cc | #ff66cc | #ff99cc | #ffcccc | #ffffcc |
| #ff00ff | #ff33ff | #ff66ff | #ff99ff | #ffccff | #ffffff |
サイズ指定
大きさや長さをあらわす単位には相対単位と絶対単位がある。
- px（相対単位）：ディスプレイは粒（ピクセル）の集合体で構成されており、このピクセル数を用いて指定する。ディスプレイの解像度によって大きさは変化する
- em（相対単位）：デフォルトのフォントサイズを1とする単位
- ex（相対単位）：デフォルトのフォントのx-heightを1とする単位。アルファベットにはhのように上に突き出るもの、pのように下に突き出るものがあるが、aのように上下に突き出ないものもある。このaの高さをx-heightという
- cm（絶対単位）：センチメートル
- mm（絶対単位）：ミリメートル
- in（絶対単位）：インチ（1インチ=2.54cm）
- pt（絶対単位）：ポイント（1pt=1/72インチ）
- pc（絶対単位）：パイカ（1pc=12ポイント）
その他に%を使用できる場合もある。
[6]CSSプロパティ(1)：背景・色関連スタイル
color
colorは文字色を指定するプロパティである。具体的な色名で指定できる16色か、16進数で色を指定する。
CSS設定
p {color:#cc66ff}
.fuchsia {color:fuchsia}
HTML記載例
<p>#cc66ffにしてみました</p> <p class="fuchsia">fuchsiaにしてみました</p>
ブラウザでの表示例
#cc66ffにしてみました fuchsiaにしてみました ※classの色設定が優先
background-color
background-colorは背景色を指定するプロパティである。ページ全体の背景に色を指定するためにはbody要素に対してbackground-colorの指定をする。<p>タグや<h1>タグに背景色を指定することもできる。
CSS設定
body {background-color:#cc66ff}
p {background-color: #000000; color: #ffffff}
.red {background-color: #ff0000}
HTML記載例
<body> <p>背景色を黒、文字を白に</p> <p class="red">背景を赤に</p> </body>
ブラウザでの表示例
背景色を黒、文字を白に 背景を赤に ※pに対する文字色白が反映されている
background-image
background-imageは背景に画像を指定するプロパティである。。background-imageを使用する場合は、あらかじめ画像を準備してpublic_htmlの中に保存しておく必要がある。ページ全体の背景に画像を指定するためにはbody要素に対してbackground-imageの指定をする。このプロパティに対する値はurl(ファイルパス)となる。ファイルの位置によりパスの指定方法が異なる。
CSS設定
body {background-image: url(back.png)}
.image {background-image: url(../photo/orange.jpg)}
HTML記載例
<body> <p class="image">pの背景に画像を使用することもできる</p> <p class="red">背景を赤に</p> </body>
ブラウザでの表示例
背景に画像を使用することもできます。
background-repeat
background-repeatは背景画像の並べ方を指定するプロパティである。画像のサイズが小さい場合通常は繰り返し表示されるが、このプロパティで設定することで繰り返し方法を指定することができる。
- no-repeat：くり返されず1回だけ表示される
- repeat：縦横に繰り返し表示される
- repeat-x：横方向のみくり返して表示される
- repeat-y：縦方向のみくり返して表示される
CSS設定
body {
background-image:url(sea.jpg);
background-repeat:repeat-y
}
HTML記載例
<body> ： </body>
ブラウザでの表示例
縦方向のみ繰り返して表示されている
background-attachment
background-attachmentは背景画像を指定している状態で画面をスクロールした際にスクロールに連動して画像を動かすか、特定位置に固定するかを指定するプロパティである。初期設定はscrollとなっている。
- scroll：背景画像をスクロールさせる
- fixed：背景画像の位置を固定
background-position
background-positionは背景画像の表示位置を指定するプロパティである。設定をしない場合はブラウザの左上に表示される。左上を0％として%で指定する方法と、leftやcenter、bottomなどを使ってキーワード指定する方方がある。
- 10% 50%：左から10％、上から50％の位置
- left right top center bottom：leftは左から0％、rightは左から100％、topは上から0％、bottomは上から100％、centerは左または上から50％
[7]CSSプロパティ(2)：フォント関連
font-family
font-familyは使用するフォントを指定するプロパティである。指定をしない場合はブラウザが使用する標準フォントが適用される。WindowsとUnixなど異なる環境下では指定したフォントがない場合もあるので、指定フォントが存在しない場合の代替フォントを併せて指定するのが一般的である。
- serif：セリフ体（明朝体）
- sans-serif：サンセリフ体（ゴシック体）
- monospace：等幅フォント
CSS設定
.a {font-family: Courier, monospace}
.b {font-family: "ＭＳ 明朝", 平成明朝, serif}
※フォント名にスペースがある場合は""でくくる
※代替フォントは優先順位が高い順に書く
HTML記載例
<p class="a">abcdefghijklmn</p> <p class="b">フォントを明朝体に変更</p>
ブラウザでの表示例
abcdefghijklmn フォントを明朝体に変更
font-size
font-sizeは文字の大きさを指定するプロパティである。7段階の大きさを値として指定することができる。デフォルトの文字サイズはmediumとなる。その他に10ptや1emなど具体的な値を指定することもできる。
CSS設定
.smallest {font-size: xx-small}
.smaller {font-size: x-small}
.small {font-size: small}
.medium {font-size: medium}
.large {font-size: large}
.larger {font-size: x-large}
.larges t{font-size: xx-large}
HTML記載例
<p class="smallest">xx-smallにした場合</p> <p class="smaller">x-smallにした場合</p> <p class="small">smallにした場合</p> <p class="medium">mediumにした場合</p> <p class="large">largeにした場合</p> <p class="larger">x-largeにした場合</p> <p class="largest">xx-largeにした場合</p>
ブラウザでの表示例
xx-smallにした場合 x-smallにした場合 smallにした場合 mediumにした場合 largeにした場合 x-largeにした場合 xx-largeにした場合
font-weight
font-weightは文字の太さを指定するプロパティである。normalが通常の太さ、boldにすると太字になる。何も指定しない場合はnormalが適用される。
CSS設定
p {font-weight:bold}
.normal{font-weight:normal}
HTML記載例
<p>太字にしました</p> <strong class="normal">strong要素は通常は太字です</strong>
ブラウザでの表示例
太字にしました
strongタグは通常太字です
font-style
font-styleは文字を斜体にするプロパティである。normalにすると標準フォントとなり、italicにすると斜体になる。何も指定しない場合はnormalが適用される。
CSS設定
p {font-style:italic}
.normal{font-style:normal}
HTML記載例
<p>斜体にしました</p> <em class="normal">em要素は通常斜体ですす</em>
ブラウザでの表示例
斜体にしました
em要素は通常斜体です
[8]CSSプロパティ(3)：テキスト関連
text-decoration
text-decorationプロパティは下線やその他の種類の線を引くことができるプロパティである。初期設定はnoneになっている。
- underline：下線を引く
- line-through：取消線を引く
- overline：文字の上に線を引く
- blink：点滅させる
- none：線も点滅もなし
CSS設定
.u {text-decoration:underline}
.lt {text-decoration:line-through}
.o {text-decoration:overline}
.b {text-decoration:blink}
HTML記載例
<p class="u">値にunderlineを指定</p> <p class="lt">値にline-throughを指定</p> <p class="o">値にoverlineを指定</p> <p class="b">値にblinkを指定</p>
ブラウザでの表示例
値にunderlineを指定 値にline-throughを指定 値にoverlineを指定 値にblinkを指定
line-height
line-heightは行間をスペースを指定するプロパティである。1.5（通常の1.5倍）や120％（通常の120％）といった指定方法を行う。初期設定はnormal（このWebページは1.7に設定している）。
CSS設定
.a {line-height:normal}
.b {line-height:1.5}
.c {line-height:200%}
HTML記載例
<p class="a">line-heightプロパティを指定すると文章が読みやすくなる場合があります。ある程度行間は広いほうが読みやすいですが、逆に広くなりすぎると読みにくくなります。1行の文字数が少ない場合は狭いほうが読みやすいですが、文字数が多い場合はある程度広くしたほうが良いと思います。どれが一番読みやすいか比較してみましょう。</p>
<p class="b">line-heightプロパティを指定すると文章が読みやすくなる場合があります。ある程度行間は広いほうが読みやすいですが、逆に広くなりすぎると読みにくくなります。1行の文字数が少ない場合は狭いほうが読みやすいですが、文字数が多い場合はある程度広くしたほうが良いと思います。どれが一番読みやすいか比較してみましょう。</p>
<p class="c">line-heightプロパティを指定すると文章が読みやすくなる場合があります。ある程度行間は広いほうが読みやすいですが、逆に広くなりすぎると読みにくくなります。1行の文字数が少ない場合は狭いほうが読みやすいですが、文字数が多い場合はある程度広くしたほうが良いと思います。どれが一番読みやすいか比較してみましょう。</p>
ブラウザでの表示例
line-heightプロパティを指定すると文章が読みやすくなる場合があります。ある程度行間は広いほうが読みやすいですが、逆に広くなりすぎると読みにくくなります。1行の文字数が少ない場合は狭いほうが読みやすいですが、文字数が多い場合はある程度広くしたほうが良いと思います。どれが一番読みやすいか比較してみましょう。
line-heightプロパティを指定すると文章が読みやすくなる場合があります。ある程度行間は広いほうが読みやすいですが、逆に広くなりすぎると読みにくくなります。1行の文字数が少ない場合は狭いほうが読みやすいですが、文字数が多い場合はある程度広くしたほうが良いと思います。どれが一番読みやすいか比較してみましょう。
line-heightプロパティを指定すると文章が読みやすくなる場合があります。ある程度行間は広いほうが読みやすいですが、逆に広くなりすぎると読みにくくなります。1行の文字数が少ない場合は狭いほうが読みやすいですが、文字数が多い場合はある程度広くしたほうが良いと思います。どれが一番読みやすいか比較してみましょう。
text-align
text-alignプロパティを指定すると、右揃えや中央揃えを指定することができる。初期設定はleft。
CSS設定
.center {text-align: center}
.right{text-align: right}
HTML記載例
<p class="center">中央揃えにしました</p> <p class="right">右揃えにしました</p>
ブラウザでの表示例
中央揃えにしました
右揃えにしました
text-indent
text-indentは文章の1行目のインデントを指定するプロパティである。原稿用紙と同じく1文字字下げするためには、text-indent:1emとする。emはデフォルトの文字サイズという意味である。
ブラウザでの表示例
text-indent:0（初期設定）
インデントをすると、1行目を字下げすることができます。通常文章を書く場合は先頭を1文字インデントしますので、設定をしておくと良いでしょう。
text-indent:1em
インデントをすると、1行目を字下げすることができます。通常文章を書く場合は先頭を1文字インデントしますので、設定をしておくと良いでしょう。
text-indent:3em
インデントをすると、1行目を字下げすることができます。通常文章を書く場合は先頭を1文字インデントしますので、設定をしておくと良いでしょう。
letter-spacing
letter-spacingプロパティを指定すると、文字と文字の間隔を指定することができる。初期設定はnormal。
CSS設定
.normal {letter-spacing:normal}
.wide {letter-spacing:0.2em}
HTML記載例
<p class="normal">通常の文字間隔です</p> <p class="wide">文字間隔を0.2emにしました</p>
ブラウザでの表示例
通常の文字間隔です 文字間隔を0.2emにしました
[9]CSSプロパティ(4)：ボックス関連
border
borderプロパティは上下左右に線を引くことが出来るプロパティである。線を引く際にはborder-colorプロパティで線の色を指定し、border-widthプロパティで線の太さを指定し、border-styleプロパティで線の形式を指定するが、borderプロパティを使うとこれらを一括設定することが出来る。
線の形式は以下の9種類がある。
- none：なし
- solid：通常の線
- double：二重線
- dashed：破線
- dotted：点線
- ridge：線が突き出て見える
- groove：線がへこんで見える
- inset：内部がへこんで見える
- outset：内部が突き出て見える
上下左右の線に個別の設定を行うこともできる。その場合は、border-top, border-bottom, border-right, border-leftに対してそれぞれ設定を行えばよい。
CSS設定
.solid {border: solid 2px #0000ff} ※線の種類、太さ、色を指定
.double {border: double 2px #0000ff}
.dashed {border: dashed 2px #0000ff}
.dotted {border: dotted 2px #0000ff}
.ridge {border: ridge 2px #0000ff}
.groove {border: groove 2px #0000ff}
.inset {border: inset 2px #0000ff}
.outset {border: outset 2px #0000ff}
HTML記載例
<p class="solid">solid</p> <p class="double">double</p> <p class="dashed">dashed</p> <p class="dotted">dotted</p> <p class="ridge">ridge</p> <p class="groove">groove</p> <p class="inset">inset</p> <p class="outset">outset</p>
ブラウザでの表示例
solid
double
dashed
dotted
ridge
groove
inset
outset
margin
marginプロパティは上下左右のマージンを設定するプロパティである。上下左右に全て同じ値を指定することや、個別に指定することが出来る。margin-top, margin-bottom, margin-right, margin-leftプロパティを用いると個別設定が出来る。autoは左右のマージンが均等になるように指定。table要素に対して左右のmarginをautoにする設定をすると表を中央ぞろえすることが出来る。
- margin: 10px （上下左右いずれも10px）
- margin: 0px 10px 20px 30px （上から右下左と時計回りに指定）
- margin: 0px auto 20px auto （上から右下左と時計回りに指定）
CSS設定
.solid {margin: 5px; border: solid 2px #0000ff}
.double {margin: 10px; border: double 2px #0000ff}
.dashed {margin: 5px 30px 5px 30px; border: dashed 2px #0000ff}
.dotted {margin: 10px 60px 10px 30px; border: dotted 2px #0000ff}
HTML記載例
<p class="solid">solid</p> <p class="double">double</p> <p class="dashed">dashed</p> <p class="dotted">dotted</p>
ブラウザでの表示例
solid margin: 5px
double margin: 10px
dashed margin: 5px 30px 5px 30px
dotted margin: 10px 60px 10px 30px
padding
marginはborderの外側の余白に対する設定であるが、paddingはborderの内側領域の余白設定である（marginもpaddingもborderで線を引いていなくても機能する）。上下左右全てに同じ値を指定することや、個別に指定することができる。padding-top, padding-bottom, padding-right, padding-leftプロパティを用いることで個別設定も可能。
- padding: 10px （上下左右いずれも10px）
- padding: 0px 10px 20px 30px （上から右下左と時計回りに指定）
CSS設定
.solid {padding: 5px; border: solid 2px #0000ff}
.double {padding: 10px; border: double 2px #0000ff}
.dashed {padding: 20px 0px 50px 100px; border: dashed 2px #0000ff}
.dotted {padding: 0px; border: dotted 2px #0000ff}
HTML記載例
<p class="solid">solid</p> <p class="double">double</p> <p class="dashed">dashed</p> <p class="dotted">dotted</p>
ブラウザでの表示例
solid padding: 5px
double padding: 10px
dashed padding: 20px 0px 50px 100px
dotted padding: 0px
width・height
widthプロパティ、heightプロパティはそれぞれ幅や高さを指定するプロパティである。tableを作成する際のth要素やtd要素に指定することで、表の見栄えを調整する場合などに使用する。
CSS設定
.solid {border: solid 2px #0000ff; width:100px}
.double {border: double 2px #0000ff; width:150px; height:100px}
HTML記載例
<p class="solid">solid</p> <p class="double">double</p>
ブラウザでの表示例
solid width:100px
double width:150px; height:100px