www.wanichan.com

Word 2000のHTML

Word 2000でホームページを作成するための秘訣

はじめに

Word 97のHTML記述は比較的やさしかったですよね?
しかし、Word 2000になってから、私でも訳わからないような複雑な記述が自動的に行われます。

スタイルシートの採用

まず、スタイルシートの記述…

CSSに対応しない場合、ソースそのものに記述が行われます(たぶん)
英語がちょっと得意な方は、どういう記述がなされているかなんとか分析できると思います。

スタイルシートとは、つまり書式設定のことですね。

それぞれの書式、フォントスタイルなどについての設定をすることができます。
マージン設定、タブ設定、表のレイアウト設定、などなど。Word 2000で作ったレイアウトを忠実に行うための記述となります。

すでにスタイルシート、CSSについてご存知なかたは、一度ソースをご覧になってください。

DHTMLの記述が採用されていることに気づかれるかと思います。

スタイルシートを使うメリットは、NetscapeでもIEでも表示される文字のサイズが同じになるということですね(^^)
(フォントサイズをポイント単位で設定しているため)

HTMLソース構成

以下に記述された内容は、一時期使用していたメニューフレームページのソース表示詳細です。
たったこれだけでも、かなりボリュームのある記述ですね。

//★<HTML>タグ記述★
<html xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:w="urn:schemas-microsoft-com:office:word"
xmlns="http://www.w3.org/TR/REC-html40">
//★<HEAD>と</HEAD>タグ間の記述★
<head>
<meta http-equiv=Content-Type content="text/html; charset=shift_jis">
<meta name=ProgId content=Word.Document>
<meta name=Generator content="Microsoft Word 9">
<meta name=Originator content="Microsoft Word 9">
//★リンク★
<link rel=File-List href="./menu.files/filelist.xml">
<link rel=Edit-Time-Data href="./menu.files/editdata.mso">
<!--[if !mso]>
//★スタイルシート★
<style>
v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style>
//★ドキュメントのプロパティ詳細★
<![endif]--><!--[if gte mso 9]><xml>
<o:DocumentProperties>//ドキュメントプロパティここから
<o:Author>Pinky the Crocodile</o:Author>           //作成者:Pinky the Crocodile
<o:LastAuthor>Pinky the Crocodile</o:LastAuthor>           //最終作成者:Pinky the Crocodile
  <o:Revision>2</o:Revision>        //更新の数:2
  <o:TotalTime>83</o:TotalTime>             //編集時間:83分
  <o:Created>1999-08-11T13:15:00Z</o:Created>              //作成日時:1999/8/11 13:15
  <o:LastSaved>1999-08-15T10:52:00Z</o:LastSaved>        //最終更新日時:1999/8/15 10:52
  <o:Pages>1</o:Pages>  //ページ数:1
  <o:Words>93</o:Words>            //単語の数:93
  <o:Characters>106</o:Characters>         //文字数:106
  <o:Lines>17</o:Lines>  //行数:17行
  <o:Paragraphs>10</o:Paragraphs>           //段落数:11
  <o:CharactersWithSpaces>108</o:CharactersWithSpaces>  //スペースを含む文字数:108
  <o:Version>9.2812</o:Version>   //バージョン:9.2812
 </o:DocumentProperties>           //ドキュメントプロパティここまで
 <o:OfficeDocumentSettings>       //オフィスドキュメントの設定
  <o:DoNotRelyOnCSS/>  //CSSを使用しない
 </o:OfficeDocumentSettings>     //オフィスドキュメントセッティングここまで
