「いまさら」なんて言わないで！ちょっと気が利くカード型レイアウト、Semantic UIで

2016年05月31日　12時29分更新

文●Ivaylo Gerchev

ツイートする

すっかり定番になりつつある、カード型のレイアウト。単なるカードを並べるではなく、ちょっと気の利いた動きやビジュアルにもこだわったデザインを、Semantic UIで。

2016年、Web開発者にとって重要なトレンドの1つが、「カードベース」のデザインであることは間違いありません。

カードは多くのソーシャルサイト（Dribbble, Twitter, Facebook, Pinterest, Trelloなど）のWebとアプリで大きな成功を収めており、特にモバイルで使用されています。コンパクトで情報をまとめやすく、柔軟性が高いため、開発者にとってレスポンシブレイアウトを構築する際に便利で、コンテンツを別のコンテクストに適応しやすくなります。

ブログ投稿のリスト、レシピ記事、製品概要、特徴のハイライト、自己完結するウィジェットの作成など幅広いシナリオにカードが使えます。カードとは何か、そしてなぜ使うのかは、こちらの記事で詳しく紹介しています。

今回は2つのカードベースのデザインパターン例を紹介します。

画像アルバム
レシピウィジェット

Semantic UIは人気のあるCSSフレームワークの1つで、自由な発想ですぐに使えるCardコンポーネントを提供しています。今回はこれを使用します。HTML/CSSに少しでもなじみのあるデザイナーは、今回の記事は理解しやすいでしょう。

例の紹介を始める前に空のHTMLファイルを2つ作成し、各ファイルにjQuery （jquery.js）とSemantic UI（semantic.css、semantic.js）を準備してください。ダウンロードしたくない人は、CDNからリンクもできます。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8" />
    <title>Semantic UI CDN</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
</head>
<body>
      <!-- Your Semantic UI Code -->
</body>
</html>

例1: シンプルな画像アルバム

最初の例は、ばらばらのアルバムの画像をグループ化し、保存や管理をするアプリです。見た目は、各アルバムは画像が積み重なっているようにします。実現のためには、次のコードをはじめのHTMLファイルに追加してください。

<div id="album">
  <div class="ui piled compact segment">
  <div class="floating ui red label">9</div>
    <div class="ui card">

       <!-- Album Card Content -->

    </div>
  </div>
</div>

<div id="album">タグでアルバムをまとめます。次にSegmentコンポーネントを使用して、アルバムに画像が積み重なって見えるようにします。また右上にラベルを挿入し、画像が何枚アルバムにあるかを表示します。最後に、空のCardコンポーネントを付け加えます。

この段階で、アルバムの周囲に少し動ける余白を作り、背景と区別するようにCSSを設定します。

body {
  margin: 30px;
  background-color: whitesmoke;
}

今のところ、アルバムの見た目は少しおかしいですが、心配はいりません。すぐに整った形になります。

アルバムのフロントイメージは、

アルバムの最初の画像を表示
その画像にマウスを重ねると、画像が暗くなる
ボタンが中央に表示される
ボタンをクリックすると、アルバム内に移る

という動きにします。

空のCardコンポーネントに次のコードを書き込むと、以上のことが全部できるようになります。

<div class="blurring dimmable image">
  <div class="ui inverted dimmer">
   <div class="content">
     <div class="center">
       <div class="ui red button view">VIEW</div>
     </div>
   </div>
  </div>
  <img src="http://mrg.bz/IxQIgC">
</div>

上で使用したDimmerコンポーネントを使うために、次のjQueryコードを追記してください。

$( document ).ready(function() {
  $('.ui.card .image').dimmer({on: 'hover'});
});

これでアルバムの見た目は良くなってきましたが、 VIEWボタンが動作しません。今のところ、そのままにしておいてください。もう少しあとで動くようにします。

引き続き、次のコードを加えて、アルバムの「顔」を構築していきましょう。

<div class="content">
  <div id="rate" class="ui star rating right floated" data-rating="3"></div>
  <div class="header">Animals</div>
  <div class="meta">
    <span class="date"><i class="calendar icon"></i>Created 7/27/2014</span>
    <span class="right floated date"><i class="history icon"></i> Modified 8/4/2014</span>
  </div>
  <div class="description">
  Different animals from around the world
  </div>
</div>

ここでは、contentクラスを使用して、ヘッダー、メタ、ディスクリプション要素をグループ化し、アルバムタイトル、アルバム作成日・変更日、アルバムの概要などの詳細情報が表示されるようにします。またRatingコンポーネントをタイトルの右に追加します。再度、jQueryで設定します。

$('.ui.rating').rating({maxRating: 5});

