レイアウト
layout
2020/04/24
簡単！よくあるカードデザインの作り方
こんにちは、中の人です。 今回は、メディアサイトなどでよく見るカードデザインの実装例をご紹介していきたいと思います。 もくじIndex 下準備 並べてみる ざっくりと解説 下準備 まずはカード単体の実装をしていきます。 ■HTML テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト ■CSS .card { box-shadow: 10px 10px 10px rgba(0, 0, 0, .1); position: relative; transition: background .5s ease, box-shadow .5s ease; } .card:hover { background: #f5f5f5; box-shadow: none; } .card-link { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .card-thumbnail { object-fit: cover; height: 150px; width: 100%; } .card-text { padding: 10px; } テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 並べてみる テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト ■HTML テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト ■CSS .card-section { display: flex; } .card { box-shadow: 10px 10px 10px rgba(0, 0, 0, .1); position: relative; transition: background .5s ease, box-shadow .5s ease; } .card:hover { background: #f5f5f5; box-shadow: none; } .card:not(:last-child) { margin-right: 20px; } .card-link { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .card-thumbnail { object-fit: cover; height: 150px; width: 100%; } .card-text { padding: 10px; } @media screen and (max-width: 767px) { .card-section { display: block; } .card:not(:last-child) { margin: 0; margin-bottom: 20px; } } ざっくりと解説 今回のポイントは概ねこちらになります。 カードにリンクを持たせるために空のaタグを使用("position: absolute;"を使用してカード全体を覆うようにする) ":not(:last-child)"で最後のカード要素意外にmarginを持たせる メディアクエリを用いてPC/SPで表示を分ける(PCは"display: flex;"で横並び、SPは"display: block;"で縦並び) ざっくりとで申し訳ないのですが、だいたいこんな感じだと思います。 私事ですが、記事のネタ探しに困っております。 以上、「よくあるカードデザインの作り方」でした。
2020/04/21
Flexboxでヘッダーナビを作ってみる
こんにちは、中の人です。 今回はFlexboxを用いて、簡単にヘッダーナビを実装する方法をご紹介します。 早速ですが、サンプルになります。 実装サンプル Sample logo menu01 menu02 menu03 ■HTML Sample logo menu01 menu02 menu03 ■CSS .header { align-items: center; background: #f5f5f5; display: flex; padding: 20px; } .header-logo { margin-right: auto; } .nav-menu { align-items: center; display: flex; } .menu-item:not(:last-child) { margin-right: 20px; } 解説 今回のポイントは、ざっくりと2点。 こちらになります。 並列させたい要素の親要素に"display: flex;"を指定する ロゴに"margin-right: auto;"を指定して右側の要素を押し出す flexboxは汎用性が高く、いろいろなレイアウトに応用が効きそうでうね。