</xml><![endif]--><!--[if gte mso 9]><xml>
 <w:WordDocument>
  <w:PunctuationKerning/>
  <w:DrawingGridHorizontalSpacing>5.25 pt</w:DrawingGridHorizontalSpacing>
  <w:DisplayHorizontalDrawingGridEvery>0</w:DisplayHorizontalDrawingGridEvery>
  <w:DisplayVerticalDrawingGridEvery>2</w:DisplayVerticalDrawingGridEvery>
  <w:Compatibility>
   <w:SpaceForUL/>
   <w:BalanceSingleByteDoubleByteWidth/>
   <w:ULTrailSpace/>
   <w:DoNotExpandShiftReturn/>
   <w:FootnoteLayoutLikeWW8/>
   <w:ShapeLayoutLikeWW8/>
   <w:AlignTablesRowByRow/>
   <w:ForgetLastTabAlignment/>
   <w:DoNotUseHTMLParagraphAutoSpacing/>
   <w:LayoutRawTableWidth/>
   <w:LayoutTableRowsApart/>
   <w:UseFELayout/>
  </w:Compatibility>
  <w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel>      //ブラウザレベル(IE4)
 </w:WordDocument>
</xml><![endif]-->
<style>  //スタイルシート
<!--
a:hover { color:blue;}
//★フォントの種類の定義部分★
 /* Font Definitions */
@font-face
           {font-family:"MS 明朝";
           panose-1:2 2 6 9 4 2 5 8 3 4;
           mso-font-alt:"MS Mincho";
           mso-font-charset:128;
           mso-generic-font-family:roman;
           mso-font-pitch:fixed;
           mso-font-signature:-1610612033 1757936891 16 0 131231 0;}
@font-face
           {font-family:Century;
           panose-1:2 4 6 4 5 5 5 2 3 4;
           mso-font-charset:0;
           mso-generic-font-family:roman;
           mso-font-pitch:variable;
           mso-font-signature:647 0 0 0 159 0;}
@font-face
           {font-family:"MS Pゴシック";
           panose-1:2 11 6 0 7 2 5 8 2 4;
           mso-font-charset:128;
           mso-generic-font-family:modern;
           mso-font-pitch:variable;
           mso-font-signature:-1610612033 1757936891 16 0 131231 0;}
@font-face
           {font-family:"\@MS Pゴシック";
           panose-1:2 11 6 0 7 2 5 8 2 4;
           mso-font-charset:128;
           mso-generic-font-family:modern;
           mso-font-pitch:variable;
           mso-font-signature:1 134676480 16 0 131072 0;}
@font-face
           {font-family:"\@MS 明朝";
           panose-1:2 2 6 9 4 2 5 8 3 4;
           mso-font-charset:128;
           mso-generic-font-family:roman;
           mso-font-pitch:fixed;
           mso-font-signature:1 134676480 16 0 131072 0;}
//★フォントスタイルを定義している部分(見出しタグ・ハイパーリンク設定された文字列などの設定)★
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal   //改行タグ、箇条書きタグ、段落タグの設定【共にMsoNormal】
           {mso-style-parent:"";
           margin:0mm;       //マージン(上、右、下、 左マージンの設定)が0㎜『設定なし』
           margin-bottom:.0001pt;    //下マージン(下端からのスペース)が1ポイント
           text-align:justify; //文字列の配置が両端揃え
           text-justify:inter-ideograph;
           mso-pagination:none;
           font-size:10.5pt;  //フォントサイズが10.5ポイント
           mso-bidi-font-size:10.0pt;
           font-family:Century;
           mso-fareast-font-family:"MS 明朝";
           mso-bidi-font-family:"Times New Roman";
           mso-font-kerning:1.0pt;}
a:link, span.MsoHyperlink
           {color:green;
           text-decoration:underline;
           text-underline:single;}
a:visited, span.MsoHyperlinkFollowed
           {color:deeppink;
           text-decoration:underline;
           text-underline:single;}
a:hover { color:blue;}
//★ページの定義部分★
 /* Page Definitions */
@page
           {mso-page-border-surround-header:no;
           mso-page-border-surround-footer:no;}
@page Section1
           {size:595.3pt 841.9pt;
           margin:20.0mm 20.0mm 20.0mm 20.0mm;
           mso-header-margin:42.55pt;
           mso-footer-margin:49.6pt;
           mso-paper-source:0;}
div.Section1
           {page:Section1;}