アルバムの詳細が非常に多くなり、1ラインに収まらないように見えるかもしれません。全カードが作成された最後の段階で調整します。

続けて、アルバムカードの下にボタン2つを追加します。

<div  class="extra content" >
  <div class="ui right labeled button" data-content="Like it!" data-variation="tiny">
    <div class="ui red icon tiny button">
      <i class="thumbs outline up large icon"></i>
    </div>
    <a class="ui basic red left pointing label">365</a>
  </div>
  <div class="ui left labeled right floated button" data-content="Share it!" data-variation="tiny">
    <a class="ui basic red right pointing label">183</a>
    <div class="ui red icon tiny button">
      <i class="external share large icon"></i>
    </div>
  </div>
</div>

ここで、「Like it!」と「Share it!」の2つボタンをextra contentクラスでまとめます。さらに各ボタンにツールチップが必要なので、メッセージを保持するdata-content属性を追加します。Popupコンポーネントを起動するため、jQueryで設定します。

$('.ui.button').popup();

アルバムの「顔」は準備が整ったので、次はアルバムイメージ用の内部ビューを構成します。次のコードを<div id="album">タグのあと（外）に追記します。

<div id="album_items">
  <button class="ui labeled icon button back">
    <i class="arrow lircle left icon"></i>Back
  </button>
  <div class="ui cards">

    <!-- Album Images Cards -->

  </div>
</div>

<div id="album_items">タグでアルバムのイメージをまとめて、ボタンを追加し、アルバムの「顔」に戻ります。そして<div class="ui cards">タグを付け加えて、個々のイメージカードを保持します。次のCSSを記述して、初めにアルバムのイメージを隠し周囲に余白を作ります。

#album_items {
  display: none;
}

#album_items .ui.cards {
  margin: 10px;
}

VIEWボタンを動かすときがきました。以下のコードを追加します。

$('.button.view').on('click', (function() {
  $('#album').fadeOut('slow', function () {
    $('#album_items').fadeIn('slow');
  });
}));

$('.button.back').on('click', (function() {
  $('#album_items').fadeOut('slow', function () {
    $('#album').fadeIn('slow');
  });
}));

その調子です。ここで試してみると、動作しているのが分かります。しかしアルバム内に見えるものはまだありません。イメージカードを追加しましょう。次が、1枚目のカード用のコードです。

<div class="card">
  <div class="image">
    <img src="http://mrg.bz/IxQIgC">
  </div>
  <div class="content">
    <div class="header">giraffes.jpg</div>
    <div class="meta">263 KB</div>
  </div>
  <div class="ui bottom attached basic buttons">
    <button class="ui button"><i class="pencil icon"></i></button>
    <button class="ui button"><i class="trash icon"></i></button>
  </div>
</div>

各イメージカードに、画像自体、画像タイトルとサイズ、画像の編集用と削除用の2つのボタンを加えます。これを8回繰り返し、アルバムに9枚のカードイメージができると、右上端のアルバムラベルに示されます。

最後に必要なことは、画像カードの見た目をひとひねりすることです。次のCSSを設定します。

.ui.cards > .card  {
  width: 210px;
}

.ui.cards > .card > .content > .header:not(.ui) {
  font-size: 1.1em;
  font-weight: normal;
}

.ui.cards > .card .meta,
.ui.card .meta {
  font-size: 0.8em;
}

すべてが正しく作動し、表示されていることでしょう。こちらのJS Binで最終結果を見られます（JS Bin on jsbin.com）。

JS Bin on jsbin.com

例2: レシピウィジェット

注意: レシピの内容はこちらからお借りしました。

2番目の例として、レシピウィジェットのフロントカードを、料理画像、名前、説明に加えて、詳細（準備時間、料理数、難易度）が記載されているものにします。カードにマウスカーソルをあわせると、メインコンテンツが隠れ、料理の材料カードと作り方カードの2つが表示されるようにします。

2番目のHTMLファイルに、次のコードを加えてください。

<div class="ui move reveal">
  <div class="visible content">
    <div class="ui card">

    </div>
  </div>
  <div class="hidden content">
    <div class="ui card">

    </div>
  </div>
</div>

ここでは、2つのセクションがあるRevealコンポーネントを使います。visible contentとhidden contentです。各セクションには空のCardコンポーネントを記述します。またCSSもいくつか追加して、レシピカードの周囲に余白をつくり、lightgreyカラーでカードを区別します。Revealが幅290pxでCardコンポーネントのデフォルト幅にマッチするようにスタイルを上書きし、white-spaceプロパティをnormal設定して、カード内のロングラインをまとめます。また、高さ420pxのカードを加えます。

body {
margin: 30px;
background-color: lightgrey;
}

.ui.move.reveal {
width: 290px;
white-space: normal;
}

