あものＨＴＭＬ～Stylesheet講座～

Stylesheet講座
	序章

1.StyleSheetとは？ 2.StyleSheetの書き方 3.StyleSheetの設定 4.StyleSheetの色 5.StyleSheetの長さ 6.コメントを入れる 7.セレクタの種類　a.HTMLタグにスタイルを設定する　 b.任意の範囲にスタイルを設定する　 c.特定のタグにのみスタイルを設定　 d.擬似クラス　 e.擬似要素 8.アドレス(URL)の表記方法
	第1章　フォント

1.フォントを変える 2.フォントのサイズを変える 3.フォントを斜体にする 4.フォントの太さを変える 5.フォントの設定をまとめて記述する 6.システムフォントを使う 7.フォントをスモールキャピタルにする
	第2章　テキスト

1.文字色を変える 2.文字を装飾する 3.行間隔を設定する 4.文字間隔を設定する 5.縦方向の文字の位置を決める 6.横方向の文字の位置を決める 7.インデント(字下げ)を設定する 8.改行させないで表示させる 9.大文字・小文字を決める 10.均等割付をする 11.単語間隔を設定する 12.ソース通りに表示させる 13.禁則処理をする 14.改行を細かく設定する 15.縦書きで表示する 16.縦書きの下線の位置を指定する 17.ルビの位置を決める 18.グリッドを使う 19.グリッドの設定をまとめて記述する
	第3章　背景

1.背景色を決める 2.背景に画像を使う 3.背景の画像を固定する 4.背景画像の繰り返し設定 5.背景画像の位置を決める 6.背景画像の位置を細かく設定する 7.背景の設定をまとめて記述する
	第4章　枠(ボックス)

1.枠(ボックス)の考え方 2.枠の形を決める 3.枠の形をまとめて設定する 4.枠の太さを決める 5.枠の太さをまとめて設定する 6.枠の色を決める 7.枠の色をまとめて設定する 8.枠を辺ごとにまとめて設定する 9.枠の設定をまとめて記述する 10.枠の位置を決める 11.枠の位置をまとめて設定する 12.枠の中の間隔を決める 13.枠の中の間隔をまとめて設定する 14.枠の中の幅と高さを決める
	第5章　テーブル

1.テーブルの表示方法を決める 2.テーブル枠の表示形式を決める
	第6章　リスト

1.リストマークを変える 2.リストマークに画像を使う 3.リストマークの表示位置を決める 4.リストマークをまとめて設定する
	第7章　配置

1.回り込み方法を決める 2.回り込みを解除する 3.内容が多い時の処理を行う 4.内容が多い時の処理を個別に行う 5.要素の配置位置を決める 6.要素の配置方法を決める 7.複数の要素の重なる順序を決める 8.要素の見える範囲を決める 9.要素を拡大表示する 10.要素の表示形式を決める 11.要素の表示・非表示を決める
	第8章　フィルタ

1.フィルタの考え方 2.半透明のフィルタをかける 3.ぼかしを入れる 4.任意の一色を透過して表示する 5.影をつける 6.発光させる 7.浮き上がらせる 8.掘り込ませる 9.マスクをかける 10.ぶれをつける 11.影をのばす 12.ウェーブをかける 13.フィルタの設定をまとめて記述する 14.反転させる 15.グレースケールにする 16.色を反転させる 17.X線フィルタをかける
	第9章　その他

1.カーソルの形を変える 2.スクロールバーの色を変える 3.IMEを操作する 4.文字を右から読ませる 5.印刷時の改ページ位置を決める

第5章　1．テーブルの表示方法を決める

table-layout ： ○

○：fixed、auto

テーブルの表示方法を決めます。

テーブルタグというのは普通テーブル全体のデータを読み込んでから表示しますが、
table-layoutプロパティを使うと、横一列のデータを読み込んだ時点で表示を始めるので
テーブルの表示速度が速くなります。

○に入る値	説明
fixed	横一列のデータを読み込んだ時点でテーブルの表示を始めます。
auto	テーブル全体を読み込んでから表示を始めます。

注意)
値がfixedの場合、widthプロパティでセルの幅を決めていないとセル幅は均等になりますので注意が必要です。(サンプルを参照)

ソース

赤字が変更箇所
斜体はプロパティ

<HTML>
<HEAD>
<TITLE>テーブルの表示方法を決める</TITLE>

<style type="text/css">

</style>

</HEAD>
<BODY>

<table border="1" class="sample1"><caption>値はfixed</caption>
<TR><TD>○に入る値</TD><TD>説明</TD><TD>一言</TD></TR>
<TR><TD>fixed</TD><TD>横一列のデータを読み込んだ時点でテーブルの表示を始めます。</TD><TD>テーブルの表示速度が速い。</TD></TR>
<TR><TD>auto</TD><TD>テーブル全体を読み込んでから表示を始めます。</TD><TD>値を指定しない場合、こちらが適用されます。</TD></TR>
</table><BR>

<table border="1" class="sample2"><caption>値はauto</caption>
<TR><TD>○に入る値</TD><TD>説明</TD><TD>一言</TD></TR>
<TR><TD>fixed</TD><TD>横一列のデータを読み込んだ時点でテーブルの表示を始めます。</TD><TD>テーブルの表示速度が速い。</TD></TR>
<TR><TD>auto</TD><TD>テーブル全体を読み込んでから表示を始めます。</TD><TD>値を指定しない場合、こちらが適用されます。</TD></TR>
</table>

</BODY>
</HTML>

サンプル

ソース解説

値がfixedの時は、1行目のセルを読み込み、
それに合わせて2行目以降のセルの大きさを確定するので表示速度は速くなりますが
レイアウトが崩れます。

そのため、テーブルのレイアウトを重視する場合は、値をautoにするか、
あらかじめ2行目以降のセルの大きさを考えて1行目にwidthプロパティで
大きさを指定しておく必要があります。

PV	Copyrights (C) あも. All Rights Reserved.　画像および文章の無断転載、コピー、使用を堅く禁じます。