[LaTeX - コマンド一覧] [LaTeX-InDeX] [LaTeXしよう！] [日本語TeX情報] [Academic HTML] [Another HTML-lint gateway] [XHTML1.1リファレンス]
[Google] [ウィキペディア] [アスキー デジタル用語辞典]
[卒論日誌ウィキ] [TeXプレゼン] [TeXに図を取り込む] [コンパイル] [mimeTeX] [ASCIIMathML] [情報処理の技法] [後藤資料]
お知らせ

LaTeX と XHTML を一緒に学ぼう（準備中）

　学生さんたちは、 （社会に出てから まず使うことはないであろう*） TeX には今ひとつ興味を持ってくれないが、 ウェブページを書くための HTML には、 （少なくとも TeX に比べれば） それなりの関心を持ってくれるようだ （確かにウェブページが書ける技能は、 仕事や趣味でそれなりには重宝することもあろう）。 実は、HTML の書き方は、TeX の書き方とよく似ている。 もし、そこそこのウェブページが手書きできる程度に HTML を習得したとしたら、 ほんのちょっと（表現の違いを）勉強するだけで、 TeX でも同じぐらいのものが書けるようになるハズ。 という訳で、ここでは、 （TeX をマクロで使いやすくした）LaTeX と （HTML を XML で再定義した） XHTML を一緒に学んでもらおうと試みる。

* 様々な文書やデータの形式として、どんどん XML が標準化されていく中で、 Microsoft Office ですら、XML 対応になった。 LaTeX - XML 間の変換ツール群各種も進化していくであろうから、 将来、思わぬところで LaTeX が書けることが役に立つことが 絶対にないとも言い切れない。勿論、今後どんなに XML が一般化したからといって、 一般のユーザーが XML を手書きしなければならない 機会なんてまずないだろう**。 が、 「XML とはどんなものか？」ということを （ LaTeX や XHTML などのマークアップ言語からの類推で） 少しは想像できるようになっていても損はしないと思う （ 車を運転するのに車の内部構造の知識も少しはあった方がいい場合があるのと同様に ）。

**　社会に出てから LaTeX のようなマークアップ言語を 手書きする機会は確かにほとんどないだろうが （人によっては HTML を手書きすることぐらいはあるかも知れないが）、 これから（数年後ぐらいから）の会社などでは、 社員各自の仕事の進捗状況の報告や 各種資料の収集・作成や意見の取りまとめなどなどに なんでもかんでも紙の書類で作成して提出させるのではなく wiki などの各種ウェブツールが利用されることが増えていくのではないかと 予想される（というか、是非そうなっていってほしい）。 wiki は、簡単なマークアップ言語で書き込むツールである。 「あしたから、作業の進捗状況を wiki に書き込んでてちょうだい」とか いうことになった場合に、 LaTeX や HTML でマークアップ方式の書き方に触れたことのある人なら、 wiki の編集画面（のテキスト整形ルール）を眺めただけで、 wiki の書き方なんて余裕で瞬時に理解できてしまうことだろう （なんてね）。 というか、書きやすいマークアップ言語各種もどんどん開発されていく だろうから、そのうち 論文やプレゼンシートもWikiで書く なんてのが普通にできる時代になるかも。

「情報処理の技法」授業資料の XHTMLの解説の 簡単な XHTML の見本ファイル： web1.html, web2.html, web3.html, web4.html に対応させた（同じような内容の）LaTeX の見本texソースファイル （と、それを dvipdfm で pdf 化した pdf ファイル）を用意して、 両者のソースを比較できるような解説ページを作成していく予定。

目次

  1. LaTeXとXHTMLその1( web1.tex, web1.pdf, web1.html)
  2. LaTeXとXHTMLその2( web2.tex, web2.pdf, web2.html)
  3. LaTeXとXHTMLその3( web3.tex, web3.pdf, web3.html)
  4. LaTeXとXHTMLその4( web4.tex, web4.pdf, web4.html)

はじめに

　ワープロソフトのように、編集画面に見える通りの印刷出力が得られる ような文書整形の方式を WYSIWYG(What You See Is What You Get, ウィジウィグ)方式と言うが、 これに対し、 テキストにマークを付けることで、 段落などの文章の構造 や、文字の種類、リンク先などを指定するような文書整形の 方式をマークアップ方式と言う。 LaTeX や HTML(XHTML) は、マークアップ方式の マークアップ言語 （マーク付け言語）である。 LaTeX はきれいな印刷用の出力を得る組版（くみはん）に適しているし、 HTML はウェブ上に公開されるウェブ文書を書くのに適している。 ウェブがこれだけ普及した現在、「なぜ HTML を使うの？」という問いかけは、 それほどなされないとは思うが （これからのウェブは XML なの？　という問いかけならともかく）、 ワープロソフトがこれだけ発達した現在、 「なぜワープロではなく LaTeX を使うのか」という問いかけはよくなされる。 といっても、この問いにすぐに簡潔に答えろと言われると、ちょっと難しい。 ためしに、 "なぜtex"や "何故tex" などのキーワードで検索してみると、 「なぜTeXか」 「 なぜTeXなのか」 「 なぜ LaTeX ?」 「Why LaTeX?」 などなど、「なぜ LaTeX 」なのかについて、 色々な人が、それなりに重複する意見を書いているようだ。 代表的な意見に、私の意見を加えて （私が LaTeX を使う理由に近い順に）並べるなら、

といったところだろうか。

ちなみに、 複雑怪奇な仕様が歴史的に引きずられた「バッドノウハウ」の典型として TeX を挙げている “ バッドノウハウと「奥が深い症候群」 ” や、 バッドノウハウを使いやすくするラッパーの例として TeX に対する LaTeX を挙げている “バッドノウハウからグッドラッパーへ” なども参考になる意見である。