.ui.card {
height: 420px;
}

visibleカードにコードを追加します。

<img class="ui image" src="http://mrg.bz/TRRrQJ">
<div class="content">
  <div class="header">Pizza Margherita</div>
  <div class="description">Invented in Naples in honor of the first queen of Italy, the Margherita pizza is the triumph of Italian cuisine in the world.</div>
</div>
<div  class="extra content" >
  <div class="ui labeled icon menu">
    <a class="item"><i class="wait icon"></i>2h 16min</a>
    <a class="item"><i class="food icon"></i>6 servings</a>
    <a class="item"><i class="signal icon"></i>Easy</a>
  </div>
</div>

最初に画像を入れます。次にコンテンツセクションを使って、レシピのタイトルと説明を表示します。最後にコンテンツセクション内のMenuコンポーネントを使って、レシピの詳細―準備時間、料理数、難易度を表示します。このあと必要なことは、メニューの外見を調整して画像、タイトルと説明、詳細の3部分を均等に表示することです。

フォントサイズを少し小さくし、パディングを調整して左右にスペースを増やし、上下のスペースを減らします。

.ui.labeled.icon.menu .item{
  min-width: 33.3333%;
  max-width: 33.3333%;
  font-size: 0.8em;
  padding: 6px 2px;
}

素晴らしくなりましたね。もうテストができます。この状態でもきちんと作動しますが、visibleカード用にコンテンツを追加する必要があります。

<div class="content">
  <div class="ui pointing secondary menu">
    <div class="item active" data-tab="ingredients">Ingredients</div>
    <div class="item" data-tab="directions">Directions</div>
  </div>
  <div class="ui tab active" data-tab="ingredients">

  </div>
  <div class="ui tab" data-tab="directions">

  </div>
</div>

ここではTabコンポーネントとMenuコンポーネントを連動して、材料と説明リスト用のタブを作成します。

Tabコンポーネントを作成するために、以下のjQueryコードを使います。

$( document ).ready(function() {
  $('.menu .item').tab();
});

タブは動いていますが、コンテンツがありません。最初のタブにコンテンツを付け加えましょう。

<h3>For pasta</h3>
<div class="ui list">
  <div class="item"><i class="check circle red icon"></i>2 lb Italian "00" flour or all-purpose flour</div>
  <div class="item"><i class="check circle red icon"></i>1 oz fresh yeast</div>
  <div class="item"><i class="check circle red icon"></i>2 cups water</div>
  <div class="item"><i class="check circle red icon"></i>⅜ oz salt</div>
</div>
<h3>For dressing</h3>
<div class="ui small list">
  <div class="item"><i class="check circle red icon"></i>½ cup extra virgin olive oil</div>
  <div class="item"><i class="check circle red icon"></i>1 lb mozzarella cheese</div>
  <div class="item"><i class="check circle red icon"></i>basil leaves to taste</div>
  <div class="item"><i class="check circle red icon"></i>1 lb canned tomatoes</div>
  <div class="item"><i class="check circle red icon"></i>salt to taste</div>
</div>

2番目のタブにコンテンツを追加しましょう。

<div class="ui small list">
  <div class="item"><span class="ui red circular label">1</span> On a wooden...</div>
  <div class="item"><span class="ui red circular label">2</span> Knead the dough...</div>
  ...
  <div class="item"><span class="ui red circular label">8</span> Once ready...</div>
</div>

最後に、CSSを加えて表示を正しくします。タブにマウスを乗せた際、カーソルをpointerタブに合わせます。次に、タブの高さを320pxに、overflow-yプロパティをautoに設定し、説明がとても長くなってしまった際にスクロールバーが表示されるようにします。

.ui.pointing.menu {
  cursor: pointer;
}

.ui.tab {
  height: 320px;
  overflow-y: auto;
}

完璧です。すべてが正しく動いているはずです。

簡単なチュートリアルの記事なので、全リストは載せません。こちらのJS Binでフルバージョンの最終結果を見られます（JS Bin on jsbin.com）。

最後に

2つの例でカードベースのデザインパターンの実用的な使い方を説明してきました。各例でSemantic UIのカードコンポーネントや違う種類のカードベースデザインの使い方を確かめました。次は自分のアイデアを試してみてください。

Bootstrapファンに朗報です。次のメジャーリリースに組み込み式カードコンポーネントが提供されます。

（原文：How to Design Rich Card-Based Layouts with Semantic UI）

［翻訳：中野汐里］
［編集：Livit］

Web Professionalトップへ

WebProfessional 新着記事

WebPro

ウェブサイトが遅く感じる時間は5秒未満が最多　BIGLOBE調べ

