MENU
  1. ホーム
  2. CSS
  3. 【HTML/CSS】コピペ！お知らせ・ニュースデザイン14選

【HTML/CSS】コピペ！お知らせ・ニュースデザイン14選

CSS
いつまで無駄なデザインに時間を費やしますか？ 自作コード × SWELL で
理想のサイトをカスタマイズ構築

面倒な基本構造やレスポンシブ対応はテーマに任せ、浮いた時間で「あなたにしかできないこだわりの独自カスタマイズ」をとことん追求してみませんか？

「SWELL」の徹底レビュー・詳細を見る
※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています

本記事では、カスタマイズ可能なお知らせ・ニュースデザインのコードをご紹介します。

HTMLとCSSの両方をコピペすればすぐに利用できます。

コピペしたコードをカスタマイズし、自分好みにぜひ変更してみてください。

目次
もう無駄なレイアウトに凝るのやめたら？ 最速の土台 × 独自CSS で
SWELLをゴリゴリにカスタマイズ

レスポンシブ対応や基本レイアウトは最高峰テーマに任せませんか？浮いた時間で、流麗なアニメーションや標準設定を上書きする「あなただけの高度なビジュアル表現」をとことん突き詰めましょう。

「SWELL」であなたのデザインの限界を超える
※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています

ベーシック・リスト型（お知らせ欄）

最もオーソドックスで、企業サイトから個人ブログまであらゆる場面で使われる汎用性の高いデザインです。

ここでは、以下のベーシック・リスト型（お知らせ欄）のデザイン例を記載しています。

ベーシック・リスト型（お知らせ欄）
  • シンプル1行リスト
  • カテゴリーバッジ付き
  • ボーダー区切り（下線・破線）
  • ホバーエフェクト付きリスト

実際のデザインプレビューとHTML＆CSSコードを記載しています。

シンプル1行リスト

コーポレートサイトから個人ブログまで、最も利用頻度が高い王道のレイアウトです。

HTMLコード表示
<div class="cs-news-wrapper">
    <ul class="cs-news-list">
        <li class="cs-news-item">
            <a href="#" class="cs-news-link">
                <time class="cs-news-date" datetime="2026-07-16">2026.07.16</time>
                <span class="cs-news-title">Webデザインのトレンドについて新しい記事を公開しました。長文のタイトルになった場合でも綺麗に省略されます。</span>
            </a>
        </li>
        
        <li class="cs-news-item">
            <a href="#" class="cs-news-link">
                <time class="cs-news-date" datetime="2026-07-10">2026.07.10</time>
                <span class="cs-news-title">夏季休業のお知らせ</span>
            </a>
        </li>

        <li class="cs-news-item">
            <a href="#" class="cs-news-link">
                <time class="cs-news-date" datetime="2026-07-01">2026.07.01</time>
                <span class="cs-news-title">【重要】利用規約の改定に関するご案内</span>
            </a>
        </li>
    </ul>
</div>
CSSコード表示
/* =========================================
   共通の枠組み・リストの初期化
========================================= */
.cs-news-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 2em;
}

.cs-news-list {
    list-style: none; /* テーマ標準の黒ポッチを消す */
    padding: 0;
    margin: 0;
    border-top: 1px solid #e2e8f0; /* リスト全体の上枠線 */
}

.cs-news-item {
    border-bottom: 1px solid #e2e8f0; /* 各項目の区切り線 */
}

/* =========================================
   リンク要素（横並びレイアウト）
========================================= */
.cs-news-link {
    display: flex; /* 日付とタイトルを横並びにする */
    align-items: center; /* 縦方向の中央揃え */
    padding: 16px 12px;
    text-decoration: none !important; /* デフォルトの下線を消去 */
    color: #334155;
    transition: background-color 0.3s ease; /* ホバー時のふわっとした変化 */
}

/* マウスを乗せた時の背景色 */
.cs-news-link:hover {
    background-color: #f8fafc; 
}

/* =========================================
   日付とタイトル
========================================= */
.cs-news-date {
    font-size: 0.9rem;
    color: #64748b;
    margin-right: 24px; /* タイトルとの隙間 */
    white-space: nowrap; /* 画面が狭くなっても日付を改行させない */
}

.cs-news-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    
    /* ▼ はみ出たテキストを「...」で省略する ▼ */
    white-space: nowrap; /* 改行を禁止 */
    overflow: hidden;    /* はみ出た部分を隠す */
    text-overflow: ellipsis; /* 「...」を表示 */
}

/* =========================================
   レスポンシブ対応（スマホ表示時は縦並びに）
========================================= */
@media screen and (max-width: 640px) {
    .cs-news-link {
        flex-direction: column; /* 横並びから縦並びに変更 */
        align-items: flex-start; /* 左揃えにする */
        padding: 16px;
    }
    .cs-news-date {
        margin-bottom: 6px; /* 縦並びになった時の日付とタイトルの隙間 */
    }
    .cs-news-title {
        width: 100%; /* 省略（...）を正しく機能させるための必須指定 */
    }
}

カテゴリーバッジ付き

お知らせの件名（タイトル）の前に、「重要」「お知らせ」「アップデート」「イベント」といった色分けされたバッジ（ラベル）を配置するデザインです。

ユーザーが一目でニュースの重要度やジャンルを判別できるように、コーポレートサイトなどで採用されています。

HTMLコード表示
<div class="cs-news-wrapper">
    <ul class="cs-news-list">
        
        <li class="cs-news-item">
            <a href="#" class="cs-news-link">
                <time class="cs-news-date" datetime="2026-07-16">2026.07.16</time>
                <span class="cs-news-badge cs-badge-important">重要</span>
                <span class="cs-news-title">システムメンテナンスに伴うサービス一時停止のお知らせ</span>
            </a>
        </li>
        
        <li class="cs-news-item">
            <a href="#" class="cs-news-link">
                <time class="cs-news-date" datetime="2026-07-10">2026.07.10</time>
                <span class="cs-news-badge cs-badge-update">アップデート</span>
                <span class="cs-news-title">新機能「自動画像圧縮」を追加いたしました。</span>
            </a>
        </li>

        <li class="cs-news-item">
            <a href="#" class="cs-news-link">
                <time class="cs-news-date" datetime="2026-07-01">2026.07.01</time>
                <span class="cs-news-badge cs-badge-release">リリース</span>
                <span class="cs-news-title">新規事業の立ち上げに関するプレスリリースを配信しました。</span>
            </a>
        </li>
        
    </ul>
</div>
CSSコード表示
/* =========================================
   共通の枠組み・リストの初期化
========================================= */
.cs-news-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 2em;
}

.cs-news-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid #e2e8f0;
}

.cs-news-item {
    border-bottom: 1px solid #e2e8f0;
}

/* =========================================
   リンク要素（横並びレイアウト）
========================================= */
.cs-news-link {
    display: flex;
    align-items: center; /* 縦方向の中央揃え */
    padding: 16px 12px;
    text-decoration: none !important;
    color: #334155;
    transition: background-color 0.3s ease;
}

.cs-news-link:hover {
    background-color: #f8fafc;
}

/* =========================================
   日付
========================================= */
.cs-news-date {
    font-size: 0.9rem;
    color: #64748b;
    margin-right: 20px;
    white-space: nowrap; /* 画面が狭くなっても日付を改行させない */
}

/* =========================================
   バッジの基本スタイル
========================================= */
.cs-news-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    padding: 6px 10px;
    border-radius: 4px;
    margin-right: 20px;
    white-space: nowrap; /* バッジ内の文字の改行を防ぐ */
    text-align: center;
    min-width: 90px; /* バッジの横幅を揃えて綺麗に見せる（お好みで調整） */
}

/* ▼ バッジの色バリエーション ▼ */
.cs-badge-important {
    background-color: #fef2f2; /* 薄い赤 */
    color: #ef4444;            /* 濃い赤 */
    border: 1px solid #fca5a5;
}

.cs-badge-update {
    background-color: #eff6ff; /* 薄い青 */
    color: #3b82f6;            /* 濃い青 */
    border: 1px solid #93c5fd;
}

.cs-badge-release {
    background-color: #f0fdf4; /* 薄い緑 */
    color: #22c55e;            /* 濃い緑 */
    border: 1px solid #86efac;
}

/* =========================================
   タイトル（長文は2行目以降に綺麗に回り込む）
========================================= */
.cs-news-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.5;
}

/* =========================================
   レスポンシブ対応（スマホ表示時）
========================================= */
@media screen and (max-width: 640px) {
    .cs-news-link {
        flex-wrap: wrap; /* 子要素の折り返しを許可する */
        align-items: flex-start;
        padding: 16px;
    }
    
    /* 日付とバッジを上部に並べて配置 */
    .cs-news-date {
        margin-bottom: 8px;
    }
    
    .cs-news-badge {
        margin-bottom: 8px;
        margin-right: 0; /* タイトルを次の行へ落とすために右余白を消去 */
    }
    
    /* タイトルを100%幅にすることで、自動的に次の行へ改行（回り込み）させる */
    .cs-news-title {
        width: 100%;
        font-size: 0.9rem;
    }
}

ボーダー区切り（下線・破線）

リストの区切り線（ボーダー）は、線の種類を少し変えるだけでサイト全体の印象を変えることができる、費用対効果の高いデザイン要素です。