　実は、私も LaTeX を使い始めた当初（91年頃）は、 LaTeX はまるでユーザーフレンドリーじゃないと思ってたし、 いずれ、ワープロが進化して、LaTeX と同じくらいきれいな出力が できるようになったら、LaTeX なんてもう使われなくなるだろう （少なくとも自分は使わなくなるだろう）と思っていた （と言っても、当時 私が使っていた 一太郎Ver.3 は、 なかなかよく設計されていて、とても使いやすかったのである。 マウスなんて使わなくても、ESCキーを押しただけで、 「自分がやりたいことをやるにはどうすればいいか」が、 見て推測できるようになっていたし、 ファイル形式もテキストファイルと制御ファイルとが分かれていたので、 テキストファイルは一太郎がなくても誰でも見ることができたし、 フロッピーディスク一枚で起動することができたし、 未だに、多くの知人が「一太郎は Ver.3 が一番 使いやすかった」と 語り継いでいる。で、私が当時の「一太郎3 は使いやすいなあ」と 実感する方向を更に進める方向にワープロソフトは進化してきたかと言うと、 実は、ぜんぜんそうではなくて、 最近のワードや一太郎は 多機能登載に応じてメニュー項目がどんどん 増えて細分化されていき、 「自分がやりたいことをやるにはどうすればいいか」が、 見ただけではなかなか推測できなくなってしまった （それでも、私は一太郎13とかの方がワード2000とかよりは、よっぽど メニュー項目が直感的に捜しやすいところにあると思ってるけど）。 ワープロソフトは、ここ十数年で 機能は肥大し、出力もかなりきれいになったけど、 必ずしも使いやすくはなっていないような気がする）。

　さて、一方で私は、97年頃から HTML でウェブページを書いたり し始めるようになる。で、数年間 HTML で文章を書いたりしているうちに、 HTML で文章を書くのは、 （ワープロとかで文章を書くのと比べて）むしろ書きやすいと 感じるようになってくる。 私が文章を書くときにこだわるのは、第一に文章の内容であり、 あとは、せいぜい、章立てとか引用箇所といった 文書としての（論理的）構造ぐらいである。 例えば、引用箇所は、そこが引用箇所であるということさえ示せれば、 引用箇所を何文字ぶんインデントして表示させるかとか、 引用箇所のフォントを斜体にするか小さめのフォントにするかとか、 そういった具体的なレイアウトや文字装飾のことなんかどうでもいいのである。 その点、ブラウザーによって見え方の違う HTML の場合、 文書としての論理構造を（テキストにマーク付けすることで） 指定してやりさえすれば、 その指定されたことを具体的にどういうレイアウトで実現するかは、 ブラウザーが勝手にやってくれるのである （XHTML の方向性としては、HTML ファイルには文書の構造だけを書き、 レイアウトに関することはスタイルシートに書かせるようになってきている）。 これは、「文章の内容」と「文書の構造」以外のことに頭を使いたくない 私にとっては、実に目的に叶ったツールに思えてきた。 で、HTML が書きやすいと感じるようになればなるほど、 同じようなマーク付け言語である LaTeX の良さも改めて 認識するようになってきたのである。 というのは、HTML で書いた文書というのは、 ブラウザーで見るには非常に適しているけど、 印刷するとレイアウトが汚くなってしまう。 その点、 LaTeX は、HTML と同じぐらい簡単に （レイアウトのことなんて考えないで）書いた文書を、 ちゃんときれいに組版して印刷してくれるのである （ワードと LaTeX それぞれのレイアウトの比較は、 「LaTeX とは？ ― 初めての方のために」が参考になる）。 という訳で、私はウェブ用の文書は XHTML で、 印刷用の文書は LaTeX で書くようになった*。

* 実は、最近の私は、最初に XHTML で文書を書くことが 非常に多くなってきたので、 XHTML から LaTeX に書き換えたい場合が多くなってきた。 LaTeX で書いた文書を HTML に変換するツールは、 latex2html （ LaTeX2HTML (Japanese) , LATEX2HTML -2002-1 for Win32） などが有用で実用的だが、 htmlをlatexに変換する html2latex などのツールも多少はあるようだ（実用性は不明）。 ただ、 XHTML で書いた文書を LaTeX に変換するツールは、 （前にスイスの人だかが作ってたらしい xhtml2latexみたいな ツールを使ってみたことがあるけど）、 どうも、実用に耐えるものはまだ見つけていない。 という訳で、取り敢えずの、（まるでエレガントじゃない）対処方法として、 QXエディターの 置換マクロを使って、 自分が使いそうなタグをある程度 LaTeX コマンドに置き換えてから、 手書きで書き換えるということを私はやっている （それでも、すべてを手書きで書き換えるのに比べたらずっと楽だ）。 ちなみに、置換指定ファイルは、 x2tex.txt である。いや、 QX のマクロだけを使っても、ほんとはもっと置換以上の エレガントで賢い変換もできるとは思うけど、取り敢えず（参考まで）……
04/11/29追記： Kyousum Recordsで 公開されている「簡単なXHTMLを単純なLatexに変換するシンプルなXSLTスタイルシート」（html2latex.xsl）をいずれ試したい。 OpenOfficeでXMLを読み書きするには、 「OpenOffice.orgでXMLファイルを読み書きするには 」 参照。

各種マークアップ言語、関係ツール

　たぶん、 LaTeX や XHTML よりも簡単に書ける （Wikiのような）マークアップ言語各種 （と変換ツール各種）はどんどん開発されていくことと思います。 で、Wikiみたいなツール上で気軽に打ち込みながら、 論文を書いたりプレゼンシートを書いたりができるようになっていくのでは ないかと思います（勿論、現在でもある程度では、できているのだが）。

