ボックス

 CSSリファレンス  No Responses »
10月 112011
 

ボックス説明ホームページ上でコンテンツをまとめる時は、基本的にボックス単位で考えます。

ボックスとはその名の通り「箱」です。左図の様に、テーブル全体も箱、テーブル内の各セルも箱、画像のような空要素も箱、そもそもページ全体が箱と考えられます。

箱ですので、その中にまた箱を入れることが可能です。これが、タグの要素内にまたタグを書く(例：bodyタグ内にtableタグを書く)ということと思って頂ければよいかと。

そのボックスを飾ったり、自分の思い通りに見せるために必要なことを以下で説明していきます。


widthとheight[幅と高さ]

ボックスには幅と高さがあります。
CSSでは幅のことをwidth、高さのことをheightと記述します。

指定可能値 数値＋下記単位, 数値＋%, auto
対応単位 em, ex, px, cm, mm, in, pt, pc [補足]単位説明
記述例
[例1]幅200ピクセル、高さ100ピクセル
width:200px; height:100px;
[例2]親要素の半分の幅
width:50%;

余白

ボックスでは、ボックスの上下左右に余白を取ることが出来ます。
余白はボックス枠外ボックス枠内の2箇所に指定できます。
CSSでは枠外余白をmargin、枠内余白をpaddingと記述します。
その違いは下図を参照下さい。

marginとpadding

margin[外余白]

ボックスでは、ボックス枠外の上下左右に余白を取ることが出来ます。
CSSではボックス枠外余白のことをmarginと記します。

指定可能値 数値＋下記単位, 数値＋%, auto
対応単位 em, ex, px, cm, mm, in, pt, pc [補足]単位説明
記述方法
CSS記述 意味
margin:5px; 上下左右に5pxずつ余白
margin:1px 3px; 上下に1px、左右に3px余白
margin:1px 2px 3px; 上に1px、左右に2px、下に3px余白
margin:1px 2px 3px 4px; 上に1px、右に2px、下に3px、左に4px余白
margin-top:1px; 上に1px余白
margin-bottom:1px; 下に1px余白
margin-left:1px; 左に1px余白
margin-right:1px; 右に1px余白

上の記述方法の数値やpx部分を書き換えれば、自在に余白が取れます。

記述例
[例1]上に5px,右に10px、下に3px、左に20px余白を取る
margin:5px 10px 3px 20px;
[例2]上下左右に親要素の5パーセントの余白を取る
margin:5%;

padding[内余白]

ボックスでは、ボックス枠内の上下左右に余白を取ることが出来ます。
CSSではボックス枠内余白のことをpaddingと記します。

指定可能値 数値＋下記単位, 数値＋%, auto
対応単位 em, ex, px, cm, mm, in, pt, pc [補足]単位説明
記述方法
CSS記述 意味
padding:5px; 上下左右に5pxずつ余白
padding:1px 3px; 上下に1px、左右に3px余白
padding:1px 2px 3px; 上に1px、左右に2px、下に3px余白
padding:1px 2px 3px 4px; 上に1px、右に2px、下に3px、左に4px余白
padding-top:1px; 上に1px余白
padding-bottom:1px; 下に1px余白
padding-left:1px; 左に1px余白
padding-right:1px; 右に1px余白

上の記述方法の数値やpx部分を書き換えれば、自在に余白が取れます。

記述例
[例1]上に5px,右に10px、下に3px、左に20px余白を取る
padding:5px 10px 3px 20px;
[例2]上下左右に親要素の5パーセントの余白を取る
padding:5%;

CSS記述の決まり事

 CSSリファレンス  No Responses »
10月 112011
 

CSSの書き方には決まり事があります。
とはいってもいきなり複雑な説明をしても？？だと思いますので、例を交えつつ簡単なものをいくつか紹介していきます。

後々CSSに慣れたら、ここで紹介したことより複雑(だけど便利)なことをご自分で勉強してみて下さい。

各部の名称

CSSでは、「どの要素のどのスタイルをどのように指定するか」というのを記述しています。

要素というのが、タグや後述するクラス・IDというもの。

どのスタイルをどのように指定するというのが、文字色を何にするか・文字の大きさをどのくらいにするか・枠線をどの太さで何色にするかなどといった具体的な指定を記述するもの。

大きく分けてこの2つから成り立っています。

CSS各部名称

CSSでは、要素部分ことをセレクタ、どのスタイルをどのように指定するという部分のことを宣言といいます。
宣言の中にはプロパティと値というものがあります。

プロパティはどのスタイルを変えたいのかという対象を記述する部分、値は具体的にどのような見た目に設定するかという値を記述する部分となります。

プロパティと値の間には:(コロン)を記述し、宣言の最後には;(セミコロン)を記述する必要があります。

また、1つのセレクタに対して複数の宣言を書くことが出来、これをまとめたものが宣言ブロックとなります。
宣言ブロックは{と}で囲みます。

宣言が1つでも{と}で囲む必要有なので注意が必要です。

宣言のグループ化

CSSでは、上でふれたように複数の宣言をまとめて宣言グループとして記述することが可能です。

1つのセレクタに対し複数の宣言をしたい時にグループ化してしまいましょう。
グループ化の方法としては、{と}で複数の宣言を囲むだけです。

以下に、同じ意味となる2つのサンプルを挙げてみます。

例)リンクの色を赤くして、リンクの下線をなくす。

記述例1[グループ化しない場合]
a {color:red;}
a {text-decoration:none;}
記述例1[グループ化した場合]
a {
color:red;
text-decoration:none;
}

セレクタの種類

CSSのセレクタには、大きく分けて3種類あります。

  1. タグ
  2. クラス
  3. ID

