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]> <![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]> <![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]> <![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に移行してください!