Home > HTML&CSS

2008.04.21

テーブルの文字の配置memo 2

前回クラスセレクタ「.tbblue」で作成したテーブルのテーブルヘッダーが必要ない場合はHTMLの「th」を「td」に変更すると以下のようになります。
CSSは前回同様です。

/*てーぶるあお線tbblue*/
.tbblue {margin:10px auto 0px auto; width: auto; border-collapse:collapse; border: solid 1px #1E3C5A; }
.tbblue th { font-size: 1em; padding: 0px 5px; border: solid 1px #1E3C5A; }
.tbblue td { font-size: 1em; padding: 0px 5px; border: solid 1px #1E3C5A; }
.tbblue tr { font-size: 1em; padding: 0px 5px; border: solid 1px #1E3C5A; }

このHTMLでは「th」を使用していません。

<table class="tbblue" summary="見本1">
<tr>
<td>111</td><td>222</td><td>333</td>
<tr>
<td>aaa ああああ
いいいい</td><td>bbbbb</td><td>ccccc</td>
</tr>
</table>
111 222 333
aaa あああ
いいい		 bbbbb ccccc

左上の「111」を左右中央にする為にhtmlのtdにalign=”center”を加え、
真ん中の「222」の下の項の文字の上下をを上揃えにする為にはhtmlのtdにvalign=”top” を加えます。

<table class="tbblue" summary="見本1">
<tr>
<td align="center">111</td><td>222</td><td>333</td>
</tr>
<tr>
<td>aaa あああ
いいい</td><td valign="top">bbbbb</td><td>ccccc</td>
</tr>
</table>
111 222 333
aaa あああ
いいい		 bbbbb ccccc

このように個別セル毎に位置を指示する。一番右の「ccc」を上揃えにする場合はそのセルのtdにvalign=”top”を記述すれば良い。

ただし、td要素はtr要素の子要素であるためtr要素に指示をすればその行全体を中央揃え、上揃えとする事が出来る。

<table class="tbblue" summary="見本1">
<tr align="center">
<td>111</td><td>222</td><td>333</td>
</tr>
<tr valign="top">
<td>aaa あああ
いいい</td><td>bbbbb</td><td>ccccc</td>
</tr>
</table>
111 222 333
aaa あああ
いいい		 bbbbb ccccc

テーブルを左寄せにしてみる。
ここでは元のCSSの

.tbblue {margin:10px auto 0px auto; width: auto; border-collapse:collapse; border: solid 1px #1E3C5A; }

を

.tbbluel {margin:0px 0px 0px 0px; width: auto; border-collapse:collapse; border: solid 1px #1E3C5A; }

に変更した新しいクラスセレクター「.tbbluel」をCSSに設置しました。（「.tbblue」の尻に「l」を付け加えただけです。）

111 222 333
aaa あああ
いいい		 bbbbb ccccc

一番左の列の幅を150pxに指定してみる。
「colgroup」タグは表組の列をグループ化するタグでこの列が難行になっても同一の効果が得られます。

<table class="tbbluel" summary="見本1">
<colgroup style="width:150px"></colgroup>
<tr align="center">
<td>111</td><td>222</td><td>333</td><td>444</td>
</tr>
<tr valign="top">
<td>aaa あああ
いいい</td><td>bbbbb</td><td>ccccc</td><td>ddddd</td>
</tr>
</table>
111 222 333 444
aaa あああ
いいい		 bbbbb ccccc ddddd

一列目を12pxに二列目を100pxに三列目を80pxに四列目を150pxに指定してみる。

<table class="tbbluel" summary="見本1">
<colgroup><col span="1" style="width:120px" /> </colgroup>
<colgroup><col span="1" style="width:100px" /> </colgroup>
<colgroup><col span="1" style="width:80px" /> </colgroup>
<colgroup><col span="1" style="width:150px" /> </colgroup>
<tr align="center">
<td>111</td><td>222</td><td>333</td><td>444</td>
</tr>
<tr valign="top">
<td>aaa あああ
いいい</td><td>bbbbb</td><td>ccccc</td><td>ddddd</td>
</tr>
</table>
111 222 333 444
aaa あああ
いいい		 bbbbb ccccc ddddd

二列目以降を100pxに揃えてみる。
実際には二列目以降には三列しかないのですが、あえて間違えて
<colgroup><col span="4" style="width:100px" /> </colgroup>
としたところ空の四つ目の列が形成されました。

<table class="tbbluel" summary="見本1">
<colgroup><col span="1" style="width:120px" /> </colgroup>
<colgroup><col span="4" style="width:100px" /> </colgroup>
<tr align="center">
<td>111</td><td>222</td><td>333</td><td>444</td>
</tr>
<tr valign="top">
<td>aaa あああ
いいい</td><td>bbbbb</td><td>ccccc</td><td>ddddd</td>
</tr>
</table>
111 222 333 444
aaa あああ
いいい		 bbbbb ccccc ddddd

Posted at 01:42 | Category: HTML&CSS | No Comments

2008.04.20

テーブルタグmemo

/*てーぶる*/
table {margin:0px auto 0px auto; width: auto; border-collapse:collapse; border: solid 1px #1E3C5A; }
th { font-size: 1em; padding: 0 5px; border: solid 1px #1E3C5A}
td { font-size: 1em; padding: 0 5px; border: solid 1px #1E3C5A }
tr { font-size: 1em; padding: 0 5px; border: solid 1px #1E3C5A }
<table summary="見本1";>
<tr>
<th abbr="項目1">111</th><th abbr="項目2">222</th><th abbr="項目3">333</th>
</tr>
<tr>
<td>aaa ああああ
いいいい</td><td>bbbbb</td><td>ccccc</td>
</tr>
</table>

この時XHTML1.0 Strict では各「th」にabbr="項目1"のようにabbr属性を設ける必要があります。
参考：アクセシブルなテーブル

111 222 333
aaa ああああ
いいいい		 bbbbb ccccc

このように記述してしまうと左サイドバーのカレンダーにも罫線が引かれてしまいます、取りあえずはCSSに記述したth、td、trのborderを0pxにして元にもどしておきます。
これではmemoに使えないので新たにクラスセレクター「.tbblue」を作成しそれでテーブルが作成出来るようにしてみます。

クラスセレクター「.tbblue」の名前は僕は青罫のテーブルにしたかったので他と区別するために「.tableblue」を短縮して「.tbblue」にしただけなので、「.hogehoge」でも何でもいいようです。

/*てーぶるあお線tbblue*/
.tbblue {margin:10px auto 0px auto; width: auto; border-collapse:collapse; border: solid 1px #1E3C5A; }
.tbblue th { font-size: 1em; padding: 0 5px; border: solid 1px #1E3C5A; }
.tbblue td { font-size: 1em; padding: 0px 5px; border: solid 1px #1E3C5A; }
.tbblue tr { font-size: 1em; padding: 0 5px; border: solid 1px #1E3C5A; }

こんなCSSを記述をスタイルシートにする事でいくつものスタイルのテーブルを一つのぺーじに設置する事が可能になります。

<table class="tbblue" summary="見本1">
<tr>
<th abbr="項目1">111</th><th abbr="項目2">222</th><th abbr="項目3">333</th>
</tr>
<tr>
<td>aaa ああああ
いいいい</td><td>bbbbb</td><td>ccccc</td>
</tr>
</table>

元のテーブルのCSSとHTMLの違いは青く示した所だけです。

111 222 333
aaa ああああ
いいいい		 bbbbb ccccc

通常「th」は文字の太さはboldにそして左右揃えはセンター揃えになるはずなのですが、文字寄せが左揃えに表示されています、ここはまだ僕が解っていない所です。

Posted at 05:27 | Category: HTML&CSS | 2 Comments

2008.04.18

ブロッククォートの代替えクラスセレクタ

前回はブロッククォートの代わりにクラスセレクタ「.txbox」を使う方法について書いてみました。

/*てきすとぼっくすスクロール*/
.txbox {
margin:10px 15px 10px 15px;/*上、右、下、左の空き*/
padding: 0.5em;
border: solid 1px #808080;/*囲み線の太さと色*/
background: #EBF0FF;/* ろぐぼっくす背景色*/
width: auto;/*nnpxと左右幅を固定しても良い*/
height: 100px;/*スペースの高さ*/
overflow: auto;/*オーバーフローの文章をスクロールをしたい時*/
font-size: 95%;/*文字の大きさ*/
line-height: 1.5em;/*文字行間*/
}

css.phpにクラスセレクタ「.txboxh」を設置してみます。
「.txbox」との違いは赤く表示してみました。
僕の場合、画像はあらかじめ51×12pxで作成してサイトの適当なでイレクトリに置いておきました。

/*てきすとぼっくすHTML*/
.txboxh; {
margin:10px 15px 10px 15px;/*上、右、下、左の空き*/
padding: 1em 0.5em 0.5em 0.5em;
border: solid 1px #808080;/*囲み線の太さと色*/
background: #fff3fb;/* ろぐぼっくす背景色薄紫*/
background-image: url(http://画像を設置したディレクトリ/画像の名前.gif);
background-repeat: no-repeat;
/*width: auto;/*nnpxと左右幅を固定しても良い*/
/*height: 100px;/*スペースの高さ*/
/*overflow: auto;/*オーバーフローの文章をスクロールをしたい時*/
font-size: 95%;/*文字の大きさ*/
line-height: 1.5em;/*文字行間*/
}

で、こんな風にするとここは「HTMLを記述しています」という意味が分かりやすくなると思います。

<div class="txboxh">投稿記事</div>

このようにして「txboxc」も作成、「CSS」を記述する箇所も作ってみました。

Posted at 12:57 | Category: HTML&CSS | No Comments

2008.04.17

blockquoteブロッククォート

BLOCKQUOTE の使い方を見て<blockquote>～</blockquote> を適当に使って来たぼくとしては反省しなくっちゃ！。

<blockquote>～</blockquote> で囲まれた文章は、引用文であることを明示するタグです。
前後に改行され、左右がインデント(字下げ)されて表示されます。

「blockquote」すると上の様に見えるんです。

これ的にブロッククォートを使わずに同じように文章を表示するためにクラスセレクタ「.txbox」を作成以下のようにコードをCSS.phpに書き込んでおきます。

/*てきすとぼっくす*/
.txbox {
margin:10px 15px 10px 15px;/*上、右、下、左の空き*/
padding: 0.5em;
border: solid 1px #808080;/*囲み線の太さと色*/
background: #EBF0FF;/* ろぐぼっくす背景色*/
/*width: auto;/*nnpxと左右幅を固定しても良い*/
/*height: 100px;/*スペースの高さ*/
/*overflow: auto;/*オーバーフローの文章をスクロールをしたい時*/
font-size: 95%;/*文字の大きさ*/
line-height: 1.5em;/*文字行間*/
}

そしてHTMLでは

<div class="txbox">投稿記事</div>

の様に書けばいいんですね。

ただ上のCSSではwidth、height、overflowをコメントアウトしています、これを使ったCSSをもひとつクラスセレクタ「.txbox2」を作っておきましょう、これを作れば大量の文章を省スペースで納める事が出来ます。

/*てきすとぼっくすスクロール*/
.txbox2 {
margin:10px 15px 10px 15px;/*上、右、下、左の空き*/
padding: 0.5em;
border: solid 1px #808080;/*囲み線の太さと色*/
background: #EBF0FF;/* ろぐぼっくす背景色*/
width: auto;/*nnpxと左右幅を固定しても良い*/
height: 100px;/*スペースの高さ*/
overflow: auto;/*オーバーフローの文章をスクロールをしたい時*/
font-size: 95%;/*文字の大きさ*/
line-height: 1.5em;/*文字行間*/
}

で、これを使いたい時のHTMLでは

<div class="txbox2">投稿記事</div>

こんな風にスクロールしたいときは「div class=”txbox2″」として使わないときはdiv class=”txbox”」のように「2」を外せばいいんですね！

Posted at 05:40 | Category: HTML&CSS | 1 Comment

2008.04.09

インラインスタイルシートめも

HTML文書の要素に対してインラインスタイルシートを適用します。

<p style="font-size:16px; color:blue">16px、文字色青で表示</p>

pというセレクタのfont-sizeという属性に16pxという値と、colorという属性にblueという値を指示すると以下の様に表示されます。

16px、文字色青で表示

<span style="color : red">文字色を赤くします。</span>

spanというセレクタのcolorという属性にredという値を指示します。
文字色を赤くします。

<span style="color:#990099">SPANにはさまれた範囲は段落を
含んでいても紫色で表示します</span>

SPANにはさまれた範囲は段落を
含んでいても紫色で表示します

<div style="color:#990000; padding:5px; border:solid 3px #005600; ">
海老茶色で表示した範囲は段落を
含んでいても緑色の太い罫で囲まれます。</div>

海老茶色で表示した範囲は段落を
含んでいても緑色の太い罫で囲まれます。

Posted at 10:21 | Category: HTML&CSS | 1 Comment