Top > HTMLとスタイルシート

HTMLとスタイルシート

JavaからJDBCによるデータベース接続ができたところでWEBアプリケーションを作成しようと思ったけどHTMLがある程度わかっていないと先にすすめない・・・というわけで駆け足でHTMLとスタイルシートについてまとめていく。

HTML

HTMLは Hyper Text Markup Language の略。

HTMLのバージョンについて

HTMLの最新バージョンは HTML4.01であるが、Transitionalという亜種が存在する。Transitionlでないバージョンは strictと呼ばれるらしいがTransitionalに比べると制約が多い。例えば。。。

  • フレームが使えない
  • <CENTER>タグが使えない
  • <FONT>タグが使えない
  • <TD>タグでサイズ指定ができない
  • <BODY>の直下には<P>や<DIV>といったブロック要素を必ず設定する必要がある

などなど、基本的にスタイルシートを使用しなければならないようだ。

HTMLファイルの宣言

HTMLファイルでは、ファイルの先頭部で以下の書式で宣言を行う。

[HTML4.01の場合]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""
    "http://www.w3.org/TR/html4/strict.dtd">

[HTML4.01 Transitionalの場合]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""
    "http://www.w3.org/TR/html4/loose.dtd">

開始タグ

HTMLにおける開始タグでは、要素タイプに続けて属性を指定する。属性名と属性値はイコール = でつなぎ、属性値はダブルコーテーションで囲むルールがある。

<[要素タイプ名] [属性名]="[属性値]" [属性名]="[属性値]" >

HTMLにおける特殊文字の指定方法

HTML内で特殊文字を入力する場合は、&と;とで囲んだキャラクタリファレンスという書式で指定を行う。以下、よく使われるキャラクタリファレンス。

記号エンティティ
空白 
<<
>>
&&
""

よく考えたらこのページもHTMLなのでエンティティの値は特殊文字に変換されてしまう。 (^^; というわけで全角文字で表現してみる。

記号エンティティ
空白&nbsp;
<&lt;
>&gt;
&&amp;
"&quot;

コメント

HTMLにおけるコメントは、"<!--"と"-->"で囲む

<!-- コメント -->

スタイルシート

スタイルシートとは、文章とデザインを分離する考え方である。

<HEAD>にスタイルを定義する

  0
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""
    "http://www.w3.org/TR/html4/strict.dtd">
 
<HTML>
 	 <HEAD> 
 	 	<TITLE>HTML Sample</TITLE>
 	 	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Windows-31J">
 	 	<STYLE TYPE="text/css">
 	 		<!-- スタイル1 -->
 	 		P.s1{font-size:14pt;}
 	 		<!-- スタイル2 -->
 	 		P.s2{font-size:8pt;background-color:#DDDDCC;padding:10px;}
  		</STYLE>
 	 </HEAD>
 	 <BODY> 
 	 	<H1>見出し</H1>
 	 	<P CLASS="s1">スタイル1 こんにちは</P>
 	 	<P CLASS="s2">スタイル2 さようなら</P>
 	 </BODY>
</HTML>

実行結果

スタイルシートの設定をファイルから読み込む

スタイルの定義を専用のCSSファイルで行い、HTMLでスタイルを呼び出して利用することでスタイルシートを汎用的に実装できる。

  1
  2
  3
  4
  5
 
 
 
 
 
<!-- スタイル1 -->
P.s1{font-size:14pt;}
 
<!-- スタイル2 -->
P.s2{font-size:8pt;background-color:#DDDDCC;padding:10px;}
  0
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""
    "http://www.w3.org/TR/html4/strict.dtd">
 
<HTML>
 	 <HEAD> 
 	 	<TITLE>HTML Sample2</TITLE>
 	 	<LINK REL="stylesheet" TYPE="text/css" HREF="style.css">
 	 </HEAD>
 	 <BODY> 
 	 	<H1>見出し</H1>
 	 	<P CLASS="s1">スタイル1 こんにちは</P>
 	 	<P CLASS="s2">スタイル2 さようなら</P>
 	 </BODY>
</HTML>

実行結果

CSSファイルにブロック領域を定義する

ブロック領域とはページのレイアウトをいくつかのブロックに分割し、それぞれのブロック領域に罫線やフォントなどの属性を指定し定義すること。以下の例はブロック領域を定義したCSSファイルをHTMLファイルが LINKによって読み込み、DIV要素を使用してページをレイアウトする例。

  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
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
-
|
|
|
|
|
|
!
 
-
|
|
|
|
|
!
 
-
|
|
|
|
|
|
|
|
|
!
-
|
|
|
|
|
|
|
|
!
 
-
|
|
|
|
|
|
|
|
!
DIV.header{
    border-style:solid;
    border-width:1px;
    margin:5px;
    padding:10px;
    text-align:center;
    width:412px;
}
 
DIV.main{
    border-style:solid;
    border-width:1px;
    margin:5px;
    padding:1px;
    width:430px;
}
 
DIV.menu{
    border-style:solid;
    border-width:1px;
    margin:1px;
    padding:5px;
    width:150px;
    font-size:10px;
    line-height:15px;
    float:left;
    
}
DIV.content{
    border-style:solid;
    border-width:1px;
    margin:1px;
    padding:5px;
    width:250px;
    font-size:15px;
    line-height:20px;
    float:left;
}
 
DIV.footer{
    border-style:solid;
    border-width:1px;
    margin:5px;
    padding:3px;
    font-size:10px;
    text-align:center;
    width:426px;
    clear:both;
}
  0
  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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
    <HEAD>
        <TITLE>HTMLサンプル ブロック領域テスト</TITLE>
        <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Windows-31J">
        <LINK REL="stylesheet" TYPE="text/css" HREF="styleDiv.css">
    </HEAD>
    <BODY>
    <DIV class="header">
        ヘッダー部
    </DIV>
    <DIV class="main">
        メインブロック<BR>
        <DIV class="menu">
            メニュー1<BR>
            メニュー2<BR>
            メニュー3<BR>
        </DIV>
        <DIV class="content">
            本文1<BR>
            本文2<BR>
            本文3<BR>
            本文4<BR>
            本文5<BR>
        </DIV>
    </DIV>
    <DIV class="footer">
        フッター
    </DIV>
    </BODY>
</HTML>

実行結果

リストボックス(SELECT)

プルダウン型のリストボックス、もしくはスクロール型のリストボックスを表示する。

  • SELECT要素のNAMEの値が、データを送信する際の変数名となる
  • SELECT要素のSIZE属性が1または無指定の場合はプルダウン型
  • 上記以外の場合はスクロール型
  • SELECT要素のDISABLE属性をtrueとすると選択できないリストボックスがグレー表示される
<SELECT NAME="weather" size="4">
  <OPTION VALUE="1">晴れ
  <OPTION VALUE="1">曇り
  <OPTION VALUE="1">雨
  <OPTION VALUE="1">雪
</SELECT>

リスト/フォーム/テーブル/画像/ハイパーリンクなどなど

一覧をテーブル形式で表示したり、フォームでラジオボタンやドロップダウンリストを作成したり、画像に文章を流し込んだり、まだまだ色々とできるみたいだけど、これ以上は必要なときに調べればいいことなので、時間があればまとめていきたい。けど今は無理 (^Q^


リロード   新規 編集 凍結 差分 添付 複製 名前変更   ホーム 一覧 単語検索 最終更新 バックアップ リンク元   ヘルプ   最終更新のRSS
Last-modified: 2008-02-06 (水) 23:56:39 (3997d)