アマゾンプライムデー開催中!6/22まで 

CSS お知らせ/ニュース デザインテンプレート

WEBサイトのお知らせコンテンツに使用するCSSを使ったデザインサンプルを紹介します。

特徴

  • カテゴリ挿入可能
  • 触りやすいクリックエリア
  • わかりやすいマウスホバー
  • 柔軟なul liを採用
  • レスポンシブ対応
  • コピペで簡単作成

※要素が3つ以上になることもあるためdlではなくulを採用しました。

日付のみ

See the Pen
css news01
by Aquarium (@aquarium)
on CodePen.

日付だけを表示した使いやすいお知らせです。

HTML&CSS

See the Pen
css news01
by Aquarium (@aquarium)
on CodePen.

日付+ラベル有り

See the Pen
css news01
by Aquarium (@aquarium)
on CodePen.

日付に加え、カテゴリなどを表示するラベルを設けたお知らせです。

HTML&CSS

See the Pen
css news01
by Aquarium (@aquarium)
on CodePen.

【開催中】お得情報

デザイナーのUIメモ帳

レイアウト

ヒーローエリア

フォーム

画像

テキスト

ナビゲーション

コンテンツ

CSSデザインサンプル

モバイルサイト

Javascript

Google Map

Youtube

  • このエントリーをはてなブックマークに追加