【自分用】HTMLの装飾例リスト

これは私がブログ記事を書くうえでの備忘録兼コピペシートです。

水平線（区切り等）

---

HTML  

<p> </p>
<hr />
<p> </p>

枠と背景（クリーム色）（角は丸め）

ここに文章を入力するって約束したじゃん！

HTML  

<div style="background: #fffff9; -webkit-border-radius: 10px; -moz-border-radius: 10px; border: 1px solid #d3d3d3; padding: 10px 15px; margin: 5px 10px 5px 10px;">
<p>ここに文章を入力するって約束したじゃん！</p>
</div>

枠と背景（クリーム色）

ここに文章を入力するって約束したじゃん！

HTML  

<div style="background: #fffff9; border: 1px solid #d3d3d3; padding: 10px 15px; margin: 5px 10px 5px 10px;">
<p>ここに文章を入力するって約束したじゃん！</p>
</div>

枠と背景（グレー）

ここに文章を入力するって約束したじゃん！

HTML  

<div style="background: #f9f9f9; border: 1px solid #c0c0c0; padding: 10px 15px; margin: 5px 10px 5px 10px;">
<p>ここに文章を入力するって約束したじゃん！</p>
</div>

背景のみ（クリーム色）

ここに文章を入力するって約束したじゃん！

HTML  

<div style="background: #fffff0; border: none; padding: 10px 15px; margin: 5px 10px 5px 10px;">
<p>ここに文章を入力するって約束したじゃん！</p>
</div>

背景のみ（黄色）

ここに文章を入力するって約束したじゃん！

HTML  

<div style="display: inline-block; background: #ffffcc; border: none; padding: 10px 15px; margin: 5px 10px 5px 10px;">
<p>ここに文章を入力するって約束したじゃん！</p>
</div>

枠のみ（角は丸め）

ここに文章を入力するって約束したじゃん！

HTML  

<div style="-webkit-border-radius: 10px; -moz-border-radius: 10px; border: 1px solid #d3d3d3; padding: 10px 15px; margin: 5px 10px 5px 10px;">
<p>ここに文章を入力するって約束したじゃん！</p>
</div>

枠のみ

ここに文章を入力するって約束したじゃん！

HTML  

<div style="-webkit-border-radius: 3px; -moz-border-radius: 3px; border: 1px solid #d3d3d3; padding: 10px 15px; margin: 5px 10px 5px 10px;">
<p>ここに文章を入力するって約束したじゃん！</p>
</div>

枠のみ（幅自動を追加）

ここに文章を入力するって約束したじゃん！

HTML  

<div style="display:inline-block; -webkit-border-radius: 3px; -moz-border-radius: 3px; border: 1px solid #d3d3d3; padding: 10px 15px; margin: 5px 10px 5px 10px;">
<p>ここに文章を入力するって約束したじゃん！</p>
</div>

追加部分→display:inline-block;

枠と背景（水色）（角は丸め）

ここに文章を入力するって約束したじゃん！

HTML  

<div style="background: #f0f8ff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border: 1px solid #b0c4de; padding: 10px 15px; margin: 5px 10px 5px 10px;">
<p>ここに文章を入力するって約束したじゃん！</p>
</div>

枠と背景（黄色）

ここに文章を入力するって約束したじゃん！

HTML  

<div style="display: inline-block; background: #fffff0; -webkit-border-radius: 4px; -moz-border-radius: 4px; border: 2px solid #ffdead; padding: 10px 15px; margin: 5px 10px 5px 10px;">
<p>ここに文章を入力するって約束したじゃん！</p>
</div>

枠と背景（緑色）

ここに文章を入力するって約束したじゃん！

HTML  

<div style="display: inline-block; background: #e0f4de; -webkit-border-radius: 4px; -moz-border-radius: 4px; border: 2px solid #9ce191; padding: 10px 15px; margin: 5px 10px 5px 10px;">
<p>ここに文章を入力するって約束したじゃん！</p>
</div>

枠と背景（水色）

ここに文章を入力するって約束したじゃん！

HTML  

<div style="display: inline-block; background: #e8fdff; -webkit-border-radius: 4px; -moz-border-radius: 4px; border: 2px solid #88bece; padding: 10px 15px; margin: 5px 10px 5px 10px;">
<p>ここに文章を入力するって約束したじゃん！</p>
</div>

枠のみ（青緑太枠）

ここに文章を入力するって約束したじゃん！

HTML  

