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

はてなダイアリーガイド

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

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

 | 

1901-01-03草稿「日記の中で使うタグ(2)」

用語:「属性」

タグの中にはその要素にさらに特性を与える「属性」という記述をすることができます。

 <タグ名 属性="属性値"> 

という書き方になりますが、具体例を見てみましょう。

「a要素」はページの中の"位置"情報に関する要素です。リンクを張るでやったように、href属性では、リンクの始点、つまりクリックすると他のアドレスへジャンプする部分にすることができます。

<a href="#link-dayo">ここはリンクの始点</a>

とすると、“ここはリンクの始点”のようになります。

逆に、 name属性 を記述すると、リンクの終点にすることができます。

<a name="link-dayo">ここはリンクの終点</a>

とすると

ここはリンクの終点”となり、(見かけは変わらないと思いますが)先ほどのリンクのジャンプ先になります。

このように、同じa要素でも属性によって、その特質が大きく変わります。

整形された文章(pre)

形を整えてそのまま表示させたい文章(preformatted text)は、preタグで囲います。ウェブブラウザのウィンドウ幅を狭くしても行が折り返されず、空白を勝手に詰めて表示されることもなくなります。

><pre>

かくとだに えやは伊吹の さしも草

   さしも知らじな 燃ゆる思ひを

</pre><

のように書くと、(※なぜ「>」と「<」をつけるかは後述

かくとだに えやは伊吹の さしも草
   さしも知らじな 燃ゆる思ひを

のようになります(背景色などの見栄えはテーマやスタイルシート次第です)。改行位置や空白の数を崩したくない文章、例えば詩やプログラムコードなどを書く時に使用されます。

はてなの記法では「>|」と「|<」を使って

>|

かくとだに えやは伊吹の さしも草

   さしも知らじな 燃ゆる思ひを

|<

のようにすると、同じ結果になります。

キーワードリンクせず、タグや記法も効かないように表示する

pre要素の中でも、はてなダイアリーでは自動リンクが発生してしまったり、モジュールが展開されてしまったりします。

そこでスーパーpre記法というのができました。

>||

<hatena name="section" listlimit="25"> <br> <br> <br>

[[はてなダイアリー]]、id:hatenadiary、http://d.hatena.ne.jp/

||<

のように「>||」と「||<」だけの行で囲むと

<hatena name="section" listlimit="25"> <br> <br> <br>
[[はてなダイアリー]]、id:hatenadiary、http://d.hatena.ne.jp/

のように、記法やタグ、プログラムコードをそのまま表示できます。

引用範囲を表す方法(blockquoteとq)

ブログではニュースや他のブログの引用をする機会が多いと思います。「引用」って?という方は導入部著作権のこと - 引用はできるをどうぞ。ここで紹介するのは引用のためのタグですが、このタグを書くのと引用の条件を満たすことは別次元の問題ですので。

はてなダイアリーでは「>>」と「<<」を使って引用ブロックを作る記法(ヘルプ - 引用ブロックを作る)がありますが、これはblockquoteタグの記述を簡単にしたものです。タグで書くなら、

以下は引用です。

><blockquote>

<p>はてなダイアリーははてなが提供するブログサービスです。ブラウザから文章を入力したり、写真をアップロードするだけで、自分のブログが簡単に作れます。</p>

</blockquote><

のようにすると(※「>」と「<」やpタグをつける理由は後述

以下は引用です。

はてなダイアリーははてなが提供するブログサービスです。ブラウザから文章を入力したり、写真をアップロードするだけで、自分のブログが簡単に作れます。

のようになります。(見た目はテーマ等によります)

はてなでは引用元サイトを自動的に表示する記法があって、blockquoteタグの中にcite属性とtitle属性という記述をすることで、その引用の引用元のアドレスと、その引用元に対するタイトルを示せます。

はてなダイアリーは次のように紹介されています。

><blockquote cite="http://d.hatena.ne.jp/what" title="はてなダイアリー - はてなダイアリーってなに?">

<p>はてなダイアリーははてなが提供するブログサービスです。ブラウザから文章を入力したり、写真をアップロードするだけで、自分のブログが簡単に作れます。</p>

</blockquote><

のように書くと

はてなダイアリーは次のように紹介されています。

はてなダイアリーははてなが提供するブログサービスです。ブラウザから文章を入力したり、写真をアップロードするだけで、自分のブログが簡単に作れます。

はてなダイアリー - はてなダイアリーってなに?

のようになります。

で、これにはさらに引用モジュール(q,bq モジュール)というのがありまして、はてなツールバーをインストールしたり『このページに言及』のブックマークレット(同ページ下部に掲載)を利用すると非常に簡単に書くことが出来ます。使い方ははてなツールバーのページをご覧ください。

そんなわけで、「>>」と「<<」の記法もありますし、はてなダイアリーで実際にblockquoteタグを書く必要はほとんどありませんが、タグで書けば上のようになっています。

行内で引用する

でも「qタグ」は書くことがあるかもしれません。これは文中ではてなダイアリーはてなが提供するブログサービス*のように使います。引用の前後で改行しません。

これは文中で<q cite="http://d.hatena.ne.jp/what">はてなダイアリーははてなが提供するブログサービスで</q>ように使います。

と書きました。blockquoteタグ同様、title属性も記入できます。

用語:「ブロック要素」と「インライン要素」

はてなダイアリー日記もブロック要素の集合

上のblockquote要素のように、その前後で改行されるような要素を「ブロック要素(ブロックレベル要素)」と言います。今までのガイドで出てきたform要素やaddress要素、pre要素もブロック要素です。

画像ははてなダイアリー日記のブロック要素を枠を表示させて見えるようにしたものです(FirefoxブラウザでWeb Developerを仕様)。

ブロック要素の中がまたブロック要素になっている部分もあります。通常のウェブページはこのように大小のブロック要素によって構成されています。まあブロック要素も見栄えはスタイルシートで前後を改行しないようにもできるのですが、このようにページを構成する基本要素をブロックレベル要素と呼ぶわけです。

反対に、上のq要素のように、一行の中におさまる要素を「インライン要素(行内要素、テキストレベル要素)」と言います。文の中のさらに一部分に意味を持たせるために設けられた要素の種類です。今までのガイドで出てきたa要素、em要素とstrong要素などもインライン要素です。

さて、ここでひとつルールがあります。

  • インライン要素の中にインライン要素がある……○
  • ブロック要素の中にインライン要素がある……○
  • ブロック要素の中にブロック要素がある……△(要素によって良い。divやblockquote等)
  • インライン要素の中にブロック要素がある……×

一つの行段落の中にブロック要素を入れようとするのは間違いですし、インライン要素がブロック要素を含んでしまったり、複数の段落にまたがってしまうのは間違いです(このルールにいい加減と言うか柔軟と言うか、間違っていても見やすく表示してくれちゃうウェブブラウザもあるのですが、論理的に変になりますし、スタイルシートを指定してみるとメチャクチャになったりするのでご注意ください)。

  • 【補足】他の要素はどっち
    • ブロック要素……adress、pre、blockquote、h1〜h6、ul、ol、dl、hr、table、divなど
    • インライン要素……a、em、strong、img、br、spanなど
    • ※del要素とins要素は削除したり挿入した内容によって、ブロック要素にもインライン要素にもなりうる例外的な要素です。

日記の中で使うタグ(1)に戻る← | →日記の中で使うタグ(3)に進む


sugiosugio2005/03/11 22:05このガイドでわかりにくいところや間違い、その他がっかりな点などございましたら今のうちにこちらにコメントお願いいたします。

 | 

ホームページ制作