HTMLをLaTeXに変換して、きれいに印刷してしまおうプロジェクト
SmartDoc
Use PukiWiki/論文だって書けちゃう
PDF生成について（病院Wiki(Hoswiki)）
Rabbit （RDで書かれた文書をもとにプレゼンテーションを行うためのソフト ウェアです）
RD
Textile
RedCloth is a module for using Textile in Ruby
BlueCloth
Markdown

準備など

　Windows マシン への LaTeX のインストールは、 この辺参照。

TeX ファイルをコンパイルして、dvi を作成し、 それを表示させる手順については、 「 後藤班のパソコンの使いかた(Linux編) 」 「 LaTeX を使って文書を作ってみよう♪ 」 辺りを参照。

LaTeX のコマンド入力や コンパイルや表示などを自動化したりして簡単にする方法各種については、 「 LaTeX をカンタンにする方法 」 参照。

(先頭) (目次)

備考（このページに対する意見・間違い指摘など）

このページに対して 加藤さんや 186さんや 鈴木さん から有益な意見や情報を戴きました。 また、186さんに間違いを指摘された箇所を修正しました。 但し、LaTeX と XHTML で比較した場合の見やすさ、 できるだけ簡単な説明という部分も譲りがたいので、 必ずしも指摘されたこと全てに対応し切れている訳ではありません。

あと、このページの二段組みのレイアウトは、最初、 （CSSでやろうとして左右のカラムの上下位置の合わせ方が分からずに妥協して） tableタグで書いていたが、 「めうだめぽな徒然」 において、tableタグを使うのはLaTeXっぽくないと指摘を戴き、 更に有り難いことに、 どういうふうにCSSを書けばいいのかまで丁寧に教えて戴いたので、 それを参考にして書き直した （まだ、いまいちかも知れないが）。

(先頭) (目次)

LaTeX（準備）

　まず、ハードディスク内の適当なディレクトリーに、 web1.tex, web2.tex, web3.tex, web4.tex, mokkyou.eps を保存して下さい (Linux用EUCコード版は web1e.tex, web2e.tex, web3e.tex, web4e.tex, mokkyou.eps )。 たいていのブラウザーでは、.tex という拡張子は、 テキストビューアー（またはエディター）などと関連づけされていない と思うので、 web1.texとかを クリックすると、たぶん、 「保存しますか？／アプリケーションを選んで開きますか？」 みたいに訊いてくるんではないかと思います。 「保存します」を選んで下さい。 もし、（.tex の拡張子が既にエディターとかと関連づけられていて） エディターとかで開かれた場合は、 「ファイル」→「（名前を付けて）保存」とかで、保存して下さい。 保存したこれらのファイルを QXや viなどの テキストエディターで 色々と編集（改造）して みて下さい。編集したファイルの印刷イメージを表示させるには、 まず、 UNIX系OS なり MS-DOS なりのコマンド入力画面 で、platex web1.tex みたいに入力して編集したファイルを 「コンパイル」すると、web1.dvi というファイルが作成されます (Linux上でのコンパイルは、 「 後藤班のパソコンの使いかた(Linux編) 」 参照)。 WinFD を使っている人は、この操作は 外部コマンド に登録してキー操作だけで済ますことができます。 で、UNIX系OS なら、xdvi web1.dvi と打てば印刷イメージが表示されます。 Windows なら、マイコンピューター（やWinFD）などで web1.dvi のアイコンをクリックすると、dviout が起動して、 印刷イメージが表示されます。


XHTML（準備）

　まず、ハードディスク内の適当なディレクリーに、 web1.html, web2.html, web3.html, web4.html, mihon.css を保存して下さい (Linux用EUCコード版は web1e.html, web2e.html, web3e.html, web4e.html)。 IEやMozillaなどのブラウザーでは、リンク先の対象ファイルを 開いてから 「ファイル」→「名前を付けて保存」で保存すると、 htmlファイルの中身(パスとか)を書き換えられてしまうことがあるので、 リンク先の対象ファイルを開かずにこの画面上で リンク先を右クリックし、「リンク先を保存」のようなメニューで保存します。 web1.html, web2,html, web3,html, web4.html は HTML ファイルの見本です。 保存したこれらのファイルを QXや viなどの テキストエディターで 色々と編集（改造）してみて、 上書き保存してから ブラウザーで「更新」ボタンを押して 編集結果がどう反映されたか確認して下さい。 mihon.css はスタイルシートの見本です。 スタイルシート には、背景色とかマージンとか行間などの設定が書かれています。 mihon.css は、 HTML の構造が見えやすいように、 タグ ごとに背景色を変えてあります。 このゼミでは、スタイルシートの書き方はやりませんが、 興味のある人は mihon.css もエディターで 色々と変更して実験してみて構いません。

XHTML の書き方の基礎は、 Let's begin XHTML などが参考になるかと思います。 自分の書いた HTML が文法的に間違っていないかどうか （といよりはどれくらい間違いを含んでいるか）を調べるには、 Another HTML-lint gateway が有用です（100点満点で採点してくれます。 が、レスポンスヘッダなど、サーバー側の問題もあるので、100点満点を 取るのはほぼ無理でしょう。 The W3C Markup Validation Service のチェックの方がやさしい、というか穏当です）。

(先頭) (目次)

LaTeX（その1）

web1.tex （web1.pdf）, web1w.tex(utf-8)

見出し、段落、文字装飾

　ハードディスク上に web1.tex を保存して エディターで開いてみて下さい (Linux用EUCコード版は web1e.tex )。 ファイルの上の方に、 

\documentclass[a4j]{jarticle}
\usepackage{color}
%
%
\begin{document}

みたいに書かれていますが、取り敢えずこの部分は、必要なおまじないだと 思っておいて下さい。 この部分には どういう用紙サイズを使うか とか、 どういうスタイルファイルを使うか といった情報が書かれています。 a4j は A4用紙ということだし、 color は 色付き文字 を使うためのパッケージのことです。 LaTeX の書き方については、（冒頭からもリンクを張ってますが） LaTeX-InDeX がとても整理されていて分かりやすいので、以下でも、 LaTeX-InDeX 内の該当する解説箇所にリンクを張ります。