<div style="display: inline-block; -webkit-border-radius: 4px; -moz-border-radius: 4px; border: 3px solid #62c1ce; padding: 10px 15px; margin: 5px 10px 5px 10px;">
<p>ここに文章を入力するって約束したじゃん！</p>
</div>

枠のみ　点線（青色）

ここに文章を入力するって約束したじゃん！

HTML  

<div style="display: inline-block; -webkit-border-radius: 5px; -moz-border-radius: 5px; border: 2px dotted #4da6ff; padding: 10px 15px; margin: 5px 10px 5px 10px;">
<p>ここに文章を入力するって約束したじゃん！</p>
</div>

枠と背景　点線（青色）

ここに文章を入力するって約束したじゃん！

HTML  

<div style="display: inline-block; background: #effaff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border: 2px dotted #4da6ff; padding: 10px 15px; margin: 5px 10px 5px 10px;">
<p>ここに文章を入力するって約束したじゃん！</p>
</div>

見出しっぽい枠（橙色）

ここに文章を入力するって約束したじゃん！

HTML  

<div style="background: #f2b31f; -webkit-border-radius: 5px; -moz-border-radius: 5px; border: 1px solid #f2b31f; padding: 1px 30px 1px 10px; margin: 5px 20px 5px 0px;">
<p><span style="color: #ffffff; font-size: 110%;">ここに文章を入力するって約束したじゃん！</span></p>
</div>

枠のみ　上下ライン

見出しタグは使いたくないけど仕切りたいとき

HTML  

<div style="display: inline-block; border-top: 1px solid #303030; border-bottom: 1px solid #303030; padding: 0px; margin: 0px;">
<p>見出しタグは使いたくないけど仕切りたいとき</p>
</div>

枠のみ　左側だけ太線

くどさがないので（複数まとめて）図として使える

HTML  

<div style="display: inline-block; border: 1px solid #707070; border-left: 5px solid #707070; padding: 1px 3px 1px 3px; margin: 2px;">
<p>くどさがないので（複数まとめて）図として使える</p>
</div>

文字マーカー（黄色、高さ100%）

ここに文章を入力するって約束したじゃん！

HTML  

<span style="background: linear-gradient(transparent 0%, #ffff00 0%);">ここに文章を入力するって約束したじゃん！</span>

文字マーカー（黄色、高さ30%、グラデーション）

ここに文章を入力するって約束したじゃん！

HTML  

<span style="background: linear-gradient(transparent 70%, rgba(255, 255, 255, 0) 70%, #ffff00 90%);">ここに文章を入力するって約束したじゃん！</span>

safariではtransparentが黒の透明色と認識されてしまうため、対策として白の透明色を間に挟んだ。以下２つも同じ。

CSS版のHTML↓

<span class="line-marker01">ここに文章を入力するって約束したじゃん！</span>

文字マーカー（桃色、高さ30%、グラデーション）

ここに文章を入力するって約束したじゃん！

HTML  

<span style="background: linear-gradient(transparent 70%, rgba(255, 255, 255, 0) 70%, #ffc0cb 90%);">ここに文章を入力するって約束したじゃん！</span>

CSS版のHTML↓

<span class="line-marker02">ここに文章を入力するって約束したじゃん！</span>

文字マーカー（水色、高さ30%、グラデーション）

ここに文章を入力するって約束したじゃん！

HTML  

<span style="background: linear-gradient(transparent 70%, rgba(255, 255, 255, 0) 70%, #83f7f7 90%);">ここに文章を入力するって約束したじゃん！</span>

CSS版のHTML↓

<span class="line-marker03">ここに文章を入力するって約束したじゃん！</span>

文字マーカー（黄色、高さ20%）

ここに文章を入力するって約束したじゃん！

HTML  

<span style="background: linear-gradient(transparent 80%, #ffff00 0%);">ここに文章を入力するって約束したじゃん！</span>

レ点マーク付きテキスト（詳細設定はＣＳＳとhead）

ここに文章を入力するって約束したじゃん！

HTML  

<p class="Emphasis_h_10">ここに文章を入力するって約束したじゃん！</p>

head要素の参考元↓

https://saruwakakun.com/html-css/basic/font-awesome

感嘆符付きテキスト（詳細設定はＣＳＳ）

ここに文章を入力するって約束したじゃん！

HTML  

<p class="Emphasis_h_11">ここに文章を入力するって約束したじゃん！</p>

外部リンクマーク付きテキスト（詳細設定はＣＳＳ）

