読みやすい記事作りのために使いたい「見だし」、「段落」、「強調」、「引用」、「箇条書き」、「区切り線」など、一番基本の記事要素のパターンをまとめました。

見だしのスタイル

記事の見だしは、h3, h4, h5, h6 の四種類のスタイルを用意しています。

<h3>h3の見だし</h3>

大見だしには、h3を使います。

h4の見だし

<h4>h4の見だし</h4>

小見だしには、h4を使います。

h5の見だし

<h5>h5の見だし</h5>

さらに小さな、h5の見だし。

h6の見だし

<h6>h6の見だし</h6>

あまり使う機会はないかもしれませんが、h6まで見だしのスタイルを用意しています。

段落のスタイル

本文は段落ごとにpタグで囲むと、こんなスタイルになります。

<p>本文は段落ごとにpタグで囲むと、こんなスタイルになります。</p>

強調したい箇所は、strongタグで囲みます。

<p><strong>強調したい箇所は、strongタグで囲み</strong>ます。</p>

リンクはaタグで囲みます。

<p>リンクは<a href="#" title="">aタグで囲み</a>ます。</p>

引用のスタイル

引用は、blockquoteタグを使います。blockquote枠内も p タグを利用して段落分けすると読みやすいです。

引用元は、blockquoteタグ内のcite属性にリンクを記載してください。

吾輩わがはいは猫である。名前はまだ無い。

どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪どうあくな種族であったそうだ。この書生というのは時々我々を捕つかまえて煮にて食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌てのひらに載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始みはじめであろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶やかんだ。その後ご猫にもだいぶ逢あったがこんな片輪かたわには一度も出会でくわした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙けむりを吹く。どうも咽むせぽくて実に弱った。これが人間の飲む煙草たばこというものである事はようやくこの頃知った。

<blockquote cite="https://www.aozora.gr.jp/cards/000148/files/789_14547.html">
	<p>吾輩わがはいは猫である。名前はまだ無い。</p>

	<p>どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪どうあくな種族であったそうだ。この書生というのは時々我々を捕つかまえて煮にて食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌てのひらに載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始みはじめであろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶やかんだ。その後ご猫にもだいぶ逢あったがこんな片輪かたわには一度も出会でくわした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙けむりを吹く。どうも咽むせぽくて実に弱った。これが人間の飲む煙草たばこというものである事はようやくこの頃知った。</p>

	<footer><cite>From: 夏目漱石 『<a href="https://www.aozora.gr.jp/cards/000148/files/789_14547.html">吾輩は猫である</a>』</cite></footer>
</blockquote>

箇条書きのスタイル

ulタグで記述する、順序のないリストの表示方法です。

• 『三四郎』
• 『門』
• 『それから』

<ul>
	<li>『三四郎』</li>
	<li>『門』</li>
	<li>『それから』</li>
</ul>

続いて、olタグで記述する順序のあるリストの表示です。

1. 『三四郎』
2. 『門』
3. 『それから』

<ol>
	<li>『三四郎』</li>
	<li>『門』</li>
	<li>『それから』</li>
</ol>

1. 『三四郎』
2. 『門』
3. 『それから』

<ol class="alphabet">
	<li>『三四郎』</li>
	<li>『門』</li>
	<li>『それから』</li>
</ol>

1. 『三四郎』
2. 『門』
3. 『それから』

<ol class="alphabet-small">
	<li>『三四郎』</li>
	<li>『門』</li>
	<li>『それから』</li>
</ol>

1. 『三四郎』
2. 『門』
3. 『それから』

<ol class="hiragana">
	<li>『三四郎』</li>
	<li>『門』</li>
	<li>『それから』</li>
</ol>

区切り線

▼▼▼　ここに区切り線を表示します。

▲▲▲

<hr />