HTML/CSS 画像の下にテキストを表示するカード型UIを作る

コンテンツの表示やリンクするときに使われる画像の下にテキスト、タイトルを置く方法を紹介します。カード型UIともいわれているものです。

画像+タイトル+テキスト

画像の下にタイトルと説明のテキストを表示しています。

See the Pen
Untitled
by kura (@kuranopen)
on CodePen.

画像+タイトル+テキスト+ボタン

画像の下にタイトルと説明のテキストとボタンを表示しています。各コンテンツの高さは揃うようになっています。

See the Pen
Untitled
by kura (@kuranopen)
on CodePen.

デザイナーのUIメモ帳

レイアウト

ヒーローエリア

フォーム

画像

テキスト

ナビゲーション

コンテンツ

CSSデザインサンプル

モバイルサイト

Javascript

Google Map

Youtube

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

プロフィール

kura

WEBで食べていきたいWEBデザイナーです。
WEBデザイン初心者向けになるべく分かりやすいように解説しています。 そのほか、WEBデザインの便利ツール紹介、開発したりしています。