HTML・CSSリファレンス

①４カラムのレイアウト
head内への書き方


<head>
 <style type="text/css">
   div#outline{
   width:800px;
   margin:0px auto;
   }

   div#left_2{
   width:400px; 
   float:left;
   }

   div#left_1{
   width:200px;
   float:left;
   }

   div#right_2{
   width:400px; 
   float:left;
   }

   div#right_1{
   float:left;
   width:200px;
 </style>
</head>

body内への書き方


<body>
 <div id="outline">　
  <div id="left_2">
    <div id="left_1">１番左のカラム</div>
    <div id="right_1">左から２番目のカラム</div>
  </div>

  <div id="right_2">
    <div id="left_1">右から２番目のカラム</div>
    <div id="right_1">１番右のカラム</div>
  </div>
</body>

# by tanakapuna | 2010-12-27 05:36

CSSを使った３カラムのレイアウト

①３カラムのレイアウト
head内への書き方


<head>
 <style type="text/css">
   div#outline{
   width:900px;
   margin:0px auto;
   }

   div#left_2{
   width:600px; 
   float:left;
   }

   div#left_1{
   width:300px;
   float:left;
   }

   div#right_1{
   float:left;
   width:300px;
 </style>
</head>

body内への書き方


<body>
 <div id="outline">　
  <div id="left_2">
    <div id="left_1">左のカラム</div>
    <div id="right_1">中心のカラム</div>
  </div>
    <div id="right_1">右のカラム</div>
 </div>
</body>

# by tanakapuna | 2010-12-27 05:32

CSSのクラス設定

①CSSのクラス設定
例１）様々な種類のフォントをクラス設定を用いて使い分ける
head内への書き込み


<head>
 <style type="text/css">
   p.red { color: red;
           font-size:16px;}

   p.blue { color: blue;
            font-size:10px;}
 </style>
</head>

body内への呼び出し


<body>
 <p class="red">赤色で表示</p>
 
 <p class="blue">青色で表示</p>
</body>

このクラス設定はdiv要素等、様々なタグで応用することができる

# by tanakapuna | 2010-12-27 04:13

CSSの書き方<外部>

①CSSを外部から読み込む


<head>
 <link rel="stylesheet" href="1.css" type="text/css" />
</head>

**.cssファイルへは以下のように書く


body { background-color:#fff;
       color:#999;
       font-size:10px;}

cssファイルはDreamweaver等でも作成可能だが、
テキストエディットを**.cssと変更して作成することも可能

# by tanakapuna | 2010-12-27 04:00

CSSの書き方<head内>

①スタイルシートの書き方
<head>内に書き込む


<head>
 <style type="text/css">
   body { background-color:#fff;
          color:#999;
          font-size:10px;}
 </style>
</head>

# by tanakapuna | 2010-12-27 03:50

< 前のページ

次のページ >

HTML
基本
・背景の設定
・改行
・画像をはりつける

<table>テーブル
・テーブル設定の基本
・TDのマウスオーバー

<a>リンク
・外部サイトへのリンク
・サーバー内へのリンク
・ページ内のリンク
・メールアドレスへリンク
・リンクの色を変える

CSS
基本
・CSSの書き方<head内>
・CSSの書き方<外部>
・クラス設定

<div>ブロック
・３カラムレイアウト
・４カラムレイアウト

<table>テーブル
・テーブルのCSS設定

<a>リンク
・リンクのCSS設定
・リンクの下線を消す
・ポイント中の設定

検索

カテゴリ

全体
テーブル
リンク
本

以前の記事

2010年 12月
2008年 05月
2008年 03月
2008年 02月
2007年 11月
2007年 09月
2005年 11月
2005年 10月
2005年 09月
2005年 08月
2005年 07月
2005年 06月
2005年 05月
2005年 04月

おすすめキーワード（PR）

ファン

【PR】早い者勝ち？
販売予定新築マンション特集

XML | ATOM

skin by tanakapuna