トップページ     わからない時はFAQ     ふぉーむまんの使い方ガイド     ふぉーむまんとは？     新規会員登録受付    

CSSについて

CSSを使用することによって、HTMLタグに対して更に表示効果を付け加えるたり、 表示効果を修正したりすることができます。

◇CSSの定義

『{}』の中身が表示効果となります。 値の後にはセミコロンを忘れないようにしてください。
タグ名 { プロパティ: 値;}
タグ名#id属性値 { プロパティ: 値;}
タグ名.class属性値 { プロパティ: 値;}
家族タグというものがあったとしたら、こんな感じです
family#father {
性別: 男;
身長: 180cm;
体重: 75kg;
趣味: ゴルフ;
}
family#mother {
性別: 女;
身長: 165cm;
体重: ??kg;
特技: 料理;
}

実際の例

(例1)タグ名による指定

span {
font-family: serif;
color: black;
}
(すべてのspanタグに効果を及ぼします)

(例2)HTMLタグにid属性を持つタグへの限定指定

span#work_name {
width: 6em;
background-color: black;
color: brown;
}
(work_nameというid属性を持つspanタグに対して効果を及ぼします)

(例3)HTMLタグにclass属性を持つタグへの限定指定

span.work_place {
width: 10em;
margin-left: 10px;
}
(work_placeというclass属性を持つspanタグに対して効果を及ぼします)

(例4)特定の親要素を持つものへの限定指定

