CSSサンプルコード集
以下のコードをコピペして、Web制作にご活用ください。
1. 見出し
これは見出しです
/* 見出し */
.heading {
font-size: 2rem;
color: #333;
margin-bottom: 15px;
}
2. ボタン
/* ボタン */
.button {
padding: 10px 20px;
background-color: #0073aa;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
3. ボックス
これはボックスです。
/* ボックス */
.box {
background-color: #f8f8f8;
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
margin-bottom: 20px;
}
4. ローディング
/* ローディング */
.loading {
width: 40px;
height: 40px;
border: 5px solid #ccc;
border-top: 5px solid #0073aa;
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 20px auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
5. リスト
- リストアイテム1
- リストアイテム2
- リストアイテム3
/* リスト */
.list {
list-style-type: none;
padding: 0;
}
.list li {
padding: 10px;
background-color: #f1f1f1;
margin-bottom: 5px;
border-radius: 4px;
}
6. 吹き出し
こんにちは！
/* 吹き出し */
.bubble {
padding: 10px;
background-color: #0073aa;
color: white;
border-radius: 10px;
position: relative;
margin-bottom: 20px;
}
.bubble::after {
content: ”;
position: absolute;
bottom: -10px;
left: 20px;
border-width: 10px;
border-style: solid;
border-color: #0073aa transparent transparent transparent;
}
7. アコーディオン
セクション1
内容1
セクション2
内容2
/* アコーディオン */
.accordion {
background-color: #f1f1f1;
border: 1px solid #ccc;
margin: 10px 0;
}
.accordion-item {
border-bottom: 1px solid #ddd;
}
.accordion-header {
padding: 10px;
background-color: #eee;
cursor: pointer;
text-align: left;
font-weight: bold;
}
.accordion-content {
padding: 10px;
display: none;
background-color: #fff;
}
.accordion-header.active + .accordion-content {
display: block;
}
8. 検索フォーム
/* 検索フォーム */
.search-form input[type=”text”] {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
margin-bottom: 10px;
}
.search-form button {
padding: 10px 15px;
background-color: #0073aa;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
9. セレクトボックス
/* セレクトボックス */
select {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
margin-bottom: 10px;
}
10. パンくずリスト
/* パンくずリスト */
.breadcrumb {
display: flex;
list-style-type: none;
padding: 0;
margin-bottom: 20px;
}
.breadcrumb li {
margin-right: 10px;
}
.breadcrumb li::after {
content: ‘>’;
margin-left: 10px;
}
.breadcrumb li:last-child::after {
content: ”;
}
11. テキストボックス
/* テキストボックス */
.textbox {
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
width: 100%;
margin-bottom: 10px;
}
12. ツールチップ
ツールチップテキスト
ホバーしてみてください
/* ツールチップ */
.tooltip {
position: relative;
display: inline-block;
cursor: pointer;
}
.tooltip .tooltip-text {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 5px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:hover .tooltip-text {
visibility: visible;
opacity: 1;
}
13. Q&Aリスト
- Q1: これは質問1です。
- Q2: これは質問2です。
/* Q&Aリスト */
.qa-list {
list-style-type: none;
padding: 0;
}
.qa-list .qa-item {
margin-bottom: 20px;
padding: 15px;
background-color: #f8f8f8;
border-radius: 8px;
}
14. 引用ボックス
これは引用文です。
/* 引用ボックス */
.quote {
padding: 10px 20px;
background-color: #f1f1f1;
border-left: 5px solid #0073aa;
margin: 20px 0;
}
15. レーダーチャート
/* レーダーチャート */
.radar {
width: 300px;
height: 300px;
border-radius: 50%;
background: conic-gradient(#0073aa 25%, #ddd 25%);
margin: 20px auto;
}
16. トグルボタン
/* トグルボタン */
.toggle-btn {
display: inline-block;
width: 60px;
height: 30px;
background-color: #0073aa;
border-radius: 30px;
position: relative;
cursor: pointer;
}
.toggle-btn .toggle-circle {
width: 26px;
height: 26px;
background-color: white;
border-radius: 50%;
position: absolute;
top: 2px;
transition: 0.3s;
}
.toggle-btn.active .toggle-circle {
left: 30px;
}
17. ラジオボタン
/* ラジオボタン */
.radio {
display: inline-block;
margin-right: 10px;
}
18. 目次
- セクション1
- セクション2
- セクション3
/* 目次 */
.toc {
list-style-type: none;
padding: 0;
}
.toc li {
margin-bottom: 5px;
}
19. モーダルウィンドウ
/* モーダルウィンドウ */
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
background-color: #fff;
margin: 15% auto;
padding: 20px;
border-radius: 8px;
width: 60%;
}
20. タイムライン
- イベント1
- イベント2
/* タイムライン */
.timeline {
list-style-type: none;
padding: 0;
}
.timeline-item {
margin-bottom: 20px;
padding: 10px;
background-color: #f8f8f8;
border-radius: 8px;
}