ここに文章を入力するって約束したじゃん！

HTML  

<p class="Emphasis_h_12">ここに文章を入力するって約束したじゃん！</p>

外部リンクマーク付きテキスト（HTMLのみ）

ここに文章  

HTML  

<p>ここに文章 <span style="color: #3399ff;"><i class="fas fa-external-link-alt fa-xs">&nbsp;</i></span></p>

別タブで開く

表示される文章  

HTML  

<p><a href="ここにURL" target="_blank" rel="noopener">表示される文章</a> <span style="color: #3399ff;"><i class="fas fa-external-link-alt fa-xs">&nbsp;</i></span></p>

この内、別タブを開くコードはtarget="_blank"である。

別タブを開く際のセキュリティ対策コードはrel="noopener"である。脆弱性が指摘されていることもあって、各ブラウザでも自動的にnoopenerを追加する処理に変更してきているとか。

もっと多くの環境で動作するのがrel="noreferrer"である。ただしリファラー（ユーザーが直前に閲覧していたページの情報）を送らないコードであるため、データ解析やアフィリエイトで影響が出るかもしれない。noopenerと合わせて使う場合はrel="noopener noreferrer"と書く。

※アフィリエイトの場合、コードを変更すると不具合が発生する可能性があるため原則は変更禁止。アフィリエイト広告以外の外部リンクに移動するときに使用する。

また、リンク先にパワーを渡さないコードとしてrel="nofollow"があるが、Googleはこのコードを命令からヒントに変更したため必ず実行されるとは限らなくなった。おそらくはＳＥＯ対策として使われることを防ぎたい意味合いがある。誠実に考えれば良いページが評価されるべきなのは当たり前のことなので、あえて実装しなくても良いだろう。

チェックサークル塗青緑色

 ここに文章を入力するって約束したじゃん！

HTML  

<p><span style="color: #62c1ce;"><i class="fas fa-check-circle">&nbsp;</i></span>ここに文章を入力するって約束したじゃん！</p>

チェックサークル塗青色

 ここに文章を入力するって約束したじゃん！

HTML  

<p><span style="color: #4da6ff;"><i class="fas fa-check-circle">&nbsp;</i></span>ここに文章を入力するって約束したじゃん！</p>

箇条書きボックス風

 １つ目

 ２つ目

 ３つ目

HTML  

<div style="display: inline-block;  -webkit-border-radius: 5px; -moz-border-radius: 5px; border: 2px dotted #4da6ff; padding: 10px 15px; margin: 15px 10px 15px 10px;">
<p><span style="color: #4da6ff;"><i class="fas fa-check-circle">&nbsp;</i></span>１つ目</p>
<p><span style="color: #4da6ff;"><i class="fas fa-check-circle">&nbsp;</i></span>２つ目</p>
<p><span style="color: #4da6ff;"><i class="fas fa-check-circle">&nbsp;</i></span>３つ目</p>
</div>

会話風テキスト（顔アイコン左）

ここに文章を入力するって約束したじゃん！

HTML  

<div class="talk10"><figure class="talk10-img"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/shiga-raita/20211008/20211008184722.png" alt="顔アイコン左" /></figure><div class="talk10-txt"><p class="talk10-text">ここに文章を入力するって約束したじゃん！</p></div></div>

・入れ替え候補：会話相手ネコ顔アイコン-納得M（https://cdn-ak.f.st-hatena.com/images/fotolife/s/shiga-raita/20211008/20211008184727.png）

ここに文章を入力するって約束したじゃん！

・入れ替え候補：会話相手ネコ顔アイコン-疑問N（https://cdn-ak.f.st-hatena.com/images/fotolife/s/shiga-raita/20211008/20211008184731.png）

ここに文章を入力するって約束したじゃん！

・入れ替え候補：会話相手ネコ顔アイコン-疑問M（https://cdn-ak.f.st-hatena.com/images/fotolife/s/shiga-raita/20211008/20211008184736.png）

ここに文章を入力するって約束したじゃん！

参考記事 ↓

https://miyu-info.com/balloon/

会話風テキスト２（顔アイコン左）

ここに文章を入力するって約束したじゃん！

HTML  

<div class="talk11"><figure class="talk11-img"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/shiga-raita/20210727/20210727040218.png" alt="顔アイコン左" /></figure><div class="talk11-txt"><p class="talk11-text">ここに文章を入力するって約束したじゃん！</p></div></div>

会話風テキスト３（顔アイコン右）

ここに文章を入力するって約束したじゃん！

