XHTMLとCSSを使ったホームページ作成

XHTMLの基本要素

CSSの基本要素へジャンプ

総合ﾒﾆｭｰへ戻る

1-1 XHTMLの基本文型 1-5 画像の取込
1-2 XHTM宣言 1-6 リンクの利用
1-3 文書型宣言 1-7 表の基本
1-4 基本タグ 1-8 ひな形

基本文型
 <?xml veasion="1.0" encording="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>内容</title>
</head>
<body>
<h1>見出し</h1>
<p></p>
</body>
</html>
XHTM宣言 <?xml veasion="1.0" encording="Shift_JIS"?> 取合えず左記の宣言を記入しましょう。”型”です
文書型
宣言		 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 次の行に左記の宣言をします。これも"型”です。"http:以降は省略可能です。
ページトップへ ←XHTMLの基本要素
基本タグ html要素
<html>内容</html>

実際には名前空間、言語指定、HTML 互換の言語指定を行い次が標準となります。
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">内容</html>
 xmlns="http:/～/xhtml"→名前空間
xml:lang="ja"　→言語指定
lang="ja　→HTML 互換の言語指定
head要素
<head>内容</head>		 XHTMLファイル自身に関する情報を表示。title要素を一つ記入。
title要素
<title>内容</title>		 webページの最上段タイトルバーに表示される。
meta要素
<meta />
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />		 空要素です。文書の情報を記入します
左記の例は文字コードをShift_JISに指定しています。これも記入する。
次のmeta要素はcssを使用する場合に記入
body要素
<body>内容</body>		 このbody要素の中に「本文」を記述します。
hｎ要素(n=1～6） レベル１～6までの見出しがあります。文書の構造に合せて配置する。
p要素
<p>内容</P>		 内容ごとに段落を分けると構成が分かりやすくなる。
br要素
<br />		 改行を示す。エディタ上で改行してもWebには反映しない。
em要素
<em>内容</em>		 この要素内の文字は強調表示される。一般的に斜体
strong要素
<strong>内容</strong>		 この要素内の文字は、より強調表示、される。一般的に太字
ページトップへ ←XHTMLの基本要素
画像の
取込		 img要素
<img src="ファイルのパス" alt="代替テキスト" />		 src="ファイルのパス"→画像ファイルを指定：：alt="代替テキスト"→空白でも可、alt属性自体は省略不可
width属性、height属性
　width="幅" height="高さ"
<img src="image/fail_css.gif" width="164" height="96" alt="説明" />		 ピクセル単位で画像の幅、高さを指定
画像形式には、「.gif」、「.jpg]又は「.jpeg」がある。
「image」ﾌｫﾙﾀﾞ内にある「fail_css.gif」という画像ﾌｧｲﾙを 幅164ﾋﾟｸｾﾙ 高さ96ﾋﾟｸｾﾙで表示する。ｱｸｾｼﾋﾞﾘﾃｨとして「説明」という文字を alt属性に記入している
ページトップへ ←XHTMLの基本要素
リンクの
利用		 id属性→ﾗﾍﾞﾙをつける。
id="ｱﾝｶｰ名" name="ｱﾝｶｰ名"
 ｱﾝｶｰ名は文字列
大文字小文字を区別する。画像形式の拡張子が小文字であることを確認する。
a要素→ｱﾝｶｰを表す
<a href="ﾘﾝｸ先">内容</a>
 同じWebﾍﾟｰｼﾞ内のｱﾝｶｰにﾘﾝｸ指定するときは
「#ｱﾝｶｰ名」
<a href="#page_top">ｱﾝｶｰ名</a>
(ｱﾝｶｰ名ｸﾘｯｸでpage_topへ移動)
電子ﾒｰﾙｱﾄﾞﾚｽへのﾘﾝｸ→mailto:ｱﾄﾞﾚｽ
<a herf="mailto:qwer@tyui.co.jp">お問合せ</a>
(お問合せｸﾘｯｸでqwer@tyui.co.jpへ移動)
別のWebﾍﾟｰｼﾞのﾊﾟｽにﾘﾝｸ指定
<a href="topyuatu1.html">TOP</a>
(TOPｸﾘｯｸでtopyuatu1.htmlへ移動)
別のWebｻｲﾄにﾘﾝｸ指定
<a href="http://www.geo.jp/jeepj53/index.htm">
 Webｻｲﾄ</a>
