サイトデザイン用コンポーネント集
2023年06月25日
サイト管理者用のサイト装飾用コンポーネントです。コピペして利用してください。
基本コンポーネント
通常文字
通常文字
サンプルテキスト。
サンプルテキスト。
<p class="py-4"><br></p>
<div class="py-4 text-base sm:text-lg">
</div>
赤文字
ここが重要です。
<span class="font-medium text-red-600"></span>
リンク文字
こちらのリンクから
<a href="#" class="font-medium text-blue-400 hover:text-blue-300 border-b-2 border-blue-400" target="_blank">こちらのリンク</a>
コマンド文字
npm run dev
<span class="bg-gray-200 italic text-gray-700 px-2">npm run dev</span>
パラグラフ
通常リスト
- テスト
- テスト
- テスト
- テスト
<ol class="list-decimal pl-8 py-4 text-base sm:text-lg">
<li class="p-2">
</li>
<li class="p-2">
</li>
<li class="p-2">
</li>
<li class="p-2">
</li>
</ol>
枠付きリスト
- テスト
- テスト
- テスト
- テスト
<div class="p-4 border-2 border-gray-300 rounded-md my-4">
<ol class="list-disc pl-8 text-base sm:text-lg">
<li class="p-2">
</li>
<li class="p-2">
</li>
<li class="p-2">
</li>
<li class="p-2">
</li>
</ol>
</div>
タイトル
Hogehoge
HogeHoge
HogeHoge
<h2 id="section" class="p-2 bg-blue-100 border-l-4 border-blue-800 border-b-2 text-xl sm:text-2xl font-medium my-4"></h2>
<h3 id="section" class="p-2 bg-gray-50 border-l-4 border-blue-500 text-lg sm:text-xl font-medium"></h3>
<h4 class="p-2 border-b-2 border-blue-500 text-md sm:text-lg font-medium"></h4>
画像
<div class="flex justify-center py-2">
<img src="" alt="" class="w-full md:w-8/12">
</div>
応用コンポーネント
テーブル
| ヘッダー1 | ヘッダー2 |
|---|---|
| データ1-1 | データ1-2 |
| データ2-1 | データ2-2 |
| データ3-1 | データ3-2 |
| データ4-1 | データ4-2 |
| データ5-1 | データ5-2 |
<table class="border-2 border-blue-200">
<thead class="bg-blue-200 text-white border border-blue-300">
<tr>
<th class="border-b border-r border-blue-300 px-4 py-2">ヘッダー1</th>
<th class="border-b border-blue-200 px-4 py-2">ヘッダー2</th>
</tr>
</thead>
<tbody>
<tr>
<td class="border-b border-r border-blue-200 px-4 py-2">データ1-1</td>
<td class="border-b border-blue-200 px-4 py-2">データ1-2</td>
</tr>
<tr>
<td class="border-b border-r border-blue-200 px-4 py-2">データ2-1</td>
<td class="border-b border-blue-200 px-4 py-2">データ2-2</td>
</tr>
<tr>
<td class="border-b border-r border-blue-200 px-4 py-2">データ3-1</td>
<td class="border-b border-blue-200 px-4 py-2">データ3-2</td>
</tr>
<tr>
<td class="border-b border-r border-blue-200 px-4 py-2">データ4-1</td>
<td class="border-b border-blue-200 px-4 py-2">データ4-2</td>
</tr>
<tr>
<td class="border-b border-r border-blue-200 px-4 py-2">データ5-1</td>
<td class="border-b border-blue-200 px-4 py-2">データ5-2</td>
</tr>
</tbody>
</table>
人物吹き出し
左吹き出し
ぺんろん
みなさん、こんにちはぺんろんです！
<div class="flex items-center py-2">
<div class="mr-4 w-auto">
<img class="w-20 h-20" src="url/images/avater/penron1.png" alt="プロフィール画像">
<h3 class="text-center text-md font-medium text-gray-500">ぺんろん</h3>
</div>
<div class="bg-gray-50 rounded-md p-2 py-4 border-2 border-gray-300">
<p class="text-sm text-gray-500">みなさん、こんにちはぺんろんです！</p>
</div>
</div>
右吹き出し
みなさん、こんにちはぺんろんです！
ぺんろん
<div class="flex items-center justify-end py-2">
<div class="bg-gray-50 rounded-md p-2 py-4 border-2 border-gray-300">
<p class="text-sm text-gray-500">みなさん、こんにちはぺんろんです！</p>
</div>
<div class="ml-4 w-auto">
<img class="w-20 h-20" src="url/images/avater/penron1.png" alt="プロフィール画像">
<h3 class="text-center text-md font-medium text-gray-500">ぺんろん</h3>
</div>
</div>
セクションブロック
解説ブロック
HogeHogeとは
hogehogehogehogehoge
hogehogehogehoge
<div class="bg-gray-100 my-4 rounded-sm border-2 border-dotted border-gray-400 px-8 py-4">
<div class="flex items-center">
<svg class="svg-icon h-5 w-5" fill="#888888" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"viewBox="0 0 29.536 29.536" xml:space="preserve"><g><path d="M14.768,0C6.611,0,0,6.609,0,14.768c0,8.155,6.611,14.767,14.768,14.767s14.768-6.612,14.768-14.767C29.535,6.609,22.924,0,14.768,0z M14.768,27.126c-6.828,0-12.361-5.532-12.361-12.359c0-6.828,5.533-12.362,12.361-12.362c6.826,0,12.359,5.535,12.359,12.362C27.127,21.594,21.594,27.126,14.768,27.126z"/><path d="M14.385,19.337c-1.338,0-2.289,0.951-2.289,2.34c0,1.336,0.926,2.339,2.289,2.339c1.414,0,2.314-1.003,2.314-2.339C16.672,20.288,15.771,19.337,14.385,19.337z"/><path d="M14.742,6.092c-1.824,0-3.34,0.513-4.293,1.053l0.875,2.804c0.668-0.462,1.697-0.772,2.545-0.772c1.285,0.027,1.879,0.644,1.879,1.543c0,0.85-0.67,1.697-1.494,2.701c-1.156,1.364-1.594,2.701-1.516,4.012l0.025,0.669h3.42v-0.463c-0.025-1.158,0.387-2.162,1.311-3.215c0.979-1.08,2.211-2.366,2.211-4.321C19.705,7.968,18.139,6.092,14.742,6.092z"/><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></g></svg>
<h5 class="font-medium">HogeHogeとは</h5>
</div>
<p class="text-gray-500 py-2">hogehogehogehogehoge<br>hogehogehogehoge</p>
</div>
注目ブロック
-
セクション1-1
-
セクション1-2
-
セクション1-3
<div class="bg-green-50 py-4 my-4">
<ul class="py-2 p-2 px-4">
<li class="px-2 pl-8 border-b-4 border-dotted border-gray-300 ">
<h6 class="p-2 text-gray-500 font-extrabold"><i class="fa-solid fa-message"></i> セクション1-1</h6>
</li>
<li class="px-2 pl-8 border-b-4 border-dotted border-gray-300 ">
<h6 class="p-2 text-gray-500 font-extrabold"><i class="fa-solid fa-message"></i> セクション1-2</h6>
</li>
<li class="px-2 pl-8 border-b-4 border-dotted border-gray-300 ">
<h6 class="p-2 text-gray-500 font-extrabold"><i class="fa-solid fa-message"></i> セクション1-3</h6>
</li>
</ul>
</div>
警告ブロック
注意
このページに記載されていることを他人に試すことは「不正アクセス禁止法」に該当する場合があります。
<div class="bg-red-100 py-4 my-4 rounded-md">
<div class="py-1 p-2 px-4">
<h6 class="p-2 text-red-400 font-extrabold"><i class="fa-solid fa-circle-exclamation"></i>注意</h6>
</div>
<div class="py-1 p-2 px-4">
<h6 class="p-2 text-red-400 font-extrabold">このページに記載されていることを他人に試すことは「不正アクセス禁止法」に該当する場合があります。</h6>
</div>
</div>
人物カード
ゆーろんさん
1995年～2067年
このブログの運営している猫のふりをした何か。
専門はネットワーク。
<div class="flex items-center p-4 border-2 border-gray-300 bg-pink-50 rounded-md my-4">
<div class="mr-4">
<img src="url/images/avater/profile1.png" alt="プロフィール写真" class="w-28 h-28 sm:w-36 sm:h-36 rounded-full">
</div>
<div>
<h2 class="text-lg font-medium">ゆーろんさん</h2>
<p class="text-gray-500">1995年～2067年</p>
<p class="text-sm text-gray-500">このブログの運営している猫のふりをした何か。<br>専門はネットワーク。</p>
</div>
</div>
解説切り替えブロック
1ページ当たり１つしか使用できないので、全体切り替えとして使用してください。
Content 1
This is the first content.
Content 2
This is the second content.
<div class="py-4">
<div class="flex justify-center items-center mt-10">
<button id="switchButton" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
解説モード[標準]
</button>
</div>
<div id="content1" class="mt-5">
<h2 class="text-xl font-bold">Content 1</h2>
<p>This is the first content.</p>
</div>
<div id="content2" class="hidden mt-5">
<h2 class="text-xl font-bold">Content 2</h2>
<p>This is the second content.</p>
</div>
</div>
隠しコメントブロック
<div class="py-4">
<div class="comment-block">
<button class="comment-toggle bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded">コメント</button>
<div class="hideable-comment bg-yellow-50 mt-4 p-4 rounded-lg" style="display:none;">
<p>This is a comment.</p>
</div>
</div>
</div>
コードブロック
curl_setopt($curl, CURLOPT_FAILONERROR, true);
curl_setopt($curl, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_TIMEOUT, 15);
curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($curl, CURLOPT_USERAGENT, $_SERVER['HTTP_USER_AGENT']);
$response = curl_exec($curl);
<pre class="line-numbers"><code class="language-html">
</code></pre>
OGPカード
[o_link addtitle="タイトル" link="URL"]
Shield Badges
<!-- プログラミング言語 -->
<img class="h-6 md:h-10" src="https://img.shields.io/badge/HTML-E34F26.svg?logo=HTML5&style=flat&logoColor=white">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/CSS-1572B6.svg?logo=CSS3&style=flat&logoColor=white">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/JavaScript-%233776AB.svg?logo=javascript&textColor=white&style=flat">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/Typescript-%23007ACC.svg?logo=typescript&style=flat&logoColor=white">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/C++-%2300599C.svg?style=flat&logo=c%2B%2B&logoColor=white">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/C%23-%23239120.svg?style=flat&logo=c-sharp&logoColor=white">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/Python-3776AB.svg?logo=python&logoColor=ffdd54&style=flat">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/PHP-777BB4.svg?logo=php&logoColor=white&style=flat">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/Ruby-CC342D.svg?logo=ruby&style=flat">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/Java-%23ED8B00.svg?style=flat&logo=openjdk&logoColor=white">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/Kotlin-%237F52FF.svg?style=flat&logo=kotlin&logoColor=white">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/Rust-000000.svg?logo=rust&style=flat">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/GO-%2300ADD8.svg?logo=go&logoColor=white&style=flat">
<!-- フレームワーク -->
<img class="h-6 md:h-10" src="https://img.shields.io/badge/Jquery-0769AD.svg?logo=jquery&style=flat">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/Node.js-6DA55F.svg?logo=node.js&style=flat&logoColor=white">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/Vue.js-%2335495e.svg?logo=vuedotjs&style=flat">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/React-%2320232a.svg?logo=react&style=flat">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/Next.js-000000.svg?logo=next.js&style=flat">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/Nuxt.js-00C58E.svg?logo=nuxt.js&style=flat">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/Laravel-E74430.svg?logo=laravel&logoColor=white&style=flat">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/WordPress-21759B.svg?logo=wordpress&style=flat">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/Rails-CC0000.svg?logo=ruby-on-rails&style=flat">
<!-- ライブラリ -->
<img class="h-6 md:h-10" src="https://img.shields.io/badge/Express.js-%23404d59.svg?style=flat&logo=express&logoColor=%2361DAFB">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/Socket.io-black?style=flat&logo=socket.io&badgeColor=010101">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/Nodemon-%23323330.svg?style=flat&logo=nodemon&logoColor=%BBDEAD">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/Chart.js-F5788D.svg?style=flat&logo=chart.js&logoColor=white">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/Prisma-3982CE?style=flat&logo=Prisma&logoColor=white">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/Threejs-black?style=flat&logo=three.js&logoColor=white">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/-Swagger-%23Clojure?style=flat&logo=swagger&logoColor=white">
<!-- CSSフレームワーク -->
<img class="h-6 md:h-10" src="https://img.shields.io/badge/Bulma-00D0B1?style=flat&logo=bulma&logoColor=white">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/BootStrap-%238511FA.svg?style=flat&logo=bootstrap&logoColor=white">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/Tailwindcss-%2338B2AC.svg?style=flat&logo=tailwind-css&logoColor=white">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/MUI-%230081CB.svg?style=flat&logo=mui&logoColor=white">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/Chakra-%234ED1C5.svg?style=flat&logo=chakraui&logoColor=white">
<!-- データベース -->
<img class="h-6 md:h-10" src="https://img.shields.io/badge/Sqlite-%2307405e.svg?style=flat&logo=sqlite&logoColor=white">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/MySQL-4479A1.svg?logo=mysql&logoColor=white&style=flat">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/PostgreSQL-%23316192.svg?style=flat&logo=PostgreSQL&logoColor=white">
<!-- 開発環境 -->
<img class="h-6 md:h-10" src="https://img.shields.io/badge/Git-F05032.svg?logo=git&style=flat&logoColor=white">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/Github-%23121011.svg?style=flat&logo=github&logoColor=white">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/Postman-FF6C37.svg?logo=postman&style=flat&logoColor=white">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/Visual%20Studio%20Code-007ACC.svg?logo=visualstudiocode&style=flat">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/Intellij%20IDEA-000000.svg?logo=intellijidea&style=flat">
<!-- インフラストラクチャ -->
<img class="h-6 md:h-10" src="https://img.shields.io/badge/Kubernetes-%23326ce5.svg?style=flat&logo=kubernetes&logoColor=white">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/Terraform-%235835CC.svg?style=flat&logo=terraform&logoColor=white">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/Vagrant-%231563FF.svg?style=flat&logo=vagrant&logoColor=white">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/Ansible-000000.svg?logo=ansible&style=flat">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/Docker-0DB7ED.svg?logo=docker&logoColor=white&textColor=white&style=flat">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/Github%20Actions-%232671E5.svg?style=flat&logo=githubactions&logoColor=white">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/Netlify-%23000000.svg?style=flat&logo=netlify&logoColor=#00C7B7">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/Vercel-%23000000.svg?style=flat&logo=vercel&logoColor=white">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/Heroku-%23430098.svg?style=flat&logo=heroku&logoColor=white">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/Amazon%20Web%20Service-232F3E.svg?logo=amazon-aws&style=flat">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/Google%20Cloud%20Platform-%234285F4.svg?style=flat&logo=google-cloud&logoColor=white">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/Firebase-039BE5.svg?logo=firebase&textColor=white&style=flat">
<!-- ミドルウェア -->
<img class="h-6 md:h-10" src="https://img.shields.io/badge/Apache-%23D42029.svg?style=flat&logo=apache&logoColor=white">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/Nginx-%23009639.svg?style=flat&logo=nginx&logoColor=white">
<!-- OS・ツールなど -->
<img class="h-6 md:h-10" src="https://img.shields.io/badge/Ubuntu-543DE0.svg?logo=ubuntu&style=flat">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/Tails-56347C.svg?logo=tails&style=flat">
<img class="h-6 md:h-10" src="https://img.shields.io/badge/Kali%20Linux-268BEE?style=flat&logo=kali-linux&logoColor=white">