HTML  

<div class="talk12"><figure class="talk12-img"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/shiga-raita/20211008/20211008190728.png" alt="顔アイコン右" /></figure><div class="talk12-txt"><p class="talk12-text">ここに文章を入力するって約束したじゃん！</p></div></div>

・入れ替え候補：会話相手ネコ顔アイコン-納得MR（https://cdn-ak.f.st-hatena.com/images/fotolife/s/shiga-raita/20211008/20211008190732.png）

・入れ替え候補：会話相手ネコ顔アイコン-疑問NR（https://cdn-ak.f.st-hatena.com/images/fotolife/s/shiga-raita/20211008/20211008190736.png）

・入れ替え候補：会話相手ネコ顔アイコン-疑問MR（https://cdn-ak.f.st-hatena.com/images/fotolife/s/shiga-raita/20211008/20211008190739.png）

会話風テキスト４（顔アイコン右）

ここに文章を入力するって約束したじゃん！

HTML  

<div class="talk13"><figure class="talk13-img"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/shiga-raita/20210727/20210727040213.png" alt="顔アイコン右" /></figure><div class="talk13-txt"><p class="talk13-text">ここに文章を入力するって約束したじゃん！</p></div></div>

左向きの吹き出し-背景のみ（詳細設定はＣＳＳ）

ここに文章を入力するって約束したじゃん！

HTML  

<div class="balloon10-left">
<p>ここに文章を入力するって約束したじゃん！</p>
</div>

参考記事 ↓

CSSで作る！吹き出しデザインのサンプル19選

https://saruwakakun.com/html-css/reference/speech-bubble

左向きの吹き出し-枠のみ（詳細設定はＣＳＳ）

ここに文章を入力するって約束したじゃん！

HTML  

<div class="balloon11-left">
<p>ここに文章を入力するって約束したじゃん！</p>
</div>

雲形の吹き出し（心の声）（詳細設定はＣＳＳ）

考え事や心の声が出て来ちゃう

HTML  

<div class="balloon12">
<p>考え事や心の声が出て来ちゃう</p>
</div>

左向きの吹き出し３（詳細設定はＣＳＳ）

ここに文章を入力するって約束したじゃん！

HTML  

<div class="balloon13-left">
<p>ここに文章を入力するって約束したじゃん！</p>
</div>

右向きの吹き出し１（詳細設定はＣＳＳ）

ここに文章を入力するって約束したじゃん！

HTML  

<div class="balloon14-right">
<p>ここに文章を入力するって約束したじゃん！</p>
</div>

右下向きの吹き出し-円形（詳細設定はＣＳＳ）

POINT

HTML  

<div class="balloon20-right-btm">
<p>POINT</p>
</div>

下向きの吹き出し-円形（詳細設定はＣＳＳ）

POINT

HTML  

<div class="balloon21">
<p>POINT</p>
</div>

右向きの吹き出し-円形（詳細設定はＣＳＳ）

STEP.1

ここに手順解説などを書こう。長文になってもちゃんと表示されるよ。STEP.1の部分の数字を変えることも忘れずにね。

HTML  

<div class="balloon22-right">
<div class="balloon22-right-circle">
<p>STEP.<span style="font-size: 130%;">1</span></p>
</div>
<div class="balloon22-right-text">
<p>ここに手順解説などを書こう。長文になってもちゃんと表示されるよ。STEP.1の部分の数字を変えることも忘れずにね。</p>
</div>
</div>

右向きの吹き出し-円形-桃色ver（詳細設定はＣＳＳ）

STEP.1

ここに手順解説などを書こう。長文になってもちゃんと表示されるよ。STEP.1の部分の数字を変えることも忘れずにね。

HTML  

<div class="balloon23-right">
<div class="balloon23-right-circle">
<p>STEP.<span style="font-size: 130%;">1</span></p>
</div>
<div class="balloon23-right-text">
<p>ここに手順解説などを書こう。長文になってもちゃんと表示されるよ。STEP.1の部分の数字を変えることも忘れずにね。</p>
</div>
</div>

ボックス（枠の途中にタイトル）

POINT

ここに文章を入力するって約束したじゃん！

HTML  

<div class="box10">
<span class="box-title">POINT</span>
<p>ここに文章を入力するって約束したじゃん！</p>
</div>

ボックス（ラベル付き）

POINT

ここに文章を入力するって約束したじゃん！

HTML  