1. 実線（Solid）
2. 破線（Dashed）
3. 点線（Dotted）
HTMLコード表示
<div class="cs-border-wrapper">

    <div class="cs-border-label">1. 実線（Solid）</div>
    <ul class="cs-border-list cs-style-solid">
        <li class="cs-border-item">
            <a href="#" class="cs-border-link">
                <time class="cs-border-date" datetime="2026-07-16">2026.07.16</time>
                <span class="cs-border-title">コーポレートサイトに最適な、最も標準的な実線の区切りです。</span>
            </a>
        </li>
        <li class="cs-border-item">
            <a href="#" class="cs-border-link">
                <time class="cs-border-date" datetime="2026-07-10">2026.07.10</time>
                <span class="cs-border-title">不要な装飾がないため、情報の視認性が最も高くなります。</span>
            </a>
        </li>
    </ul>

    <div class="cs-border-label">2. 破線（Dashed）</div>
    <ul class="cs-border-list cs-style-dashed">
        <li class="cs-border-item">
            <a href="#" class="cs-border-link">
                <time class="cs-border-date" datetime="2026-07-05">2026.07.05</time>
                <span class="cs-border-title">少しカジュアルで親しみやすい印象を与える破線スタイルです。</span>
            </a>
        </li>
        <li class="cs-border-item">
            <a href="#" class="cs-border-link">
                <time class="cs-border-date" datetime="2026-07-01">2026.07.01</time>
                <span class="cs-border-title">ブログやBtoC向けのサービスサイトと非常に相性が良いです。</span>
            </a>
        </li>
    </ul>

    <div class="cs-border-label">3. 点線（Dotted）</div>
    <ul class="cs-border-list cs-style-dotted">
        <li class="cs-border-item">
            <a href="#" class="cs-border-link">
                <time class="cs-border-date" datetime="2026-06-28">2026.06.28</time>
                <span class="cs-border-title">丸い点が連続する点線は、柔らかくナチュラルな印象を与えます。</span>
            </a>
        </li>
        <li class="cs-border-item">
            <a href="#" class="cs-border-link">
                <time class="cs-border-date" datetime="2026-06-20">2026.06.20</time>
                <span class="cs-border-title">女性向けのデザインや、カフェ、美容院などのサイトで人気です。</span>
            </a>
        </li>
    </ul>

</div>
CSSコード表示
/* =========================================
   共通の枠組み・デモ用の見出しスタイル
========================================= */
.cs-border-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 2em;
}

.cs-border-label {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #ffffff;
    background-color: #475569;
    padding: 4px 12px;
    border-radius: 4px 4px 0 0;
    margin-top: 32px;
}
.cs-border-label:first-child { margin-top: 0; }

/* =========================================
   リストの基本設定
========================================= */
.cs-border-list {
    list-style: none; /* テーマ標準のリストマークをリセット */
    padding: 0;
    margin: 0;
    /* リスト全体を囲む外枠も、種類に合わせて設定（後述） */
}

/* =========================================
   各リスト項目（li）とリンク（a）の設計
========================================= */
.cs-border-item {
    /* ここに下線を引きますが、線の種類は親のクラスで切り替えます */
    border-bottom-width: 1px;
    border-bottom-color: #cbd5e1; /* 少し落ち着いたグレー */
}

/* ▼ 最後の要素の下線を消してスッキリさせる ▼ */
.cs-border-item:last-child {
    border-bottom: none;
}

.cs-border-link {
    display: flex;
    align-items: center;
    padding: 16px;
    text-decoration: none !important;
    color: #334155;
    transition: background-color 0.2s ease;
}

.cs-border-link:hover {
    background-color: #f8fafc;
}

.cs-border-date {
    font-size: 0.9rem;
    color: #64748b;
    margin-right: 24px;
    white-space: nowrap;
}

.cs-border-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.5;
}

/* =========================================
   ボーダーのスタイル切り替え（ここがポイント）
========================================= */
/* 1. 実線（Solid） */
.cs-style-solid {
    border-top: 1px solid #cbd5e1;
    border-bottom: 1px solid #cbd5e1;
}
.cs-style-solid .cs-border-item {
    border-bottom-style: solid;
}

/* 2. 破線（Dashed） */
.cs-style-dashed {
    border-top: 1px dashed #cbd5e1;
    border-bottom: 1px dashed #cbd5e1;
}
.cs-style-dashed .cs-border-item {
    border-bottom-style: dashed;
}

/* 3. 点線（Dotted） */
.cs-style-dotted {
    border-top: 1px dotted #94a3b8; /* 点線は少し色が薄く見えがちなので濃くする */
    border-bottom: 1px dotted #94a3b8;
}
.cs-style-dotted .cs-border-item {
    border-bottom-style: dotted;
    border-bottom-color: #94a3b8;
}

/* =========================================
   レスポンシブ対応
========================================= */
@media screen and (max-width: 640px) {
    .cs-border-link {
        flex-direction: column;
        align-items: flex-start;
    }
    .cs-border-date {
        margin-bottom: 8px;
    }
}

ホバーエフェクト付きリスト

ユーザーがマウスを乗せた（ホバーした）際に、「ここはクリックできるリンクですよ」と視覚的に伝える（アフォーダンスを高める）ための実践的なデザインです。

HTMLコード表示
<div class="cs-hover-wrapper">
    <ul class="cs-hover-list">
        
        <li class="cs-hover-item">
            <a href="#" class="cs-hover-link">
                <time class="cs-hover-date" datetime="2026-07-16">2026.07.16</time>
                <span class="cs-hover-title">マウスを乗せると背景色が変わり、右端の矢印が動きます。</span>
            </a>
        </li>
        
        <li class="cs-hover-item">
            <a href="#" class="cs-hover-link">
                <time class="cs-hover-date" datetime="2026-07-10">2026.07.10</time>
                <span class="cs-hover-title">画像を使わずにCSSだけで矢印アイコンを描画しているため軽量です。</span>
            </a>
        </li>

        <li class="cs-hover-item">
            <a href="#" class="cs-hover-link">
                <time class="cs-hover-date" datetime="2026-07-01">2026.07.01</time>
                <span class="cs-hover-title">ユーザーに「クリックできること」を直感的に伝える重要なUI設計です。</span>
            </a>
        </li>
        
    </ul>
</div>
CSSコード表示
/* =========================================
   共通の枠組み・リストの初期化
========================================= */
.cs-hover-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 2em;
}

.cs-hover-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid #e2e8f0;
}

.cs-hover-item {
    border-bottom: 1px solid #e2e8f0;
}

/* =========================================
   リンク要素の基本設定
========================================= */
.cs-hover-link {
    display: flex;
    align-items: center;
    padding: 20px 16px;
    text-decoration: none !important;
    color: #334155;
    /* 背景色と文字色を0.3秒かけて滑らかに変化させる */
    transition: background-color 0.3s ease, color 0.3s ease; 
}

/* =========================================
   テキスト（日付・タイトル）
========================================= */
.cs-hover-date {
    font-size: 0.9rem;
    color: #64748b;
    margin-right: 24px;
    white-space: nowrap;
    transition: color 0.3s ease; /* 日付もホバーで色を変えるための準備 */
}

.cs-hover-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
}

/* =========================================
   右端の矢印アイコン（CSSで描画）
========================================= */
.cs-hover-link::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    /* 上と右だけに線を引き、45度回転させて「く」の字（矢印）を作る */
    border-top: 2px solid #94a3b8;
    border-right: 2px solid #94a3b8;
    
    /* flexbox内で右端に押しやる魔法のコード */
    margin-left: auto; 
    
    /* 初期位置（X軸0）と回転角を指定 */
    transform: translateX(0) rotate(45deg);
    
    /* 動きを滑らかにする */
    transition: transform 0.3s ease, border-color 0.3s ease;
}

/* =========================================
   ホバー（マウスオーバー）時の変化
========================================= */
.cs-hover-link:hover {
    background-color: #f8fafc; /* 背景をほんのり明るいグレーに */
}

/* ホバー時：タイトルの色をアクセントカラー（青）にする */
.cs-hover-link:hover .cs-hover-title {
    color: #2589d0;
}

/* ホバー時：矢印を右に5px移動させ、色も青にする */
.cs-hover-link:hover::after {
    transform: translateX(5px) rotate(45deg); /* 右にスライドしつつ角度はキープ */
    border-color: #2589d0;
}

/* =========================================
   レスポンシブ対応（スマホ表示時）
========================================= */
@media screen and (max-width: 640px) {
    .cs-hover-link {
        /* スマホでも矢印を右端にキープするため、flex-directionはrowのままにします */
        padding: 16px;
    }
    
    /* テキスト部分を縦並びにするための内部ラッパーの役割を疑似的に再現 */
    .cs-hover-link {
        flex-wrap: wrap;
    }
    .cs-hover-date {
        width: 100%;
        margin-bottom: 4px;
        margin-right: 0;
        font-size: 0.85rem;
    }
    .cs-hover-title {
        /* 矢印（約16px幅）の分を引いた幅にして重なりを防ぐ */
        width: calc(100% - 24px); 
        font-size: 0.95rem;
    }
}

省スペース・スクロール型（限られた領域のニュース欄）

ファーストビューの面積を圧迫せずに、多くの情報をコンパクトに収めたい場合に活躍するデザインです。

ここでは、以下の省スペース・スクロール型（限られた領域のニュース欄）のデザイン例を記載しています。

省スペース・スクロール型（限られた領域のニュース欄）
  • インナースクロールBOX
  • 横流しニュースティッカー
  • アコーディオン型お知らせ

実際のデザインプレビューとHTML＆CSSコードを記載しています。

インナースクロールBOX

Webサイトのファーストビュー（ページを開いて最初に目に入る領域）を圧迫せず、多くの過去記事や通知を格納できる実用的なレイアウトです。