div#base span{
text-align: right;
border: 1px solid green;
}
(div#baseを親要素に持つspanすべてに効果を及ぼします。親子関係については下記参照)
なお、id属性やclass属性をもつタグの場合タグ名を省略してid属性やclass属性で 指定することができますが、その場合同じ属性をもつすべてのタグに影響を 与えてしまいます。

親子関係

Formのページの構造はこのようになっています
body
  ┗div#form
     ┣div#formheader
     ┣div#formbody
     ┗  :
body    div#form    div#formheader,div#formbody,・・
  親 → 子    親 → 子(複数)
bodyの子要素はdiv#formでdiv#formの親要素はbodyとなります。
また、div#formheaderやdiv#formbodyにも子要素がありますので、親子関係は 複雑になっていきます。
※ 親子関係はタグ名やid属性やclass属性によって決定されるわけではありません
※ HTMLで内側にある要素(タグ)が子要素で外側にある要素(タグ)が親要素になります
CSSでは親要素の表示効果は子要素に影響を与えます。
実際にCSSに手を加える際には親要素でどのような指定をしているのかを考えて行うとよいです。

また、すべての要素を設定しなければならないというわけではなく、必要な外見さえ
表示できればいいというような考えでかまわないと思います。

CSSの単位

長さ

em1フォント分の大きさです。指定されているフォントの大きさを使用します
ex小文字の"x"ひとつ分です。指定されているフォントの大きさを使用します
pxピクセルで指定するときに使います。ディスプレイの点ひとつ分です

フォントの大きさ

ptポイントで指定します
xx-small,x-small,small,medium,largex-large,xx-largeサイズ名で指定します

境界線の種類

solid実線を指定します
dashed破線を指定します
dotted点線を指定します

色

white,blue,red,green,black 等色名による指定
#??????16進数による指定

基本的なCSSプロパティ(括弧内は指定できる値)

ここで紹介するものは一部でしかありません。
詳しくは、CSSリファレンスを参照ください

width|height

width: (長さ)
横幅 フォームの入力欄の大きさに合せないと変な形になります
height: (長さ)
縦幅

margin|padding

margin: (長さ特殊)
外側の縁
padding: (長さ特殊)
内側の縁

font-size

font-size: (フォントサイズ)
文字の大きさ

border

border: (ボーダー)
境界線(一括指定 個別指定(上下左右))
border-top (上境界線)
border-right (右境界線)
border-buttom (下境界線)
border-left (左境界線)
など個別に指定することもできます。
その場合もborderと同様に指定します。

color

color: (カラー)
文字色

background-color|background-image

background-color: (カラー)
背景色
background-image: (URL)
背景画像
background-repeat を指定することで、背景の繰り返し方法を指定できますし
background-position を指定することで、背景画像の位置を調整できます。

text-align|vertical-align

text-align: (位置)
寄せ位置
vertical-align: (位置)
垂直寄せ位置

値の指定方法

ここで紹介するものは一部でしかありません。
詳しくは、CSSリファレンスを参照ください

長さ|太さ(em|ex|px|%)

(例)width: 200px; 横幅に200pxと指定

長さ特殊|太さ特殊(em|ex|px|%)

(例1)margin: 3px; 外側の縁、上下左右3px指定
(例2)margin: 3px 2px; 外側の縁、上下3px、左右2pxを指定
(例3)margin: 3px 2px 1px; 外側の縁、上3px左右2px下1pxを指定
(例4)margin: 4px 3px 2px 1px; 外側の縁、上4px右3px下2px左1pxを指定(時計廻りと覚える)
たくさん書き方がありますが例4の指定方法で指定すれば全く問題ありません

フォントサイズ(pt|サイズ名)

(例1)font-size: 12pt; フォントのサイズを12ptに指定
(例2)font-size: small; フォントのサイズをデフォルト値の5/6倍に指定
(例3)font-size: large; フォントのサイズをデフォルト値の6/5倍に指定

ボーダー(em|ex|px|% 境界線の種類 カラー)

(例1)border: 2px solid red; 境界線(上下左右)を2pxの太さの実線で色は赤を指定
線の色は次のカラー指定方法で指定します

カラー(色名|16進法)

(例1)color: white; 文字色を色名で白に指定
(例2)color: #ffffff; 文字色を16進数で白に指定(HTMLでの指定と同様)

URL(URL 相対パス)

URLを指定します。
(例1)background-image: url(http://anata.no.homepage.space/image/bg_img.jpg); 背景画像にURLで指定した画像を使用する
(例2)background-image: url(./image/bg_img.jpg); 背景画像に相対パスで指定した画像を使用する

位置(位置)

位置を指定します
(例1)text-align: center; 内側要素の文字列をセンタリングします

テーマの作成

テーマ用のフォルダを作成し、CSSファイルをすべてそのフォルダに保存します

theme.cssを作成する

@import url(base.css);
@import url(formheaderfooter.css);
@import url(formbody.css);
@import url(formparts.css);
上記の内容を記述して、テーマ用のディレクトリに保存してください

base.cssを作成する

★base.cssには、フォーム全体の基礎部分となる<body>と<div id="form">のためのCSSを記述します
★CSSでは、基礎部分で背景色を指定し、その子要素で別の背景色を指定すると、子要素の背景色が表示されます
★指定が完了したら、テーマ用ディレクトリに保存してください

body{}
div#form{}

フォームをセンタリングする場合
フォームを右寄せにする場合
フォームを右寄せにする場合

formheaderfooter.cssを作成する

★formheaderfooter.cssには、formのヘッダ部分<div id="formheader">とその子要素と、フッタ部分<div id="formfooter">とその子要素の指定をします
★指定が完了したら、テーマ用ディレクトリに保存してください

div#formheader {} /* div#formの子要素で、ヘッダの基礎部分となる */
/* div#formheaderの子要素 */
div#formheader h2 {} /* タイトル文字 */
div#formheader h3.notice {} /* 註釈文字 */
div#formheader div.error {} /* エラーメッセージ */
 
div#formfooter {} /* div#formの子要素で、フッタの基礎部分となる */
/* div#formfooterの子要素 */
div#formfooter div.buttonForm {} /* ボタンを囲む領域 */
div#formfooter div.buttonForm input {} /* ボタン */

formbody.cssを作成する

★formbody.cssには、formのメインとなる部分を指定します。
★指定が完了したら、テーマ用ディレクトリに保存してください

下記のどちらかを設定してください。両方を設定しても問題ありません。
フォーム設定で項目の配置を［横］にした場合
#formbody table.yoko {}
#formbody table.yoko tr.koumoku {}
#formbody table.yoko tr.koumoku td.koumokumei {}
#formbody table.yoko tr.koumoku td.koumokumei div {}
#formbody table.yoko tr.koumoku td.nyu-ryokuran {}
#formbody table.yoko tr.koumoku td.nyu-ryokuran div{}
#formbody table.yoko tr.koumoku td.nyu-ryokuran div.attention{}
フォーム設定で項目の配置を［縦］にした場合
#formbody dl.tate {}
#formbody dl.tate dt.koumokumei {}
#formbody dl.tate dt.koumokumei div {}
#formbody dl.tate dd.nyu-ryokuran {}
#formbody dl.tate dd.nyu-ryokuran div {}
#formbody dl.tate dd.nyu-ryokuran div.attention{}

formparts.cssを作成する

★フォーム部品に関する指定をします
★各部品は全てdivタグで囲まれており、そのdivタグのクラス属性と子要素を見ると、どういう部品か判ります
★指定が完了したら、テーマ用ディレクトリに保存してください
div.textForm {}
div.textForm input {}

div.radiobuttonForm{}
div.radiobuttonForm input {}

div.checkboxForm{}
div.checkboxForm input {}

div.selectForm{}
div.selectForm select {}

div.textareaForm{}
div.textareaForm textarea {}

div.buttonForm {}
div.buttonForm input {}

実際のテーマを見てみる

  form_capture
今までの例では、全て省略せずに記載しましたが、以下の例では、 ブラウザが処理するのに最小限のCSSにしました。 コンパクトなので、見やすいと思いますが、 タグ名を大きく省きましたので、フォームのソースとの対応を 見たい時には若干見にくいかもしれません。