(Webｻｲﾄｸﾘｯｸでhttp://www.geo.jp/jeepj53/index.htmlを開く)
参考
<a href="jigyou_seihin.html" target="_blank">
の様にtarget="_blank"で別ｳｨﾝﾄﾞｳにて表示できる
ページトップへ ←XHTMLの基本要素
表の
基本		 table要素
　<table>内容</table>		 表の説明 <table border=1> /*border="枠線の太さ":/
　<tr>　/*1行目*/
　　<td>1行1列</td>
　 <td>1行2列</td>
 　 <td>1行3列</td>
 　 <td>1行4列</td>
　</tr>
 　<tr>　/*2行目*/
　　<td>2行1列</td>
　 <td>2行2列</td>
 　 <td>2行3列</td>
 　 <td>2行4列</td>
　</tr>
 　<tr>　/*3行目*/
　　<td>3行1列</td>
　 <td>3行2列</td>
 　 <td>3行3列</td>
 　 <td>3行4列</td>
　</tr>
 　<tr>　/*4行目*/
　　<td>4行1列</td>
　 <td>4行2列</td>
 　 <td>4行3列</td>
 　 <td>4行4列</td>
　</tr>
 </table>
tr要素→表の行
　<tr>内容</tr>
tr要素→表の行
　<tr>内容</tr>
th要素→項目
　<th>内容</th>		 表の説明 <table border="1">
caption<タイトル表示>
<th>　/*1行目*/
　 <td>th行1列</td>
　 <td>th行2列</td>
 　 <td>th行3列</td>
 　 <td>th行4列</td>
</th>
<tr>/
　 <td>1行1列</td>
　 <td>1行2列</td>
　　　　　･
　　　　　･
　　　　　･
　 <td>4行3列</td>
　 <td>4行4列</td>
</tr>
</table>
caption要素
→タイトル
<CAPTION>
内容
</CAPTION>
rowspan
→行の結合
 表の説明
行や列の結合は、複雑になる。		 <table border="1">
<tbody>
<tr>
<td rowspan="2">1列の1行と2行を結合</td>
<td>1行2列</td>
<td>1行3列</td>
<td>1行2列</td>
</tr>
<tr>
<td>2行2列</td>
<td>2行3列</td>
<td>2行2列</td>
</tr>
<tr>
<td>3行1列</td>
<td>3行2列</td>
<td>3行3列</td>
<td>3行2列</td>
</tr>
<tr>
<td>4行1列</td>
<td>4行2列</td>
<td colspan="2">4行3列と4列を結合</td>
</tr>
</tbody>
</table>
colspan
→列の結合
ページトップへ ←XHTMLの基本要素
ひな形 <?xml veasion="1.0" encording="Shift_JIS"?>
<?xml veasion="1.0" encording="iso-2022-jp"?>
<?xml veasion="1.0" encording="euc-jp"?>
<!--以上XML宣言 どれか1個選択　Shift_JISが一般的-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<!--以上文書型宣言　目的に応じて上記どれか1個選択-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<!--以上名前空間の指定　　言語の指定　HTML互換属性考慮-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <!--文書情報titleより先に記入-->
<meta http-equiv="Content-Style-Type" content="text/css" /> <!--ｽﾀｲﾙｼｰﾄを使用する場合記入-->
<link rel="stylesheet" href="mystyle.css" type="text/css" /> <!--CSSﾌｧｲﾙ「mystyle.css」を関連付ける-->
<meta name="keywords" content="キーワード1,キーワード2,キーワード3" /> <!--検索ｴﾝｼﾞﾝ用ｷｰﾜｰﾄﾞ記入-->

<title>
ブラウザのタイトルバーに表示される内容
</title>
</head>

<body>
<div class="page"> <!--div要素でbodyをﾌﾞﾛｯｸ化　class名でｽﾀｲﾙｼｰﾄの.logo指定-->
<h1>見出し1</h1> <!--hn n=1～6　見出しレベルに応じて使い分ける-->
<p> 本文１</p> <!--pは段落記号-->
<a href="#page_top">ｱﾝｶｰ名</a>　<!--「ｱﾝｶｰ名」をｸﾘｯｸすると同じweb内のﾗﾍﾞﾙcsskisoにｼﾞｬﾝﾌﾟ-->
<a href="topyuatu1.html">TOP</a> <!--「TOP」をｸﾘｯｸすると別のWebｻｲﾄtopyuatu1にｼﾞｬﾝﾌﾟ-->
<a href="http://www.geo.jp/jeepj53/index.htm" target="_blank>Webｻｲﾄ</a>
<!--「Webｻｲﾄ」をｸﾘｯｸすると別のﾍﾟｰｼﾞにｼﾞｬﾝﾌﾟ　　target="_blankは別のｳｨﾝﾄﾞｳで開く場合に使用-->

<h2>見出し1</h2>
　　<address>
Copyright &copy; <!--address要素には会社名、著作権表示、問合せ先、更新日付等記載-->
</address>
</div><!--div class="page"に対応>
</body>
</html>

<!-- 写真、画像を取込むには 　<img src="ﾌｧｲﾙのﾊﾟｽ" width="xxx" height="yy" alt="ｷｰﾜｰﾄﾞ" /> 　とする-->
<!--改行は 　　　　<br /> 　　　　　　　　 とする-->
<!--強調 　　　　　<em>内容</em> 　　　　　とする-->
<!--より強い強調 　<strong>内容</strong> 　とする-->
<!-- 「<」→「&lt;] 「>」→「&gt;] 「&」→「&amp;] 「"」→「&quot;] 「ｺﾋﾟｰﾗｲﾄ」→「&copy;] -->