LaTeX の基本的な骨格は、 

\documentclass[a4j]{jarticle}
\begin{document}
本分
\end{document}

のようになっています。
\begin{document} と \end{document} で挟まれた部分に本分を書きます。 LaTeX のコマンドは、\begin{document}などのように \マークで始まります。 テキストに何らかの作用をさせるコマンドで、 作用の開始と終了を指定する種類のコマンドは、 

\begin{作用}
対象となるテキスト
対象となるテキスト
対象となるテキスト
対象となるテキスト
\end{作用}

のように書かれます。 このように\begin{作用}と\end{作用}で範囲を指定する コマンドを「環境」と言います。この他に、 作用の範囲を指定するコマンドの書き方として、 

\作用{対象となるテキスト}
{\作用 対象となるテキスト}

のような書き方もあります。 コマンドによって、何種類かの書き方のできるものと、 そうでないものとあります。

XHTML（その1）

web1.html

見出しタグ、段落タグ、文字装飾

　ハードディスク上に web1.htmlを (開かずにこの画面からブラウザーの右クリックで)保存して エディターで開いてみて下さい (Linux用EUCコード版はweb1e.html)。 マイコンピュータやエクスプローラから web1.html を （というか拡張子が html のファイルを）クリックして開くと、 ブラウザーで開かれてしまうので、 エディターで開くには、まず エディターを立ち上げて、「ファイル」→「開く」で、 web1.html を選択して開いて下さい。 ファイルの上の方に、 

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
               "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xml:lang="ja" version="-//W3C//DTD XHTML 1.1//EN">
<head>
   <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS" />
   <meta http-equiv="Content-Style-Type" content="text/css" />
   <link rel="stylesheet" href="mihon.css" type="text/css" />
   <title>ウェブページの練習１</title>
</head>

みたいに書かれていますが、取り敢えずこの部分は、必要なおまじないだと 思っておいて下さい （この部分には HTML のバージョンは XHTML 1.1 を使うとか、 文字コードは Shift_JIS を使うとか、 スタイルシートは mihon.css を使うといった、文書の設定に関することが書かれています）。 作用機序の理解できない現象を神秘化して魔法や「おまじない」などと 名付けることで説明を放棄する非科学的な態度に堪えられないという人は、せめて 

<html>
<head>
   <title>ウェブページの練習１</title>
</head>

とだけでも書いておいて下さい （これしか書かないとどのような問題が生じるのかということについては、 Another HTML-lint gateway の採点結果の解説などを参照しながら勉強して下さい）。 HTML の基本的な骨格は、 

<html>
 <head>
   <title>ページのタイトル</title>
 </head>
  <body>
   本文
  </body>
</html>

のようになっています。
<html> と </html> で挟まれた部分に HTML 言語で記述したテキストを書きます。
<head> と </head> で挟まれた部分に、文書の内容以外の基本的な設定に関する情報 （HTMLのバージョンや文字コードの宣言とか、どのスタイルシートを使うか、 文書のタイトルなど）を書きます。
<title> と </title> で挟まれた部分に文書のタイトルを書きます。
<body> と </body> で挟まれた部分に文書の本文を書きます。
このように HTML では、テキストに何らかの作用をさせるコマンドは、 <作用> と </作用> で囲まれた部分に作用するようになっています。 こうした HTML のコマンドのことを タグ と言います。 web1.html の <body> と </body> で挟まれた部分（つまり本文）の中で使われているタグについて 説明していきます。

(先頭) (目次)
\section, \subsection

章立て、見出しの書き方： 

\section{題目（\LaTeX の練習１）}
\subsection{見出し１}
見出し

\section, \subsection, \subsubsection などのコマンドは、章立ての見出しを表します。 

\section{章タイトル}
 \subsection{節タイトル}
  \subsubsection{項タイトル}

のような階層構造になります。 \section*{番号なしタイトル}のように、*マークをつけると、 （HTML のように）番号のつかない章立てになります （web2.tex参照）。

h

見出しの書き方： 

<h2>題目（ウェブページの練習１）</h2>
<h3>見出し１</h3>

h1, h2, h3, h4, h5, h6 などのタグは、見出しを書くためのタグで、 数字が大きいほど下位の見出しとなります。 一般的なブラウザでは、下位の見出しほど小さい文字で表示されます。 見え方：

題目（ウェブページの練習１）

見出し１

(先頭) (目次)
空行

空行を入れると、改行され、 次の段落が、字下げして始まる。 

段落１：ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。

片持ち梁の先端のたわみは $\delta = \frac{P\ell^3}{3EI}$ である。
ここに色々と文章が書いてあるとする。
段落
p

段落（というか文章のかたまり）の書き方： 

<p>
段落１：ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
</p>

p は段落（の中身の文章）を書くためのタグです。見え方：

段落１：ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。

(先頭) (目次)
\\

\\ を入れると強制改行される。 

段落２：ここに色々と文章が書いてあるとする。
強制改行してみる。\\
ここに色々と文章が書いてあるとする。
強制改行してみる。\\
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
改行

空行を入れたい（鉛直方向に空白を空けたい）場合に、 

\\
\\
\\

みたいに強制改行を連ねて書くこともできることはできますが、 あまり薦めません。というのは、 空行（改段落）の直後に \\ があるとエラーになるし、 center環境などでもエラーになります。 その場合は、\ \\ を連ねるという逃げ道もありますが。 鉛直方向に空白を入れたい場合は、 \vspace を使います。

文章の中に式を書く
片持ち梁の先端のたわみは $\delta = \frac{P\ell^3}{3EI}$ である。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
片持ち梁の先端のたわみは 
$\displaystyle{   \delta = \frac{P\ell^3}{3EI}   }$ である。
文中に式
br