-->
</style>
<!--[if gte mso 9]><xml>
 <o:shapedefaults v:ext="edit" spidmax="1027">
  <o:colormru v:ext="edit" colors="#ffc081"/>
  <o:colormenu v:ext="edit" fillcolor="#ffc081"/>
 </o:shapedefaults></xml><![endif]--><!--[if gte mso 9]><xml>
 <o:shapelayout v:ext="edit">
  <o:idmap v:ext="edit" data="1"/>
 </o:shapelayout></xml><![endif]-->
</head>            //ここで<HEAD>タグ終了
 //<BODY>タグ
<body bgcolor="#ffc081" lang=JA link=green vlink=deeppink style='tab-interval:
42.55pt;text-justify-trim:punctuation' alink=BlueViolet>
//段落:セクション1
<div class=Section1>
//<TABLE>タグの始まり
<table border=1 cellspacing=0 cellpadding=0 width=168 style='width:126.0pt;
 margin-left:-5.65pt;border-collapse:collapse;border:none;mso-border-alt:solid windowtext .5pt;
 mso-padding-alt:0mm 4.95pt 0mm 4.95pt'>
 <tr height=36 style='height:27.0pt'>
  <td width=168 height=36 bgcolor="#99cc00" style='width:126.0pt;border:solid windowtext .5pt;
  background:#99CC00;padding:0mm 4.95pt 0mm 4.95pt;height:27.0pt'>
  <p align=center style='text-align:center'><font size=2
  face="MS Pゴシック"><span style='font-size:10.0pt;font-family:"MS Pゴシック"'>あなたは<span
 ><br>
<!--#exec cmd="./count.pl"-->番目の訪問者です!<o:p></o:p></span></span></font></p>
  </td>
 </tr>
</table>//<TABLE>タグ終了
 
<p align=center style='text-align:center'><font size=2
color="#339966" face="MS Pゴシック"><span style='font-size:10.0pt;
font-family:"MS Pゴシック";color:#339966'><![if !forumEmptyParas]>&nbsp;<![endif]><o:p></o:p></span></font>
</p>
<p align=center style='text-align:center'><font size=2
color="#339966" face="MS Pゴシック"><span style='font-size:10.0pt;
font-family:"MS Pゴシック";color:#339966'><a href="main.htm" target=Right
title=トップに戻ります>★TOP★</a><o:p></o:p></span></font></p>
<div align=center style='text-align:center;line-height:150%'><font
size=2 color="#339966" face="MS Pゴシック"><span style='font-size:10.0pt;
font-family:"MS Pゴシック";color:#339966'>
<hr size=2 width="100%" align=center>
</span></font></div> <p align=center style='text-align:center;line-height:150%'><font
size=2 color="#339966" face="MS Pゴシック"><span style='font-size:10.0pt;
font-family:"MS Pゴシック";color:#339966'><a href="word01.htm" target=Right
title="Word 2000でホームページをつくるには?">ホームページを作るには?</a><o:p></o:p></span></font></p>
<p align=center style='text-align:center;line-height:150%'><font
size=2 color="#339966" face="MS Pゴシック"><span style='font-size:10.0pt;
font-family:"MS Pゴシック";color:#339966'><a href="word02.htm" target=Right
title=ブラウザ対応についての設定内容です>ブラウザ対応について</a></span></font><font size=2 color="#
339966"><span
style='font-size:10.0pt;color:#339966'><o:p></o:p></span></font></p> 
<p align=center style='text-align:center;line-height:150%'><font
size=2 color="#339966" face=Century><span style='font-size:10.0pt;
mso-fareast-font-family:"MS Pゴシック";color:#339966'><a href="word03.htm"
target=Right title="GIFアイコン、写真画像などを貼り付けるときは?"><font face="MS Pゴシック"><span
style='font-family:"MS Pゴシック";mso-ascii-font-family:Century;mso-hansi-font-family:
Century'>画像の挿入方法</span></font></a><o:p></o:p></span></font></p> 
<p align=center style='text-align:center;line-height:150%'><font
size=2 color="#339966" face=Century><span style='font-size:10.0pt;
mso-fareast-font-family:"MS Pゴシック";color:#339966'><a href="word04.htm"
target=Right title="リンク先が存在しなくても大丈夫!"><font face="MS Pゴシック"><span
style='font-family:"MS Pゴシック";mso-ascii-font-family:Century;mso-hansi-font-family:
Century'>ハイパーリンクの設定方法</span></font></a><o:p></o:p></span></font></p> 
<p align=center style='text-align:center;line-height:150%'><font
size=2 color="#339966" face=Century><span style='font-size:10.0pt;
mso-fareast-font-family:"MS Pゴシック";color:#339966'><a href="word05.htm"
target=Right title="Word 2000での新しい機能です"><font face="MS Pゴシック"><span
style='font-family:"MS Pゴシック";mso-ascii-font-family:Century;mso-hansi-font-family:
Century'>フレーム作成</span></font></a><o:p></o:p></span></font></p> 
<p align=center style='text-align:center;line-height:150%'><font
size=2 color="#339966" face="MS Pゴシック"><span style='font-size:10.0pt;
font-family:"MS Pゴシック";color:#339966'><a href="word06.htm" target=Right
title="水平線の挿入、罫線などのツールバーです">罫線ツールバーについて</a><o:p></o:p></span></font></p> 
<p align=center style='text-align:center;line-height:150%'><font
size=2 color="#339966" face="MS Pゴシック"><span style='font-size:10.0pt;
font-family:"MS Pゴシック";color:#339966'><a href="word07.htm" target=Right>Word
2000のHTML</a><o:p></o:p></span></font></p> 
<div align=center style='text-align:center'><font size=2
color="#339966" face="MS Pゴシック"><span style='font-size:10.0pt;
font-family:"MS Pゴシック";color:#339966'> 
<hr size=2 width="100%" align=center>