<!--別cssﾌｧｲﾙを使用せずに直接ｿｰｽに埋め込む例:<style type="text/css">body { background-color : black}</style>:-->
ページトップへ ←XHTMLの基本要素




CSSの基本要素

xhtmlの基本要素へジャンプ

総合ﾒﾆｭｰへ戻る

2-1 CSSとは CSSの記述方法 CSSﾌｧｲﾙの関連付け CSSﾌｧｲﾙの記述方法
2-2 ｽﾀｲﾙの指定 文字の色 背景画像の設定 フォント
行揃え&行間 ボックス
2-3 ｸﾗｽ名ｸﾞﾙｰﾌﾟ化 ｸﾗｽ名 ｸﾞﾙｰﾌﾟ化 span要素
2-4 ﾘｽﾄ及び回り込み リスト作成 回り込み
2-5 ﾘﾝｸのｽﾀｲﾙを指定 疑似クラス
2-6 段組を使ったｽﾀｲﾙ指定 段組の設定 ﾒﾆｭｰへの応用 ﾘﾝｸのｽﾀｲﾙ
参考 CSSの例
CSSとは
 文字のサイズ、背景、余白などの「スタイル」を記述するスタイルシート言語
「背景に色を付ける」、「段落を設定する」等、Webページのデザインを指定する
CSSの
記述場所		 xhtmlのﾌｫﾙﾀﾞ内に「css」ﾌｧｲﾙ」を作成し、その内にCSSのみ記述する。各々のWEBﾍﾟｰｼﾞと「link」要素を使って関連付ける。
(xhtmlｿｰｽ内に直接記述しても良い。)		 説明図１
CSSﾌｧｲﾙの
関連付け		 xhtmlｿｰｽの(head)要素内に下記記入
meta要素
 ｽﾀｲﾙｼｰﾄとしてCSSを指定 (meta http-equiv="Content-Style-Type" content="text/css" /)
