CSSサンプル集

CSS Grid レイアウト

2次元レイアウトに最適なCSS Gridの実装例です。

実装例

Header
Sidebar
Main Content
Footer
HTML
<div class="css-grid-demo">
    <div class="grid-item item-1">Header</div>
    <div class="grid-item item-2">Sidebar</div>
    <div class="grid-item item-3">Main Content</div>
    <div class="grid-item item-4">Footer</div>
</div>
CSS
.css-grid-demo {
    display: grid;
    grid-template-areas: 
        "header header"
        "sidebar main"
        "footer footer";
    grid-template-columns: 200px 1fr;
    grid-template-rows: 60px 1fr 60px;
    gap: 1rem;
    height: 300px;
}

.item-1 { grid-area: header; background: #007bff; color: white; }
.item-2 { grid-area: sidebar; background: #17a2b8; color: white; }
.item-3 { grid-area: main; background: white; }
.item-4 { grid-area: footer; background: #343a40; color: white; }

Flexbox レイアウト

1次元レイアウトに適したFlexboxの使い方です。

実装例

Item 1
Item 2 (2倍幅)
Item 3
CSS
.flexbox-demo {
    display: flex;
    gap: 1rem;
}

.flex-item {
    flex: 1;
    padding: 2rem;
    background: #007bff;
    color: white;
    text-align: center;
    border-radius: 0.375rem;
}

.flex-item:nth-child(2) {
    flex: 2; /* 2倍の幅 */
    background: #28a745;
}

CSS アニメーション

ホバー時のアニメーション効果の実装例です。

実装例（ホバーしてみてください）

Bounce

Fade

Rotate

CSS アニメーション
/* ホバー時のアニメーション */
.bounce-demo:hover i {
    animation: bounce 0.6s ease-in-out;
}

.fade-demo:hover {
    animation: fadeInOut 1s ease-in-out;
}

.rotate-demo:hover i {
    animation: rotate 1s ease-in-out;
}

/* キーフレーム定義 */
@keyframes bounce {
    0%, 20%, 60%, 100% { transform: translateY(0); }
    40% { transform: translateY(-20px); }
    80% { transform: translateY(-10px); }
}

@keyframes fadeInOut {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}