practice

<html>

section{border:double 4px #aaaaaa;
padding:20px;
width:260px;
border-radius:10px;}

p{font-size:14px;
width:220px;
margin-left:14px;}

div{font-size:14px;
text-indent:2em hanging;
font-weight:bold;
color:#456789;
width:190px;
margin-left:44px;}

span{font-size:12px;
color:green;}

h2{font-size:22px;text-align:center;}
h3{font-size:18px;
color:#888888;
text-align:center;}

li.マーカー{list-style:none;}
li.マーカー::before{content:"▶︎ "}
li.マーカー::after{content:" ◁"}
</style>

<section>
<h1><span>質問:</span> 月に衛星はありますか？</h1>
<hr>
<p style="text-indent:1em;">月は地球の衛星です. さらにその月の周りを公転する衛星はあるのでしょうか？</p>
<div>回答<br>現在までに月の自然衛星が発見された報告はありません. しかし2007年9月14日に月の探査機として打ち上げられた月周回衛星「かぐや」という人工衛星はあります.</div>
</section>

<hr>

<h2>&lt;ul&gt;タグは unordered list です.<br>
&lt;li&gt;タグは list item です.</h2>
<h3>&lt;ul&gt; と &lt;li&gt; の使い方を説明いたします.</h3>
<br>
<hr>
<ul>
<li>タグに attribute の type を記述していない場合は先頭に黒丸</li>
<li>タグに attribute の type を記述していない場合は先頭に黒丸</li>
<li>タグに attribute の type を記述していない場合は先頭に黒丸</li>
</ul>
<hr>
<ul>
<li type="disc">disc で先頭に黒丸</li>
<li type="disc">disc で先頭に黒丸</li>
<li type="disc">disc で先頭に黒丸</li>
</ul>
<hr>
<ul>
<li type="circle">circle で先頭にしろ丸</li>
<li type="circle">circle で先頭にしろ丸</li>
<li type="circle">circle で先頭にしろ丸</li>
</ul>
<hr>
<ul>
<li type="square">square で先頭に黒四角</li>
<li type="square">square で先頭に黒四角</li>
<li type="square">square で先頭に黒四角</li>
</ul>
<hr>
<ul>
<li type="none">none を指定すると先頭に何も表示されない</li>
<li type="none">none を指定すると先頭に何も表示されない</li>
<li type="none">none を指定すると先頭に何も表示されない</li>
</ul>
<hr>
<ul>
<li type="decimal">decimal で先頭に数字</li>
<li type="decimal">decimal で先頭に数字</li>
<li type="decimal">decimal で先頭に数字</li>
</ul>
<hr>
<ul>
<li type="decimal-leading-zero">decimal-leading-zero で先頭に数字</li>
<li type="decimal-leading-zero">decimal-leading-zero で先頭に数字</li>
<li type="decimal-leading-zero">decimal-leading-zero で先頭に数字</li>
</ul>
<hr>
<ul>
<li type="upper-roman">upper-roman で先頭にローマ数字(大文字)*</li>
<li type="upper-roman">upper-roman で先頭にローマ数字(大文字)*</li>
<li type="upper-roman">upper-roman で先頭にローマ数字(大文字)*</li>
</ul>
<hr>
<ul>
<li type="lower-roman">lower-roman で先頭にローマ数字(小文字)*</li>
<li type="lower-roman">lower-roman で先頭にローマ数字(小文字)*</li>
<li type="lower-roman">lower-roman で先頭にローマ数字(小文字)*</li>
</ul>
<hr>
<ul>
<li type="upper-latin">upper-latin で先頭にアルファベット(大文字)</li>
<li type="upper-latin">upper-latin で先頭にアルファベット(大文字)</li>
<li type="upper-latin">upper-latin で先頭にアルファベット(大文字)</li>
</ul>
<hr>
<ul>
<li type="lower-latin">lower-latin で先頭にアルファベット(小文字)</li>
<li type="lower-latin">lower-latin で先頭にアルファベット(小文字)</li>
<li type="lower-latin">lower-latin で先頭にアルファベット(小文字)</li>
</ul>
<hr>
<ul>
<li type="hiragana">hiragana で先頭にひらがな(あいうえお順)</li>
<li type="hiragana">hiragana で先頭にひらがな(あいうえお順)</li>
<li type="hiragana">hiragana で先頭にひらがな(あいうえお順)</li>
</ul>
<hr>
<ul>
<li type="hiragana-iroha">hiragana-iroha で先頭にひらがな(いろは順)</li>
<li type="hiragana-iroha">hiragana-iroha で先頭にひらがな(いろは順)</li>
<li type="hiragana-iroha">hiragana-iroha で先頭にひらがな(いろは順)</li>
</ul>
<hr>
<ul>
<li type="katakana">katakana で先頭にカタカナ(アイウエオ順)</li>
<li type="katakana">katakana で先頭にカタカナ(アイウエオ順)</li>
<li type="katakana">katakana で先頭にカタカナ(アイウエオ順)</li>
</ul>
<hr>
<ul>
<li type="katakana-iroha">katakana-iroha で先頭にカタカナ(イロハ順)</li>
<li type="katakana-iroha">katakana-iroha で先頭にカタカナ(イロハ順)</li>
<li type="katakana-iroha">katakana-iroha で先頭にカタカナ(イロハ順)</li>
</ul>
<hr>
<ul>
<li type="cjk-ideographic">cjk-ideographic で先頭に漢字の数字*</li>
<li type="cjk-ideographic">cjk-ideographic で先頭に漢字の数字*</li>
<li type="cjk-ideographic">cjk-ideographic で先頭に漢字の数字*</li>
</ul>
<hr>
<ul>
<li type="japanese-formal">japanese-formal で先頭に漢字の数字*</li>
<li type="japanese-formal">japanese-formal で先頭に漢字の数字*</li>
<li type="japanese-formal">japanese-formal で先頭に漢字の数字*</li>
</ul>
<hr>
<ul>
<li type="upper-greek">* で先頭にギリシア文字(大文字)</li>
<li type="upper-greek">* で先頭にギリシア文字(大文字)</li>
<li type="upper-greek">* で先頭にギリシア文字(大文字)</li>
</ul>
<hr>
<ul>
<li type="lower-greek">lower-greek で先頭にギリシア文字(小文字)</li>
<li type="lower-greek">lower-greek で先頭にギリシア文字(小文字)</li>
<li type="lower-greek">lower-greek で先頭にギリシア文字(小文字)</li>
</ul>
<hr>
<ul>
<li style="padding-left:2em;">padding-left で右に</li>
<li style="margin-left:2em;">margin-left で右に</li>
</ul>
<hr>
<ul style="display:flex;">
<li style="margin-left:2em;">横に</li>
<li style="margin-left:2em;">横に</li>
<li style="margin-left:2em;">横に</li>
</ul>
<hr>
<ul>
<li style="color:blue;font-weight:bold;">小見出し 1</li>
<li type="none"style="margin-left:2em;color:green;">メニュー
<ul style="display:flex;">
<li style="margin-left:2em;">項目 1</li>
<li style="margin-left:2em;">項目 2</li>
<li style="margin-left:2em;">項目 3</li>
</ul>
</li>
<li style="color:blue;font-weight:bold;">小見出し 2</li>
<li type="none"style="margin-left:2em;color:green;">メニュー
<ul style="display:flex;">
<li style="margin-left:2em;">項目 4</li>
<li style="margin-left:2em;">項目 5</li>
<li style="margin-left:2em;">項目 6</li>
</ul>
</li>
</ul>
<hr>
<ul>
<li class="マーカー">ビフォー /アフター で左右にマーカーを追加
<li class="マーカー">ビフォー /アフター で左右にマーカーを追加
<li class="マーカー">ビフォー /アフター で左右にマーカーを追加
</ul>
<hr>

</html>