[ 板情報 | アニメ/アニメグッズ ] |
| Help 2012-09-27改訂 Japan, Music, Internet & Computer
30分間HTML入門
HTMLは決して難しいものではありません。基本的なことがらなら、30分で概要を理解することだって可能です。そして、その基本だけで、十分ウェブページを書くことができるのです(ここでは、より広い可能性を持つXHTMLの書き方に準じて説明します)。
最初の準備
よいHTML
HTMLの基本形
タグとは何か
タイトルを決める
分かりやすい本文の構造
段落を示す
見出しをつける
リストにして示す
いろいろな情報の伝え方
リンクする
強調する
画像を表示する
作者情報
マーク付け言語と文字の情報
よいHTML
せっかくHTMLの書き方を身につけるのですから、どうせなら「よい」HTMLを書けるようにしましょう。全ての学習と同じで、「よい」メソッドを身につけると、絶対に理解も早いしあとが楽になります。すぐにHTMLを書きたい人も、ちょっとだけ付き合ってください。
よいHTMLの条件
よい文章の条件の一つが、読む人の立場に立って読みやすく書くことであるように、よいHTMLを書くためには、「利用者の立場に立って分かりやすく」を心がけることが大切です。ただし普通の文章と違って、HTMLの「直接の利用者」は人間ではなく、ブラウザなどのコンピュータのソフトであるということに注意しなければなりません(人間の「読者」はHTMLを読むのではなく、ブラウザがHTMLの内容を「表示」した結果を読んでいるのです)。だから、よいHTMLはこれらの利用者に分かりやすいように書かれている必要があります。
といっても、難しく考えないでください。このためには、HTMLを使ってどれが見出しでどれが重要な語句か(つまり文書の構造)をきちんと示してあげればよいのです(具体的な方法は次のセクション以降で説明します)。ブラウザなどのソフト(利用者)はHTMLを読みとって文書の構造を把握し、例えば「見出しは大きな文字で、重要なところは太字で」という具合に、読者に分かりやすい形で表示するという仕事をします。
仕様書などでは、人間の読者であるユーザー(User)に対してブラウザなどのソフトをユーザエージェント(User Agent = UA)と呼びます。UAはウェブの情報をサーバーから受け取り、必要に応じて利用者のために分析したり読みやすく表示するという、人間の「代理」としての役割を担うのです。仕様書などではこうした用語が使われますが、この文書では簡便に利用者と読者として説明することにします。
なぜフォントじゃなくって「構造」なの?
なぜ最初から見出しを「MSゴシック」の16ポイントで書いたMicrosoft Wordの文書を使わずに、こういう一見回りくどい仕組みで文書を公開するのかっていうと、人によってコンピュータの環境が異なるからなのです。Macintoshには「MSゴシック」というフォントはありませんし、誰もがWordを使っているわけではありません。小さなモノクロ画面の携帯端末でページを見ている人もいます。そこで、誰もが情報を共有できるようにするために、環境に依存する文字の指定方法ではなく、「見出し」という意味上の位置づけだけを情報として加えておいて、ソフトウェアが読者の環境に合わせて表示する方法が考えられたのです。
こうしておけば、目が不自由な人で音声合成ソフトでページを「読み上げ」ている場合でも、“見出し部分は少しトーンの高い声でゆっくり読む”といった設定にすることで、文章を理解しやすくなります。また、ソフトウェアに「とりあえず見出しだけを集めて文章の要約を作れ」と指示することで、長い論文を効率的に調べることも可能です。
息の長いページを
よいHTMLは利用者のためばかりではありません。正しいHTMLを書くことは「作者」にとっても大きなメリットになります。
HTMLとして公開するページは、大切な情報資産です。その内容は、多くの場合ブラウザなどのソフトウェアよりも長い寿命を持ち、何年にもわたって多くの人に利用されます。そのような貴重な情報が、特定のブラウザの特定のバージョンに合わせて書いたために、何年か後に正しく表示されなくなるとしたらとても残念なことです。
標準に従って文書の構造を示すように書かれたHTMLは、ブラウザの種類やバージョンに関係なく、常に正しく情報を伝えることができます。たとえ見かけ上の表現方法が変わっても、「見出し」や「段落」という構造表現の概念は変わることがないからです。大切な情報を息長く活用できるようにするためにも、ぜひ「よいHTML」を書くようにしてください。
* * *
やっぱり難しそう? 安心してください。本来HTMLはそのような目的のために作られているので、文書の構造を示すためのHTMLは素直で簡単です。HTMLで「格好いいレイアウト」を実現しようと無理するから、変なテクニックが蔓延して複雑になっているだけなんです(格好いいレイアウトやデザインは、スタイルシートを使うことで、ずっと簡単に、効果的に実現できます)。
詳しくは「HTMLって何だ」を参照
HTMLの基本形
「利用者」に分かりやすくするために、1つのHTML文書(ファイル)は次の2つの部分から構成されます。
そのHTMLファイル自身に関する情報
読者に読んでもらう本文
まず最初に、この1と2がどのように構成されるかを見ていくことにしましょう。
HTMLの要素
1番目の部分をHTMLのhead要素といい、2番目の部分をbody要素といいます。この2つをあわせたもの、つまりHTMLの本体をhtml要素といいます。こんなふうに、HTMLでは文書を構成するパーツを「要素」と呼んで、要素の組合せとしてページを作り上げていきます。
さて、私たちが勝手に「これは要素だ」と決めても、それを何らかの方法で明示してあげないことには、「利用者」には区別がつきません。そこで、文中に「ここからここまでがこの要素だ」という目印を付けることにします。この目印を「タグ」と呼び、目印を付けていくことを「マークアップ」といいます。HTMLとはHypertext Markup Languageの略ですが、ここで出てくるMarkupとはこのような目印付けのことを意味しているのです。
詳しくは「ヘッド要素とボディ要素」を参照
タグとは何か
タグは要素の名前を山括弧( < と > )で囲んだものです。つまりhead要素を示すタグはとなります。
タグが1つでは、「ここからここまで」というマークアップができませんから、通常タグは2つをペアで使います。「ここから」を示すタグを開始タグ、「ここまで」を示すタグを終了タグといいます。終了タグは、開始タグと区別するために最初の山括弧をとします。したがって、head要素をマークアップするタグは
ヘッド要素の内容
となります。タグで囲まれた部分を要素の「内容」といいます。
では、タグを使ってここまでに登場した要素をマークアップしてみましょう。
ヘッド要素の内容
ボディ要素の内容
これがHTMLの骨格です。あとはこれにいろいろな内容を肉付けしていけばよいのです(html開始タグの...の部分には付加情報を記述します。これについては最後に説明します)。
ここでなどのタグの左に余白をとったり、タグの間に改行を入れたりしていますが、これは「作者」の読みやすさのためです。HTMLでは好きなだけ改行や空白(ただし半角)を入れて構いません。ページがブラウザで表示されるときは、余分な改行や空白は取り除かれます。逆に文書の構造上、改行がある方が分かりやすい要素には、ブラウザが自動的に改行を加えてくれます。
タイトルを決める
どんな文書も「タイトル」「件名」なしでは通用しません。同様にHTMLにもタイトルが常に必要です。タイトルはその名の通りtitle要素で表します。また、タイトルはそのHTML文書に関する情報なので、head要素の内容になります。
まず私のいいたいことは… …ということだ。 次に言っておくべきは… …なのだ。 ... 例では二つのp要素の間に1行空きを入れていますが、これも「作者」の読みやすさのためです。段落の途中で改行しても、やはりそれはブラウザで表示するときに取り除かれます。 「段落」は意味のまとまりを示すもので、「見かけ上の改行」という考え方とは異なります。読者(人間の)にとって分かりやすいように段落をまとめてください。 詳しくは「段落と改行」を参照 見出しをつける 文章が長くなってくると、いくつかの見出しを入れて読みやすくなるように工夫します。見出しには一般に「大見出し」「中見出し」「小見出し」などのレベルがあるので、HTMLでも複数のレベルの見出しが用意されています。 見出しを示すのは、h1〜h6の6つのheading要素です。h1が大見出し、h2が中見出しと、数字が大きくなるにつれて下位レベルの見出しになっていきます。通常、大見出しの次にいきなり小見出しがこないように、h1の次に突然h4を使ったりせず、h1, h2...と順番に使っていってください。私の主張序論まず私のいいたいことは…ということだ。 次に言っておくべきは…なのだ。 本論いいたいことその1最初の点をくわしく説明しよう… ... リストにして示す 箇条書きにしたほうが分かりやすい内容があります。このために、列挙型の箇条書き(ul要素)と順序付きの箇条書き(ol要素)があります。箇条書きにする部分をこの要素でマークアップし、項目をli要素で並べます。 順序に特に意味がなければ
ためになる情報がある hrefで示しているリンク参照先のアドレスをURL(URI)と呼びます。同じディレクトリ(フォルダ)にある自分のファイルにリンクするには、ここにそのファイル名を書きます。 たとえばリンク集を作るときは、前項のリストと組み合わせて、li要素の内容をこのaタグで囲んだリンク元にすればよいわけです。 詳しくは「ハイパーリンクを提供する」を参照 強調する ずっと文字だけを書いていくと、ポイントがわかりにくくなるかもしれません。重要なところは強調しておくと読みやすいですね。htmlでの強調は、em要素とstrong要素を使います。これらのタグで囲まれた部分が、ブラウザによってイタリックや太字として強調表示されます。 強調表示の方法は、ブラウザや読者の設定によって、たとえば赤い文字になったり下線付き文字になったりすることもあって、太字とは限りません。ここで伝えるべきことは、「太字」ということではなく、「ここは強調ポイント」ということで、それをどう表現するかは環境によって異なるのです。 詳しくは「語句の強調とハイライト」を参照 画像を表示する 無理に画像を使わなくても立派なページを作ることができますが、それでも図や写真の方が分かりやすい情報もあります。 ページ内に画像を掲載するためには、その画像を別のファイルとして用意し、img要素を使ってファイルの在処を示します。あわせて、画像を表示しない利用者のために、画像の代わりとなる文を提供します(もともと画像を表示しないブラウザもあれば、読者の設定によって画像を表示しないようにすることもできます)。 srcが画像ファイルの在処(URL)、altが代替文です。代替文は、“写真があること”の説明(たとえば"picture"とかファイル名"monkey.gif")ではなく、例のようにその写真で伝えたい内容が分かるような文を書いてください。ブラウザはimg要素を見つけると、画像を表示できる場合はsrcで示されたファイルの中身を、表示できないときはaltの代替文をそこに表示します。 img要素による画像は、文字と同じ扱いを受けます。画像だけを単独で使う場合も、p要素を使って段落として扱ってください。画像を右寄せにしたり、周囲にテキストを回り込ませたりするにはスタイルシートを使います。 このタグは、これまで出てきたタグと違って終了タグがない(従ってタグで囲まれるべきimg要素の「内容」もない)空要素のタグであることに注意してください。終了タグを探さなくてよいことを利用者に示すため、空要素の場合は開始タグの最後を />で閉じます。 詳しくは「画像の表示」を参照 作者情報 作品に署名するのは当然ですが、HTMLの場合は、検索サイトから突然途中のページにやってくる人もいるので、全てのファイルに署名しておくことが大切です。このためにはaddress要素を用い、さらに作成(更新)日付を含めてfooterとしておきます(署名はページの最後に置く人が多いようなのでfooterとしましたが、文頭にheader要素として加えるなど、どこに書いても構いません)。 mailto:はメールアドレスを示すためのURLの書き方です。日付の書式については、当サイトの日付の表記に関するノートも参照してください。 詳しくは「署名しよう」を参照 補足:文字コードとマーク付け言語の情報 HTMLではいろんな「文字コード」が使われるので(ブラウザの「表示→エンコード」などのメニューを開いてみてください)、自分の文書で使っている文字コードを利用者に教えてあげる必要があります。これはサーバーで設定するのですが、サーバーにそのような機能があるかどうか分からない場合は、次例に示すようにmeta要素をhead要素の先頭に加えます。 |
| スレッド作成: |
|
1 : Ι'm looking for sеriou��� man..(1) / 2 : Ι want tо meet seriоu��� man... (:(1) / 3 : Ι'm lооking fоr sеrious man!..(1) / 4 : Cаn Ι find hеrе seriоus man? :)(1) / 5 : コミニュティチャット★1(4) / 6 : キャップ配信(1) / 7 : 深夜アニメ★1(1) / 8 : 管理人への要望スレ★1(1) / 9 : 管理人への質問スレ★1(1) / 10 : アニメ雑談スレ★1(2)
(全部で10のスレッドがあります) 掲示板の使い方 / 新着をメールで受信 / 過去ログ倉庫 / スレッド一覧 / リロード |
|
|
|
|
|
|
|