HTML教室

シリウスのHTML教室

シリウスHTML講座

リストの書き方

表示例

みかん
りんご
メロン

  
<ul>
<li>みかん</li>
<li>りんご</li>
<li>メロン</li>
</ul>

表示例

みかん
りんご
メロン

  
<ol>
<li>みかん</li>
<li>りんご</li>
<li>メロン</li>
</ol>

表示例

みかん
りんご
メロン

  
<ul class="li-check">
<li>みかん</li>
<li>りんご</li>
<li>メロン</li>
</ul>

表示例

みかん
りんご
メロン

  
<ol class="ol-circle">
<li>みかん</li>
<li>りんご</li>
<li>メロン</li>
</ol>

装飾枠

ここに本文

  
<div class="nmlbox graybg">
ここに本文
</div>

ここに本文

  
<div class="ylwbox">
ここに本文
</div>

ここに本文

  
<div class="rnd1 rbox2">
ここに本文
</div>

ポイント

カレー

  
<div class="point point1" data-point="1">カレー</div>
<div class="point point2" data-point="2">カレー</div>
<div class="point point3" data-point="3">カレー</div>
<div class="point point4" data-point="4">カレー</div>
<div class="point point5" data-point="5">カレー</div>

ヨッピの天才

  
<div class="arrow-type01">ヨッピの天才</div>

ランキング

鴨方高等学校

  
<div class="rank rank1" data-rank="1">鴨方高等学校</div>
<div class="rank rank2" data-rank="2">鴨方高等学校</div>
<div class="rank rank3" data-rank="3">鴨方高等学校</div>
<div class="rank rank4" data-rank="4">鴨方高等学校</div>
<div class="rank rank5" data-rank="5">鴨方高等学校</div>
<div class="rank rank6" data-rank="6">鴨方高等学校</div>
<div class="rank rank7" data-rank="7">鴨方高等学校</div>
<div class="rank rank8" data-rank="8">鴨方高等学校</div>
<div class="rank rank9" data-rank="9">鴨方高等学校</div>
<div class="rank rank10" data-rank="10">鴨方高等学校</div>
<div class="rank rank11" data-rank="11">鴨方高等学校</div>
<div class="rank rank12" data-rank="12">鴨方高等学校</div>

鴨方高等学校

  
<div class="ylwbox">
<div class="rank rank1" data-rank="1">鴨方高等学校</div>
<div class="rank rank2" data-rank="2">鴨方高等学校</div>
<div class="rank rank3" data-rank="3">鴨方高等学校</div>
<div class="rank rank4" data-rank="4">鴨方高等学校</div>
<div class="rank rank5" data-rank="5">鴨方高等学校</div>
<div class="rank rank6" data-rank="6">鴨方高等学校</div>
<div class="rank rank7" data-rank="7">鴨方高等学校</div>
<div class="rank rank8" data-rank="8">鴨方高等学校</div>
<div class="rank rank9" data-rank="9">鴨方高等学校</div>
<div class="rank rank10" data-rank="10">鴨方高等学校</div>
<div class="rank rank11" data-rank="11">鴨方高等学校</div>
<div class="rank rank12" data-rank="12">鴨方高等学校</div>
</div>

マーカー

強調するモジ市内文字


<span class="mky_yellow_a">強調するモジ</span>市内文字

強調するモジ市内文字


<span class="mky_pink_a">強調するモジ</span>市内文字

装飾枠2

照通の行動

プレビュー用テキストです。
プレビュー用テキストです。
プレビュー用テキストです。


<!-- ★タイトル付きボックス(注釈)ここから★ -->
<div class="cbox-accept02 cbox-d cbox-margin cbox">
<div class="cbox-caption"><span>照通の行動</span></div>
<div class="cbox-body">
プレビュー用テキストです。
プレビュー用テキストです。
プレビュー用テキストです。
</div>
</div>
<!-- ★タイトル付きボックス(注釈)ここまで★ -->