マークアップ言語 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> | 表の規定範囲 | |||
<TR bgColor=#ffffff><TD align="center"> |
罫線幅1ピクセルの表
|
|||
<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. <戻る