コツコツ*ワンダーコトン!
ちょこっと かわいいもの
みょうなもの 発見するの、すきであります!
<< March 2024 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 >>
スポンサーサイト

一定期間更新がないため広告を表示しています

- | URL | -
HTML+CSS vol.5 tableタグ編3

table講座    「背景色・背景画像」 です。

背景色 ・ 背景画像
 背 景 色 → bgcolor="色コード"
 背景画像 → background="画像url"
 table tr td 指定。但し、backgroundは tr は 不可。

まずは、背景色!

■ 例1 table (全体) に指定

ワンツースリ
ワワンツツースリー

<table bgcolor="lightyellow" border="1">
 <tr>
  <td>ワン</td>
  <td>ツー</td>
  <td>スリ</td></tr>
 <tr>
  <td>ワワン</td>
  <td>ツツー</td>
  <td>スリー</td></tr>
</table>

■ 例2 tr (行) に指定

ワンツースリ
ワワンツツースリー

<table border="1">
 <tr bgcolor="lightyellow">
  <td>ワン</td>
  <td>ツー</td>
  <td>スリ</td></tr>
 <tr>
  <td>ワワン</td>
  <td>ツツー</td>
  <td>スリー</td></tr>
</table>

■ 例3 td (セル)に指定

ワンツースリ
ワワンツツースリー

<table border="1">
 <tr>
  <td bgcolor="lightyellow">ワン</td>
  <td>ツー</td>
  <td>スリ</td></tr>
 <tr>
  <td>ワワン</td>
  <td bgcolor="lightyellow">ツツー</td>
  <td>スリー</td></tr>
</table>

つぎに、背景画像!

■ 例1 td (セル) に指定 + サイズ指定

ツースリ

<table border="1">
 <tr>
  <td background=".gif (.jpg) " width="88" height="31"></td>
  <td>ツー</td>
  <td>スリ</td>
 </tr>
</table>

■ 例2 table (全体) に 指定
タイリングしてしまうので、画像の大きさは テーブルと同じがいいかな。


<table background=".gif (.jpg) " width="300" height="70" border="1">
 <tr>
  <td></td>
 </tr>
</table>

■ 例3 +画像の 繰り返し指定
CSS指定することで、上の例を
画像を 繰り返さない指定 (no-repeat) や
横方向 (repeat-x) 、縦方向 (repeat-y) の指定も できます。


<table style="background-repeat: repeat-x" width="300" height="70"
background=".gif (.jpg) " border="1">
 <tr>
  <td></td>
 </tr>
</table>

次回 table講座 vol.4は、
表示位置・文章の回り込みについて の予定。
* Windows IE 及び JUGEMで 検証しています。
違う環境では、同じようにならないことがあります。 ご了承下さい。
ブログ編集 HTML+CSS | URL | comments(0)
HTML+CSS vol.4 tableタグ編2!

table講座   「幅・高さの指定」 です。

幅・高さ
 幅 → width="" 高さ → height=""
 指定できる タグは、table と td に対して。
 "" に入るのは、数値(px)、% など。
 tdに % 指定すると、tableの幅に 対する割合と なります。
 widthは table指定、heightは td指定が、優先されます。


■ 例1 px 指定
 表全体に、幅 300px、高さ 50pxを 指定。
 +左端セルの幅 150px。

 残り2つのセルは、残った150pxで 等分されていますね。
 (但し、入れる内容で、可変します。)
 今回も、わかりやすくするため、枠線入りです。
 <table border="1">

トコトコテクテクハラハラ

<table border="1" width="300" height="50">
 <tr>
  <td width="150">トコトコ</td>
  <td>テクテク</td>
  <td>ハラハラ</td>
 </tr>
</table>

■ 例2 %指定 + 優先順位
 次に、上と同じ表を %指定 します。左端のセルの幅を 70%
 全体に対して、左端のセルが 7割になってるかな。

 +さらに、左端セルの 高さ 70px に指定。
 tableに 高さ50px 入れていますが、tdの高さ 70pxになりました。
 幅 widthは table指定、高さ heightは td指定が 優先です。

