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

はてなダイアリーガイド

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

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

 | 

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

横罫線を引く(hr)

hrタグは横罫線(horizontal rule)を引くために使います。

日記の中で使うタグ2に戻る← | →はてなダイアリーのHTMLに進む

><hr><

* ふりがな:はてなだいありーがいどにっきのな

のように書くと(なぜ「>」と「<」がつくのかは後述

日記の中で使うタグ2に戻る← | →はてなダイアリーのHTMLに進む


* ふりがな:はてなだいありーがいどにっきのな

のように表示されます(テーマスタイルシートによる差はあり)。ブロック要素なので前後は改行されます。

改行する(br)

brタグは強制的に行を折り返すために使います。終了タグはいりません。

彼女は<br>「げげっ」<br>が口癖。

と書くと

彼女は
「げげっ」
が口癖。

のようになります。すごく有名なタグだと思いますが、はてなダイアリーでは多分あまり使いません。

このタグで改行するとはてなダイアリーで自動的に発生する「段落間」が生じないため、行と行のあいだをせまくすることはできるのですが、その目的ならはてなダイアリーTipsスタイルシートでデザイン編【段落の前後のすき間をなくす方法】を使う方がはるかに便利でしょう。

また編集画面で3連続改行(2行空ける)すると、brタグが挿入されます。

表示されない文章を書く(コメント)

<!--」と「-->」の間に書いた文章は、ブラウザで表示されないコメントになります。コメント化して非表示にすることを「コメントアウトする」とも言います。

普通のHTML文書では、ソース画面ではコメントが読めるのですが、はてなダイアリーではソース画面にもこのコメントを表示しない機能になっています。(ヘルプ - 下書き機能

  • 【補足】スタイルシート欄のコメントは「/*」と「*/」を使います。

リストを作る(ulとol)

番号つきのリスト(ordered list…序列リスト)が「ol」要素、

番号なしのリスト(unordered list…順不同リスト)が「ul」要素です。

リスト項目は<li></li>で囲みます。

><ol>

<li>フタをとりカバー等を外します。</li>

<li>よくかきまぜます。</li>

<li>ごはんにかけます。</li>

</ol><


><ul>

<li>もも</li>

<li>ぶどう</li>

<li>すいか</li>

</ul><

のように書くと(なぜ「>」と「<」がつくのかは後述)、それぞれ

  1. フタをとりカバー等を外します。
  2. よくかきまぜます。
  3. ごはんにかけます。

  • もも
  • ぶどう
  • すいか

のようになります。

これは「+」と「-」を使ったはてなの省略記法(ヘルプ - リストをつくる)でも作れます。

ol(ul)要素の中にまたol(ul)要素を作って入れ子にすることもできます。

><ol>

<li>フタをとりカバー等を外します。</li>

<li>よくかきまぜます。</li>

<ul>

<li>醤油や辛子は徹底的に混ぜたあとで入れます</li>

<li>私は右周りに50回、左周りに50回ほど混ぜています</li>

</ul>

<li>ごはんにかけます。</li>

</ol><

のようにすると

  1. フタをとりカバー等を外します。
  2. よくかきまぜます。
    • 醤油や辛子は徹底的に混ぜたあとで入れます
    • 私は右周りに50回、左周りに50回ほど混ぜています
  3. ごはんにかけます。

のようになります。これは省略記法ですと

+フタをとりカバー等を外します。

+よくかきまぜます。

--醤油や辛子は徹底的に混ぜたあとで入れます

--私は右周りに50回、左周りに50回ほど混ぜています

+ごはんにかけます。

のように書きます。すごく楽なのでタグを書くのが嫌になります。標準の編集画面では、入力支援ボタンもあります。

  • 【補足】省略記法では、同じ階層で番号つきと番号なしを混在させるということができません。

定義リストを作る(dl)

定義リストっていうのもあります。「定義」文に限るといったわけではないようで、ある言葉と記述に関連性を持たせて表記したいときに使うもののようです。例えば

dl
定義リストを作るタグ。(definition list)
dt
記述される言葉。(definition term)
dd
言葉に対する記述。(definition description)

のような、言葉とそれに関係する記述のリストになります。これをタグで書くには

><dl>

<dt>dl</dt>

<dd>定義リストを作るタグ。(definition list)</dd>

<dt>dt</dt>

<dd>記述される言葉。(definition term)</dd>

<dt>dd</dt>

<dd>言葉に対する記述。(definition description)</dd>

</dl><

のようにします。

はてなの省略記法では

:dl:定義リストを作るタグ。(definition list)

:dd:記述される言葉。(definition term)

:dt:言葉に対する記述。(definition description)

のように書きます。楽です。

  • 【補足】定義リストの省略記法では、深い入れ子を作ることはできません。

日記の中で使うタグ(2)に戻る← | →はてなダイアリーのHTMLに進む


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

YuichirouYuichirou2005/08/29 20:50「属性」という言葉は『日記の中で使うタグ(2)』のblockquoteのところですでに出ています。項目『用語:「属性」』はもっと前にあるべきでは?

sugiosugio2005/08/29 21:05ご指摘ありがとうございます。(2)の最初に移動してみました。
用語説明が続くとつかれるかな…とずらしたんだと思うんですが、うーんそうですね。しかも属性とは言わなくてもaのhref属性とかdelとinsのdatetime属性とかから出ちゃってるんですよね。

 | 

ホームページ制作