改行の書き方： 

<p>
段落２：ここに色々と文章が書いてあるとする。
改行してみる。
<br />
ここに色々と文章が書いてあるとする。
</p>

br は改行するためのタグです。 これは空間要素タグというもので、 <作用> と </作用> で挟むものがありません。 このように挟むものがないタグは、<作用 /> みたいに右側の>を/>で閉じるように書きます 因みに、HTML4.01（以前の HTML）では空間要素タグも <作用>のように書かれます。 見え方：

段落２：ここに色々と文章が書いてあるとする。 改行してみる。
ここに色々と文章が書いてあるとする。
















HTML の中にマークアップ方式で式を書き込む方法としては、 XML を使うものとしては MathMLがありますが、 LaTeX に比べると手書きするのは極めて難しいようですし、 ブラウザーが対応していないと表示できません。 TeX （とほぼ同じ表現）をそのまま書き込めるものとしては、 mimeTeXがありますが、 サーバーに CGI をインストールする必要があります （掲示板などで使うぶんには割と便利そうです）。 私は今のところ、 LaTeX で書いた数式の dvi 出力を画面キャプチャーして画像ファイルに してから HTML に貼り付けています。

(先頭) (目次)
\bf, \small, \it, \textcolor

文字装飾のやり方： 

{\small 小さい文字}を書いてみる。\\
普通サイズの文字。\\
{\large 大きい文字}を書いてみる。\\
{\Large もっと大きい文字}を書いてみる。\\
{\bf ボールド体}を書いてみる。\\
{\it Italic}を書いてみる。\\
\textcolor{red}{ 赤い文字 }を書いてみる。\\
\textcolor{blue}{ 青い文字 }を書いてみる。\\
ここに色々と文章が書いてあるとする。
文字装飾
空行を作って式を挿入
ここに色々と文章が書いてあるとする。
\begin{equation}
\int_{a}^{b} x dx = \left[\frac{x^2}{2} \right]_{a}^{b}
\end{equation}
ここに色々と文章が書いてあるとする。
式
em, strong, small, span, style, color

文字装飾のやり方： 

<em>斜体文字</em>を書いてみる。<br />
<strong>強調文字</strong>を書いてみる。<br />
<small>小さめの文字</small>を書いてみる。<br />
<span style="color:#ff0000">赤い文字</span>を書いてみる。<br />
<span style="color:#cc0000">もう少し濃い赤い文字</span>を書いてみる。<br />
<span style="color:#0000ff">青い文字</span>を書いてみる。<br />
<span style="color:#0000cc">もう少し濃い青い文字</span>を書いてみる。<br />

文字を強調する時は、em を使います （みなさんの環境ではたぶん斜体で表示されます）。
更に強調するときは、strong を使います （みなさんの環境ではたぶん太文字で表示されます）。
小さめの文字にするときは small を使います。
文字に色を付けるときは、色を付けたいところを <span style="color:# rr gg bb"> と </span> で挟みます。但し、 rr gg bb には、それぞれ R,G,B の階調値を 00〜ff までの二桁の16進数 で与えます。見え方：

斜体文字を書いてみる。
強調文字を書いてみる。
小さめの文字を書いてみる。
赤い文字を書いてみる。
もう少し濃い赤い文字を書いてみる。
青い文字を書いてみる。
もう少し濃い青い文字を書いてみる。

(先頭) (目次)

LaTeX（その2）

web2.tex （web2.pdf）, web2w.tex(utf-8)

リスト、表
enumerate, itemize, \item

　web2.tex （web2.pdf）は、リスト（箇条書き）や 表を書く見本です (Linux用EUCコード版は 　web2e.tex )。番号付きリストを書くには、 

\begin{enumerate}
 \item 項目１
 \item 項目２
 \item 項目３
\end{enumerate}

と書くと

enumerate

のようになります。\enumerate の代わりに \itemize と 書くと番号なしのリストになります。

番号有りリストの中に番号なしリストを入れ子で 

\begin{enumerate}
 \item 項目１
 \item 項目２
  \begin{itemize}
   \item 項目２−１
   \item 項目２−２
   \item 項目２−３
  \end{itemize}
 \item 項目３
\end{enumerate}

のように書くと、

入れ子

のようになります。

XHTML（その2）

web2.html

リスト、表
ol, ul, li

　web2.html は、リスト（箇条書き）や 表を書く見本です (Linux用EUCコード版はweb2e.html)。 番号付きリストを書くには、 

<ol>
 <li>項目１</li>
 <li>項目２</li>
 <li>項目３</li>
</ol>

と書くと

  1. 項目１
  2. 項目２
  3. 項目３

のようになります。ol の代わりに ul と書くと番号なしのリストになります。

番号有りリストの中に番号なしリストを入れ子で 

<ol>
 <li>項目１</li>
 <li>項目２
  <ul>
   <li>項目２−１</li>
   <li>項目２−２</li>
   <li>項目２−３</li>
  </ul>
 </li>
 <li>項目３</li>
</ol>

のように書くと、

  1. 項目１
  2. 項目２
    • 項目２−１
    • 項目２−２
    • 項目２−３
  3. 項目３

のようになります。

(先頭) (目次)
\hrule 
区切り線を入れてみる。
\hrule
表を書いてみる
区切り線
hr

↑この区切り線は、<hr /> と書いています。 挟むもののない空間要素タグなので右側を /> で閉じています。 ↓にももう1本入れておきます。

(先頭) (目次)
table, tabular, &

表は、 

\begin{table}[h]
\begin{tabular}{|c|c|c|}
\hline
   １行目１列目 & １行目２列目 & １行目３列目\\
\hline
   ２行目１列目 & ２行目２列目 & ２行目３列目\\
\hline
\end{tabular}
\end{table}

