例えば、何かの機能を実現したくて、HTML の記述方法を調べると CSS の方法しか見付からなかったりします。
通常、CSS は外部に別途ファイルとして用意されます。
でも、HTML の中に、記述する事も可能なのです。
先ずは、おさらい。
CSS は Cascading Style Sheets の略で、 Web ページの内容 と デザイン とを分離する事を目的に、
レイアウトのテクニックとして、一般的になっています。
各ページから、この CSS ファイルを参照する事で、統一的な見た目を実現します。
ですから、CSS の利用に関しては、Internet 上に様々な情報が溢れています。
検索をすれば、面白い機能を実現出来る様にするヒントが転がっています。
しかし、極 限定的に その機能を盛り込みたい時に、CSS を新設したり書き換えたりするのは、大袈裟かも知れません。
そんな時には、HTML の中に、CSS で定義する文を 直接 書き込んでしまいましょう。
そう、これは 何も HTML に限った話ではありません。
例えば、この Blog の様に、 投稿 も れっきとした HTML ですね。
Blog の とあるページだけ、特別な機能を付加したい時 等にも 応用 が利く筈です。
前置きはこれ位にして っと。
前回 HTML Ｔの世界 の お手伝い を別リスト化 を例に説明します。
表の行毎に自動で連番を振る方法が、以下の CSS への記述だとします。
table.basic {
counter-reset: seq_no; /* 表毎に */
}
table.basic tbody th:before {
counter-increment: seq_no; /* th 要素でカウント */
content: "登録 " counter(seq_no) " 番 "; /* 表示形式 */
}
この例では、変数 seq_no を用意して、表のデータ（行） をカウントして、登録1 番 の形で表示します。
対象とする表は、 table.basic { で始めている事から、 class="basic" つまり basic と名前付けした 表 ですね。
勿論、表の中には、各 データ（行） 毎に、 th 要素（<th></th>） を記述します。
変数名やクラス名は任意の名称に変更出来ますが、他の命名と重複すると拙いので、ユニークなものとします。
無論、表示形式も 任意の文字列に加工が可能ですね。 最も単純なのは content: counter(seq_no); ですが。
通常は、CSS ファイルの中に これを書き込む訳ですが、
HTML ( Blog の投稿 ) の中にも、組み込めます。
基本は、利用する対象（ここでは 表）の 直前 もしくは 冒頭 に、<style> と </style> とで挟んで記述する事です。
以下の例では、一般的な HTML 文での例ですが、Blogger 等の 投稿中で使う 表 でも同じです。
直前 もしくは 冒頭 に記述。
命名に留意。
メモ帳 等で UTF-8 保存すれば、ブラウザーで表示可能です。 何の事は無い、たった３行の画面が出て来ますが ... 。
<!DOCTYPE html>
<html lang="jp" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>ＣＳＳ組み込みサンプル 表</title>
<body bgcolor="#d0f8bb">
サンプル
<br />
<!-- 注記：背景色 グリーン=d0f8bb ブルー=bbc3f8 ピンク=ffe9e5 -->
<!-- CSS 取り込み -->
<!-- 連番自動 -->
<style>
table.basic {
counter-reset: seq_no; /* 表毎に */
}
table.basic tbody th:before {
counter-increment: seq_no; /* th 要素でカウント */
content: "登録 " counter(seq_no) " 番 "; /* 表示形式 */
}
</style>
<!-- 表の定義とデータ 単純な例 -->
<table border="0" class="basic">
<tbody>
<tr>
<th></th>
<td> Ｘさん</td>
</tr>
<tr>
<th></th>
<td> Ｙちゃん</td>
</tr>
</tbody>
</table>
</body>
</html>
</head>
面白そうな CSS を見付けたら、この様に、先ずは組み込んで見て、試して見るのも面白いかもですね。
また、応用として、いきなり 投稿ページで採用する前に、ご自分のドキュメント フォルダの中に、
試験的なものを作って、思う様な機能が働くか否か、試して見るのもいいかもです。
但し、Blog サービスは、複雑なスタイルシートやテンプレートが絡み合っていますので、
この試験的なものが上手く行くからと言って、そのまま、投稿でも OK という訳には行かない事も まま ありますけれど ... 。
尚、この様に、本来、CSS の中に記述すべきものを、Blog の投稿ページ内に記述した例が、私にも何回かあります。
覚えておいて損はないテクニックだと思います。
0 件のコメント:
コメントを投稿