NEWS & TOPICS
HTMLコード表示
<div class="cs-scroll-wrapper">
    
    <div class="cs-scroll-header">
        <span class="cs-scroll-header-title">NEWS & TOPICS</span>
    </div>

    <div class="cs-scroll-container">
        <ul class="cs-scroll-list">
            
            <li class="cs-scroll-item">
                <a href="#" class="cs-scroll-link">
                    <time class="cs-scroll-date" datetime="2026-07-16">2026.07.16</time>
                    <span class="cs-scroll-title">インナースクロールBOXのレイアウトを実装しました。</span>
                </a>
            </li>
            
            <li class="cs-scroll-item">
                <a href="#" class="cs-scroll-link">
                    <time class="cs-scroll-date" datetime="2026-07-12">2026.07.12</time>
                    <span class="cs-scroll-title">一定の高さを超えると、自動的に縦スクロールバーが出現します。</span>
                </a>
            </li>

            <li class="cs-scroll-item">
                <a href="#" class="cs-scroll-link">
                    <time class="cs-scroll-date" datetime="2026-07-05">2026.07.05</time>
                    <span class="cs-scroll-title">ファーストビューの限られたスペースを有効活用したい場合に最適です。</span>
                </a>
            </li>

            <li class="cs-scroll-item">
                <a href="#" class="cs-scroll-link">
                    <time class="cs-scroll-date" datetime="2026-06-28">2026.06.28</time>
                    <span class="cs-scroll-title">過去の古いお知らせも、ページを縦長にすることなく格納できます。</span>
                </a>
            </li>

            <li class="cs-scroll-item">
                <a href="#" class="cs-scroll-link">
                    <time class="cs-scroll-date" datetime="2026-06-15">2026.06.15</time>
                    <span class="cs-scroll-title">スクロールバーのデザインもCSSで美しくカスタマイズしています。</span>
                </a>
            </li>

        </ul>
    </div>
</div>
CSSコード表示
/* =========================================
   共通の枠組み・ヘッダー
========================================= */
.cs-scroll-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 2em;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background-color: #ffffff;
    overflow: hidden; /* 角丸からはみ出た部分を隠す */
}

.cs-scroll-header {
    background-color: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 16px 24px;
}

.cs-scroll-header-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #1e293b;
    letter-spacing: 0.05em;
}

/* =========================================
   スクロール領域のコンテナ（ここが重要！）
========================================= */
.cs-scroll-container {
    /* ▼ 高さを固定し、はみ出た分をスクロールさせる ▼ */
    max-height: 280px; /* ここを調整して表示領域の高さを決めます */
    overflow-y: auto;  /* 縦方向のスクロールを許可 */
}

/* =========================================
   リストとリンクのスタイル
========================================= */
.cs-scroll-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cs-scroll-item {
    border-bottom: 1px dashed #e2e8f0; /* 境界線を破線にして少し軽やかに */
}
.cs-scroll-item:last-child {
    border-bottom: none;
}

.cs-scroll-link {
    display: flex;
    align-items: center;
    padding: 16px 24px;
    text-decoration: none !important;
    transition: background-color 0.2s ease;
}

.cs-scroll-link:hover {
    background-color: #f1f5f9;
}

.cs-scroll-date {
    font-size: 0.9rem;
    color: #64748b;
    margin-right: 20px;
    white-space: nowrap;
}

.cs-scroll-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #334155;
    line-height: 1.5;
}

/* =========================================
   カスタムスクロールバー（Webkit系ブラウザ用）
========================================= */
/* スクロールバー全体の幅 */
.cs-scroll-container::-webkit-scrollbar {
    width: 8px;
}

/* スクロールバーの背景（トラック） */
.cs-scroll-container::-webkit-scrollbar-track {
    background-color: #f8fafc;
}

/* スクロールバーの動く部分（つまみ） */
.cs-scroll-container::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 4px; /* 丸みを持たせる */
}

/* つまみにホバーした時の色 */
.cs-scroll-container::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8;
}

/* =========================================
   レスポンシブ対応
========================================= */
@media screen and (max-width: 640px) {
    .cs-scroll-header {
        padding: 12px 16px;
    }
    .cs-scroll-link {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
    }
    .cs-scroll-date {
        margin-bottom: 6px;
    }
}

横流しニュースティッカー

テレビのニュース番組や電光掲示板のように、テキストが右から左へ途切れることなく自動スクロールし続ける動的なレイアウトです。

JavaScriptを使わず、CSSの@keyframesアニメーションのみで滑らかな動きを実現しています。

LATEST NEWS
横流しニュースティッカーのレイアウトを公開しました。 JavaScriptを使わず、CSSアニメーションのみで実装しています。 マウスを乗せるとスクロールが一時停止する親切設計です。
HTMLコード表示
<div class="cs-ticker-wrapper">
    
    <div class="cs-ticker-label">
        LATEST NEWS
    </div>

    <div class="cs-ticker-inner">
        <div class="cs-ticker-track">
            
            <span class="cs-ticker-item">
                <time class="cs-ticker-date" datetime="2026-07-16">2026.07.16</time>
                <a href="#" class="cs-ticker-link">横流しニュースティッカーのレイアウトを公開しました。</a>
            </span>
            
            <span class="cs-ticker-item">
                <time class="cs-ticker-date" datetime="2026-07-15">2026.07.15</time>
                <a href="#" class="cs-ticker-link">JavaScriptを使わず、CSSアニメーションのみで実装しています。</a>
            </span>

            <span class="cs-ticker-item">
                <time class="cs-ticker-date" datetime="2026-07-10">2026.07.10</time>
                <a href="#" class="cs-ticker-link">マウスを乗せるとスクロールが一時停止する親切設計です。</a>
            </span>

        </div>
    </div>
</div>
CSSコード表示
/* =========================================
   全体の枠組み（ラベルとスクロール領域を横並びに）
========================================= */
.cs-ticker-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 2em;
    display: flex;
    align-items: stretch; /* ラベルと枠の高さを合わせる */
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    overflow: hidden; /* 角丸からはみ出た部分を隠す */
    background-color: #ffffff;
}

/* =========================================
   左側の固定ラベル
========================================= */
.cs-ticker-label {
    background-color: #1e293b;
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 800;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    white-space: nowrap; /* ラベルの改行を防ぐ */
    z-index: 2; /* スクロールする文字より上に表示 */
    position: relative;
    box-shadow: 2px 0 4px rgba(0,0,0,0.1); /* 右側に少し影を落として立体感を出す */
}

/* =========================================
   スクロールを内包するエリア
========================================= */
.cs-ticker-inner {
    flex-grow: 1; /* 余った幅をすべて使う */
    overflow: hidden; /* 枠からはみ出たテキストを隠す */
    display: flex;
    align-items: center;
    white-space: nowrap; /* 中身の改行を絶対に防ぐ */
}

/* =========================================
   動くトラック（ここが右から左へ移動する）
========================================= */
.cs-ticker-track {
    display: inline-block;
    /* ▼ 最初は右端（100%の位置）からスタートさせる ▼ */
    padding-left: 100%; 
    /* 20秒かけて一定の速度（linear）で無限ループ */
    animation: cs-marquee 20s linear infinite; 
}

/* マウスを乗せた時にアニメーションを一時停止する */
.cs-ticker-inner:hover .cs-ticker-track {
    animation-play-state: paused;
}

/* =========================================
   各ニュース項目のデザイン
========================================= */
.cs-ticker-item {
    display: inline-block;
    margin-right: 48px; /* 次のニュースとの間隔を広めにとる */
}

.cs-ticker-date {
    font-size: 0.85rem;
    color: #64748b;
    margin-right: 12px;
}

.cs-ticker-link {
    font-size: 0.95rem;
    font-weight: 700;
    color: #334155;
    text-decoration: none !important;
    transition: color 0.2s ease;
}

.cs-ticker-link:hover {
    color: #2589d0;
    text-decoration: underline !important;
}

/* =========================================
   横スクロール用のアニメーションキーフレーム
========================================= */
@keyframes cs-marquee {
    0% {
        transform: translateX(0); /* padding-leftで確保した右端からスタート */
    }
    100% {
        transform: translateX(-100%); /* 自身の幅の分だけ左へ移動しきる */
    }
}

/* =========================================
   レスポンシブ対応
========================================= */
@media screen and (max-width: 640px) {
    .cs-ticker-label {
        font-size: 0.75rem;
        padding: 10px 12px;
    }
    .cs-ticker-item {
        margin-right: 32px;
    }
    .cs-ticker-link {
        font-size: 0.85rem;
    }
}

アコーディオン型お知らせ

長文のお知らせや画像・リンクを含む詳細な情報をコンパクトに折り畳んでいける便利なUIです。

アコーディオン型お知らせのレイアウトを公開しました

ここに詳細なテキストや画像が入ります。HTMLの <details> と <summary> タグを使用しているため、JavaScriptを一切使わずに開閉動作を実現しています。

開閉を示す右端のアイコンもCSSのみで自動変化します

デフォルト状態では「＋」マークが表示され、パネルが開くと自動的に「−」マークに切り替わるようにCSSで制御しています。ユーザーに操作状態を直感的に伝えます。

重要なお知らせは最初から開いておくことも可能です

HTMLの details タグに open 属性を付与しておくことで、ページ読み込み時から展開された状態にすることができます。絶対に読ませたい重要なお知らせなどに有効です。