みたいに書きます。 \begin{tabular} に続く{ } に列の数だけ c（中央寄せ）または l（左寄せ）または r（右寄せ）の文字を入れます。 列の間に縦の区切り線を入れたいところに | を入れます。 行の間に横の区切り線を入れたいところに \hline を入れます。 各行の中の各列の成分は、 & で挟みながら並べ、改行箇所に \\ を入れます。

表

式で行列を書く方法も似ています。 

\begin{equation}
 \left(
  \begin{array}{c}
   b_{1} \\
   b_{2} \\
   b_{3} 
  \end{array}
 \right)
=
 \left[
  \begin{array}{ccc}
   a_{11} & a_{12} & a_{13} \\
   a_{21} & a_{22} & a_{23} \\
   a_{31} & a_{32} & a_{33}
  \end{array}
 \right]
%
 \left(
  \begin{array}{c}
   x_{1} \\
   x_{2} \\
   x_{3} 
  \end{array}
 \right)
\end{equation}
行列
table, tr, td

表は、 

<table border="1" style="text-align:center" summary="表の練習">
 <tr>
  <td>１行目１列目</td>
  <td>１行目２列目</td>
  <td>１行目３列目</td>
 </tr>
 <tr>
  <td>２行目１列目</td>
  <td>２行目２列目</td>
  <td>２行目３列目</td>
 </tr>
</table>

みたいに書きます。 table border="1" というのは 枠線の太さです。 1 の代わりに、2 とか 3 を入れると枠線が太くなります。
style="text-align:center" というのは、表の升目の中の文字列を、 中央寄せで書くということです。
summary="表の練習" というのは、この表の概要を書いておきます。 例えば、読み上げソフトで音声として閲覧される場合などに利用されます。
各行の成分は、 <tr> と </tr> の間に１行ぶんずつ挟みます。 各行の中の各列の成分は、 <td>と</td>の間に挟みます。見え方：

１行目１列目 １行目２列目 １行目３列目
２行目１列目 ２行目２列目 ２行目３列目
(先頭) (目次)

LaTeX（その3）

web3.tex （web3.pdf）, web3w.tex(utf-8)

（ハイパーリンク、引用）
hyperref, href

　 web3.tex（web3.pdf） はハイパーリンクの張り方の見本です (Linux用EUCコード版は web3e.tex )。 dvi ファイル（や、それを dvipdfmx で pdf 化した pdf ファイル）から インターネット上のウェブページなどにリンクを張る場合は、 hyperref というパッケージを使います。 

\documentclass[a4j]{jarticle}
\usepackage{hyperref}

例えば、 

