マークアップ言語 XMLとCSSファイルの作り方


SGML,HTML,XHTML,XML,CSS,VRML,VRML2(3D)ファイルの作り方。 HTMLはHyper Text Markup Language ハイパーテキストマークアップラングイッジの略で、SGML(1980年代Standard Generalized Markup Language)から派生して簡略化された現在のWebページ作成用言語です。

 最も簡単なhtmファイルは、メモ帳(テキスト)などのパッドに文字を入力し、そのままの状態で保存方法を.htmの拡張子に変更する方法です。拡張子を.htmと付けただけでブラウザで見ることができるようになります。(但し、他の種類のファイルの拡張子は無闇に変更できません。他の種類のファイルの場合、ファイル形式の変換用ソフト、エンコダーやコンパイラ、デコンパイラなどが必要になります。)

 SGML,HTML,XHTML,XML,CSS,VRML,VRML2は、すべてマークアップ言語なのでテキスト形式のパッドで作成できますが、それぞれ特徴があり用途が違っていますので、その使用方法に注意しましょう。

Transitional DTD Transitional=過渡期の DTD=Document Type Definition=文書種類定義 W3C=World Wide Web Consortium(非営利団体) 
4.01=現在バージョン
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML4.01 Transitional//EN> ホームページビルダーで作成すると自動的に文頭に表示される宣言文で、HTMLとXHTMLを区別している。 XHTMLのバージョンは現在1.1。
注意:HTML4.01以降は、" "ダブルクォーテーション無しで表示可能。
XHTML1.1 
XはeXtesibleの略で広げられる、伸ばせる意味。
XHTMLは、HTMLからXMLへ無理なく移行できるように定義されたマークアップ言語で、タグの意味に関しては殆ど同じですが、値には必ず" "を付け、英小文字を使用しなければなりません。 
文頭の<?xml version="1.0"encording="Shift_JIS">は、文字コード体系を定義する宣言文で、英文字の表記方法が小文字のみに限定され、大文字と小文字を区別しています。
例えばHTMLの<P></P>は、XHTMLでは<p />で表されます。
HTMLはExplorerとNetscape navigatorでしか見ることができませんが、XHTML1.1にすると殆ど全ての種類のブラウザで見ることができます。(2000年1月〜現在)テキストで作成可能
XML .xml Extesible Markup Languageの略。 
次世代XMLでは、表記方法を組み換え自由なモジュール(部品)として構築し、データなどを要素(cssやxlsファイルで指定)として追加できるようにしています。  
XML1.0(1998年2月〜現在) 
作成する場合は、テキスト形式で上2行の宣言文を必ず貼る事。
<?xml version="1.0" encoding="Shift_JIS"?>
<?xml-stylesheet type="text/css" href="ooo1.css"?>   ooo1.cssのファイル名を自分で考えて入力し、.xmlの拡張子もつけたしてデスクトップ上に保存すると、xmlアイコンがファイルとして表示されます。
CSS .css Cascading Style Sheet  テキストで作成可能
XLS .xls Extensible Style Sheet Lanuage テキストで作成可能
VRML2 Webページ用のマークアップ言語で構成された3次元立体VRML(Virtual Reality Modeling Language 仮想空間成形言語)は、コンパイルした後、ホームページに組み込んで作動させる事ができる比較的軽いファイルです。 VRMLの拡張子は.wrlで、TeraPad(free ware)によって[すべてのファイル]を選択し、拡張子.wrlの状態で開いたり閉じたりすることができるテキスト形式のファイルです。しかし、それをホームページに組み込む場合は、コンパイラでmvrやclassファイルに変換しなければなりません。
元となるwrlファイルの内容は、ヘッダ、コメント、ノード・フィールドから構成され、CSS用語に類似しています。
参考作品
HTML .htm  Hyper Text Markup Language+CSS 
HTMLの基本構成 上から順番に<html><head><title>題名</title>メタ情報</head><body>表示題名と本文</body></html> 英小文字でも英大文字でも可能
<>開始タグ < >アングルブラケット内の文字は表示されません。HTMLでは半角の英大文字と小文字を区別しません。
</>終了タグ 表示すべき内容は<>開始タグと</>終了タグではさみます。
文頭宣言 <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML4.01 Transitional//EN>
<HTML> 言語形式を識別するための宣言。
<HEAD> ヘッダー内には、検索のための<META>情報、<TITLE>題名</TITLE>を入力します。
これらのタグは検索エンジンへ登録する際に必要で、特にロボット型の場合、タイトルとメタ情報、本文などの内容を自動的に拾い集めますので登録前には必ず確認しなければなりません。
<META> <META http-equiv="Content-Style-Type" content="text/css">
<META NAME="description"content=" "> ホームページ内容の要約文、解説など日本語30文字以内で" "内に入力  HPが英文の場合は英文で入力
<META NAME="keywords"content=", , , "> 検索用キーワードを” ”内に10個ほど入力 キーワードの区切りは必ず半角コンマ,を使用
<TITLE>題名</TITLE> 題名は表記されません。ファイルを転送する時と検索エンジンに登録する時に必要です。
</HEAD> ヘッダーの終了
<BODY> 本文の始まり 
HTMLファイルの基本構成と
CSSファイルの組み込み方
<html>
<link rel="stylesheet"type="text/css"
href="01.css"/>
<p class="ai">あいうえお
</p>
<p class="kaki" >かきくけこ
</p>
</html>
あいうえお
かきくけこ
CSSファイル(スタイルシート) 01.css (ファイル名と拡張子)
p.ai { font-weight:bold }
p.kaki { font-style:italic }
あいうえお
かきくけこ
</BODY> 本文の終了
</HTML> htmlの終了
文字サイズとカラー <font size="-1"color="#000fff" >
リンクの色の設定 <body bgcolor="#ffffff" vlink="#0000ff" alink="#ff00ff" link="#0000ff">
画像の挿入 <img src="001.jpg" width="355" height="61">
リンク <a href=”ファイル名やリンク先URL”></a>
段落 <p></p>
改行 <br></br>
HTML Hyper Text Markup Language 
<TABLE></TABLE> 表の規定範囲
1
<TABLE cellspacing="1" cellpadding="0" width="100%" bgcolor="blue" border="0">
<TR bgColor=#ffffff><TD align="center">
罫線幅1ピクセルの表
  1. cellspacing=表の全ての罫線の太さ(ピクセル)
  2. cellpadding=表の全ての行の高さ(0〜10)高さを詰める場合は0にする。
  3. 罫線の色はBlueを入れ替える。
  4. width="100%"表の幅
  5. この場合のborderは0で表示する
  6. <TR bgcolor=表の背景色 ffffffは白
  7. <TD align=表の位置 中央寄せ