HTMLコード表示
<div class="cs-accordion-wrapper">
    
    <details class="cs-accordion-item">
        <summary class="cs-accordion-summary">
            <time class="cs-accordion-date" datetime="2026-07-16">2026.07.16</time>
            <span class="cs-accordion-title">アコーディオン型お知らせのレイアウトを公開しました</span>
        </summary>
        <div class="cs-accordion-content">
            <p>ここに詳細なテキストや画像が入ります。HTMLの <code><details></code> と <code><summary></code> タグを使用しているため、JavaScriptを一切使わずに開閉動作を実現しています。</p>
        </div>
    </details>

    <details class="cs-accordion-item">
        <summary class="cs-accordion-summary">
            <time class="cs-accordion-date" datetime="2026-07-10">2026.07.10</time>
            <span class="cs-accordion-title">開閉を示す右端のアイコンもCSSのみで自動変化します</span>
        </summary>
        <div class="cs-accordion-content">
            <p>デフォルト状態では「＋」マークが表示され、パネルが開くと自動的に「−」マークに切り替わるようにCSSで制御しています。ユーザーに操作状態を直感的に伝えます。</p>
        </div>
    </details>

    <details class="cs-accordion-item" open="">
        <summary class="cs-accordion-summary">
            <time class="cs-accordion-date" datetime="2026-07-01">2026.07.01</time>
            <span class="cs-accordion-title">重要なお知らせは最初から開いておくことも可能です</span>
        </summary>
        <div class="cs-accordion-content">
            <p>HTMLの <code>details</code> タグに <code>open</code> 属性を付与しておくことで、ページ読み込み時から展開された状態にすることができます。絶対に読ませたい重要なお知らせなどに有効です。</p>
        </div>
    </details>

</div>
CSSコード表示
/* =========================================
   共通の枠組み
========================================= */
.cs-accordion-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 2em;
    border-top: 1px solid #e2e8f0;
}

.cs-accordion-item {
    border-bottom: 1px solid #e2e8f0;
}

/* =========================================
   サマリー（見出し・クリックできる部分）
========================================= */
.cs-accordion-summary {
    display: flex;
    align-items: center;
    padding: 20px 16px;
    cursor: pointer;
    list-style: none; /* デフォルトの黒い三角矢印を消す */
    transition: background-color 0.2s ease;
}

/* Safari向け：デフォルトの三角矢印を消すハック */
.cs-accordion-summary::-webkit-details-marker {
    display: none;
}

.cs-accordion-summary:hover {
    background-color: #f8fafc;
}

/* =========================================
   テキスト（日付・タイトル）
========================================= */
.cs-accordion-date {
    font-size: 0.9rem;
    color: #64748b;
    margin-right: 24px;
    white-space: nowrap;
}

.cs-accordion-title {
    font-size: 1rem;
    font-weight: 700;
    color: #334155;
    line-height: 1.5;
    /* 右端のアイコンと被らないように少し余白を取る */
    padding-right: 32px; 
}

/* =========================================
   右端の開閉アイコン（＋と−）
========================================= */
.cs-accordion-summary::after {
    content: "＋";
    display: block;
    margin-left: auto; /* 右端に寄せる */
    font-size: 1.2rem;
    font-weight: 900;
    color: #94a3b8;
    line-height: 1;
    transition: transform 0.3s ease;
}

/* 展開時（open属性がある時）のサマリーのスタイル変化 */
details[open] .cs-accordion-summary {
    background-color: #f1f5f9;
}

/* 展開時（open属性がある時）はアイコンを「−」にする */
details[open] .cs-accordion-summary::after {
    content: "−";
    color: #2589d0;
    transform: rotate(180deg); /* アニメーションで回転させる */
}

/* =========================================
   展開される詳細コンテンツ
========================================= */
.cs-accordion-content {
    padding: 0 16px 24px 16px; /* 上は0にしてサマリーとの距離を調整 */
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.8;
}

/* 展開時のコンテンツにふわっと表示されるアニメーション */
details[open] .cs-accordion-content {
    animation: cs-fade-in 0.4s ease-out forwards;
}

@keyframes cs-fade-in {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   レスポンシブ対応
========================================= */
@media screen and (max-width: 640px) {
    .cs-accordion-summary {
        flex-direction: column;
        align-items: flex-start;
        position: relative; /* アイコンを絶対配置にするための基準 */
    }
    .cs-accordion-date {
        margin-bottom: 8px;
    }
    .cs-accordion-title {
        font-size: 0.95rem;
        padding-right: 24px;
    }
    
    /* スマホ表示ではアイコンを右上に絶対配置する */
    .cs-accordion-summary::after {
        position: absolute;
        top: 24px;
        right: 16px;
    }
}

強調・アイキャッチ型（絶対に見せたい重要なお知らせ）

キャンペーン情報やメンテナンス告知など、ユーザーの目を強制的に惹きつけるための目立つ装飾です。

ここでは、以下の強調・アイキャッチ型（絶対に見せたい重要なお知らせ）のデザイン例を記載しています。

強調・アイキャッチ型（絶対に見せたい重要なお知らせ）
  • 左アクセントボーダー
  • 上部固定（スティッキー）バナー
  • 点滅アニメーションバッジ
  • フローティング・ポップアップ風

実際のデザインプレビューとHTML＆CSSコードを記載しています。

左アクセントボーダー

ユーザーがページを開いた瞬間に「公式からの重要な通知だ」と直感的に理解できる、視認性抜群のデザインです。

ボックスの左端に太いカラーライン（ボーダー）を引き、背景に極めて薄い色を敷くことで、周囲のコンテンツから独立した「通知パネル」としての存在感を際立たせています。

重要
サーバー移行と過去のPython関連データの完全削除について

約8年間運営していたPythonプログラミングサイトのデータをサーバーから完全に削除し、新環境へ移行いたしました。
お知らせ
公開記事が70本を突破＆月間1,500PVを達成しました

HTMLとCSSを中心としたWebデザインサイトとしてリニューアル後、順調にトラフィックを伸ばし、1ヶ月で月間1,500PVに到達しました。
更新
TypeScriptのEnumとAPI設計に関する技術解説を公開

フロントエンド開発に役立つTypeScriptの機能や、CSSの最新レイアウトテクニックについて長編記事を追加しました。
HTMLコード表示
<div class="cs-accent-wrapper">

    <!-- ▼ 1. 重要（赤）：重大な変更や警告 ▼ -->
    <a href="#" class="cs-accent-box cs-color-red">
        <div class="cs-accent-header">
            <span class="cs-accent-badge">重要</span>
            <time class="cs-accent-date" datetime="2026-03-31">2026.03.31</time>
        </div>
        <div class="cs-accent-title">サーバー移行と過去のPython関連データの完全削除について</div>
        <p class="cs-accent-desc">約8年間運営していたPythonプログラミングサイトのデータをサーバーから完全に削除し、新環境へ移行いたしました。</p>
    </a>

    <!-- ▼ 2. お知らせ（青）：ポジティブな報告や通常のアナウンス ▼ -->
    <a href="#" class="cs-accent-box cs-color-blue">
        <div class="cs-accent-header">
            <span class="cs-accent-badge">お知らせ</span>
            <time class="cs-accent-date" datetime="2026-04-30">2026.04.30</time>
        </div>
        <div class="cs-accent-title">公開記事が70本を突破＆月間1,500PVを達成しました</div>
        <p class="cs-accent-desc">HTMLとCSSを中心としたWebデザインサイトとしてリニューアル後、順調にトラフィックを伸ばし、1ヶ月で月間1,500PVに到達しました。</p>
    </a>

    <!-- ▼ 3. 更新（緑）：新規記事やコンテンツの追加 ▼ -->
    <a href="#" class="cs-accent-box cs-color-green">
        <div class="cs-accent-header">
            <span class="cs-accent-badge">更新</span>
            <time class="cs-accent-date" datetime="2026-07-16">2026.07.16</time>
        </div>
        <div class="cs-accent-title">TypeScriptのEnumとAPI設計に関する技術解説を公開</div>
        <p class="cs-accent-desc">フロントエンド開発に役立つTypeScriptの機能や、CSSの最新レイアウトテクニックについて長編記事を追加しました。</p>
    </a>

</div>
CSSコード表示
/* =========================================
   共通の枠組み
========================================= */
.cs-accent-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 2em;
    display: flex;
    flex-direction: column;
    gap: 20px; /* ボックス同士の隙間 */
}

/* =========================================
   ボックス本体のベーススタイル
========================================= */
.cs-accent-box {
    display: block; /* リンク要素全体をブロック化してクリック範囲を広げる */
    padding: 24px 32px;
    border-radius: 0 8px 8px 0; /* 左側は直角、右側だけ角丸にするのが美しさのコツ */
    text-decoration: none !important;
    
    /* ▼ 必須：左側に太いボーダーの「枠」だけを準備しておく ▼ */
    border-left: 6px solid transparent; 
    
    /* ホバー時のフワッとした浮遊感を作るアニメーション */
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

/* マウスを乗せたら少し上に浮き上がり、影を落とす */
.cs-accent-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);
}

/* =========================================
   内部要素（ヘッダー・タイトル・説明文）
========================================= */
.cs-accent-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.cs-accent-badge {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    margin-right: 16px;
    color: #ffffff; /* バッジの文字色は白で固定 */
}

.cs-accent-date {
    font-size: 0.9rem;
    color: #64748b;
}

.cs-accent-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 8px;
    line-height: 1.5;
}

.cs-accent-desc {
    font-size: 0.95rem;
    color: #475569;
    margin: 0;
    line-height: 1.6;
}

/* =========================================
   カラーバリエーションごとの色設定
========================================= */
/* 1. 赤（重要） */
.cs-color-red {
    background-color: #fef2f2;
    border-left-color: #ef4444; /* ここで左側の太線を赤色に塗る */
}
.cs-color-red .cs-accent-badge {
    background-color: #ef4444;
}
.cs-color-red:hover {
    background-color: #fee2e2; /* ホバー時に少し背景を濃くする */
}