BIGLOBEは「インターネット利用に関する意識調査」結果の第3弾を発表した。「ウェブサイトの表示が遅く、ストレスを感じる時間」の質問では、5秒未満と回答した人の割合は4割弱という。

WebPro

Shopify利用ECサイトにて最短配送日表示やコンビニ受取などが可能に

Shopify Japanはとヤマト運輸は3月下旬より、荷物の円滑な配送や受け取りを実現する新サービスの提供を開始する。

WebPro

Wix.com、ウェブデザインのアイデア25選を公開

Wix.comは1月22日、ウェブデザインのアイデア25選を公開した。

サーバー・ストレージ

KUSANAGI 9、高速化機能などを利用できるNginx環境を提供

プライム・ストラテジーは仮想マシンイメージ「KUSANAGI 9」にてApache httpd環境でNginxの機能を簡単に利用できる「Apache httpd behind Nginx」の提供を開始した。

WebPro

さくらのレンタルサーバ向けウェブサイト脆弱性診断「WebSiteScan」

ホスティングサービス「さくらのレンタルサーバ」向けのウェブアプリケーション脆弱性診断サービス「WebSiteScan」を提供開始。

WebPro

ウェブ知識がなくてもRFP（提案依頼書）が作成できる無料サービス　「RFPビルダー」

ソニーネットワークコミュニケーションズは11月7日、ウェブサイト向けRFP（提案依頼書）作成支援サービス「RFPビルダー」を提供開始した。

すぐに役立つ！プロの解説記事

一覧へ

ASCII.jp Web Professional

Tweets by WPJ_news

Web Professionalの本

一覧へ

ASCII.jp

Web Professional

「いまさら」なんて言わないで！ちょっと気が利くカード型レイアウト、Semantic UIで

例1: シンプルな画像アルバム

例2: レシピウィジェット

最後に

WebProfessional 新着記事

ウェブサイトが遅く感じる時間は5秒未満が最多　BIGLOBE調べ

Shopify利用ECサイトにて最短配送日表示やコンビニ受取などが可能に

Wix.com、ウェブデザインのアイデア25選を公開

KUSANAGI 9、高速化機能などを利用できるNginx環境を提供

さくらのレンタルサーバ向けウェブサイト脆弱性診断「WebSiteScan」

ウェブ知識がなくてもRFP（提案依頼書）が作成できる無料サービス　「RFPビルダー」

すぐに役立つ！プロの解説記事

KUSANAGI開発元が語るユーザー体験を高めるWeb運用

Yahoo!ショッピングが証明、成功するユーザーインタビュー

転職・独立しようかなと思っているエンジニアに役立つ知識をシェアしよう

週刊デジタルマーケティング最前線 by D2Cスマイル

書かなきゃいけない人のためのWebコピーライティング教室

これから始める Google アナリティクスの使い方

自分で作れるIoT！Bluemixで遊んでみよう

Web Professionalの本

'新・プロが教えるデジカメ撮影テクニック

実践!Instagramビジュアルマーケティング

書かなきゃいけない人のためのWebコピーライティング教室

ASCII.jp

Web Professional

「いまさら」なんて言わないで！ちょっと気が利くカード型レイアウト、Semantic UIで

例1: シンプルな画像アルバム

例2: レシピウィジェット

最後に

ソーシャルリアクション

WebProfessional 新着記事

ウェブサイトが遅く感じる時間は5秒未満が最多 BIGLOBE調べ

Shopify利用ECサイトにて最短配送日表示やコンビニ受取などが可能に

Wix.com、ウェブデザインのアイデア25選を公開

KUSANAGI 9、高速化機能などを利用できるNginx環境を提供

さくらのレンタルサーバ向けウェブサイト脆弱性診断「WebSiteScan」

ウェブ知識がなくてもRFP（提案依頼書）が作成できる無料サービス 「RFPビルダー」

すぐに役立つ！プロの解説記事

KUSANAGI開発元が語るユーザー体験を高めるWeb運用

Yahoo!ショッピングが証明、成功するユーザーインタビュー

転職・独立しようかなと思っているエンジニアに役立つ知識をシェアしよう

週刊デジタルマーケティング最前線 by D2Cスマイル

書かなきゃいけない人のためのWebコピーライティング教室

これから始める Google アナリティクスの使い方

自分で作れるIoT！Bluemixで遊んでみよう

Web Professionalの本

'新・プロが教えるデジカメ撮影テクニック

実践!Instagramビジュアルマーケティング

書かなきゃいけない人のためのWebコピーライティング教室

ウェブサイトが遅く感じる時間は5秒未満が最多　BIGLOBE調べ

ウェブ知識がなくてもRFP（提案依頼書）が作成できる無料サービス　「RFPビルダー」