ガイドグループ世話人の日記

はてなダイアリーガイド

はてなダイアリーガイドの草稿置き場です。この日記へリンクはどこでもご自由にどうぞ。ガイドを作るガイドグループ参加もお気軽に*。グループに入らなくても、ガイドははてなダイアリー市民なら誰でも作成・編集できるものですのでよろしくどうぞ。

※MacOS9でInternetExplorerをお使いの方は、この日記にコメントを書き込もうとすると文字化けすることがあります。対処方法はこちらをご覧ください。

 | 

1901-01-01タグの説明書けるかな(企画倒れ)

タグを使う

応用編に出てくる「タグ」というものの説明です。ちゃんと知りたい方はThe Web KANZAKI - 30分間HTML入門などを読んでください。一からのサイト作りに役立つし、むしろそちらの語り口のほうが頭に入るという方もいるはずです。私は30分間HTML入門なのに6時間かかって半分ぐらいしか理解できませんでした。簡単だと書いてあるので泣きそうになりながら。今はわかります。頼りになるサイトです。

はてなダイアリーを書くのに必要なタグなんて少ないけど、あとで「スタイルシート」の理解にもつながるようにざっと書いてみます。

タグって

この文章をブラウザの「ソースを表示」などで見てみると、いろいろぐちゃぐちゃ書いてある果てに

<p>はてなダイアリーを書くのに必要なタグなんて少ないので、ここではそれが使えればいいやという気分でざっと説明してみます。</p>

などとなっているのを発見できるかと思います。英語、英語だ。

<>で囲まれた部分がタグです。pはパラグラフ(段落)のpで、こいつは「Pタグ」といいます。

<p>は“ここから段落が始まりますよー”という印で、</p>は“ここで段落は終わりでーす”という印です。

お察しの通り、これはコンピューターが読むものです。「コンピューター言語」とか、単に「言語」といいます。くやしいことに、今から説明する「HTML(言語)」は、その中でもとりわけ簡単なものだそうです。

コンピューターは<p>と</p>で囲まれた部分を見つけると、“ソコハ、ヒトツノ、段落、ナノデスネ”と、コンピューターらしく認識します(一部空想ふくむ)。

そして、前後を改行して次の行との間をちょっと開けて表示したりします。ページを読み上げる音声ブラウザなら、ひと呼吸入れてから次の行に移ったりします。なにをさせるかはブラウザとか、後で出てくるスタイルシートで変わるんですけど、コンピュータさんに“ソコハ、段落ナノデスネ”と、認識させることが大事なのです。

ソース画面をもっとよく見ると…見なくてもいいですが、<p>と</p>で囲まれた文章たちがさらに<div class="section">と</div>で囲まれています。意味は飛ばしますが、また何かをコンピューターに知らせる印なわけです。

HTMLって

こういうタグで印をつけていくことを「マークアップ」と言って、その言語を「マークアップ言語」といいます。

はてなダイアリーではただ文章や画像を登録するだけで、いろんなマークアップがなされて我々の目にふれているわけです。

もっとずーっとソース画面に目を凝らすと(凝らさなくていいですが)、さらにどんどん大きな“まとまり”になるようにマークアップ(印つけ)されているでしょう。どこまで囲むつもりなんでしょう。そんなに囲みたいのかっていうくらい何重にも囲まれています。インターネット上のページなら、最終的にはたいてい<html>と</html>で囲まれていると思います。でたー、これがあのうわさのHTMLです。

この<html>の意味は“ここからHTML言語でマークアップするよー(他の言語と誤解するなよー)”で、</html>は“HTML言語、終ー了ー”です。HTMLとはウェブページに印をつけていくための、マークアップ言語の一種なのです。一種ってことは「別のマークアップ言語」もあるんですが、それは私が知らないのでパス。はてなダイアリーだから大丈夫。

“文章の、そのページ内での役割を知らせていく言語”と言って伝わるでしょうか。ここは引用文だよ、とか、一覧表だよ、とかですね。HTMLは特に「段落」や「見出し」など、文書構造を知らせることが目的になっている言語です。論文を書く時なんか、とても便利そうな言語という印象ですね。書きませんが。