トコトコテクテクハラハラ

<table border="1" width="300" height="50">
 <tr>
  <td width="70%" height="70">トコトコ</td>
  <td>テクテク</td>
  <td>ハラハラ</td>
 </tr>
</table>

次回 table講座 vol.3は、背景色・背景画像について です。
* Windows IE 及び JUGEMで検証しています。
違う環境では、同じようにならないことがあります。 ご了承下さい。
ブログ編集 HTML+CSS | URL | comments(0)
HTML+CSS vol.3 tableタグ編1
ミニ講座 第3回は、tableタグについて です。
サイトの レイアウトに よく使われる tableですが
ブログでも、表として 活躍できます。
(JUGEM ・ FC2 ・ Ameblo ・ Seesaa は 使えるようです。)
細かい情報を伝える時に、わかりやすいかな。
tableについては 4-5回に分けて 書いていきます。

では、table講座 「基本 + 横・縦のセルの 合体」 です。

まずは 基本セット
<table>
 <tr>
  <td></td>
 </tr>
</table>

<table></table> = テーブル(表)セット
<tr></tr> = 1行 *table row の略
<td></td> = 1列  *table dataの略 またはセル
tableの中に trがあり、trの中に tdがあります

注: JUGEMでは 記事の投稿を 自動改行に設定している場合
   タグの間に 改行やスペースが入ると
   記事に むやみに スペースが あいてしまいます。
注: アメブロでは 勝手に tableの中に
   <tbody></tbody> が 入ります。

  (1行3列)
わかりやすいように 枠線をつけます。<table border="1">

ワンツースリー

<table border="1">
 <tr>
  <td>ワン</td>
  <td>ツー</td>
  <td>スリー</td>
 </tr>
</table>

  (2行3列)
行をふやす場合、<tr></tr> のセットを 追加します。

1行1列1行2列1行3列
2行1列2行2列2行3列

<table border="1">
 <tr>
  <td>1行1列</td>
  <td>1行2列</td>
  <td>1行3列</td>
 </tr>
 <tr>
  <td>2行1列</td>
  <td>2行2列</td>
  <td>2行3列</td>
 </tr>
</table>

  (横方向のセルの合体)
td colspan= に 融合させたいセルの数字を 入れます。

1行1列1行2列
2行1列2行2列2行3列

<table border="1">
 <tr>
  <td colspan="2">1行1列</td>
  <td>1行2列</td>
 </tr>
 <tr>
  <td>2行1列</td>
  <td>2行2列</td>
  <td>2行3列</td>
 </tr>
</table>

  (縦方向のセルの合体)
td rowspan= に 融合させたいセルの数字を 入れます。

1行1列1行2列1行3列
2行1列2行2列

<table border="1">
 <tr>
  <td rowspan="2">1行1列</td>
  <td>1行2列</td>
  <td>1行3列</td>
 </tr>
 <tr>
  <td>2行1列</td>
  <td>2行2列</td>
 </tr>
</table>

他の 細かい設定は、次回 tableタグ編2に 続きます。
* Windows IE 及び JUGEMで 検証しています。
違う環境では、同じようにならないことがあります。 ご了承下さい。
ブログ編集 HTML+CSS | URL | comments(0)
HTML+CSS vol.2 色をつける!
色をつける代表は、文字や背景色。
まずは 記事の文字ですが、次のタグです。
<font color=""></font>
例 <font color="#87ceeb">スカイブルー</font>
→ スカイブルー

カラーの指定は、#ではじまる 6桁の カラーコード。
他に、色の名前を 入れることもできます。
上の例では、#87ceeb の箇所に skyblue でもOK。

アンダーラインの 色の指定の例は
<font color="#87ceeb"><u>スカイブルー</u></font>

リンクの箇所の 色の指定の例は
<a href=""><font color="#87ceeb">スカイブルー</font></a>

タグセットは、他のタグセットを 包みます。
<font><u></u></font>は ○だけど
<font><u></font></u>は ×なのです。


CSS編集では、#コードを見つけて、他の色に変えてみましょう。

