WEBのテーブルをCSSで指定する。
ホームページやブログで表などを表示するときに table(テーブル)を使います。
CSSで指定すると良い感じにできるんですよ。
<table class="table01">
<tbody>
<tr>
<th>WEBおぼえがき</th>
<td>テーブルを良い感じに</td>
</tr>
<tr>
<th>WEBおぼえがき</th>
<td>テーブルを良い感じに</td>
</tr>
</tbody>
</table>
上記のように入力すると下記のように表示されます。
WEBおぼえがき |
テーブルを良い感じに |
---|
WEBおぼえがき |
テーブルを良い感じに |
---|
もう少し スマートな感じに
<table style="border-style: solid; border-width: 1px 0 0 0;
border-color: #666 #fff #666 #fff; border-spacing: 0;">
<tbody>
<tr>
<th style="padding: 8px; border: #666 solid; border-width: 0 0 1px 0;
background: #ccc; color: #000; font-weight: bold;">WEBおぼえがき</th>
<td style="padding: 8px; border-style: solid; border-width: 0 0 1px 0;
border-color: #666 #fff #666 #fff; color: #000;">テーブルを良い感じに</td>
</tr>
<tr>
<th style="padding: 8px; border: #666 solid; border-width: 0 0 1px 0;
background: #ccc; color: #000; font-weight: bold;">WEBおぼえがき</th>
<td style="padding: 8px; border-style: solid; border-width: 0 0 1px 0;
border-color: #666 #fff #666 #fff; color: #000;">テーブルを良い感じに</td>
</tr>
</tbody>
</table>
上記のように入力すると下記のように表示されます。
WEBおぼえがき |
テーブルを良い感じに |
---|
WEBおぼえがき |
テーブルを良い感じに |
---|
外部のスタイルシートを使う場合は
CSSは、
.table01 { border-style: solid; border-width: 1px 0 0 0; border-color: #666 #fff #666 #fff; border-spacing: 0;}
.table01 th { padding: 8px; border: #666 solid; border-width: 0 0 1px 0; background: #ccc; color: #000; font-weight: bold;}
.table01 td { padding: 8px; border-style: solid; border-width: 0 0 1px 0; border-color: #666 #fff #666 #fff; color: #000;}
htmlは、
<table class="table01">
<tbody>
<tr>
<th>WEBおぼえがき</th>
<td>テーブルを良い感じに</td>
</tr>
<tr>
<th>WEBおぼえがき</th>
<td>テーブルを良い感じに</td>
</tr>
</tbody>
</table>
色々と面白そうな表が出来そうな感じがしませんか?
試してみてくださいね。
HTMLでラインを引く時に
<hr>
って指定するとラインが引けます。
そのラインをCSSで指定できるんですね。
直接CSSをHTMLに入力しても使えます。
<hr style="border-width: 1px 0px 0px 0px; border-style: dotted;
border-color: #000000; height: 1px;">
HTML
<hr class="s001">
スタイルシート
hr.s001 { border-width: 1px 0px 0px 0px; border-style: dotted;
border-color: #000000; height: 1px; }
上記のように設定するんです。
s001の所の名前を替えて設定するといろいろな線を設定しておけるんですね。
border-styleの部分は、線の設定なので、下記に入れ替えると簡単に変わるんで使えますね。
solid
1本線で表示。
double
2本線で表示。
dashed
破線で表示。
dotted
点線で表示。
border-colorの部分は、線の色の指定です。
→
WEBの色見本 何種類か用意しておくとWEB制作中にいろいろな場面で使えるんですね。
プルダウンをyoutubeの上に表示する為には、どうすればいいの?
マウスが乗ったら右側に表示するようなボタンを作った場合。
Youtubeをそのまま右側に挿入すると、Youtubeにボタンが隠れちゃうんです。
ではどうすればよいのか?
下記のようにすれば、表示されますね。
大きさは、自由に調整してくださいね。
<object width="500" height="350">
<param name="movie" value="http://www.youtube.com/v/youtubeのコード" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="wmode" value="transparent" />
<embed width="500" height="350" allowscriptaccess="always"
src="http://www.youtube.com/v/youtubeのコード" type="application/x-shockwave-flash"
wmode="transparent" allowfullscreen="true">
</embed></object>
フラッシュの場合も同じようになりますので、この方法は使えますね。