■ スタイルシート（CSS)の活用
「尾瀬で幕営しま専科」のホームページ作りで遊んでいる私ですが、ホームページビルダーでのHTMLの作成に限界を感じていました。
そんな時に、CSS（Cascading Style Sheet）のことを知りました。 更には、ホームページビルダーも、CSSの作成が出来る！
何だ！それなら買ったのだから使わなきゃ損だ、、、ということで使い始めました。 （私が、マニュアルを読まずにいただけなのです。）
CSSは、HTMLの見栄えを指定するよう文書の各要素に設定します。 つまりは、デザインをするということなのです。
CSSを使うことで、HTMLから装飾的な表現を分離することができるので、作業の効率化を図ることができます。
とはいえ、これは見た目の要素が対象となりますので、そう変化をさせることはないのが現実です。
だって、背景やフォントの種類やサイズなどを毎日変えるなんてことはありませんからねぇ。
フレームやボックスを使った段組のサイトなら、それらの見栄えを容易に変えて見る人へのインパクトはあるかも知れません。
でも、初めての訪問者へはそんな苦労？は伝わりません。 単なる変な色使いなサイトだという印象を与えるだけだと思います。
色の世界は、そのサイトの特性を表すので、そう自由には選ぶことが出来ないのです。
そんな単純なことより、ＣＳＳを生かすことの出来る世界が別にあります。 それは、異なるプラウザへの対応です。
とは言え、企業のホームページなら、プラウザごとに異なるCSSを適用して見る人のために努力するのは重要でしょうが、
個人のホームページでは、とてもそこまでの対応は出来ません。
ですから、私の場合には基本的なページのレイアウトに適用して、スタイルの統一のために使っています。
HTML：文書構造を定義
見出し、段落、区切り線、箇条書きリスト、表組みなどを定義する。
CSS ：文字や背景の色や装飾、レイアウトなどの文書の体裁を定義
文字サイズ、文字の種類、テキストの行間、色、表示する位置などを定義する。
とりあえず、これらのことを決めて作成しているのですが、将来CSSを大幅に変更することはないでしょう。
全ての頁の背景やLINEの色をあっという間に換えられますが、そんなことの必要性は感じていませんからね。
■ まとめ
気分で、時々LINE（線）の色でも変えてみようかな。 月ごとの色を表現するのも良いかもね！
スタイルシートを使えばどんなことが出来るのかな？という疑問を持つ人もいるでしょう。 その答えは、ここにあります。
これらを駆使して、私がどの位手抜きでホームページを作れるのか！ それが問題だ！ というのが結論なのですけどね！
| スタイルシートリファレンス |
|
|
|
|
|
| 文字色、背景 |
|
|
| color |
文字色（前景色）を指定する |
|
| background |
背景に関する指定をまとめて行う |
|
| background-attachment |
背景画像の固定、移動を指定する |
|
| background-color |
背景色を指定する |
|
| background-image |
背景画像を指定する |
|
| background-position |
背景画像の表示開始位置を指定する |
|
| background-position-x |
背景画像の横位置を指定する |
IE独自の仕様 |
| background-position-y |
背景画像の縦位置を指定する |
IE独自の仕様 |
| background-repeat |
背景画像のリピートの仕方を指定する |
|
|
|
|
| フォント |
|
|
| font |
フォントに関する指定をまとめて行う |
|
| font-style |
フォントをイタリック体、斜体にする |
|
| font-variant |
フォントをスモールキャップにする |
|
| font-weight |
フォントの太さを指定する |
|
| font-size |
フォントのサイズを指定する |
|
| font-family |
フォントの種類を指定する |
|
| *font-size-adjust |
フォントのサイズを調整する |
|
| *font-stretch |
フォントを縦長、横長にする |
|
|
|
|
| テキスト |
|
|
| line-height |
行の高さを指定する |
|
| text-align |
行揃えの位置、均等割付を指定する |
|
| text-justify |
均等割付の形式を指定する |
IE独自の仕様 |
| vertical-align |
縦方向の揃え位置を指定する |
|
| text-decoration |
テキストの下線、上線、打ち消し線、点滅を指定する |
|
| text-underline-position |
下線の表示位置を指定する |
IE独自の仕様 |
| text-indent |
一行目のインデント幅を指定する |
|
| text-transform |
テキストの大文字表示、小文字表示を指定する |
|
| white-space |
ソース中のスペース、タブ、改行の表示の仕方を指定する |
|
| letter-spacing |
文字の間隔を指定する |
|
| word-spacing |
単語の間隔を指定する |
|
| text-autospace |
アルファベット等との間隔を指定する |
IE独自の仕様 |
| line-break |
禁則処理を行うかどうかを指定する |
IE独自の仕様 |
| word-break |
文の改行の仕方について指定する |
IE独自の仕様 |
| word-wrap |
単語の途中で改行するかどうかを指定する |
IE独自の仕様 |
| *text-shadow |
文字に影をつける |
|
|
|
|
| 幅・高さ |
|
|
| width |
幅を指定する |
|
| max-width |
幅の最大値を指定する |
|
| min-width |
幅の最小値を指定する |
|
| height |
高さを指定する |
|
| max-height |
高さの最大値を指定する |
|
| min-height |
高さの最小値を指定する |
|
|
|
|
| マージン・パディング |
|
|
| margin |
マージンに関する指定をまとめて行う |
|
| margin-top |
上マージンを指定する |
|
| margin-bottom |
下マージンを指定する |
|
| margin-left |
左マージンを指定する |
|
| margin-right |
右マージンを指定する |
|
| padding |
パディングに関する指定をまとめて行う |
|
| padding-top |
上パディングを指定する |
|
| padding-bottom |
下パディングを指定する |
|
| padding-left |
左パディングを指定する |
|
| padding-right |
右パディングを指定する |
|
|
|
|
| ボーダー |
|
|
| border |
ボーダーのスタイル、太さ、色を指定する |
|
| border-color |
ボーダーの色を指定する |
|
| border-style |
ボーダーのスタイルを指定する |
|
| border-width |
ボーダーの太さを指定する |
|
| border-top |
上ボーダーのスタイル、太さ、色を指定する |
|
| border-top-color |
上ボーダーの色を指定する |
|
| border-top-style |
上ボーダーのスタイルを指定する |
|
| border-top-width |
上ボーダーの太さを指定する |
|
| border-bottom |
下ボーダーのスタイル、太さ、色を指定する |
|
| border-bottom-color |
下ボーダーの色を指定する |
|
| border-bottom-style |
下ボーダーのスタイルを指定する |
|
| border-bottom-width |
下ボーダーの太さを指定する |
|
| border-left |
左ボーダーのスタイル、太さ、色を指定する |
|
| border-left-color |
左ボーダーの色を指定する |
|
| border-left-style |
左ボーダーのスタイルを指定する |
|
| border-left-width |
左ボーダーの太さを指定する |
|
| border-right |
右ボーダーのスタイル、太さ、色を指定する |
|
| border-right-color |
右ボーダーの色を指定する |
|
| border-right-style |
右ボーダーのスタイルを指定する |
|
| border-right-width |
右ボーダーの太さを指定する |
|
|
|
|
| 表示・配置 |
|
|
| overflow |
はみ出た内容の表示方法を指定する |
|
| overflow-x |
はみ出た内容の表示方法を指定する |
IE独自の仕様 |
| overflow-y |
はみ出た内容の表示方法を指定する |
IE独自の仕様 |
| position |
ボックスの配置方法（基準位置）を指定する |
|
| top |
上からの配置位置（距離）を指定する |
|
| bottom |
下からの配置位置（距離）を指定する |
|
| left |
左からの配置位置（距離）を指定する |
|
| right |
右からの配置位置（距離）を指定する |
|
| display |
要素の表示形式（ブロック_インライン）を指定する |
|
| float |
左または右に寄せて配置する |
|
| clear |
回り込みを解除する |
|
| z-index |
重なりの順序を指定する |
|
| visibility |
ボックスの表示、非表示を指定する |
|
| clip |
ボックスを切り抜き表示（クリッピング）する |
|
| direction |
文字表記の方向（左右）を指定する |
|
| unicode-bidi |
Unicodeの文字表記の方向を上書きする |
|
| writing-mode |
文字表記の方向（縦横）を指定する |
IE独自の仕様 |
|
|
|
| テーブル |
|
|
| table-layout |
テーブル（表）の表示方法を指定する |
|
| caption-side |
テーブル（表）のキャプションの位置を指定する |
|
| border-collapse |
セルのボーダーの表示の仕方を指定する |
|
| border-spacing |
セルのボーダーの間隔を指定する |
|
| empty-cells |
空白セルのボーダーの表示、非表示を指定する |
|
|
|
|
| リスト |
|
|
| list-style |
マーカーに関する指定をまとめて行う |
|
| list-style-image |
マーカー画像を指定する |
|
| list-style-type |
マーカー文字の種類を指定する |
|
| list-style-position |
マーカーの表示位置を指定する |
|
| *marker-offset |
マーカーとの間隔を指定する |
|
|
|
|
| 内容挿入・引用符 |
|
|
| content |
内容（コンテンツ）を挿入する |
|
| quotes |
引用符を設定する |
|
| *counter-increment |
要素の連番（カウンタ）の値を進める |
|
| *counter-reset |
要素の連番（カウンタ）の値をリセットする |
|
|
|
|
| アウトライン |
|
|
| outline |
アウトラインのスタイル、太さ、色を指定する |
|
| outline-color |
アウトラインの色を指定する |
|
| outline-style |
アウトラインのスタイルを指定する |
|
| outline-width |
アウトラインの太さを指定する |
|
|
|
|
| カーソル |
|
|
| cursor |
カーソルの形状を指定する |
|
|
|
|
| 印刷 |
|
|
| page-break-before |
印刷の改ページ箇所を指定する |
|
| page-break-after |
印刷の改ページ箇所を指定する |
|
| *size |
用紙サイズと方向を指定する |
|
| *page |
用紙設定を指定する |
|
| *marks |
トンボを出力するかどうかを指定する |
|
| *page-break-inside |
要素内での改ページを制御する |
|
| *orphans |
最低限必要な行数を指定して改ページを制御する |
|
| *widows |
最低限必要な行数を指定して改ページを制御する |
|
|
|
|
| 入力補助 |
|
|
| ime-mode |
テキスト入力時のIMEの状態を指定する |
IE独自の仕様 |
|
|
|
| スクロールバー |
|
|
| scrollbar-3dlight-color |
スクロールバーの左端と上端の色を指定する |
IE独自の仕様 |
| scrollbar-arrow-color |
スクロールバーの矢印の色を指定する |
IE独自の仕様 |
| scrollbar-base-color |
スクロールバーのベース色を指定する |
IE独自の仕様 |
| scrollbar-darkshadow-color |
スクロールバーの右端と下端の色を指定する |
IE独自の仕様 |
| scrollbar-face-color |
スクロールバーの表面の色を指定する |
IE独自の仕様 |
| scrollbar-highlight-color |
スクロールバーのハイライトの色を指定する |
IE独自の仕様 |
| scrollbar-shadow-color |
スクロールバーの影の色を指定する |
IE独自の仕様 |
|
|
|
| フィルタ・拡大表示 |
|
|
| filter |
画像、テキストにフィルタ効果を与える |
IE独自の仕様 |
| zoom |
拡大表示する（IE独自の仕様） |
|
|
|
|
| レイヤー |
|
|
| layer-background-color |
レイヤーの背景色を指定する |
NN独自の仕様 |
| layer-background-image |
レイヤーの背景画像を指定する |
NN独自の仕様 |
| include-source |
他のHTML文書をレイヤー表示する |
NN独自の仕様 |
|
|
|
| ルビ |
|
|
| ruby-align |
ルビの行揃え位置を指定する |
IE独自の仕様 |
| ruby-overhang |
ルビの表示領域を指定する |
IE独自の仕様 |
| ruby-position |
ルビの表示位置を指定する |
IE独自の仕様 |
|
|
|
| グリッド |
|
|
| layout-grid |
グリッドに関する指定をまとめて行う |
IE独自の仕様 |
| layout-grid-char |
文字グリッドの幅を指定する |
IE独自の仕様 |
| layout-grid-line |
行グリッドの高さを指定する |
IE独自の仕様 |
| layout-grid-mode |
行、文字グリッドの有効、無効を指定する |
IE独自の仕様 |
| layout-grid-type |
グリッドのタイプを指定する |
IE独自の仕様 |
|
|
|
| 外部スクリプト |
|
|
| behavior |
外部スクリプトを適用する |
IE独自の仕様 |
|
|
|
| 音声 |
|
|
| *azimuth |
声が聞こえてくる角度を指定する |
|
| *elevation |
声が聞こえてくる高さを指定する |
|
| *volume |
音量を指定する |
|
| *speak |
読み方を指定する |
|
| *speak-header |
表の見出しを読むタイミングを指定する |
|
| *speak-numeral |
数字の読み方を指定する |
|
| *speak-punctuation |
句読点や記号を読むかどうかを指定する |
|
| *speech-rate |
読む速度を指定する |
|
| *stress |
アクセントの強さを指定する |
|
| *voice-family |
声の種類を指定する |
|
| *pause |
読み上げ休止に関する指定をまとめて行う |
|
| *pause-after |
読み上げ休止時間・箇所を指定する |
|
| *pause-before |
読み上げ休止時間・箇所を指定する |
|
| *pitch |
声の高さを指定する |
|
| *pitch-range |
声の高さの変化する幅を指定する |
|
| *play-during |
バックグラウンド・サウンドを指定する |
|
| *richness |
声の豊かさ・明瞭さを指定する |
|
| *cue |
サウンドアイコンに関する指定をまとめて行う |
|
| *cue-after |
サウンドアイコンの内容と鳴らす箇所を指定する |
|
| *cue-before |
サウンドアイコンの内容と鳴らす箇所を指定する |
|
|
| *印のついたものは、現在のところIEとNNでサポートされていないプロパティです。 |
|