タグは普通のh1やa等のタグのこと。セレクタにタグを書くと、そのCSSが適用される範囲にあるそのタグ全てに影響します。
クラスとIDは特定の箇所にのみその定義を適用したい場合に使用します。

以下に例を示します。

記述例[HTML]
<body>
<h1 id=”midashi”>ページタイトル</h1>
<p>
クラスもIDも指定されていないpタグ。この中の文字は緑色になります。
</p>
<p class=”blue”>
クラス1回目。この中の文字は青色になります。
</p>
<p class=”blue”>
クラス2回目。この中の文字も青色になります。
</p>
</body>
記述例[CSS]
p {color:green;}
.blue {color:blue;}
#midashi {color:white; background-color:black;}

上の記述例の場合、まずpタグの中身は全て緑色文字になります。
midashiというIDを指定されたh1タグは、黒色背景・白色文字になります。
blueというクラスを指定されたpタグのみは、青色文字になります。

ここで気になるのがクラスとIDの違いです。
一見差が無いように見えるのですが、大きく違う点があります。
それは、IDは1ページ内に1回しか使えないのに対しクラスはページ内に何回も使うことが出来ます。
その為、IDはレイアウト用や絶対に1回しか出てこないもの(タイトルなど)に使用し、見た目を変えるのには主にクラスを使います。

よく分からないうちは、全てクラスにしておけば大きな問題は無いので安心です。

CSS基礎

 CSSリファレンス  No Responses »
10月 112011
 

CSS(Cascading Style Sheets)とは、ホームページの見た目を定義する為の仕様です。

昔はHTMLに色やフォント等の見た目を決める指定を直接書いていたのですが、本来HTMLは構造と「文章・画像・数値」等の伝えたいものを書くためのものです。
その為、最近は「見た目はCSSに任せよう」というのが当たり前になっています。

今からホームページ作成を勉強する皆さんは、見た目はCSSで記述する癖をつけておきましょう。

CSSの基礎

CSSの記述は、大きく分けて3種類あります。

  1. タグの属性としてCSSを記述する。
  2. HTMLのhead内にまとめて記述する。
  3. HTMLファイルとは別のCSSファイルにまとめて記述する。

この3つは用途に応じて使い分けると、ホームページ作成がぐんと楽になります。

1)タグの属性としてCSSを記述

[用途]ここ一箇所でしかその指定をしない場合に使う。
記述の仕方は、タグ内にstyle=”CSS指定”と書きます。
このCSS指定部分は、CSSリファレンスページで色々紹介しています。

記述例
一回に限り一部分の文字の色を緑にする
HTMLファイル内に記述
<span style=”color:green;”>ここが緑にしたい文字</span>

このように、HTMLファイル内の一部の見た目を簡単に変えることが出来ます。

一番手軽ですが、繰り返し出てくる要素の見た目を皆同じように変更するのには向いていません。
(出てくるたびに同じ記述をしなければいけないので。)

2)HTMLのhead内にまとめて記述

[用途]記述したページ内全てに適用する見た目指定を記述したい場合に使う。
記述の仕方は、<head>～<head>の間に

<style type=”text/css”><!–
CSS記述
–></style>
と書きます。

このCSS指定部分は、CSSリファレンスページで色々紹介しています。

記述例
ページ内の全てのリンクの文字色を赤くする
HTMLファイル内に記述
<head>
…中略…
<style type=”text/css”><!–
a {color:red;}
–></style>

…中略…
</head>
<body>
<p>
日本における2大検索エンジン<a href=”http://www.yahoo.co.jp”>Yahoo</a>と<a href=”http://www.google.co.jp”>Google</a>。
</p>
</body>

上の例だと、YahooとGoogleの2箇所にリンクを張っていますが、Yahoo・Googleの両方とものリンク文字色が赤くなります。
もし1)の方法で同じことを再現しようとすると、各aタグの中にstyleを書かなければいけなくとても面倒です。

このように、記述したHTMLファイル内に出てくる全ての特定タグ等の見た目を一気に変えることが出来ます。
その1ページでしか使わないような見た目を指定したい時はこの方法を使うといいでしょう。

3)HTMLファイルとは別のCSSファイルにまとめて記述

[用途]ホームページ内の複数ページで何回も同じ見た目を指定したい時に使う。

これは、xxx.css(xxx部分は任意の半角英数名)のテキストファイルを作って、その中にCSS記述をしていくというものです。
(2)の例で出ていたa {color:red;}のような記述をファイル内に必要なだけ書きます。
ただし、その指定を適用したいページはhead部でCSSを読み込むという記述をしなければなりません。

なお、CSS指定部分はCSSリファレンスページで色々紹介しています。

記述例
ホームページの全ページにある全てのリンクの文字色を赤くする
HTMLファイル内に記述
<head>
…中略…
<link rel=”stylesheet” href=”style.css” type=”text/css” />
…中略…
</head>
<body>
<p>
日本における2大検索エンジン<a href=”http://www.yahoo.co.jp”>Yahoo</a>と<a href=”http://www.google.co.jp”>Google</a>。
</p>
</body>

CSSファイル内に記述(ファイル名「style.css」)

a {color:red;}

上の例では、head部の赤字の部分でstyle.cssというファイルを読み込んでいます。それにより、style.cssというCSSファイル内に記述したCSS指定をそのページに適用することが出来ます。

この場合、複数ページの見た目に関して一箇所で指定できるのがメリットです。つまり、CSSファイルを変更すれば、そのCSSファイルを読み込むよう指定した全ページの見た目を一気に変更出来るということです。
メニューやタイトル等、ホームページ内で見た目を統一したいものをCSSファイルにまとめて書いておくといいでしょう。

 Newer Entries