<div class="box11">
<span class="box-title">POINT</span>
<p>ここに文章を入力するって約束したじゃん！</p>
</div>

ボックス（ひとこと）

ひこ

ここに文章を入力するって約束したじゃん！

HTML  

<div class="box12">
<span class="box12-circle1">ひ</span>
<span class="box12-circle2">こ</span>
<p>ここに文章を入力するって約束したじゃん！</p>
</div>

ボックス（インフォメーション）

補足情報を書こう。抑揚が付くね。

HTML  

<div class="box13">
<p>補足情報を書こう。抑揚が付くね。</p>
</div>

ボックス（エクスクラメーション）

注意事項を書こう。箇条書きも可。

HTML  

<div class="box14">
<p>注意事項を書こう。箇条書きも可。</p>
</div>

ボックス（クリップ）

各項最後のまとめに使おう。

HTML  

<div class="box15">
<p>各項最後のまとめに使おう。</p>
</div>

ボックス（電球）

そうだ！　閃いたぞ！　この案はどうか？　みたいに使おう。

HTML  

<div class="box16">
<p>そうだ！　閃いたぞ！　この案はどうか？　みたいに使おう。</p>
</div>

ボックス（シェブロンサークル下向き）

 ○○○○とは？

何かについて詳細に語るときに使おう。

HTML  

<div class="box17">
<span class="box-title"><i class="fas fa-chevron-circle-down">&nbsp;</i>○○○○とは？</span>
<p>何かについて詳細に語るときに使おう。</p>
</div>

ボックス（シェブロンサークル下向き オレンジver）

 ○○○○とは？

何かについて詳細に語るときに使おう。

HTML  

<div class="box21">
<span class="box-title"><i class="fas fa-chevron-circle-down">&nbsp;</i>○○○○とは？</span>
<p>何かについて詳細に語るときに使おう。</p>
</div>

ボックス（枠の途中に箱型タイトル）

タイトル

何かについて詳細に語るときに使おう。

HTML  

<div class="box18">
<span class="box-title">○○○○とは？</span>
<p>何かについて詳細に語るときに使おう。</p>
</div>

ボックス（合わせて読みたい）

 合わせて読みたい

ここに記事を貼ろう。

sigablog.com

HTML  

<div class="box19">
<span class="box-title"><i class="fab fa-readme">&nbsp;</i>合わせて読みたい</span>
<p>ここに記事を貼ろう。</p>
</div>

ボックス（ペン）

汎用的に使える。例えば手順-step-を書くとき。

HTML  

<div class="box20">
<p>汎用的に使える。例えば手順-step-を書くとき。</p>
</div>

ボックス（枠の途中に箱型タイトル２）

 POINT

ここに文章を書こう。

HTML  

<div class="box22">
<span class="box-title"><i class="fas fa-exclamation-circle">&nbsp;</i>POINT</span>
<p>ここに文章を書こう。</p>
</div>

※アイコンフォントのコードはHTML側で変更できる。

ボックス（枠の途中に箱型タイトル２：背景色なし）

 POINT

ここに文章を書こう。

HTML  

<div class="box26">
<span class="box-title"><i class="fas fa-exclamation-circle">&nbsp;</i>POINT</span>
<p>ここに文章を書こう。</p>
</div>

※アイコンフォントのコードはHTML側で変更できる。

ボックス（ラベル付き２）

↑の方がかっこいい。

 POINT

ここに文章を書こう。

HTML  

<div class="box23">
<span class="box-title"><i class="fas fa-exclamation-circle">&nbsp;</i>POINT</span>
<p>ここに文章を書こう。</p>
</div>

※アイコンフォントのコードはHTML側で変更できる。

ボックス（ラベル付き２：背景色なし）

 POINT

ここに文章を書こう。

HTML  

<div class="box27">
<span class="box-title"><i class="fas fa-exclamation-circle">&nbsp;</i>POINT</span>
<p>ここに文章を書こう。</p>
</div>

※アイコンフォントのコードはHTML側で変更できる。

ボックス（枠の途中に端丸型タイトル）

 POINT

ここに文章を書こう。

HTML  

<div class="box24">
<span class="box-title"><i class="fas fa-star">&nbsp;</i>POINT</span>
<p>ここに文章を書こう。</p>
</div>

※アイコンフォントのコードはHTML側で変更できる。

ボックス（枠の途中に端丸型タイトル：背景色なし）

 POINT

ここに文章を書こう。

HTML  

