アクセス解析

初歩ＣＳＳ活用一覧

(タイトルに検索語を含むと良)

　 「スタイルシートとは、ＨＴＭＬとは別のレイアウト指定のための記述言語」とされているが、現実には同一ＨＴＭＬファイル内でスタイルシートを利用するのだから、その実質は独立の宣言部を持った書式指定用ＨＴＭＬＴＡＧにほぼ等しく、パラメター書式の相違にさえ気を付ければ、ＨＴＭＬとＣＳＳを使い分けられる。すなわち、 ＨＴＭＬＴＡＧの表示形式記述項を分けて宣言部<head>～</head>内で定義できる拡張をしたと考えても結果は同じだろう。　その相違といえば、

	ＣＳＳが書式宣言部と利用部に分離できるので、簡単な呼出で繰り返し使用でき、
	ＴＡＧへの修飾と、class（ＩＤ）名への修飾も独立にでき、
	それが組合せ利用できる

　ようになったので、パラメターが何項にも渉る複雑な宣言内容でもそれを定義したタグ利用、或いは簡便な名称呼出で何度も利用できるし、ＴＡＧ名はワイルドカードでclass（ＩＤ）名だけの定義とは、どのＴＡＧも無宣言でclass名に拠る修飾を適用できることである。
　外部スタイルシートの利用もこの宣言型の延長線と考えればよい。丁度ＢＡＳＩＣのＭＡＲＧＥコマンドで各ファイル共通部を読み込む様なものである。
　なお、ユーザーが圧倒的に多いＩＥが、このＣＳＳを一番取り入れていないので、見え方の共通化の点からはＩＥの表示能力の範囲に留めることになる。なをＩＥだけがサポートしていないことで「少数派」という評価が一部で行われているが、それは利用者数の重み付けのない架空の論議という他ない。ブラウザ利用実数の80%超であれば圧倒的というほかないのだから。
　 パラメター指定の書式の相違は、以下の通り。

	HTML	Style	備　　　考
代入演算子	＝	：
分離記号	(空)	；
style	項目＝”定義”	｛項目：定義｝	Style Tag の範囲記号
URL指定	＝”実url”	：url(実url)	Dir＋ファイル名

■ CSS 記述方法

各タグ内で個別に行う方法（＝ＴＡＧの修飾として使用）と、
ＨＴＭＬ冒頭部で宣言し、そのＴＡＧ及びＴＡＧ＋．＋ＩＤ名称で指定する方法、
上記の具体的な宣言内容を外部ファイルから読み込む方法がある。

ＴＡＧの修飾パラメター

セレクタ｛属性１：値｝
セレクタ｛属性１：値；　属性２：値；　属性３：値；　｝　　　　　　　（複数属性一括指定）
セレクタは　HTML TAG　自身、あるいは　*.class（ID)名である
タグの定義と*.class（ID)名の定義を組合わせて使用可能

ＨＴＭＬ冒頭部で宣言し、その名称で指定する方法

「宣言部」というのは<head>～</head> 内の<style>～</style>とした領域内で宣言。宣言部を非対応ブラウザで非表示とするため更にコメントＴＡＧで囲う。従って全体構造は以下の通りとなる。

[ 諸宣言部 ]
<head>
<meta ～～～ >
<style type="text/css">	………………	(以下書式宣言領域)
<!--	………………	/非対応ブラウザ排除/
～ＣＳＳ書式宣言部
セレクタ｛属性１：値｝
セレクタ｛属性１：値；　属性２：値；　属性３：値；　}		/複数属性一括指定/）
セレクタ１，セレクタ２，セレクタ３，……｛属性１：値}		/複数セレクタ一括指定/
………
-->	………………	(／非対応ブラウザ)
</style>	………………	（／書式宣言領域終了）
</head>	………………	諸宣言部終了
[ 本文部 ]
<body>	………………	（本文部）
…………
<セレクター class=名>	（セレクタ名の書式指定：何度も使用可）～
</セレクタ>
………
</body>	………………	（／本文部終了）

セレクタは「HTML TAG」、「*．＋ID(class)名」及び、「TAG＋．＋class名」
class名で書式を使い分けるには　<TAG class="ID名"> という形にする。
全タグ共通(同一クラス名一括)でパラメター＝{属性:値;}指定する場合は
*.ID名{属性:値;} の形
CSS中のコメントは　/*　　　*/　で囲った部分
<body text=#rrggbb> → body { color:#rrggbb } …… (パラメター名が変わる！)
bgcolor=#rrggbb ＜→＜ backgrounnd-color:#rrggbb 表記とする
無効指定調査　table & tr の bgcolor=#rrggbbが無効?

外部ＣＳＳ(定義：宣言)ファイルの読込
1. head tag 領域内でＣＳＳ定義ファイルを参照
  <link rel="stylesheet" href="urlファイル名" type="text/css">
2. style tag 領域内で
  @import url(urlファイル名)　　　/*ＩＥ６ではほとんど無効！ＣＳＳ読込。並記可*/
- ＣＳＳファイルの記述方法は前項の宣言型に同じで、TEXTファイルである。
- ＣＳＳフ<ァイルの拡張子は.css とする
　 CSS優先度：TAG修飾CSS＞CSS宣言＞外部CSS
　以下、記述幅指定サンプル。
　このファイルの書式は

宣言部： body { color:#004F8F; }
div { width: 178mm; font: MSゴシック; }
　
指定部： <body>
<div>
（以下本文記述）

となっている

<02>

■ 印刷時の改ページ点指定

下記の改行で、印刷時に、ここで改ページされる。 page-break-inside は、指定したブロックの途中での印刷改ページを禁止する
<div style="page-break-inside:avoid;">
:　（この間の記述は途中改ページされない：表など）
</div>

mail to： adrs
Last Upload: ：　　　Update 04/09/20　(/16，/12

宣言部：	body { color:#004F8F; }
	div { width: 178mm; font: MSゴシック; }

指定部：	<body> <div>
（以下本文記述）