/* 2. 青（お知らせ） */
.cs-color-blue {
    background-color: #eff6ff;
    border-left-color: #3b82f6;
}
.cs-color-blue .cs-accent-badge {
    background-color: #3b82f6;
}
.cs-color-blue:hover {
    background-color: #dbeafe;
}

/* 3. 緑（更新） */
.cs-color-green {
    background-color: #f0fdf4;
    border-left-color: #10b981;
}
.cs-color-green .cs-accent-badge {
    background-color: #10b981;
}
.cs-color-green:hover {
    background-color: #dcfce7;
}

/* =========================================
   レスポンシブ対応
========================================= */
@media screen and (max-width: 640px) {
    .cs-accent-box {
        padding: 20px 20px 20px 24px;
        border-left-width: 4px; /* スマホでは左の線を少し細くして圧迫感を減らす */
    }
    .cs-accent-title {
        font-size: 1rem;
    }
    .cs-accent-desc {
        font-size: 0.9rem;
    }
}

上部固定（スティッキー）バナー

画面をスクロールしても常に視界の最上部に追従し続けるため、キャンペーン情報や緊急性の高いお知らせを確実にユーザーに届けることができます。

お知らせ Webデザインの学習に役立つ新しいHTML/CSSスニペットを公開しました。 詳細を見る

この枠の中を下にスクロールしてください。

↓

バナーが枠内の上部にピタッと張り付くのが確認できます。

↓

※実際のサイト（画面全体）に実装する際、親要素に overflow: hidden; が指定されていると追従が効かなくなるため注意が必要です。

ここまでスクロールできます。

HTMLコード表示
<!-- ▼ スクロールできるプレビュー用の箱 ▼ -->
<div class="cs-sticky-preview-box">
    
    <!-- ▼ スティッキーバナー本体 ▼ -->
    <div class="cs-sticky-banner">
        <a href="#" class="cs-sticky-link">
            <span class="cs-sticky-badge">お知らせ</span>
            <span class="cs-sticky-text">Webデザインの学習に役立つ新しいHTML/CSSスニペットを公開しました。</span>
            <span class="cs-sticky-btn">詳細を見る</span>
        </a>
    </div>

    <!-- ▼ スクロール体験用のダミーコンテンツ ▼ -->
    <div class="cs-sticky-dummy-content">
        <p>この枠の中を下にスクロールしてください。</p>
        <p>↓</p>
        <p>バナーが枠内の上部にピタッと張り付くのが確認できます。</p>
        <p>↓</p>
        <p>※実際のサイト（画面全体）に実装する際、親要素に <code>overflow: hidden;</code> が指定されていると追従が効かなくなるため注意が必要です。</p>
        
        <!-- 高さを出すための空のdiv -->
        <div style="height: 300px;"></div>
        
        <p>ここまでスクロールできます。</p>
    </div>

</div>
CSSコード表示
/* =========================================
   プレビュー用のスクロール箱
========================================= */
.cs-sticky-preview-box {
    width: 100%;
    max-width: 800px;
    height: 300px; /* 箱の高さを固定 */
    margin: 0 auto 2em;
    overflow-y: auto; /* 縦スクロールを有効にする */
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background-color: #f8fafc;
    position: relative;
}

/* プレビュー箱のスクロールバーを少し細く綺麗にする */
.cs-sticky-preview-box::-webkit-scrollbar { width: 8px; }
.cs-sticky-preview-box::-webkit-scrollbar-track { background-color: #f1f5f9; }
.cs-sticky-preview-box::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 4px; }

/* =========================================
   スティッキーバナー本体
========================================= */
.cs-sticky-banner {
    /* 箱の中で追従させる */
    position: -webkit-sticky;
    position: sticky;
    top: 0; /* 箱の一番上で固定 */
    z-index: 10; /* ダミーテキストより上に表示 */
    
    background: linear-gradient(135deg, #1e293b, #334155);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* =========================================
   リンク要素と内部レイアウト
========================================= */
.cs-sticky-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    text-decoration: none !important;
    transition: opacity 0.2s ease;
}

.cs-sticky-link:hover {
    opacity: 0.9;
}

/* =========================================
   バッジとテキスト
========================================= */
.cs-sticky-badge {
    background-color: #ef4444;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    margin-right: 12px;
}

.cs-sticky-text {
    flex-grow: 1;
    color: #f8fafc;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 16px;
}

/* =========================================
   詳細を見るボタン
========================================= */
.cs-sticky-btn {
    background-color: #ffffff;
    color: #1e293b;
    font-size: 0.8rem;
    font-weight: 800;
    padding: 8px 16px;
    border-radius: 20px;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* =========================================
   ダミーコンテンツの装飾
========================================= */
.cs-sticky-dummy-content {
    padding: 40px 24px;
    text-align: center;
    color: #64748b;
    font-size: 0.95rem;
    line-height: 2;
}

/* =========================================
   レスポンシブ対応
========================================= */
@media screen and (max-width: 640px) {
    .cs-sticky-link {
        padding: 10px 12px;
    }
    .cs-sticky-text {
        font-size: 0.85rem;
    }
    .cs-sticky-btn {
        padding: 6px 12px;
        font-size: 0.75rem;
    }
}

点滅アニメーションバッジ

「NEW!」や「重要」といったラベルにCSSアニメーションを加えることで、ユーザーの視線を自然に誘導するテクニックです。

NEW ゆっくりと優しく点滅する、最も使い勝手の良いスタンダードなアニメーションです。 UPDATE バッジの周囲に波紋が広がるように発光し、さりげなく視線を集めます。 重要 少し早めのペースで点滅し、緊急性や重要性の高さを直感的に伝えます。
HTMLコード表示
<div class="cs-blink-wrapper">

    <a href="#" class="cs-blink-link">
        <time class="cs-blink-date" datetime="2026-07-16">2026.07.16</time>
        <span class="cs-blink-badge cs-badge-fade">NEW</span>
        <span class="cs-blink-title">ゆっくりと優しく点滅する、最も使い勝手の良いスタンダードなアニメーションです。</span>
    </a>

    <a href="#" class="cs-blink-link">
        <time class="cs-blink-date" datetime="2026-07-15">2026.07.15</time>
        <span class="cs-blink-badge cs-badge-pulse">UPDATE</span>
        <span class="cs-blink-title">バッジの周囲に波紋が広がるように発光し、さりげなく視線を集めます。</span>
    </a>

    <a href="#" class="cs-blink-link">
        <time class="cs-blink-date" datetime="2026-07-10">2026.07.10</time>
        <span class="cs-blink-badge cs-badge-alert">重要</span>
        <span class="cs-blink-title">少し早めのペースで点滅し、緊急性や重要性の高さを直感的に伝えます。</span>
    </a>

</div>
CSSコード表示
/* =========================================
   共通の枠組み・リンクのスタイル
========================================= */
.cs-blink-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 2em;
    border-top: 1px solid #e2e8f0;
}

.cs-blink-link {
    display: flex;
    align-items: center;
    padding: 16px 12px;
    border-bottom: 1px solid #e2e8f0;
    text-decoration: none !important;
    color: #334155;
    transition: background-color 0.2s ease;
}

.cs-blink-link:hover {
    background-color: #f8fafc;
}

/* =========================================
   日付とタイトル
========================================= */
.cs-blink-date {
    font-size: 0.9rem;
    color: #64748b;
    margin-right: 16px;
    white-space: nowrap;
}

.cs-blink-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.5;
}

/* =========================================
   バッジの基本設定
========================================= */
.cs-blink-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    margin-right: 16px;
    white-space: nowrap;
    text-align: center;
}

/* =========================================
   1. ゆっくりフェード（赤）
========================================= */
.cs-badge-fade {
    background-color: #ef4444;
    color: #ffffff;
    /* 1.2秒かけて透明度を変化させ、それを反転（alternate）しながら無限ループ */
    animation: cs-anim-fade 1.2s ease-in-out infinite alternate;
}

@keyframes cs-anim-fade {
    0% { opacity: 1; }
    100% { opacity: 0.4; }
}

/* =========================================
   2. パルス発光（青）
========================================= */
.cs-badge-pulse {
    background-color: #3b82f6;
    color: #ffffff;
    /* 波紋が広がるような影のアニメーション */
    animation: cs-anim-pulse 2s infinite;
}