1
<TABLE border="1"><TBODY>
<TR><TD height="14" width="100%">1</TD></TR></TBODY>
</TABLE>
影付き罫線の表
<TD></TD> 表内 セル
<TD width="100%"> 表内の文字列の折り返し幅。表の幅に対して100%で表示する。
<BR></BR> 改行
<P></P> 段落
<HR></HR> 水平線
<IMG src="画像.jpg"></IMG> JPG(ジェーぺグ)画像ファイルの表示
<H1〜H6></H1〜H6>or<h1></h1> 見出し
<UL><LI></LI></UL> 普通リスト
<UL STYLE="LIST-STYLE=TYPE:NONE">
<LI>マーク無しリスト</LI></UL>
マーク無しリスト
<OL><LI>数字付きリスト</LI></OL> 数字付きリスト
<UL TYPE="SQUARE"><LI>矩形リスト<LI></UL> 矩形リスト
<U></U> アンダーライン
<I></I> イタリック斜体
<B></B> ボールド太字
<S>打ち消し線</S> 打ち消し線
<FONT=size"10pt"></FONT> フォントサイズ10ポイント
<color=white>or<color=fffff> □htmlで白を表示 
現行のHTML4.01では色番号に"# "シャープとダブルクォーテーションを付けないで表示できる。
<color=black>or<color=000000> ■htmlで黒を表示
0000ff or blue
ff0000 or red
ffff00 or yellow
00ffff or aqua アクア(水,溶液)
00ff00 or lime ライム(柑橘類),黄緑
00080 or navy ネイビー(海軍)
ff00ff or fuchsia フクシア(アメリカ産熱帯植物),マゼンタ
800000 or maroon マルーン(えび茶色)
808000 or olive オリーブ(地中海産植物)
008080 or teal ティール(お茶の葉)
999999 or gray グレー(灰)
cccccc or silver シルバー(銀)
0099ff スカイブルー,シアン
ff00cc
ff6600 オレンジ(みかん色)
ccffff 薄水色
ccccff 薄紫
ffffcc クリーム
ffcccc
ff66cc ピンク
006600 ■グリーン,
006666 青緑
990099
990000
000099
<bgcolor=色番号> 背景色の表示 "# "色番号の前の#とダブルクォーテーション無しで表示できる
colspan="2" 表の縦仕切り1つ
height="7" 高さ7ピクセル
width="500" 幅500ピクセル
width="100%" 幅を画面サイズに合わせて自動調整100%
<HR width="100%" size="1" noshade> 影なし1ピクセルの横線
<A href="ファイル名.htm">りんく</A> [りんく]という文字にファイル名htmをリンク
<P align="center"> 中央寄せ
<P align="right"> 右寄せ
<P align="left"> 左寄せ
<FONT size="-1"> フォントサイズを-1(標準)にする
<B><FONT size="+2" >文字</FONT></B> 文字と言う字を大きめの太字にする
<BODY vlink="#0000ff">文</BODY> 文内のリンク色を青にする
XML .xml Extensible Markup Language+CSS 
バージョンと文字コードの文頭宣言 <?xml version="1.0"encording="Shift_JIS"?>
スタイルシート、タイプ、リンクする.cssファイル名の表示 <?xml-stylesheet type="text/css" href="02.css"?>
XMLファイル+cssの基本構成と本文の表示
<要素を自分で定義>
<?xml version="1.0" encoding="Shift_JIS"?>
<?xml-stylesheet type="text/css" href="02.css"?>
<hiragana>
<kaki>あいうえお</kaki>
<yomi>aiueo</yomi>
</hiragana>
あいうえおaiueo
.css付加スタイルシート 02.css (ファイル名と拡張子) 
要素 kaki { display:block;font-weight:bold }
yomi { display:block;color:blue;font-style:italic }
あいうえお
aiueo
画像などの挿入 <image="003jpg">,<image>image/004jpg</image>
リンク <a href="http://www.fsinet.or.jp/~atelier1"></a>
<a href="01.xml"></a>
<a href="004.jpg"></a>
CSS(スタイルシート)の書き方
スタイルシートの宣言 <style type="text/css">
<!-- スタイルシートの始まり  
h1 { color :blue; } htmlやxmlに示された<h1>〜</h1>の間が青になる
p { color:red; htmlやxmlに示された<p>〜</p>の間が赤になる
  font-size:10pt; 文字サイズが10ポイント
  font-family:century; 書体がセンチュリー
  font-weigt:bolder ; 太字体
} <p>〜</p>までの設定内容の終了
--> スタイルシートの終わり
h1 { background-color :#ff000f } <h1>〜</h1>の間の背景色が#ff000f(色番号)になる
h1 { background-color :#ffffff } <h1>〜</h1>の間の背景色が#ffffffに上書きされる
h1 同じ位置(h1)で変更があった場合、下に新しく入力された属性と値が優先され、上書きされる。
CSSの特性 @htm.xlmファイルに書かれている指示や内容をcssスタイルシートによって更新したり追加する事ができる。(リンク先の要素の場所が同じ場合、後から作成したデータによって上書きされます。)
AアップロードしたCSSファイルのソースやプログラムを隠すことができる。
CSS マークアップ言語 SGML,HTML,XHTML,CSS共通のマークアップ言語     
{ 属性:値 } CSSの基本構造 属性はプロパティ、値はヴァリュー
/*〜*/ 間のコメントは注意書き欄のために無視されます
{ color:blue/*色名、色番号*/ }     WinとMacで共通の色指定は216色です #ffffff,#00000f
{ backgroud-color:transparent } 背景色:透過
{ backgroud-image:画像ファイル名+拡張子 } 背景画像:none(無し),画像ファイル名+拡張子,画像のURL
backgroud-repeat:repeat 背景画像の繰り返し:繰り返し
           :repeat-x 水平方向に繰り返す
           :repeat-y 垂直方向に繰り返す
           :no-repeat 繰り返さない
           :repeat-z 奥行き方向へ繰り返す(未確認)
 ;セミコロン セミコロンは&と同じ意味で、左右の内容が別々だが隣接してつなげる場合に用いる。
 :コロン コロンは = イコールと同じ意味
{ } カーリーブラケット内の属性とその値で、htm.xmlファイルの各要素を設定できる。
background-attachment:scroll 背景画像の移動:スクロールする
background-attachment:fixed 背景画像の移動:固定する
background-position:top 背景画像の位置:上端
             :bottom            :下端
             :left            :左端
             :right            :右端 
             :center            :中央 
             :縦+横  :左上から縦のピクセル数+横のピクセル数(他mm,cmなど)(未確認) 
backgroud:色名(色番号) 背景の一括指定:16色の英語名か216色の色番号で指定
       :画像のファイル名       ファイル名と画像の拡張子も付ける(cssファイルと一緒に画像も必ずアップロードする)
       :repeat 背景用の小さなgifかjpg画像で全画面パターン化する
       :scroll 背景が横に移動する(未確認)
       :数値+数値  左上から縦のピクセル数と横のピクセル数(未確認)
font-family:serif 書体:明朝体
       :sans-serif 書体:ゴシック体
       :cursive 筆記体
       :fantasy 装飾体
       :monospace 等幅体
       :フォント名 書体名で指定(Win&Mac共通書体)
font-size:-2〜+6,8〜47pt 比例サイズかポイント数で固定する
      :medium 標準サイズ11pt前後
      :smaller より小さく 他、x-small,xx-small
      :larger より大きく 他、x-large,xx-large
font-style:normal 書体スタイル:標準
      :italic イタリック
      :oblique 斜体
font-weight:normal フォントの太さ:標準
       :bold 太字
       :bolder より太く
       :lighter より細く
       :100〜900 100単位で太く(未確認)
letter-spacing:normal 文字間隔:標準
         :数値 文字間隔 px,mm
line-hight:normal 行の高さ:標準
      :数値 行の高さpx,mm.  %の場合フォントサイズに対する相対比
width:数値 数値mm,px,%,autoなどで指定  
max-width:数値 最大幅:ピクセル数,auto他
min-width:数値 最小値:ピクセル数,auto他
height:数値 数値だけで単位無しの場合は自動的にpxピクセル数 
margin:数値 上と左からの幅 数値間は空白で区切る
margin:100 値が1つの場合:上下左右同じ幅
margin:100 50 値が2つの場合:上下 左右
margin:100 50 200 値が3つの場合:上 左右 下 (未確認)
margin:50 100 20 40 値が4つの場合:上 下 左 右の各幅
padding:数値 枠までの余白 値はマージンと同じ4種類
border-width 枠の太さ    値はマージンと同じ4種類
border-style:none 枠無し
border-style:hidden 枠表示をしない
        :dotted 点滅
        :dashed 破線
        :solid 実線
        :double 二重線
        :groove くぼみ線
        :ridge 突起線
        :inset 一組のくぼみ線
        :outset 一組の突起線
border-color :色番号 枠色
border-top:数値 上枠線の長さ:ピクセル数
border-bottom:数値 下枠線の長さ:ピクセル数
border-right:数値 右枠線の長さ:ピクセル数
border-left:数値 左枠線の長さ:ピクセル数
font-stretch:normal フォントの伸縮:標準
       :semi-expanded 少し広く
       :extra-expanded 広く
       :ultra-expanded 特に広く
       :semi-condensed 少し狭く
       :extra-expanded 狭く
       :ultra-expanded 特に広く
       :wider 一段階広く
       :narrower 一段階狭く
text-align:center 中央揃え(横)
      :left 左揃え
      :right 右揃え
      :justify 両端揃え
text-decoration:underline 下線を引く
          :overline 上線を引く
          :blink 点滅させる(未確認)
          :none 線無し
text-shadow:数値 文字の影を付ける mm,px
        :色名(色番号) 文字の影の色を付ける
        :数値 影のぼかし範囲(未確認)
vertical-align:top 縦列:上揃え
        :botom 下揃え
        :midd 中央揃え
        :baseline ベースラインに揃える
        :sub 下付き文字 H2O
        :super 上付き文字 X2
        :text-bottom 全て下端に揃える
position:static 標準座標位置
     :absolute 位置の絶対性
     :fixed 位置の固定
     :relative 位置の相対性

更新年月日:2005.10.05 COPY RIGHT(C)JUNPEI SATOH, 8,28,2004.   <戻る