</span></font></div>

<p align=center style='text-align:center'><font size=2
color="#339966" face="MS Pゴシック"><span style='font-size:10.0pt;
font-family:"MS Pゴシック";color:#339966'><a
href="http://village.infoweb.ne.jp/~wanichan/Japanese/Word.html" target="_top"
title="Word 97(98)でホームページを作りたい方はクリック!">Word 97(98)バージョンへ</a><o:p></o:p></span>
</font></p> 
<p align=center style='text-align:center'><font size=2
color="#339966" face="MS Pゴシック"><span style='font-size:10.0pt;
font-family:"MS Pゴシック";color:#339966'><![if !forumEmptyParas]>&nbsp;<![endif]><o:p></o:p></span></font>
</p> 
<p align=center style='text-align:center'><font size=2
color="#339966" face="MS Pゴシック"><span style='font-size:10.0pt;
font-family:"MS Pゴシック";color:#339966'><a
href="http://village.infoweb.ne.jp/~wanichan/Japanese/bbs/"
target=Right title="わからないことはお気軽に質問してね!">ワニchanのサポート掲示板</a><o:p></o:p></span></font></p> 
<p align=center style='text-align:center'><font size=2
color="#339966" face="MS Pゴシック"><span style='font-size:10.0pt;
font-family:"MS Pゴシック";color:#339966'><![if !forumEmptyParas]>&nbsp;<![endif]><o:p></o:p></span></font></p> 
<p align=center style='text-align:center'><font size=2
color="#339966" face="MS Pゴシック"><span style='font-size:10.0pt;
font-family:"MS Pゴシック";color:#339966'><a
href="http://village.infoweb.ne.jp/~wanichan/Japanese/" target="_top"><font
color="#339966"><span style='color:#339966;text-decoration:none;text-underline:none'><img border=0 width=107 height=84 id="_x0000_i1027" src=home1.gif
alt="ホームにもどる"></span></font></a><o:p></o:p></span></font></p> 
</div> 
</body> 
</html> 
スポンサーリンク
INDEX
  • このエントリーをはてなブックマークに追加

コメント

このページに関する技術的なご質問には一切お答え致しません。フリーソフトになったExpression Web 4に移行してください!

▲このページのトップへ