@keyframes cs-anim-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
    }
    70% {
        /* 影を6pxまで広げつつ、透明にして消す */
        box-shadow: 0 0 0 6px rgba(59, 130, 246, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
}

/* =========================================
   3. アラート点滅（オレンジ）
========================================= */
.cs-badge-alert {
    background-color: #f59e0b;
    color: #ffffff;
    /* step-end を使うことで、フワッとした変化ではなく「パチッ、パチッ」と切り替わる */
    animation: cs-anim-alert 0.8s step-end infinite;
}

@keyframes cs-anim-alert {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* =========================================
   レスポンシブ対応
========================================= */
@media screen and (max-width: 640px) {
    .cs-blink-link {
        flex-wrap: wrap;
        align-items: flex-start;
        padding: 16px;
    }
    .cs-blink-date {
        margin-bottom: 8px;
    }
    .cs-blink-badge {
        margin-bottom: 8px;
        margin-right: 0;
    }
    .cs-blink-title {
        width: 100%;
    }
}

フローティング・ポップアップ風

画面の右下などに常駐し、ユーザーがスクロールしてもついてくる、コンバージョン率の高いレイアウトです。

キャンペーンの告知や読んでほしい規約改定の案内などに効果を発揮します。

重要
【大切なお知らせ】セキュリティ強化に伴うパスワード再設定のお願い

画面の右下に存在しているのがフローティングによるお知らせ・ニュースになります。

HTMLコード表示
<input type="checkbox" id="cs-popup-toggle" class="cs-popup-checkbox">

<div class="cs-popup-card">
    
    <label for="cs-popup-toggle" class="cs-popup-close" aria-label="閉じる">×</label>
    
    <div class="cs-popup-body">
        <div class="cs-popup-header">
            <span class="cs-popup-badge">重要</span>
            <time class="cs-popup-date" datetime="2026-07-16">2026.07.16</time>
        </div>
        <div class="cs-popup-content">
            <a href="#" class="cs-popup-link">
                【大切なお知らせ】セキュリティ強化に伴うパスワード再設定のお願い
            </a>
        </div>
    </div>
    
</div>
CSSコード表示
/* =========================================
   1. チェックボックスハックの制御
========================================= */
/* チェックボックス自体は画面上から完全に非表示にする */
.cs-popup-checkbox {
    display: none;
}

/* 「×ボタン（label）」がクリックされてチェックが入ったら、隣のカードを非表示にする */
.cs-popup-checkbox:checked + .cs-popup-card {
    opacity: 0;
    transform: translateY(30px) scale(0.9); /* 下にスライドしながら縮小して消える */
    pointer-events: none; /* 消えた後にクリック判定を無効化する必須設定 */
}

/* =========================================
   2. ポップアップカードのデザイン
========================================= */
.cs-popup-card {
    /* ▼ 画面の右下に固定配置する設定 ▼ */
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999; /* 他の要素の最前面に表示 */
    
    width: 340px; /* スマートフォンでもはみ出さない最適な横幅 */
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    
    /* 高級感のある浮遊感を出すための深い影 */
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    
    /* 表示・非表示時の滑らかなアニメーション */
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* =========================================
   閉じる（×）ボタン
========================================= */
.cs-popup-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 300;
    color: #94a3b8;
    cursor: pointer;
    border-radius: 50%;
    transition: background-color 0.2s, color 0.2s;
}

.cs-popup-close:hover {
    background-color: #f1f5f9;
    color: #475569;
}

/* =========================================
   内部のレイアウト・パーツ
========================================= */
.cs-popup-body {
    padding-right: 16px; /* 閉じるボタンと被らないように右側に余白を確保 */
}

.cs-popup-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.cs-popup-badge {
    font-size: 0.7rem;
    font-weight: 700;
    color: #ffffff;
    background-color: #ef4444;
    padding: 2px 8px;
    border-radius: 4px;
}

.cs-popup-date {
    font-size: 0.8rem;
    color: #64748b;
}

.cs-popup-content {
    margin: 0;
}

.cs-popup-link {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1e293b;
    text-decoration: none !important;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* タイトルが長すぎる場合は2行で省略 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cs-popup-link:hover {
    color: #ef4444;
    text-decoration: underline !important;
}

/* =========================================
   レスポンシブ対応（スマホでは画面下部いっぱいに配置）
========================================= */
@media screen and (max-width: 480px) {
    .cs-popup-card {
        bottom: 16px;
        right: 16px;
        left: 16px; /* 左右に16pxの余白を取り、画面幅いっぱいにフィットさせる */
        width: auto;
    }
}

モダン・カード・特殊型（画像付きのニュースデザイン）

テキストだけでなく、サムネイル画像を添えてよりリッチに見せる最新のWebサイト向けレイアウトです。

ここでは、以下のモダン・カード・特殊型（画像付きのニュースデザイン）のデザイン例を記載しています。

モダン・カード・特殊型（画像付きのニュースデザイン）
  • 横並びサムネイルカード
  • 3カラム・グリッドレイアウト
  • CSSタブ切り替え式ニュース

実際のデザインプレビューとHTML＆CSSコードを記載しています。

横並びサムネイルカード

テキストだけでは伝わりにくいコンテンツ（記事の更新、イベントの様子、商品の追加など）を視覚的にアピールできる、現在のWebデザインにおけるニュース一覧の最適解とも言えるレイアウトです。

HTMLコード表示
<div class="cs-thumb-wrapper">
    <ul class="cs-thumb-list">
        
        <li class="cs-thumb-item">
            <a href="#" class="cs-thumb-link">
                <div class="cs-thumb-img-box">
                    <img src="https://picsum.photos/id/1015/400/300" alt="ダミー画像1" class="cs-thumb-img">
                </div>
                <div class="cs-thumb-content">
                    <div class="cs-thumb-meta">
                        <time class="cs-thumb-date" datetime="2026-07-16">2026.07.16</time>
                        <span class="cs-thumb-badge">デザイン</span>
                    </div>
                    <div class="cs-thumb-title">
                        サムネイル画像付きの横並びカードレイアウトを公開しました。どんな画像サイズでも綺麗にトリミングされます。
                    </div>
                </div>
            </a>
        </li>
        
        <li class="cs-thumb-item">
            <a href="#" class="cs-thumb-link">
                <div class="cs-thumb-img-box">
                    <img src="https://picsum.photos/id/1025/400/300" alt="ダミー画像2" class="cs-thumb-img">
                </div>
                <div class="cs-thumb-content">
                    <div class="cs-thumb-meta">
                        <time class="cs-thumb-date" datetime="2026-07-10">2026.07.10</time>
                        <span class="cs-thumb-badge cs-badge-blue">CSS解説</span>
                    </div>
                    <div class="cs-thumb-title">
                        マウスを乗せた時に画像がフワッと拡大する、心地よいホバーアニメーションを実装しています。
                    </div>
                </div>
            </a>
        </li>

        <li class="cs-thumb-item">
            <a href="#" class="cs-thumb-link">
                <div class="cs-thumb-img-box">
                    <img src="https://picsum.photos/id/1035/300/600" alt="ダミー画像3" class="cs-thumb-img">
                </div>
                <div class="cs-thumb-content">
                    <div class="cs-thumb-meta">
                        <time class="cs-thumb-date" datetime="2026-07-01">2026.07.01</time>
                        <span class="cs-thumb-badge cs-badge-green">アップデート</span>
                    </div>
                    <div class="cs-thumb-title">
                        スマホ表示では画像の比率を保ったままコンパクトに縮小され、美しいレイアウトを維持します。
                    </div>
                </div>
            </a>
        </li>

    </ul>
</div>
CSSコード表示
/* =========================================
   共通の枠組み・リスト初期化
========================================= */
.cs-thumb-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 2em;
}

.cs-thumb-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid #e2e8f0;
}

.cs-thumb-item {
    border-bottom: 1px solid #e2e8f0;
}

/* =========================================
   リンク要素（Flexboxで画像とテキストを横並びに）
========================================= */
.cs-thumb-link {
    display: flex;
    gap: 24px; /* 画像とテキストの隙間 */
    padding: 20px 16px;
    text-decoration: none !important;
    color: #334155;
    transition: background-color 0.3s ease;
}

.cs-thumb-link:hover {
    background-color: #f8fafc;
}

/* =========================================
   左側：画像エリア
========================================= */
.cs-thumb-img-box {
    width: 180px; /* 画像の横幅を固定 */
    flex-shrink: 0; /* 画面が狭くなっても画像領域を潰さない魔法のコード */
    border-radius: 8px;
    overflow: hidden; /* 画像が拡大した時にはみ出た部分を隠す */
    
    /* ▼ 画像の比率を16:9に固定する最新プロパティ ▼ */
    aspect-ratio: 16 / 9; 
}

.cs-thumb-img {
    width: 100%;
    height: 100%;
    
    /* ▼ どんなサイズの画像でも、比率を崩さずに枠全体を埋める ▼ */
    object-fit: cover; 
    
    /* ホバー時の拡大アニメーション用 */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* マウスを乗せたら画像を少し（5%）拡大する */
.cs-thumb-link:hover .cs-thumb-img {
    transform: scale(1.05);
}

/* =========================================
   右側：テキストエリア
========================================= */
.cs-thumb-content {
    display: flex;
    flex-direction: column;
    justify-content: center; /* テキスト全体を縦方向の中央に配置 */
}

/* 日付とバッジの横並び */
.cs-thumb-meta {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.cs-thumb-date {
    font-size: 0.85rem;
    color: #64748b;
    margin-right: 12px;
}

/* バッジの共通デザイン */
.cs-thumb-badge {
    font-size: 0.7rem;
    font-weight: 700;
    color: #475569;
    background-color: #f1f5f9;
    padding: 2px 8px;
    border-radius: 4px;
}

/* バッジのカラーバリエーション */
.cs-badge-blue { background-color: #eff6ff; color: #3b82f6; }
.cs-badge-green { background-color: #f0fdf4; color: #10b981; }

.cs-thumb-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    color: #1e293b;
    
    /* 3行以上になったら「...」で省略するモダンなハック */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ホバー時にタイトルの色を変える */
.cs-thumb-link:hover .cs-thumb-title {
    color: #2589d0;
}

/* =========================================
   レスポンシブ対応（スマホ表示時）
========================================= */
@media screen and (max-width: 640px) {
    .cs-thumb-link {
        gap: 16px; /* 隙間を少し狭める */
        padding: 16px 12px;
    }
    
    .cs-thumb-img-box {
        width: 100px; /* スマホでは画像を小さくしてテキスト領域を確保 */
        /* 正方形に近い 4:3 比率に変更して視認性を高める */
        aspect-ratio: 4 / 3; 
    }
    
    .cs-thumb-meta {
        /* スマホでは日付とバッジを縦に並べるか、隙間を詰める */
        flex-wrap: wrap;
        gap: 4px;
        margin-bottom: 4px;
    }
    
    .cs-thumb-title {
        font-size: 0.9rem;
        -webkit-line-clamp: 2; /* スマホでは2行で省略 */
    }
}

3カラム・グリッドレイアウト

トップページのファーストビュー直下やLP（ランディングページ）の「最新記事」「お知らせ」エリアでよく使われる美しく整列したカード型デザインです。

HTMLコード表示
<div class="cs-grid-wrapper">
    <ul class="cs-grid-list">
        
        <li class="cs-grid-item">
            <a href="#" class="cs-grid-link">
                <div class="cs-grid-img-box">
                    <img src="https://picsum.photos/id/1015/600/400" alt="CSSグラデーション解説" class="cs-grid-img">
                </div>
                <div class="cs-grid-content">
                    <div class="cs-grid-meta">
                        <time class="cs-grid-date" datetime="2026-07-16">2026.07.16</time>
                        <span class="cs-grid-badge">デザイン</span>
                    </div>
                    <div class="cs-grid-title">モダンなCSSグラデーションと切り抜き文字の実装テクニック</div>
                    <p class="cs-grid-desc">SWELL見出しと干渉しないdivタグ構成で、背景を文字の形で切り抜く魔法のようなプロパティ指定を解説します。</p>
                </div>
            </a>
        </li>
        
        <li class="cs-grid-item">
            <a href="#" class="cs-grid-link">
                <div class="cs-grid-img-box">
                    <img src="https://picsum.photos/id/1025/600/400" alt="TypeScript解説" class="cs-grid-img">
                </div>
                <div class="cs-grid-content">
                    <div class="cs-grid-meta">
                        <time class="cs-grid-date" datetime="2026-07-10">2026.07.10</time>
                        <span class="cs-grid-badge cs-badge-blue">開発</span>
                    </div>
                    <div class="cs-grid-title">TypeScript Enumの罠と安全なAPI設計のベストプラクティス</div>
                    <p class="cs-grid-desc">型安全な開発に欠かせないTypeScriptのEnum活用法と、現場で使えるAPIデータフェッチの基本をまとめました。</p>
                </div>
            </a>
        </li>

        <li class="cs-grid-item">
            <a href="#" class="cs-grid-link">
                <div class="cs-grid-img-box">
                    <img src="https://picsum.photos/id/1035/600/400" alt="サイト運営報告" class="cs-grid-img">
                </div>
                <div class="cs-grid-content">
                    <div class="cs-grid-meta">
                        <time class="cs-grid-date" datetime="2026-07-01">2026.07.01</time>
                        <span class="cs-grid-badge cs-badge-green">運営報告</span>
                    </div>
                    <div class="cs-grid-title">リニューアルから数ヶ月。公開記事数70本突破と現在のPV数</div>
                    <p class="cs-grid-desc">HTMLとCSSを中心としたWebデザインサイトとして生まれ変わり、着実にトラフィックを伸ばしている軌跡を公開します。</p>
                </div>
            </a>
        </li>

    </ul>
</div>
CSSコード表示
/* =========================================
   共通の枠組み・グリッド設定（ここが最重要）
========================================= */
.cs-grid-wrapper {
    width: 100%;
    max-width: 800px; /* 3列なので少し広めに設定 */
    margin: 0 auto 2em;
}

.cs-grid-list {
    list-style: none;
    padding: 0;
    margin: 0;
    
    /* ▼ グリッドレイアウトを有効化 ▼ */
    display: grid;
    /* 1fr（均等幅）の列を3つ作る */
    grid-template-columns: repeat(3, 1fr);
    /* カード同士の隙間（縦・横） */
    gap: 24px; 
}

/* =========================================
   カード単体のスタイル
========================================= */
.cs-grid-item {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden; /* 角丸からはみ出た画像を隠す */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* マウスを乗せたら少し上に浮き上がり、影を濃くする */
.cs-grid-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.1);
}

.cs-grid-link {
    display: flex;
    flex-direction: column;
    height: 100%; /* カード内の高さをすべて均等に揃える */
    text-decoration: none !important;
    color: #334155;
}

/* =========================================
   画像エリア
========================================= */
.cs-grid-img-box {
    width: 100%;
    aspect-ratio: 16 / 9; /* 画像比率を16:9で固定 */
    overflow: hidden;
}

.cs-grid-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.cs-grid-item:hover .cs-grid-img {
    transform: scale(1.05); /* ホバー時に画像を少しズーム */
}

/* =========================================
   テキストエリア
========================================= */
.cs-grid-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* 余白を埋めるように広がり、ボタン等を下に押しやる */
}

.cs-grid-meta {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.cs-grid-date {
    font-size: 0.85rem;
    color: #64748b;
    margin-right: 12px;
}

/* バッジの共通デザイン */
.cs-grid-badge {
    font-size: 0.7rem;
    font-weight: 700;
    color: #475569;
    background-color: #f1f5f9;
    padding: 2px 8px;
    border-radius: 4px;
}

/* バッジカラー */
.cs-badge-blue { background-color: #eff6ff; color: #3b82f6; }
.cs-badge-green { background-color: #f0fdf4; color: #10b981; }

.cs-grid-title {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.5;
    color: #1e293b;
    margin-bottom: 12px;
    
    /* タイトルを2行までに制限 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cs-grid-desc {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
    
    /* 概要文は3行までに制限 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ホバー時にタイトルの色を変える */
.cs-grid-item:hover .cs-grid-title {
    color: #2589d0;
}

/* =========================================
   レスポンシブ対応
========================================= */
@media screen and (max-width: 900px) {
    .cs-grid-list {
        /* タブレット・小さめのPCでは2列にする */
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 640px) {
    .cs-grid-list {
        /* スマホ表示では1列（縦並び）にする */
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .cs-grid-content {
        padding: 16px;
    }
    .cs-grid-title {
        font-size: 1rem;
    }
}

CSSタブ切り替え式ニュース

「すべて」「お知らせ」「プレスリリース」など、情報のカテゴリが多岐にわたるコーポレートサイトやメディアで必須となる高機能UIです。

HTMLコード表示
<div class="cs-tab-wrapper">

    <input type="radio" name="cs-tab-group" id="cs-tab-all" class="cs-tab-radio" checked="">
    <input type="radio" name="cs-tab-group" id="cs-tab-news" class="cs-tab-radio">
    <input type="radio" name="cs-tab-group" id="cs-tab-update" class="cs-tab-radio">

    <div class="cs-tab-labels">
        <label for="cs-tab-all" class="cs-tab-label cs-label-all">すべて</label>
        <label for="cs-tab-news" class="cs-tab-label cs-label-news">お知らせ</label>
        <label for="cs-tab-update" class="cs-tab-label cs-label-update">アップデート</label>
    </div>

    <div class="cs-tab-panels">
        
        <div class="cs-tab-panel" id="cs-panel-all">
            <ul class="cs-tab-list">
                <li class="cs-tab-item">
                    <a href="#" class="cs-tab-link">
                        <time class="cs-tab-date">2026.07.16</time>
                        <span class="cs-tab-badge cs-badge-update">アップデート</span>
                        <span class="cs-tab-title">CSSのみで動くタブ切り替えUIを公開しました。</span>
                    </a>
                </li>
                <li class="cs-tab-item">
                    <a href="#" class="cs-tab-link">
                        <time class="cs-tab-date">2026.07.10</time>
                        <span class="cs-tab-badge">お知らせ</span>
                        <span class="cs-tab-title">JavaScriptを使わないため、動作が非常に軽量です。</span>
                    </a>
                </li>
            </ul>
        </div>

        <div class="cs-tab-panel" id="cs-panel-news">
            <ul class="cs-tab-list">
                <li class="cs-tab-item">
                    <a href="#" class="cs-tab-link">
                        <time class="cs-tab-date">2026.07.10</time>
                        <span class="cs-tab-badge">お知らせ</span>
                        <span class="cs-tab-title">JavaScriptを使わないため、動作が非常に軽量です。</span>
                    </a>
                </li>
                <li class="cs-tab-item">
                    <a href="#" class="cs-tab-link">
                        <time class="cs-tab-date">2026.06.20</time>
                        <span class="cs-tab-badge">お知らせ</span>
                        <span class="cs-tab-title">夏季休業期間に関するご案内</span>
                    </a>
                </li>
            </ul>
        </div>

        <div class="cs-tab-panel" id="cs-panel-update">
            <ul class="cs-tab-list">
                <li class="cs-tab-item">
                    <a href="#" class="cs-tab-link">
                        <time class="cs-tab-date">2026.07.16</time>
                        <span class="cs-tab-badge cs-badge-update">アップデート</span>
                        <span class="cs-tab-title">CSSのみで動くタブ切り替えUIを公開しました。</span>
                    </a>
                </li>
                <li class="cs-tab-item">
                    <a href="#" class="cs-tab-link">
                        <time class="cs-tab-date">2026.05.15</time>
                        <span class="cs-tab-badge cs-badge-update">アップデート</span>
                        <span class="cs-tab-title">新機能「画像自動リサイズ」を追加しました。</span>
                    </a>
                </li>
            </ul>
        </div>

    </div>
</div>
CSSコード表示
/* =========================================
   共通の枠組み
========================================= */
.cs-tab-wrapper {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 2em;
}

/* =========================================
   1. ラジオボタンの非表示
========================================= */
.cs-tab-radio {
    display: none; /* 実際の丸いボタンは画面から消す */
}

/* =========================================
   2. タブ（見出し）のデザイン
========================================= */
.cs-tab-labels {
    display: flex;
    border-bottom: 2px solid #e2e8f0; /* タブの下に引く共通の線 */
}

.cs-tab-label {
    padding: 12px 24px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    background-color: transparent;
    
    /* 選択された時の下線を準備（初期は透明） */
    border-bottom: 3px solid transparent; 
    
    /* 線と色の変化を滑らかにする */
    transition: all 0.3s ease;
    
    /* 下の共通線に少し被せるための調整 */
    margin-bottom: -2px; 
}

.cs-tab-label:hover {
    color: #334155;
    background-color: #f8fafc;
}

/* ▼ 選択されているタブのデザイン変化（ラジオボタンと連動） ▼ */
#cs-tab-all:checked ~ .cs-tab-labels .cs-label-all,
#cs-tab-news:checked ~ .cs-tab-labels .cs-label-news,
#cs-tab-update:checked ~ .cs-tab-labels .cs-label-update {
    color: #2589d0; /* アクティブなテキスト色（青） */
    border-bottom-color: #2589d0; /* アクティブな下線（青） */
}

/* =========================================
   3. パネル（コンテンツ）の切り替え制御
========================================= */
.cs-tab-panel {
    display: none; /* 最初はすべてのパネルを非表示にする */
    padding: 16px 0;
}

/* ▼ ラジオボタンがチェックされたら、対応するパネルを表示（ブロック化）する ▼ */
#cs-tab-all:checked ~ .cs-tab-panels #cs-panel-all,
#cs-tab-news:checked ~ .cs-tab-panels #cs-panel-news,
#cs-tab-update:checked ~ .cs-tab-panels #cs-panel-update {
    display: block;
    animation: cs-tab-fade 0.4s ease; /* ふわっと表示させるアニメーション */
}

@keyframes cs-tab-fade {
    0% { opacity: 0; transform: translateY(5px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* =========================================
   パネル内のリストデザイン（ベーシックリスト型と同じ）
========================================= */
.cs-tab-list { list-style: none; padding: 0; margin: 0; }
.cs-tab-item { border-bottom: 1px dashed #e2e8f0; }
.cs-tab-item:last-child { border-bottom: none; }

.cs-tab-link {
    display: flex;
    align-items: center;
    padding: 16px 8px;
    text-decoration: none !important;
    color: #334155;
    transition: background-color 0.2s ease;
}
.cs-tab-link:hover { background-color: #f8fafc; }

.cs-tab-date { font-size: 0.85rem; color: #64748b; margin-right: 16px; white-space: nowrap; }
.cs-tab-badge { font-size: 0.7rem; font-weight: 700; padding: 4px 8px; border-radius: 4px; margin-right: 16px; white-space: nowrap; background-color: #f1f5f9; color: #475569; }
.cs-badge-update { background-color: #eff6ff; color: #3b82f6; }
.cs-tab-title { font-size: 0.95rem; font-weight: 700; line-height: 1.5; }

/* =========================================
   レスポンシブ対応
========================================= */
@media screen and (max-width: 640px) {
    .cs-tab-label {
        padding: 12px;
        flex-grow: 1; /* スマホではタブを等間隔で横いっぱいに広げる */
        text-align: center;
        font-size: 0.85rem;
    }
    .cs-tab-link {
        flex-wrap: wrap;
        padding: 16px 8px;
    }
    .cs-tab-date, .cs-tab-badge { margin-bottom: 8px; }
    .cs-tab-badge { margin-right: 0; }
    .cs-tab-title { width: 100%; }
}

まとめ

ここでは全体のまとめを記載しておきます。

本記事のまとめ
  • シンプル1行リスト
    timeタグによる日付表示とtext-overflow: ellipsisによる長文の末尾省略を組み合わせた基本形。
  • カテゴリーバッジ付き
    min-widthでバッジ幅を統一し、Flexboxのflex-wrapを用いてレスポンシブ時の折り返しを制御したリスト。
  • ボーダー区切り（下線・破線）
    last-childで末尾の境界線を消去し、用途に合わせて実線・破線・点線を使い分けるリスト。
  • ホバーエフェクト付きリスト
    CSSのborderで矢印を描画し、margin-left: autoで右寄せ配置した、マウスオーバー時に変化するリスト。
  • インナースクロールBOX
    max-heightとoverflow-y: autoで高さを制限し、::-webkit-scrollbarでスクロールバーを装飾したUI。
  • 横流しニュースティッカー
    padding-left: 100%と@keyframesを用いて、右から左へ無限ループする横スクロールテキスト。
  • アコーディオン型お知らせ
    HTMLのdetailsおよびsummaryタグを使用し、JS不要で開閉動作とアイコン変化を実装したパネル。
  • 左アクセントボーダー
    border-leftで太線を指定し、display: blockで要素全体をクリッカブルにした通知ボックス。
  • 上部固定（スティッキー）バナー
    position: stickyを指定し、スクロール時に親要素の範囲内で画面上部に追従するバナー。
  • 点滅アニメーションバッジ
    @keyframesを用いて、フェード、パルス（波紋）、アラート（step-end）の3パターンの点滅を付与したバッジ。
  • フローティング・ポップアップ風
    position: fixedで画面右下に固定し、チェックボックスハックを用いてJS不要で閉じることができる通知パネル。
  • 横並びサムネイルカード
    aspect-ratioで比率を固定し、object-fit: coverで画像を歪ませずにトリミングする横型カード。
  • 3カラム・グリッドレイアウト
    display: gridとrepeat()関数を使用し、カードの高さと横幅を自動で均等に揃えるレイアウト。
  • CSSタブ切り替え式ニュース
    隠しラジオボタンと間接セレクタ（~）を連動させ、JS不要でコンテンツの表示・非表示を切り替えるタブUI。

よくある質問（FAQ）

お知らせのタイトルが長すぎて、スマホで見るとレイアウトが崩れてしまいます。どうすればいいですか？

CSSのtext-overflow: ellipsis;を使って、はみ出る部分を「…」で省略するのが定番の解決策です。

1行で綺麗に収めたい場合は、以下の3行をセットでタイトル要素（spanやpなど）に指定します。

  • white-space: nowrap;（改行を禁止する）
  • overflow: hidden;（枠からはみ出た部分を隠す）
  • text-overflow: ellipsis;（はみ出た末尾を「…」にする）

もしスマホ表示の時だけ2行〜3行で省略したい場合は、-webkit-line-clampプロパティを使用した複数行の省略テクニックに切り替えるのが現代の主流です。

ニュース欄のテキストを電光掲示板のように横スクロール（ティッカー）させることはCSSだけで可能ですか？

はい、可能です。

JavaScriptを使わず、CSSの@keyframesアニメーションのみで滑らかに実装できます。

流したいテキストを囲む親要素にoverflow: hidden;を設定し、中のテキスト要素に対して@keyframesでtransform: translateX(100%)からtranslateX(-100%)へ移動するアニメーションを指定します。

ユーザーがリンクをクリックしやすいように、:hover時にanimation-play-state: paused;を指定して、マウスが乗っている間はスクロールがピタッと止まるように配慮（UX向上）するのがよいです。

「日付」「バッジ」「タイトル」を綺麗に横並びにしたいのですが、最適なCSSは何ですか？

現在のWebデザインにおいては、圧倒的にdisplay: flex;（Flexbox）が推奨されます。

過去にはfloatやdisplay: inline-block;が使われていましたが、高さの調整や隙間の計算が複雑になりがちでした。

親要素（リストのliやaタグ）にdisplay: flex;を指定し、align-items: center;を足すだけで、異なるフォントサイズやバッジの高さであっても、縦方向の中央が美しく揃った横並びレイアウトが完成します。

要素間の余白はgap: 16px;などで簡単に一括指定できます。

目立たせたい「NEW」や「重要」のバッジを点滅させるにはどう書けばいいですか？

CSSアニメーションのopacity（透明度）を変化させることで実装できます。

例えば、@keyframesでopacity: 1;（不透明）とopacity: 0.4;（半透明）を行き来させます。

この時、アニメーションの指定にalternateを加えると、「透明になる→不透明に戻る」という動きが滑らかにループし、チカチカしすぎない上品なフェード点滅になります。

激しすぎる点滅はユーザーの目を疲れさせたり、不快感を与えたりするため、1秒〜2秒かけてゆっくり変化させるのがコツです。

サイトにお知らせリストのCSSを追加したのに、テーマの標準スタイルと干渉してレイアウトが崩れます（黒い点が表示される等）。

リスト（ulやli）の初期化を行うことと、独自のクラス名をつけることで回避できます。

WordPress等のテーマ環境では、標準でリストに余白（paddingやmargin）やリストマーク（黒ポッチ）が設定されていることがほとんどです。

デザインを適用する前に、list-style: none; padding: 0; margin: 0;でスタイルをリセットしてください。

また、CSSがテーマ全体に意図せず影響を与えないように、単なる.listではなく.my-news-listのような固有のプレフィックス（接頭辞）を付けたクラス名でコーディングするのが安全な運用ルールです。

あなたの「コーディング力」が最強の武器になる 自作コード × SWELL で理想のサイトをカスタマイズ構築

面倒な基本構造やレスポンシブ対応はテーマに任せ、浮いた時間で「あなたにしかできないこだわりの独自カスタマイズ」をとことん追求してみませんか？

「SWELL」の徹底レビュー・詳細を見る
※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています
CSS

この記事を書いた人

sugiのアバター sugi Site operator

【経歴】玉川大学工学部卒業→新卒SIer企業入社→2年半後に独立→プログラミングスクール運営/受託案件→フリーランスエンジニア&SEOコンサル→Python特化のコンテンツサイトJob Code&UIコピペサイトCode Stock運営中

関連記事

目次