スタイルシート

スタイルシートの基本

スタイルシートの定義方法

別のファイルに記述する場合

<HEAD>
  <META http-equiv=Content-Language content=ja>
  <META http-equiv=Content-Type content="text/html; charset=shift_jis">
  <LINK href="./css/common.css" type=text/css rel=stylesheet>
  <LINK href="./css/layout.css" type=text/css rel=stylesheet>
</HEAD>
./css/common.css
  /* common.css */
  table{
    background-color:   #FFFFFF;
    border:             solid 1px #0000F0;
    border-collapse:    collapse;
    border-spacing:     0px;
    padding:            0px;
    margin:             0px;
  }
  
  td{
    padding:            1px 1px 1px 3px;
    margin:             0px;
    border:             solid 1px #0000F0;
    color:              #333333;
    background-color:   #FFFFFF;
    text-align:         center;
    vertical-align:     middle;
    font-size:          12px;
    font-family:        'MS ゴシック','sans-serif';
  }

同じファイル内に記述する場合

<HEAD>
  <META http-equiv=Content-Language content=ja>
  <META http-equiv=Content-Type content="text/html; charset=shift_jis">
  <META http-equiv=Content-Style-Type content=text/css>
  <STYLE type=text/css>
  table{
    background-color:   #FFFFFF;
    border:             solid 1px #0000F0;
    border-collapse:    collapse;
    border-spacing:     0px;
    padding:            0px;
    margin:             0px;
  }
  
  td{
    padding:            1px 1px 1px 3px;
    margin:             0px;
    border:             solid 1px #0000F0;
    color:              #333333;
    background-color:   #FFFFFF;
    text-align:         center;
    vertical-align:     middle;
    font-size:          12px;
    font-family:        'MS ゴシック','sans-serif';
  }
  </STYLE>
</HEAD>

個別のタグに記述する場合


プロパティ:値;プロパティ:値 の形式で記述する
<table style="background-color: #FFFFFF; border: solid 1px #0000F0">
 <tr>
   <td style="border:solid 1px #0000F0;"></td>
   <td style="border:solid 1px #0000F0;"></td>
 </tr>
</table>

スタイルシートの指定方法

class指定


タグ名.クラス名 の形式で記述する

table.normal {
  background-color:   #FFFFFF;
  border:             solid 1px #0000F0;
  border-collapse:    collapse;
  border-spacing:     0px;
  padding:            0px;
  margin:             0px;
}

td.normal {
  padding:            0px;
  margin:             0px;
  border:             solid 1px #0000F0;
  color:              #333333;
  background-color:   #FFFFFF;
}

<table class="normal">
  <tr>
    <td class="normal"></td>
    <td class="normal"></td>
  </tr>
</table>

クラス名を省略すると全てのタグに適用される

tablel {
  background-color:   #FFFFFF;
  border:             solid 1px #0000F0;
  border-collapse:    collapse;
  border-spacing:     0px;
  padding:            0px;
  margin:             0px;
}

td {
  padding:            0px;
  margin:             0px;
  border:             solid 1px #0000F0;
  color:              #333333;
  background-color:   #FFFFFF;
}


h1 {
  font-size:         14pt;
}

h2 {
  font-size:         12pt;
}


      Document-Folder          一覧
HP-UX
HULFT
JAVA
JP1
JavaScript
Linux
MAC
PHP
Perl
Python
Ruby
SOA
Solaris
Unix全般
Windows
XML
エクセル
スタイルシート
セキュリティー
データベース
ネットワーク
パソコン
ブラウザ
プログラム構文
仮想化
          RSS-Folder
ニュース
   アットマーク・アイティ(@IT)
   シンクイット(ThinkIT)
   インターネットコム
   インターネットウォッチ
   日経IT-Pro
   日経パソコン
   CNET Japan
   ZD-NetJapan
   MYCOM
   RBB-Today
ベンダー
   日本IBM
   日本HP
   サンマイクロシステムズ
   NEC
   富士通
   日立
ソフトウェア
   マイクロソフト
   トレンドマイクロ
   オラクル
   サイボウズ
   Mozilla
   野村総合研究所
   (その他ソフトウェア企業)
更新履歴 一覧
 07/08 PERF
プログラム構文
 07/07 PERF
プログラム構文
 06/25 オブジェクトプログラミング2
Perl>サンプル
 07/12 クローン作成
仮想化>vCenter
 07/12 vyatta設定
ネットワーク>vyatta
 07/12 vyattaインストール
ネットワーク>vyatta
 07/12 リポジトリサーバ
Linux>サーバ構築
 07/05 VMwareのインストール
仮想化>VMware
 07/05 PXEブート
仮想化>KVM
 07/01 DHCPでのPXEブート
仮想化>KVM
 06/27 qcow2仮想DISK作成
仮想化>KVM
 06/13 NWの設定
仮想化>VMwareEsxi
 06/13 IPアドレスの変更
仮想化>VMwareEsxi
 06/12 自動ssh
Unix全般>シェル>Bash
 06/12 diffプログラミング
Python
Google