body { color : #87ceeb; } 全体の文字色
body { background-color : #ffffff; }  全体の背景色

a { color : hotpink; }  リンクの色
a:visited { color : skyblue; }  訪問済のリンクの色
a:hover { color : skyblue; }  カーソルを重ねた時のリンクの色

重要なのは、背景色と文字色の バランス、可読性。
うすい背景色には、濃いめの文字色。
黒の背景色には、白い文字、というような。
白い背景に、黄色の文字で書くと
あ、あぶり出し!? ってことに なりかねません。あぶり出し ねっ!

カラーコードは こちらのサイト →   ご参照下さい。

私は 「web配色事典*セーフカラー編」 愛用しています。
お気に入りの色を コード表にして、いつのまにか 覚えてしまってます。
色の組み合わせも 参考になります。
さらに 色について 知りたくなったら、フルカラー編

Web配色事典―セーフカラー編   Web配色事典―フルカラー編


次回から、tableタグ(表)について、書こうと思います。
ブログ編集 HTML+CSS | URL | comments(0)
HTML+CSS編集 vol.1
ブログも、HTML や CSS を 編集すると
自分仕様にでき、個性が出せて、楽しいですよね。
私は、サイトを 作るつもりで (まだ未完成)
HTMLとCSSの 勉強を ちょこっとしたのが
ブログの記事 や カスタマイズに 役立っています。

編集して 保存したあとは、
コピーして 自分のPCにも、メモ帳などで 保存しておくと
うっかりの時に、初期値にまで 戻さなくてすみます。

さて、第1回は、簡単に HTMLとCSSの違い を。

■ HTMLとは

HTMLとは、いわゆるタグ と 呼ばれる言語で
いろいろな命令を 出すことができます。
構成は、<要素名 属性>と</要素名>

例えば、
<font size="+1">ここを1段大きな文字に</font>
と記述すると ↓
ここを1段大きな文字に
 
この例では、fontが 要素名
size="+1"が 属性と呼ばれ、属性は"と"で囲みます。
要素名と 属性の間は、半角スペース。


</要素名>のことを、終了タグと呼び、省略できません。
* 但し、br(改行)と、img(イメージ)タグは 例外です。

■ CSSとは

CSSでは、見た目の デザインを 設定できます。
代表的なところでは、
文字の大きさ、色、背景の設定、線などです。
HTMLでも 同様の設定が できますが、
CSSで指定することで、タグがすっきり、わかりやすくなります。

構成は、セレクタ { 属性 : 値 ; }
(わかりやすく半角スペースを入れてありますが、必要ありません)

例えば、body {color : red;} と 記述すると、
文字色を 赤に指定 できます。(bodyは 全体のこと)

セレクタには、いろいろな種類が ありますが、
HTMLのタグの 要素名と、
特定の名前をつけられた クラス名 (.ピリオドで始まる)
が代表でしょうか。

次回は、文字の色を変える について、書きます。

基本の解説書は、1冊あると、ブログユーザーも便利ですよ。
↓ ちなみに、私はこれを 持っています。

C&R研究所 HTML+CSS Handbook

ブログ編集 HTML+CSS | URL | comments(0)
Next | ↑PAGE TOP | Pre


【NDS】ニュー・スーパーマリオブラザーズ5月25日発売予定!
【NDS】ニュー・
スーパーマリオブラザーズ
5月25日発売予定!

Nintendo DS Lite
最安値は?
 →
   - Hit Ranking -
  アフィリエイト部門
 No.1 LinkShare
 No.2 アドリンク
 No.3 楽天アフィリエイト

   アンケート部門
 No.1 マクロミル
 No.2 mpack
 No.3 iMiネット

  メールポイント部門
 No.1 ECナビ
 No.2 ネットマイル
 No.3 だぶるくりっく


DVD&CDレンタル
月1980円 借り放題。
モバイルからも 予約できる DMM
1ヶ月無料キャンペーン中。




アフィリエイト系ブログ

お気に入りブログ

世界標準のブログソフトウェア「Movable Type」発売中
Movable Type 3.2
日本語版発売中!!