デジタクル
scrapbit

PC周辺機器・IT関連・お役立ち情報を掲載

HTMLの装飾サンプル・リスト・ご自由にどうぞ。

2019年06月03日
ライフblog
コピペで利用できるHMTL装飾ツールです。ブログコンテンツ作成用によく使うモノだけピックアップしてリスト化しています。ほぼ自分の仕事用です。気に入ったモノがあればどうぞご自由に。


リンクボックス【アプリーチ用】

<div id="appreach-box" style="text-align: left;"><img id="appreach-image" src="@@@" alt="250x250" style="float: left; margin: 10px; width: 25%; max-width: 120px; border-radius: 10%;"><div class="appreach-info" style="margin: 10px;">@@@</div><div class="appreach-footer" style="margin-bottom: 10px; clear: left;"></div>


デザイン09

<div style="border-left: 10px solid #333333; border-bottom: 1px solid #333333; padding-left: 10px; font-weight: bold; font-size: 100%; color: #000000;">デザイン09</div>


ここに本文を入力

<div style="padding: 10px; border: 1px solid #333333; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;">ここに本文を入力<br /></div>


あわせて読みたいここに本文を入れる

<fieldset style="border:1px solid #333333;"><legend><span style="font-weight:bold;">あわせて読みたい</span> </legend>ここに本文を入れる</fieldset>


ここに本文を入力する。

<div style="border: 1px #dcdcdc solid; padding: 10px; box-shadow: 0 2px 3px 0 #ddd; background: #fff;">ここに本文を入力する。<br></div>

ブラックドット

<div style="border-left: 10px solid #000000; padding-left: 10px; font-weight: bold; font-size: 100%; color: #000000;">ブラックドット</div>

デザイン06

<div style="border-left: 10px solid #333333; padding-left: 10px; background-color: #333333; font-weight: bold; font-size: 100%; color: #ffffff;">デザイン06</div>

グレイの背景ありリボン

<div style="background: #f5f5f5; padding: 10px; border: none; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;">グレイ背景ありリボン<br /></div>

グレイドット

<div style="border-left: 10px solid #cccccc; padding-left: 10px; font-weight: bold; font-size: 100%; color: #333333;">グレイドット</div>

レッドドット

<div style="border-left: 10px solid #ff0000; padding-left: 10px; font-weight: bold; font-size: 100%; color: #333333;">レッドドット</div>

グリーンドット

<div style="border-left: 10px solid #00cc66; padding-left: 10px; font-weight: bold; font-size: 100%; color: #333333;">グリーンドット</div>

ブルードット

<div style="border-left: 10px solid #0033ff; padding-left: 10px; font-weight: bold; font-size: 100%; color: #333333;">ブルードット</div>

イエロードット

<div style="border-left: 10px solid #ffcc00; padding-left: 10px; font-weight: bold; font-size: 100%; color: #333333;">イエロードット</div>

点線

<hr style="border:1px dashed #999999;">

太文字
<strong>太文字</strong>


太文字・中
<span style="font-size:large;"><strong>太文字・中</strong></span>


250x250
キャッチーコピー
~タイトル~

総合評価:★★★★★(5.0)
ジャンル:@@@
■テキスト①
■テキスト②
■テキスト③

<div id="appreach-box" style="text-align: left;"><img id="appreach-image" src="@@@" alt="250x250" style="float: left; margin: 10px; width: 25%; max-width: 120px; border-radius: 10%;"><div class="appreach-info" style="margin: 10px;"><strong>キャッチーコピー
~タイトル~</strong>
総合評価:★★★★★(5.0)
ジャンル:@@@</div><div class="appreach-footer" style="margin-bottom: 10px; clear: left;"></div>■テキスト①
■テキスト②
■テキスト③


~文字の背景にマーカー~

 マーカー 

<span style="background-color: #ccffff;"> ここに文字 </span>


~アプリのバナー~



<div class="appreach-links" style="float: left;"><div id="appreach-itunes-link" style="display: inline-block;"><a id="appreach-itunes" href="@@@ストア" rel="nofollow"><img src="https://nabettu.github.io/appreach/img/itune_ja.svg" style="height: 40px; width: 135px;"></a></div><div id="appreach-gplay-link" style="display: inline-block;"><a id="appreach-gplay" href="@@@プレイストア" rel="nofollow"><img src="https://nabettu.github.io/appreach/img/gplay_ja.png" style="height: 40px; width: 134.5px;"></a></div></div></div><div class="appreach-footer" style="margin-bottom: 10px; clear: left;"></div>
関連記事

気に入ったらシェア!

scrapbit
この記事を書いた人: scrapbit
都内在住のサリーマンです。
スマホ・IT関連などのお役立ち情報をブログにて紹介しています。