link要素(空要素）
 CSSﾌｧｲﾙの関連付け
rel属性に「stylesheet」
href属性に「CSSのﾊﾟｽ」
type属性に「text/css」を指定
 (link rel="stylesheet&quot;" href="mystyle.css" type="text/css" /)
(mystyleはcssﾌｫﾙﾀﾞ内に作成したcssﾌｧｲﾙ名
参考 html内に直接記述
する場合は右の様に
する		 (style type="text/css")
(!--
　CSSを記述
--)
(/style)
CSSﾌｧｲﾙの
記述方法		 p{color:green}←p({ｾﾚｸﾀ、要素)color(ﾌﾟﾛﾊﾟﾃｨ):green(値)} [セレクタ」と「宣言」を使ってスタイルを指定
宣言はｽﾀｲﾙ属性を現す「ﾌﾟﾛﾊﾟﾃｨ」と対応する「値」を「{}」で囲んで記述し「:」(ｺﾛﾝ)で区切る。
p,h1{color:green} 複数のｾﾚｸﾀに同じ宣言を記述する。ｾﾚｸﾀを「,」(ｶﾝﾏ)で区切る
p{color:green;font-size:200%} 同じｾﾚｸﾀに複数の宣言を記述する。ｾﾚｸﾀを「；」(ｾﾐｺﾛﾝ)で区切る。
注：同じｾﾚｸﾀに同じﾌﾟﾛﾊﾟﾃｨで違う値をセットした時は、後に記述されたｽﾀｲﾙが優先
CSS記述上の注意
 ｾﾚｸﾀ､ﾌﾟﾛﾊﾟﾃｨ､「空白]、その他英数字&記号「例{}(),;:｣等は必ず半角・小文字にて記述
注釈ｺﾒﾝﾄ xhtml側 「(!--」と「--!)」で注釈やｺﾒﾝﾄを囲む
css側 「/*」と「*/」で注釈やｺﾒﾝﾄを囲む

ページトップへ←CSSの基本要素

ｽﾀｲﾙの指定
色の
組合せ		 原色大辞典リンク クリック→ 色のwebバナー nozさんのご好意(ﾘﾝｸﾌﾘｰ)に感謝します
文字の色と
文字の装飾class="ddffbb"		 文字の色colorﾌﾟﾛﾊﾟﾃｨ
 color:色
色の指定は
「基本16色の名前(yellow)」
「16進数(#ffff00)」
「rgb10進数(rgb(255,255,0))」
「rgb%指定(rgb(100%,100%,0))」で表す。
(子要素へ継承する。)		 例--黄色の時
color:yellow;
color:#ffff00;
color:rgb(255,255,0);

標準１６色の表示方法
文字の装飾
text-decoration
ﾌﾟﾛﾊﾟﾃｨ		 text-decoration:装飾
装飾は「none」(なし)
「underline」(下線)
「overline」(上線)
「line-through」(取消線
 (子要素へ継承しない。)
背景画像の設定 background-image
ﾌﾟﾛﾊﾟﾃｨ
背景画像指定		 background-image:背景画像
  • 背景画像に「none」(画像なし)
    または     url(xxx.gif)と記述
    (xxx.gif)は画像ﾌｧｲﾙ
 h1{
background-image:url(../image/linegif);
background-repeat:repeat-x}

見出しh1の背景に一つ上のﾌｫﾙﾀﾞ内(../)
に有るimageﾌｫﾙﾀﾞ内のline.gifを表示する。

その画像を縦方向に並べて表示する。
background-repeat
ﾌﾟﾛﾊﾟﾃｨ
　画像の並べ方		 background-repeat:並べ方
  • repeat[縦横に繰り返し表示（既定値）]
  • repeat-x[横方向にのみ繰り返し表示]
  • repeat-y[縦方向にのみ繰り返し表示]
  • no-repeat[繰り返し無し]
background-color
ﾌﾟﾛﾊﾟﾃｨ
　背景の色指定		 background-color:色
  • 全ての要素に適応可
  • 色には色の名前、「transparent」(透過）
background-attachment
ﾌﾟﾛﾊﾟﾃｨ
　画像の表示		 background-attachment:scroll　→背景画面はスクロールされる(規定値)

background-attachment:fixed 　→背景画面は固定されて表示
background-position
ﾌﾟﾛﾊﾟﾃｨ
　画像の配置位置		 left top 　　　画像は左上基準に配置（規定値）
center center　画像は中央基準に配置
x% y%　　　　　画像左から横x%、縦y%基準に並べられる
xpx ypx　　　　画像左から横xpx、縦ypx基準に並べられる
フォント font-sizeﾌﾟﾛﾊﾟﾃｨ
ﾌｫﾝﾄのｻｲｽﾞを指定		 font-size:ｻｲｽﾞ
  • font-size:150%
  • font-size:small
  • font-size:10pt etc.
 絶対指定
%,em,ex,px
ｷｰﾜｰﾄﾞ
xx-large,　x-large,　x-large,
large,　medium,　small,　x-small
絶対指定
mm,cm,in,pt,pc
font-weightﾌﾟﾛﾊﾟﾃｨ
ﾌｫﾝﾄの太さを指定		 font-weight:太さ
  • font-weight:400
  • font-weight:bold
 数値指定
100～900 (100刻み)
文字指定
normal　　(400相当)
bold　　　(700相当)
font-styleﾌﾟﾛﾊﾟﾃｨ
ﾌｫﾝﾄのスタイルを指定		 font-style:normal 又は italic normal→　通常体（規定値）

italic→　イタリック体
行揃え&行間 text-alignﾌﾟﾛﾊﾟﾃｨ
行揃えを指定		 text-align:位置
  • text-align:left
 left　　 (左揃え)→規定値
right　　(右揃え)
center　 (中央揃え)
line-heightﾌﾟﾛﾊﾟﾃｨ
行の高さを指定		 line-height:文字の高さ
  • text-height:140%
 説明図
letter-spacing
ﾌﾟﾛﾊﾟﾃｨ
文字間ｽﾍﾟｰｽ		 letter-spacing:normal
letter-spacing:1em
letter-spacing:1px 　等
ボックス
(子要素へは継承されない)		 説明図３
border (ﾎﾞｰﾀﾞｰ全て)
border-top (上)
border-right (右)
border-bottom (下)
border-left (左)

ﾌﾟﾛﾊﾟﾃｨ		 border-bottom:
太さ 種類 色

(太さ 種類 色）の間は半角空白で区切る)

border-top:6px dotted #fff000 		太さ 数値+単位
thin(細い)､medium(標準)
thick(太い)
種類 none(なし)，dotted(点線)
dashed(破線),solid(実線)
double(二重線)
色 rgbまたは色の名前
transparent(透過)
ﾎﾞｰﾀﾞｰを使った装飾 見出しh2に右図の装飾。
h2{border-left:10px solid #003366;
border-bottom:1px solid #003366}		 説明図４
「マージン指定」
margin:幅
margin-top:幅
margin-bottom:幅
margin-left:幅
margin-right:幅		 Webﾍﾟｰｼﾞ全体の余白
　ﾌﾞﾗｳｻﾞではWebﾍﾟｰｼﾞの周囲に余白が表示される。body要素のﾏｰｼﾞﾝとﾊﾟﾃﾞｨﾝｸﾞを「0」として実現する。

例 body{margin:0;padding:0}
「パッディング指定」
padding:幅
padding-top:幅
padding-bottom:幅
padding-left:幅
padding-right:幅

ページトップへ←CSSの基本要素

ｸﾗｽ名
ｸﾞﾙｰﾌﾟ化
 ｸﾗｽ名→ｽﾀｲﾙに付ける独自の名前。特定要素だけにｽﾀｲﾙを指定できる
ｸﾞﾙｰﾌﾟ化→複数の要素をｸﾞﾙｰﾌﾟ化し、ｸﾗｽ名を指定することでｽﾀｲﾙ指定ができる。
ｸﾗｽ名
ｽﾀｲﾙに付ける独自の名前。特定要素だけにｽﾀｲﾙを指定できる
 ｸﾗｽ名を使ってｽﾀｲﾙ指定→CSS側　
ｸﾗｽ名の前に「.」		 ｸﾗｽ名指定→xhtml側→class="ｸﾗｽ名"
例：ｸﾗｽ名「logo」の背景色を濃い青色に指定 例：画像sasuke.gifのp要素に左記「logo」指定
.logo{　　/**logoの前の.必須**/
　　　background-color:#003366
}		 (p class="logo")(img src="image/sasuke.gif" alt="註" /)(/p)
 　　xhtml側のlogoの前に「.」は不要
ｸﾞﾙｰﾌﾟ化
複数の要素をｸﾞﾙｰﾌﾟ化し、ｸﾗｽ名を指定することでｽﾀｲﾙ指定ができる		 div要素→要素をｸﾞﾙｰﾌﾟ化
(div)内容(/div)		 -
文書内等の特定箇所のスタイル span 要素
(span)内容(/span)		 p要素の「特売」の文字列にｸﾗｽ名「tokka」適用
(p)期間内、魚の(span class="tokka")特売(/span)です。(/p)
ページトップへ ←CSSの基本要素

リスト及び
回り込み
 ｸﾗｽ名→ｽﾀｲﾙに付ける独自の名前。特定要素だけにｽﾀｲﾙを指定できる
ｸﾞﾙｰﾌﾟ化→複数の要素をｸﾞﾙｰﾌﾟ化し、ｸﾗｽ名を指定することでｽﾀｲﾙ指定ができる。
リスト作成
 順不同リスト
  • このように行頭に記号を表示する
  • xhtmlｿｰｽに記入する場合
  • ul要素を記述(ul)(li)内容(/li)(/ul)
 (ul)
(li)このように行頭に記号(/li)
(li)xhtmlｿｰｽに記入(/li)
(li)ul要素を記述(ul)(li)内(/li)
 (/ul)
番号付きリスト
  1. このように行頭に番号記号を表示する
  2. xhtmlｿｰｽに記入する場合
  3. ol要素を記述(ol)(li)内容(/li)(/ol)
 (ol)
(li)このように行頭に記号(/li)
(li)xhtmlｿｰｽに記入(/li)
(li)ul要素を記述(ul)(li)内(/li)
 (/ol)
行頭文字の種類 list-style-type：種類
 種類
「none」(なし)
「disk」(●)
「square」(■)
「upper-roman」(ⅠⅡⅢ)
「decimal」(123)
「lower-alpha」(abc)
 		1.li要素に適用
2.ul要素やol要素に適用
するとli要素に適用される


css側
.li_none { list-style-type : none ; }

xhtml側
(ul class="li_none")
行頭文字に画像 list-style-image：画像 画像を指定する場合は
「url(画像ﾌｧｲﾙのﾊﾟｽ)」		 1.li要素に適用
2.ul要素に適用するとli要素に
適用される
list-style-image：
url(../../image/cat.gif)
回り込み
floatﾌﾟﾛﾊﾟﾃｨ		 説明図１ 説明図
float:left →文字は画像の右側 float:right →文字は画像の左側
回り込みの解除が必要
clearﾌﾟﾛﾊﾟﾃｨ		 clear:位置 回り込みの解除
位置[left](左に配置された要素への回り込み解除)
[right](左に配置された要素への回り込み解除)
[both](すべての回り込み解除)
[none](解除なし)
ページトップへ ←CSSの基本要素

ﾘﾝｸの
ｽﾀｲﾙを指定
 ﾘﾝｸの文字の色、ﾏｳｽでﾎﾟｲﾝﾄしたときのﾘﾝｸﾉ文字の色を指定できる。
ｾﾚｸﾀ「a」の後に「疑似ｸﾗｽ」を付けて記述。
疑似クラス
 :link 　→未訪問
:visited→訪問済
:hover　→ﾏｳｽでﾎﾟｲﾝﾄした状態
 .point a:link{color:#336699}　　　/*水色*/
.point a:visited{color:#666666}　/*薄い灰色*/
.point a:hover{color:#cc6699}　　/*赤紫色*/
ページトップへ←CSSの基本要素

段組を使って
ｽﾀｲﾙを指定
 段組を使ったHP作成
２段組
段組の設定
 説明図５
 1.div要素で各段の範囲を
ｸﾞﾙｰﾌﾟ化。ｸﾗｽ名指定
2.floatﾌﾟﾛﾊﾟﾃｨ
　widthﾌﾟﾛﾊﾟﾃｨで
　配置、ｻｲｽﾞ指定
CSS側
.page{
　width:800px;}
.main{
　float:right;
　width:650px}
.menu{
　float:right;
　width:650px}
xhtml側
(div class="page")
　(div class="main")
　内容(/div)
　(div class="menu")
　内容(/div)
(/div)
上記の
.menu部分
の設定		 説明図.menu ul{
　border-top:13px solid #003366;
　border-left:1px solid #003366;
　border-right:1px solid #003366;
　border-bottom:1px solid #003366;
　margin:0;padding:0}
.menu li{
　list-style-image:none;
　list-style-type:none;
　margin:0;
　lign-height:230%;
　text-align:center}
.kugiri{
　border-bottom:1px dotted #cccccc}
ﾘﾝｸのｽﾀｲﾙ 説明図
1.左記メニューのボックス内のどの部分をクリックしても
リンクできるようにdisplayﾌﾟﾛﾊﾟﾃｨを使用する。
　 　　　.menu a{
　　　　　display:block;
　　　　　width:100%;　/*IEでﾘﾝｸを有効にする*/
　　　　　color:#003366}/*濃い青色*/
2.ﾏｳｽの乗っているﾒﾆｭｰを色で示す。
　　　　　.menu a:hover{background-color:#ffff99}
　　　　　　　　/*薄い黄色*/
3.現在選択されているﾍﾟｰｼﾞを色で表示する。
　　　　　.select{background-color:#cccccc}/*薄い銀色*/
　　　　　　　　
(div class="menu")
(ul)
(li class="kugiri")(a href="topyuatu1.html")TOP(/a)(/li)
(li class="kugiri")(a href="kaisyaannnai.html")会社案内・ご挨拶(/a)(/li)
(li class="kugiri")(a href="kankyoutorikumi.html")環境方針(/a)(/li)
(li class="kugiri select")(a href="topyuatu1.html")事業内容(/a)(/li)
(li class="kugiri")(a href="toiawase.html")お問い合わせ先(/a)(/li)
(/ul)
(/div)
ページトップへ←CSSの基本要素

cssﾌｧｲﾙの例
h1{
background-image:url(../image/line.gif);
background-repeat:repeat-x;
color:#333333;
font-size:150%;
padding:5px;
margin-top:0 }
h2{
color:#003366;
font-size:120%;
border-left:10px solid #003366;
border-bottom:1px solid #003366;
padding-left:5px }
address{
color:#003366;
font-weight:bold;
font-size:70%;
text-align:right;
border-top:5px solid #003366;
clear:both }
p{
font-size:90%;
line-height:140% }
body{
margin:0;
padding:0;
background-color:#ffffff;
color:#333333 }
.logo{
background-color:#003366;
margin:0 }
.page{
width:700px }		 (body)
(div class="page")
本文
(/div)
(/body)		 (body)(/body)間に
(div)要素で記入
ﾍﾟｰｼﾞ全体の幅を
規定する
.photo{
float:right;
margin-left:10px }		 (p)(img src="image/title_logo1.jpg" alt="im" class="photo" /)説明文等(/p)
(p class="top)回り込み解除
(/p)
 回り込み
画像title_logo1.jpgを
右側に配置
本文は左側、画像との
隙間が10px
.top{
clear:both;
text-align:right }		 上記回り込みを解除
.clear {clear:both;}
.clear hr {display:none;}		 (div class="clear")(hr /)(/div) 上記回り込みを解除
(別法 個人的には
こちらが使いやすい）
table{
border-collapse:collapse;
border:1px solid #003366;
width:525px;
font-size:90%;
color:#003366 }
th{
background-color:#9999ff;
border:1px solid #003366;
padding:10px }
.rowitem{
background-color:#ccccff }
td{
border:1px solid #003366;
padding:10px }
caption{
font-weight:bold }
.point a:link{
color:#336699 }
.point a:visited{
color:#666666 }
.point a:hover{
color:#cc6699 }
.rowitem{
background-color:#ccccff }
a img{
border:0 }
.main{
float:right;
width:525px;
padding-top:10px;
padding-bottom:20px }
.menu{
float:left;
width:160px;
padding-top:10px;
padding-left:10px }
ul li{
list-style-image:url(../image/list.gif);
font-weight:bold;
margin-left:10px;
margin-bottom:10px }
.menu ul{
border-top:13px solid #003366;
border-left:1px solid #003366;
border-right:1px solid #003366;
border-bottom:1px solid #003366;
margin:0;
padding:0 }
.menu li{
list-style-image:none;
list-style-type:none;
margin:0;
line-height:230%;
text-align:center }
.kugiri{
border-bottom:1px dotted #cccccc }
.menu a{
display:block;
width:100%;
color:#003366 }
.menu a:hover{
background-color:#ffff99 }
.select{
background-color:#cccccc }

ページトップへ←CSSの基本要素

Copyright © oohashi_giken