Lopanのスタイルガイド。

<strong>重要</strong>
<em>強調</em>
<mark>関連性が強く</mark>
<b>読みやすさの観点</b>
<i>興味深さの観点</i>

<small>（括弧付きで添えるような文章）</small>

<q>引用</q>
「<cite>書籍のタイトル</cite>」

<kbd>lopan.jp</kbd>と入力する
<kbd><kbd>⌘</kbd>+<kbd>C</kbd></kbd>

E=mc<sup>2</sup>
CO<sub>2</sub>

<abbr title="HyperText Markup Language">HTML</abbr>

牛すじ和山椒カレー <s>¥ 1,512</s>→SOLD OUT

<hr>
<hr class="rest">
<hr class="wait">

<b class="dot">ひと文字ずつドットで強調</b>
<span class="sesame">ひと文字ずつ黒胡麻で強調</span>
<em class="waveline">波線で強調</em>

<i class="emo">:)</i>

<ul class="c-list">
	<li>ではみなさんは、そういうふうに川だと云われたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。</li>
	<li>ジョバンニさん。あなたはわかっているのでしょう。</li>
	<li>大きな望遠鏡で銀河をよっく調べると銀河は大体何でしょう。</li>
</ul>

<ol class="c-numlist">
	<li>ではカムパネルラさん。</li>
	<li>では。よし。</li>
	<li>このぼんやりと白い銀河を大きないい望遠鏡で見ますと、もうたくさんの小さな星に見えるのです。ジョバンニさんそうでしょう。</li>
</ol>

<blockquote>
	<ul class="c-linklist">
		<li><a href="https://www.w3.org/TR/WCAG21/">Web Content Accessibility Guidelines (WCAG) 2.1</a></li>
		<li><a href="https://www.w3.org/TR/wai-aria-1.2/">Accessible Rich Internet Applications (WAI-ARIA) 1.2</a></li>
		<li><a href="https://developer.mozilla.org/ja/docs/Learn/Accessibility/CSS_and_JavaScript#ものごとを隠す">CSS と JavaScript のアクセシビリティの ベスト・プラクティス - ウェブ開発を学ぶ | MDN</a></li>
		<li><a href="https://weba11y.jp/basics/accessibility/accessibility_index/">Webアクセシビリティとは？｜基礎知識｜エー イレブン ワイ［WebA11y.jp］</a></li>
	</ul>
</blockquote>

<dl class="c-dllist">
	<dt>ジョバンニ</dt>
	<dd>孤独で空想好きな少年。歳は授業内容や仕事から思春期前とわかる。家は貧しく、母親が病気で寝込んでいるので、早朝には新聞配達、学校が終わってからは活版所でアルバイトをしている。父親は長らく家に帰っていない。漁に出ているとジョバンニは信じているが、らっこを密猟して投獄されていると噂され、近所の子供たちはそのことでジョバンニをからかう。結婚して別に住む姉がいて、料理を作ってくれたりする。</dd>
	<dt>カムパネルラ</dt>
	<dd>ジョバンニの同級生で親友。父親同士も親友だった。裕福で人気者の優等生として描かれている。彼の母親は石炭袋にいたことから亡くなっていると推察される。しかしジョバンニの「何もひどいことない」という言葉から健在な母親もいるのではないかという見方もあり、一見幸福そうなカムパネルラの複雑な生い立ちが覗われる。</dd>
	<dd>他の同級生がジョバンニをからかうときは気の毒そうにしている。ジョバンニとともに銀河鉄道に乗り込み、共に旅する。</dd>
</dl>

<dl class="c-dlbox">
	<dt>「素直にマークアップ」とは</dt>
	<dd>その情報が持つ役割や意図に<em>相応しいHTMLタグ</em>を使い分けるということ。<br>例えば、そのページのメインコンテンツは<b>main要素</b>にして、その中のコラムやセクションは<b>section要素</b>、タイトルなら<b>h1要素</b>、段落なら<b>p要素</b>、強調したい単語やフレーズには<b>strong要素</b>や<b>em要素</b>を使ったり、日時には<b>time要素</b>を使ったり、別ページへのリンクには<b>a要素</b>で<b>href属性</b>を指定して、別サイトへのリンクには<b>target属性</b>を指定したり、一覧は<b>ul/li要素</b>、用語についての説明を箇条書きしたい時には<b>dl/dt/dd要素</b>を使ったり、他所の文書からの引用文は<b>blockquote要素</b>にしたり、フレーズなら<b>q要素</b>を使ったりすることです。</dd>
</dl>

<dl class="c-dlgrid">
	<dt>カーソルの位置からすべて読み上げ</dt>
	<dd><kbd><kbd>Caps Lock</kbd> ＋ <kbd>A</kbd></kbd></dd>
	<dt>次の項目へ進む</dt>
	<dd><kbd><kbd>Caps Lock</kbd> ＋ <kbd>→</kbd></kbd></dd>
	<dt>前の項目に戻る</dt>
	<dd><kbd><kbd>Caps Lock</kbd> ＋ <kbd>←</kbd></kbd></dd>
	<dt>ローター<sup>※</sup>を表示する</dt>
	<dd><kbd><kbd>Caps Lock</kbd> ＋ <kbd>U</kbd></kbd></dd>
</dl>

<dl class="c-propertylist">
	<dt><code><ruby>display<rp>（</rp><rt>ディスプレイ</rt><rp>）</rp></ruby></code></dt>
	<dd class="value"><code>&lt;display-outside&gt; || &lt;display-inside&gt; ] | &lt;display-listitem&gt; | &lt;display-internal&gt; | &lt;display-box&gt; | &lt;display-legacy&gt;</code></dd>
	<dd>要素をブロック要素とインライン要素のどちらとして扱うか、およびその子要素のために使用されるレイアウト、例えば フローレイアウト、グリッド、フレックスなどを設定します。</dd>
	<dd>正式には、 display プロパティは要素の内部と外部の表示型を設定します。外部の型は要素のフローレイアウトへの参加方法を設定し、内部の型は子要素のレイアウトを設定します。</dd>
	<dt><code><ruby>display-outside<rp>（</rp><rt>ディスプレイ・アウトサイド</rt><rp>）</rp></ruby></code></dt>
	<dd class="value"><code>block</code>/<code>inline</code>/<code>run-in</code></dd>
	<dd>要素のフローレイアウトの役割を表す、要素の外部表示種別を指定します。</dd>
</dl>

<ul class="c-notes">
	<li>孤独で空想好きな少年。歳は授業内容や仕事から思春期前とわかる。家は貧しく、母親が病気で寝込んでいるので、早朝には新聞配達、学校が終わってからは活版所でアルバイトをしている。</li>
	<li>父親は長らく家に帰っていない。漁に出ているとジョバンニは信じているが、らっこを密猟して投獄されていると噂され、近所の子供たちはそのことでジョバンニをからかう。</li>
	<li>結婚して別に住む姉がいて、料理を作ってくれたりする。</li>
</ul>

<p class="c-note">ジョバンニの同級生で親友。父親同士も親友だった。裕福で人気者の優等生として描かれている。彼の母親は石炭袋にいたことから亡くなっていると推察される。</p>