こんにちは、フローです。
今回は、カードレイアウトを作ろうって事で書いていきたいと思います。
前回の記事はこちらです。
カードレイアウト
ウェブサイトのコンテンツを小さなブロック（カード）にまとめ、
それらを横並びや縦並びに配置して表示するレイアウトのことです。
カードは、テキスト、画像、アイコンなどの要素を含んでおり、
ユーザーはそれらをクリックして、詳細な情報を閲覧することができます。
カードレイアウトの特徴として、以下のようなものがあります。
・見やすく使いやすい
カードの形状やサイズを統一して、整然と表示されるため、
ユーザーが情報を見つけやすくなります。
・情報の整理に適している
カードの中に特定のテーマに関連する情報を収めることができるため、
ウェブサイト内の情報を整理しやすくなります。
・レスポンシブデザインに対応しやすい
カードは、横並びや縦並びにすることができるため、
異なるデバイス上で見栄えがよくなるようにレイアウトを調整しやすいという特徴があります。
・シンプルでモダンなデザイン
カードは、シンプルでスタイリッシュな外観を持つため、
モダンなウェブサイトのデザインには欠かせない要素です。
注意点は？
カードレイアウトを使用する場合には、以下のようなポイントに注意してデザインすることが重要です。
- カード内の情報は、シンプルでわかりやすくまとめるようにする。
- カードの大きさや形状は統一する。
- カード同士の間隔を均等にする。
- ユーザーがクリックすることで、詳細な情報が見られるようにする。
- レスポンシブデザインに対応し、異なるデバイスで見栄えがよくなるように調整する。
見やすく使いやすく
注意点に気を付けながら、簡単な例を書いていきたいと思います。
例えば、商品情報を表示する場合には、以下のようなHTMLを書くことができます。
<div class="card">
<img src="product-image.jpg" alt="製品画像">
<h3>製品名</h3>
<p>製品説明</p>
<a href="#">詳細を見る</a>
</div>上記のHTMLでは、
<div>使用してカードを作成しています。
<img>商品画像を表示し、
<h3>商品名を、<p>商品の説明文を表示しています。
また、<a>タグを使用して
「Learn More」というテキストを表示し、ボタンとして機能するリンクを作成しています。
次に、CSSを使用してカードのスタイルを定義します。
以下は、簡単な例です。
CSS
card {
width: 300px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.card img {
width: 100%;
height: auto;
border-radius: 5px;
margin-bottom: 10px;
}
.card h3 {
font-size: 20px;
margin-bottom: 5px;
}
.card p {
font-size: 16px;
line-height: 1.4;
margin-bottom: 10px;
}
.card a {
display: block;
text-align: center;
background-color: #007bff;
color: #fff;
padding: 10px;
border-radius: 5px;
text-decoration: none;
}
.card a:hover {
background-color: #0062cc;
}上記のCSSでは、カード全体の幅を300pxに設定し、
ボーダーやボックスシャドウを追加して、カードの見た目を整えています。
また、商品画像にはborder-radiusプロパティを使用して角を丸め、
margin-bottomプロパティで画像と説明文の間隔を調整しています。
商品名と説明文には、それぞれ適切なフォントサイズを設定し、行間を調整しています。
最後に、ボタンとして機能するリンクには、
背景色や文字色、パディング、ボーダー半径、テキストの装飾を設定しています。
背景色をピンク色、製品名をグリーン色、製品説明をオレンジ色に変更し、
ボタンの背景色を黄色味のある明るい色にしました。
また、マウスオーバー時には、ボタンの背景色がより明るい黄色に変化するようにしました。
また、hover疑似クラスは、要素にマウスが乗った時に適用されるスタイルを指定するために使用されます。
このCSSでは、カード内のリンクがホバーされた時に、背景色を青色（#0062cc）に変更するスタイルを定義しています。
情報の整理に適している
まずは、飲食店のメニューをカードレイアウトで表示するためのHTMLを考えてみましょう。
HTML
<div class="menu">
<div class="card">
<img src="menu-item-1.jpg" alt="メニューアイテム 1">
<h3>メニューアイテム 1</h3>
<p>メニューアイテム 1 の説明文</p>
<p class="price">¥ 1,000</p>
</div>
<div class="card">
<img src="menu-item-2.jpg" alt="メニューアイテム 2">
<h3>メニューアイテム 2</h3>
<p>メニューアイテム 2 の説明文</p>
<p class="price">¥ 1,500</p>
</div>
<div class="card">
<img src="menu-item-3.jpg" alt="メニューアイテム 3">
<h3>メニューアイテム 3</h3>
<p>メニューアイテム 3 の説明文</p>
<p class="price">¥ 800</p>
</div>
<!-- 他にもカードが続く -->
</div>.menu {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.card {
width: 300px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.card img {
width: 100%;
height: auto;
border-radius: 5px;
margin-bottom: 10px;
/* グリーン色 */
background-color: #e6f5e6;
}
.card h3 {
font-size: 20px;
margin-bottom: 5px;
/* ピンク色 */
color: #ff69b4;
}
.card p {
font-size: 16px;
line-height: 1.4;
margin-bottom: 10px;
/* ライトブルー色 */
color: #add8e6;
}
.card .price {
font-size: 18px;
font-weight: bold;
/* オレンジ色 */
color: #ffa07a;
}
上記のCSSでは、
.menuクラスを使用して、メニュー全体のスタイルを定義しています。
display: flex;を使用して、カードを横並びに配置し、
flex-wrap: wrap;を使用して、カードの幅がメニュー全体の幅を超えた場合に改行されるようにしています。
また、gap: 20px;を使用して、カード間に20ピクセルのスペースを追加しています。
.cardクラスでは、カードのスタイルを定義しています。
width: 300px;を使用して、カードの幅を300ピクセルに設定し、
borderやborder-radius、paddingなどを使用して、
枠線や角丸、余白を追加しています。
また、box-shadowを使用して、カードに影を追加しています。
.card img、.card h3、.card p、.card .priceなどのセレクタを使用して、
それぞれの要素のスタイルを定義しています。
例えば、.card imgでは、
カード内の画像のスタイルを定義しています。
これらのCSSスタイルを使用することで、カードレイアウトを実現し、
各カードを見やすく整え、ユーザーにわかりやすいUI/UXを提供することができます。
まとめ
ちょっと長くなりそうなので、次回以降にまた書きたいと思います。
カードデザインは様々なWEBサイトで使われているデザインです。
色々と見て勉強してみて下さい。
レッツチャレンジ！
最近のコメント