<div class="box25">
<span class="box-title"><i class="fas fa-star">&nbsp;</i>POINT</span>
<p>ここに文章を書こう。</p>
</div>

※アイコンフォントのコードはHTML側で変更できる。

テープ付き紙ボックス

 

ここに文章を入力するって約束したじゃん！

HTML  

<div class="tape-box">
<div class="tape"></div>
<p>ここに文章を入力するって約束したじゃん！</p>
</div>

黒板風ボックス

ここに文章を入力するって約束したじゃん！

HTML  

<div class="blackboard-box">
<p>ここに文章を入力するって約束したじゃん！</p>
</div>

ボタン　四角枠に青色

ここに文章を入力

HTML  

<p class="button10">
<a href="ここにURL">ここに文章を入力</a>
</p>

ボタン　四角枠に白色

ここに文章を入力

HTML  

<p class="button11">
<a href="ここにURL">ここに文章を入力</a>
</p>

ボタン　丸角枠に橙色

ここに文章を入力

HTML  

<p class="button12">
<a href="ここにURL">ここに文章を入力</a>
</p>

ボタン　丸角枠に橙色（ロングver）

ここに文章を入力

HTML  

<p class="button13">
<a href="ここにURL">ここに文章を入力</a>
</p>

文章右寄せ

画像出典　

HTML  

<p style="text-align: right;">画像出典　</p>

テーブルタグ一例

1989年	平成１年
2019年	令和１年
2021年	令和３年

HTML  

<table style="border: 1px solid #CCC; border-collapse: collapse; width: 100%;">
<tbody>
<tr>
<td style="width: 100px; padding: 10px; border: 1px solid #CCC; background-color: #f9fcfe;">1989年</td>
<td style="padding: 10px; border: 1px solid #CCC;">平成１年</td>
</tr>
<tr>
<td style="padding: 10px; border: 1px solid #CCC; background-color: #f9fcfe;">2019年</td>
<td style="padding: 10px; border: 1px solid #CCC;">令和１年</td>
</tr>
<tr>
<td style="padding: 10px; border: 1px solid #CCC; background-color: #f9fcfe;">2021年</td>
<td style="padding: 10px; border: 1px solid #CCC;">令和３年</td>
</tr>
</tbody>
</table>

テーブルタグ作成ツール  

リンクを文章として表示する

Twitterへのリンクになってるよ！

HTML  

<a href="ここにURL">ここに見た目の文章</a>

ページ内の特定の場所へジャンプ

ここに着地できた？

pやh2などに「id="○○○○○"」をつけてね。

aはダメじゃないけど><の間に挟めない。

それではジャンプ練習！→ここを押してね。

なお、目次へジャンプしたい場合は、目次の直前にpで着地点を作ってあげればＯＫ。

HTML  

<p id="nanikatekitouni">ここに着地できた？</p>
<p>それではジャンプ練習！→<a href="#nanikatekitouni">ここ</a>を押してね。</p>

ルビ（フリガナ）を振る

前―― ルビを振りたい言葉 （ ここにルビ ） ――後

HTML  

<p>前――<ruby> <rb>ルビを振りたい言葉</rb> <rp>（</rp> <rt>ここにルビ</rt> <rp>）</rp> </ruby>――後</p>

アコーディオンパネル（開閉式）

クリックで○○を表示

ここに開閉内の文章とかを入力

HTML  

<div><details>
<summary><span style="text-decoration: underline;">クリックで○○を表示</span></summary>
<p>ここに開閉内の文章とかを入力</p>
</details></div>

チェックボックス式リスト

•  ここに文章
•  ここに文章
•  ここに文章

HTML  

<ul class="fa-ul">
<li><span class="fa-ul"><i class="far fa-check-square">&nbsp;</i></span>ここに文章</li>
<li><span class="fa-ul"><i class="far fa-check-square">&nbsp;</i></span>ここに文章</li>
<li><span class="fa-ul"><i class="far fa-check-square">&nbsp;</i></span>ここに文章</li>
<ul>

画像に対して影をつける

HTML  

<img class="shadow" src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/shiga-raita/20201029/20201029010927.png" />

はてなブックマークをご活用ください

※完全に自分用です。画像の持ち出しは厳禁。

この記事を後から読み返したい場合は、はてなブックマークをご活用ください。
はてなユーザーが使える機能です。

←ボタンを押すとこの記事をブックマークに登録できます。

（定型用）タイトル

ここに文章を入力するって約束したじゃん！

HTML  

<p>ここに文章を入力するって約束したじゃん！</p>