SIGA BLOG

動物園から脱走したリスが、社会や人間について考えたり、小説やグラブルの記事などを執筆したりする雑記ブログです。

【自分用】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: 15px; margin: 15px 10px 15px 10px;">
<p>ここに文章を入力するって約束したじゃん!</p>
</div>

 

 

枠と背景(クリーム色)

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

HTML  


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

 

 

枠と背景(グレー)

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

HTML  


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

 

 

背景のみ(クリーム色)

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

HTML  


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

 

 

背景のみ(黄色)

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

HTML  


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

 

 

枠のみ(角は丸め)

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

HTML  


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

 

 

枠のみ

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

HTML  


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

 

 

枠のみ(幅自動を追加

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

HTML  


<div style="display:inline-block; border: 1px solid #d3d3d3; padding: 15px; margin: 15px 10px 15px 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: 15px; margin: 15px 10px 15px 10px;">
<p>ここに文章を入力するって約束したじゃん!</p>
</div>

 

 

枠と背景(黄色)(角は丸め)

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

HTML  


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

 

 

枠のみ(青緑太枠)

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

HTML  


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

 

 

枠のみ 点線(青色)

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

HTML  


<div style="display: inline-block; border: 2px dotted #4da6ff; padding: 15px; margin: 15px 10px 15px 10px;">
<p>ここに文章を入力するって約束したじゃん!</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%, #ffff00 0%);">ここに文章を入力するって約束したじゃん!</span>

 

 

文字マーカー(黄色、高さ20%)

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

HTML  


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

 

 

レ点マーク付きテキスト(詳細設定はCSSとhead)

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

HTML  


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

 

head要素の参考元↓

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

 

 

感嘆符付きテキスト(詳細設定はCSS)

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

HTML  


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

 

 

外部リンクマーク付きテキスト(詳細設定はCSS)

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

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><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>

 

 

箇条書きボックス風

 1つ目

 2つ目

 3つ目

HTML  


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

 

 

会話風テキスト(顔アイコン左)

プロフィール画像

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

HTML  


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

 

 

左向きの吹き出し-背景のみ(詳細設定はCSS)

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

HTML  


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

 

参考記事 ↓

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

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

 

 

左向きの吹き出し-枠のみ(詳細設定はCSS)

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

HTML  


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

 

 

雲形の吹き出し(心の声)(詳細設定はCSS)

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

HTML  


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

 

 

右下向きの吹き出し-円形(詳細設定はCSS)

POINT

HTML  


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

 

 

下向きの吹き出し-円形(詳細設定はCSS)

POINT

HTML  


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

 

 

右向きの吹き出し-円形(詳細設定はCSS)

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(詳細設定はCSS)

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>

 

 

テープ付き紙ボックス

 

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

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年 平成1年
2019年 令和1年
2021年 令和3年

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;">平成1年</td>
</tr>
<tr>
<td style="padding: 10px; border: 1px solid #CCC; background-color: #f9fcfe;">2019年</td>
<td style="padding: 10px; border: 1px solid #CCC;">令和1年</td>
</tr>
<tr>
<td style="padding: 10px; border: 1px solid #CCC; background-color: #f9fcfe;">2021年</td>
<td style="padding: 10px; border: 1px solid #CCC;">令和3年</td>
</tr>
</tbody>
</table>

 

テーブルタグ作成ツール  

 

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

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

HTML  


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

 

 

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

ここに着地できた?

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

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

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

 

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

 

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>