さてコンピューターは文字だけでは、それが見出しなのかリストなのか判断してくれません。「ここからここまで」と範囲に区切ってやることで、はじめてそこになんらかの処理をさせることができるのです。

そういうなんらかの処理をさせられるまとまりのことを、「要素」といいます。段落をさ〜、とか言ってると正確に通じないことがあるので「P要素」と言ったり。よく出てくる言葉です。


ここで186さんの説明を読むとガチっと頭に入ると思うんだな。

タグの使い方(1)

1)ページの中で要素を見つける

ここがこういう役割であることを、コンピュータさんに知らせたいな、と思うのです。

2)その要素に適切なタグを選ぶ

しょっちゅう使うやつは、自然に覚えます。

3)タグを書き込む。

日記中や設定画面のヘッダ、フッタ欄に書き込みます。あーら不思議、タグは文字として表示されない。


まずここまでをやってみましょう。


よく使うタグ

はてなダイアリーをやっていて、私が使ったことのあるタグだけいきます。

リンクを表すaタグ

リンクの始点と終点を表すタグです。aはanchor(アンカー=錨、いかり)の略。

これも186さんで

リンクの終点のほうは、あんまりなじみがないと思います。

<a name="xxxx">■</a>

のようにしてやると←これになります(xxxxの部分はアルファベットから始まる適当な英数字でいい)。ここにリンクすることができるのです。

■に飛ぶ

ページが動いたでしょうか。そうです小見出しの先頭にあるのもこれです。だから普段は使いません。

画像を呼び出すimgタグ

image(画像)を呼び出すからimgタグです。ブラウザでうまいこと画像をクリックして「新しいウィンドウで画像を開く」などとしてやると、どの画像にもそれぞれアドレスがあることがわかります。日記に登録した画像もしかり。

このタグでウェブ上の画像を呼び出すことができます。著作権侵害の利用はダメですよ。

<img src="画像のアドレス" alt="画像が表示されないときの代替文">

のように書きます。代替文はあったほうがいいだろうということで、なくても画像は表示されます。言葉で言い換え不可能な場合もたくさんあるし。

このタグは終了タグ(</img>)がいりません。範囲を区切る必要がないから。

例えばはてなダイアリーガイドのロゴはhttp://d.hatena.ne.jp/dav/guide/images_sugio/hatena_bnr_h2.gifにあるので、

<img alt="はてなダイアリーガイド・ユーザーたちで作るはてなダイアリーの説明です" src="http://d.hatena.ne.jp/dav/guide/images_sugio/hatena_bnr_h2.gif">

みたいに書くと、

はてなダイアリーガイド・ユーザーたちで作るはてなダイアリーの説明です

画像が出ます。代替文は画像が出てれば出ません。

1日に2個以上画像を使っている日記は、このタグを使っているわけです。

改行するbrタグ

コメント欄などで改行する時使います。コメント欄で使えるタグはこれだけ。文中で<br>と書くと改行されます。これも終了タグがいりません。

引用文を表すqタグとblockquoteタグ

quoteとは引用すること。自分の言葉でも、なにかの引き合いに出す時に使っていいようです。誰かの言葉を借りる時に<q>と</q>で囲みます。見た目は普通『"』と『"』で囲まれるだけだけど、コンピューターはわかってくれる。その違いを。ちょっぴりHTML気分にひたれます。

blockquoteタグは、長い文を段落を変えて引用する時に使います。はてなダイアリーでは『>>』と『<<』で囲むだけなので(ヘルプ - 引用ブロックを作る)普段はつかいませんけども、cite属性と言って、引用した元のページをつけくわえるときに使います。これもヘルプが詳しいです。

区分を表すdivタグ

日記をスタイルシートでレイアウトするときに、たくさん使うタグです。文章中では使えません。「ここからここまでがひとつのまとまりー」という具合に範囲を決めるためだけにあるタグです。

区分を作っておくと、その部分だけ色を変えたり枠を作ったり、見栄えを変えていけるからです。

このタグにはたいてい「id="xxxx"」や「class="xxxx"」といった文字列が入ってます。それがその区分の名前や所属を表していて、スタイルシートのどこかで“この名前のついた区分はー、色をああしろこうしろー、”みたいに見栄えが書かれていきます。

文書構造として特に意味はないけど、区分を作りたいときに使います。

 | 

ホームページ制作