\href{http://www.akita-u.ac.jp/}{ 秋田大学のページ }

のように、 \href{ リンク先URIアドレス }{ リンク先のページの名前 } と書くと

インターネット上のウェブページにリンクが張れます。 web3.dvi （web3.pdf）で試してみて下さい。 但し、Linux（Vine やMLD など）では、この方法ではうまくいかない と思います。 \usepackage{hyperref} のところを、 \usepackage[dvipdfm]{hyperref} と書いてコンパイルしてから、 dvipdfmx で 作成したpdfファイルなら、リンクが有効になると思います （LinuxMLD7の場合参照）。

XHTML（その3）

web3.html

（ハイパーリンク、引用）
a, href

　web3.html はハイパーリンクの張り方の見本です (Linux用EUCコード版はweb3e.html)。 

<a href="http://www.ce.akita-u.ac.jp/">土木環境工学科のページ</a>

のように、 <a href="リンク先のURIアドレス">リンク先のページの名前</a> と書くと

土木環境工学科のページ

みたいにインターネット上のウェブページにリンクが張れます。 因みに、ウェブページの中には、 「無断リンク禁止」とか「トップページ以外のリンク禁止」みたいなことを 書いているページもありますが、 インターネット上に公開されているページである以上、 どのページにも無断で自由にリンクを張ることができると私は考えています （参考： 後藤 斉さんとこ の /webpolicy.html#okamura や /webpolicy.html#sumwel ）。

(先頭) (目次)
\hypertarget,\hyperlink

　同じページ内の文書の特定の箇所にリンクを張りたい場合は、 

\hyperlink{midasi2}{見出し２}へリンクを張ってみる。\\
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
%
\hypertarget{midasi2}{ \section{見出し２} }
%
段落２：ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。

まず、リンクを張りたいリンク先の文字列に、
\hypertarget{半角英数のラベル}{リンク先の文字列} みたいに書いてラベルを付けておいて、 リンク先へ飛ぶリンク元の文字列の方に、
\hyperlink{半角英数のラベル}{リンク先の文字列 } のようにリンクを張る。 web3.dvi （web3.pdf）で試してみて下さい。

id

　同じページ内の文書の特定の箇所にリンクを張りたい場合は、 

<p>
……については<a href="#tugi">次章</a>で述べる。
この章には色々と文章が書いてある。
この章には色々と文章が書いてある。
この章には色々と文章が書いてある。
この章には色々と文章が書いてある。
この章には色々と文章が書いてある。
この章には色々と文章が書いてある。
</p>

<h4><a id="tugi">次章</a></h4>

<p>
この章にも色々と文章が書いてある。
この章にも色々と文章が書いてある。
この章にも色々と文章が書いてある。
</p>

まず、リンクを張りたいリンク先の文字列に、
<a id="半角英数のラベル">リンク先の文字列</a> みたいに書いてラベルを付けておいて、 リンク先へ飛ぶリンク元の文字列の方に、
<a href="#半角英数のラベル">リンク先の文字列</a> のようにリンクを張る。見え方：

……については次章で述べる。 この章には色々と文章が書いてある。 この章には色々と文章が書いてある。 この章には色々と文章が書いてある。 この章には色々と文章が書いてある。 この章には色々と文章が書いてある。 この章には色々と文章が書いてある。

次章

この章にも色々と文章が書いてある。 この章にも色々と文章が書いてある。 この章にも色々と文章が書いてある。

ある HTML ファイルから、 その HTML ファイルが置かれているのと同じディレクトリーの中にある 他の HTML ファイルや画像ファイルにリンクを張る場合は、 href="ファイル名" と書くことでリンクを張れます。 例えば、今、web3.html を置いてあるディレクトリーの中に、 web1.html と mokkyou.jpg が 保存してあるなら、 web3.html に 

<a href="web1.html">web1.html</a>
<a href="mokkyou.jpg">mokkyou.jpg</a>

と書くことで、それらのファイルにリンクからアクセスすることができます。

(先頭) (目次)
中央寄せ、右寄せ、左寄せ
center, flushright, flushleft

文（や図など）の中央寄せは center を使う。 但し、ドキュメントクラスにjsarticleを使っている場合は、 \section{}類のセンタリングは無効になる。 

\begin{center}
 \section{題目を中央寄せ（\LaTeX の練習３）}
\end{center}
中央寄せ

右寄せは flushright 左寄せは flushleft を使う。 

\begin{flushright}
 \hyperlink{midasi1}{ 見出し１ }へ戻る
\end{flushright}
右寄せ
中央寄せ、右寄せ、左寄せ
div, style, text-align, center, right, left

文（や図など）を中央寄せする場合： 

<div style="text-align:center">
 <h3>題目を中央寄せ（ウェブページの練習３）</h3>
</div>

題目を中央寄せ（ウェブページの練習３）

右寄せする場合： 

<div style="text-align:right">
   <a href="#midasi1">見出し１</a>へ戻る
</div>
見出し１へ戻る

HTML には構造だけを書くようにするという XHTML の方向性としては、 中央寄せ、右寄せなどのレイアウトに関することは、 スタイルシートに書く のが本来は望ましいと思います。

(先頭) (目次)
quote, footnote

　引用した文章などを字下げして、 引用箇所であることを明示したいような場合： 

ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
\begin{quote}
例えば、この段落をインデントして引用文などを置くとする。
ここに引用文が置かれているとする。
ここに引用文が置かれているとする。
ここに引用文が置かれているとする。
\end{quote}
quote

注釈をフッターに入れたい場合、 注釈を入れたい語句の直後に続けた \footnote{ } の { } 内に 注釈を書くと、注釈がページのフッターに書き込まれる。 

ここに色々と文章
\footnote{後藤資料：http://www.str.ce.akita-u.ac.jp/\~{}gotou/ }
が書いてあるとする。
ここに色々と文章が書いてあるとする。
quote
blockquote, em

　引用した文章などを字下げして、更には字体を変えるなどして、 引用箇所であることを明示したいような場合： 

<p>
ここには色々と文章が書いてある。
ここには色々と文章が書いてある。
ここには色々と文章が書いてある。
以下の引用文を参照して下さい。
</p>

<blockquote>
<p>
 <em>
罫線を引き、レイアウトに凝り、社内ロゴなどを貼り込む。
そうした書類のテンプレートをWordで作ってしまうと、簡単なメモや伝達事項まで、
Wordを使ってそのフォーマットにしないといけなくなってしまう。
これは、せっかく文字をデジタル情報に変換してデータ化しやすくしたのに、
再び紙の上に印刷してアナログ情報に戻してしまうことを意味する。
 </em>
<br />
鐸木能光『ワードを捨ててエディタを使おう』（SCC）, p.14
</p>
</blockquote>

<blockquote> と </blockquote> に挟んだ部分が字下げ（インデント）されます。 但し、 <blockquote> と </blockquote> の中にいきなり文章を書くことはできないので、 段落タグ（<p>,</p>）などで挟んである文章を挿入する 必要があります。 em は強調文字を示すタグです。 <em> と </em> に挟まれた部分は、みなさんの環境ではたぶん斜体で表示されると思います。 見え方：

ここには色々と文章が書いてある。 ここには色々と文章が書いてある。 ここには色々と文章が書いてある。 以下の引用文を参照して下さい。

罫線を引き、レイアウトに凝り、社内ロゴなどを貼り込む。 そうした書類のテンプレートをWordで作ってしまうと、簡単なメモや伝達事項まで、 Wordを使ってそのフォーマットにしないといけなくなってしまう。 これは、せっかく文字をデジタル情報に変換してデータ化しやすくしたのに、 再び紙の上に印刷してアナログ情報に戻してしまうことを意味する。
鐸木能光『ワードを捨ててエディタを使おう』（SCC）, p.14

(先頭) (目次)
verbatim

プログラムソースや、メールログなど、 改行なども含めて、テキストに書いたままを表示させたい場合 

\begin{verbatim}
例えばメールの引用とか、改行を含めて
そのまま表示させたい場合。
１）項目１
２）項目２
３）項目３
とか。
\end{verbatim}
verbatim

& とか % とか、LaTeX のコマンド（の一部）として使われる 記号を文章の中に書きたい場合は \& とか \% のように \ を 付けて書きます。 \ マーク自体を書きたいときは全角の￥で代用するとか、 コマンドを定義するとか 。

pre

メールのテキストなどを、改行なども含めて テキストに書いてあるとおりに表示させたい場合 

<pre>
&gt;ごぶさたしてます
こちらこそごぶさたしてます

&gt;あしたの件は大丈夫ですか
はい、勿論大丈夫です。
</pre>

のように、書いてあるとおりに表示させたいテキストの部分を <pre> と </pre> で挟む。 タグ自体を記述したりするのに使われる <や>や& などの特殊記号は、 &lt;や&gt;や&amp; のように書かなければならない。見え方： 

>ごぶさたしてます
こちらこそごぶさたしてます

>あしたの件は大丈夫ですか
はい、勿論大丈夫です。
(先頭) (目次)

LaTeX（その4）

web4.tex, mokkyou.eps （web4.pdf）, web4w.tex (utf-8)

（画像貼り付け）
graphicx,epsf,wrapfigure,figure,center,epsfbox,caption

web4.tex （web4.pdf） は画像貼り付けの見本です (Linux用EUCコード版は web4e.tex )。 LaTeX に画像を貼り付ける方法は色々とありますが、 ここでは、 graphicx パッケージを使った貼り付けをやってみます。 jlatex209など LaTeX2.09系の古い LaTeX で、 epsf.sty のスタイルファイルで画像取り込みする場合については、 こちら参照。 graphicx パッケージを使う場合、貼り付けられる画像ファイルの形式も 色々ありますが、 dvipdfm などで pdf ファイルを作成する便を考えると、 画像ファイルを eps ファイルにしてから貼り付けるのが いいのではないかと思います。 jpg や bmp の画像ファイルを eps に変換するソフトとしては、 Windows なら、 EPS-conv が手軽で便利です。 mokkyou.epsは、ここにも置いておきます。 

\documentclass[a4j]{jarticle}
\usepackage{graphicx}

まず、 \usepackage{graphicx} と書いて graphicx パッケージを読み込みます。
行間に隙間を作って 中央寄せで図を挿入する場合は、以下のようにします。 

\begin{figure}[h] 
 \begin{center}
  \includegraphics[width=4cm]{mokkyou.eps}
 \end{center}
 \caption{坊中橋の写真}
\end{figure}
図中央

XHTML（その4）

web4.html, mokkyou.jpg

（画像貼り付け）
div, img, src

web4.html は画像貼り付けの見本です (Linux用EUCコード版はweb4e.html)。 文章のないところに、 場所を指定して写真だけを貼り付ける場合： 

<div style="text-align:center">
 <img src="mokkyou.jpg" alt="木橋" />
 <br />
 坊中橋の写真
</div>

<div style="text-align:center"> と </div> で挟んだ部分（画像に限らず文字列なども）は、中央寄せで配置されます。 style="text-align:center" のところを、 style="text-align:right" にすれば右寄せで配置されます。 HTML ファイルが置いてあるのと同じディレクトリー内にある mokkyou.jpg という画像ファイルを貼り付けるには、 <img src="mokkyou.jpg" alt="木橋" /> と書きます。alt="木橋" は、画像を表示できない場合に表示させる （音声読み上げも含む）テキストです。見え方：

木橋
坊中橋の写真
(先頭) (目次)
wrapfigure

文章の中の右端か左端に四角い隙間を作って図を挿入したい場合、 

\documentclass[a4j]{jarticle}
\usepackage{graphicx,wrapfig}

wrapfig というパッケージを読み込みます (wrapfloatというのもありますが、これは古いようなので)。
文章の右端に隙間を作って図を挿入する場合： 

ここに色々と文章が書いてあるとする。
写真を文章の中に右寄せで挿入してみる。
%10行の空行を右側に4.5cmの幅で空けてそこに図を挿入する方法：
%空行を一つ入れる

\begin{wrapfigure}[10]{r}{4.5cm}
  \includegraphics[width=4cm]{mokkyou.eps}
  \caption{坊中橋の写真}
\end{wrapfigure}
%
ここに色々と文章が書いてあるとする。
木橋
float

文章の中に写真を挿入する場合： 

<p>
写真を文章の中に右寄せで挿入してみる。
<img src="mokkyou.jpg" alt="木橋" style="float:right" />
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
</p>

例えば右寄せで挿入する場合は、 <img src="mokkyou.jpg" alt="木橋" style="float:right" /> のように、style="float:right" を書き加える。 style="float:left" とすれば左寄せになる。見え方：

写真を文章の中に右寄せで挿入してみる。 木橋 ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。

尚、高解像度のデジカメのバカでかいサイズの画像ファイルなどを そのまま貼り付けたりしないこと。 みなさんのディスプレーの解像度は、1024×768ピクセルなので、 仮に1024×768ピクセルの画像を貼り付けると画面いっぱいに表示されます。 画像ファイルはサイズが大きいので、 ネット上に置く場合は、必要最小限のサイズまで縮小してから置くこと。 ディスプレーの解像度を超える巨大な画像を、サイズ指定して小さく表示させる などという（サーバー容量の）無駄使いはしないように。

(先頭) (目次)
width, height

写真の縦横比を変える場合は、 \includegraphics[ ] 内で width と height の両方を指定することで縦横比を絶対指定します （width か height のどちらか一方しか 指定されていなければ、元画像の縦横比になる）。 

写真を文章の中に右寄せで挿入してみる。
写真の大きさや縦横比を変えてみる。
% 空行を1行入れてから

\begin{wrapfigure}[12]{r}{3cm}
  \includegraphics[width=2cm,height=4cm]{mokkyou.eps}
  \caption{坊中橋の写真}
\end{wrapfigure}
ここに色々と文章が書いてあるとする。
縦横比
height, width

写真の大きさを指定したり、縦横比を変える場合： 

<p>
写真の大きさや縦横比を変えてみる。
< img src="mokkyou.jpg" alt="木橋" 
     height="200" width="100" style="float:right" />
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
ここに色々と文章が書いてあるとする。
 </p>

height= で高さのピクセル値を、width= で横幅のピクセル値を指定する。 元画像の大きさを変化させない場合でも、 元画像の縦横のピクセル値を指定した方が画像の表示は速くなるみたいです。 この方法でサイズの変更ができるからといって、 デジカメなどで撮影した（ディスプレーの解像度を超える） 巨大なサイズの画像をサイズ指定して小さく表示させる などという（サーバー容量の）無駄使いはしないように （画像の表示も遅くなるし）。 見え方：

写真の大きさや縦横比を変えてみる。 木橋 ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。 ここに色々と文章が書いてあるとする。

(先頭) (目次)