HTML vol.6

Study, html

• tableタグについて
• css vol.1

table

表組をHTMLで書くために必要。

	4日	5日
てんき	はれ	くもり
おんど	10	20

↑を作る。

http://www.kanzaki.com/docs/html/htminfo16.html

一番外枠がtableタグ

てんきの行を囲むのがtrタグ

はれ等の内容を囲むのがtdタグ

実際に書いてみる。

<table border="1">
  <tr>
    <td>名前</td>
    <td>入社歴</td>
    <td>好きな食べ物</td>
  </tr>
  <tr>
    <td>hasumi</td>
    <td>3</td>
    <td>カレー</td>
  </tr>
  <tr>
    <td>hirafuji</td>
    <td>2</td>
    <td>カレー</td>
  </tr>
  <tr>
    <td>kido</td>
    <td>2</td>
    <td>カレー</td>
  </tr>
</table>

名前	入社歴	好きな食べ物
hasumi	3	カレー
hirafuji	2	カレー
kido	2	カレー

※上記の表ははてな記法で書いてます。

trやtdがずれると表示が崩れるので注意。

定義の部分はthで書く。

<table border="1">
  <tr>
    <th>名前</th>
    <th>入社歴</th>
    <th>好きな食べ物</th>
  </tr>
<!-- 以下、同じなので省略 -->

名前	入社歴	好きな食べ物
hasumi	3	カレー
hirafuji	2	カレー
kido	2	カレー

※上記の表ははてな記法で書いています。

セルの結合

• rowspan
  • 列の結合
• colspan
  • 行の結合

<table border="1">
  <tr>
    <th>名前</th>
    <th>入社歴</th>
    <th>好きな食べ物</th>
  </tr>
  <tr>
    <td colspan="3">hasumi</td>
  </tr>
  <tr>
    <td>hirafuji</td>
    <td rowspan="2">2</td>
    <td rowspan="2">カレー</td>
  </tr>
  <tr>
    <td>kido</td>
  </tr>
</table>

行のグループ化

• thead
  • ヘッダ要素
• tbody
  • ボディ要素
• tfoot
  • フッタ要素

印刷とかjsとかで必要。

<table border="1">
  <thead>
    <tr> 
      <th>名前</th>
      <th>入社歴</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>hasumi</td>
      <td>3</td>
    </tr>
    <tr>
      <td>hirafuji</td>
      <td rowspan="2">2</td>
     </tr>
    <tr>
      <td>kido</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>footer</td>
      <td>footer</td>
    </tr>
  </tfoot>
</table>

表に名前をつける

• caption

<table border="1">
  <caption>dino.co.jp</caption>
  <thead>
//以下省略

CSS vol.1

• CSS Editインストール
• cssZenGardenを見る。

CSS Edit

MacRabbit - Espresso - The Web Editor

cssZenGardenでCSSの偉大さを見てみる。

css Zen Garden: The Beauty in CSS Design

CSSを書き写してみる。

//metaタグ内に
<link href="CSSファイル名" rel="stylesheet" type="text/css" />

とやると反映される。

ちゃんとしたHTMLを書くことが大事。

スタイルシートとはなにか？

http://www.kanzaki.com/docs/html/htminfo17.html

スタイルシートのメリット

• 簡単にデザインが替えられる。

CSS

p { color:red; }

セレクタ	p
宣言	{}で囲んだ内容
プロパティ	color
値	red

外部ファイルによるスタイル設定

1. セレクタと宣言を記述したテキストファイルを拡張子cssにして保存。
2. headにlink属性で外部ファイルを読み込む。

<link rel="stylesheet" href="CSSファイルの場所" type="text/css" />

これによって

• サイトデザインを一気に書き換えられる。

Permalink | コメント(0)