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

2016/05/31

Ivaylo Gerchev

13

Articles in this issue reproduced from SitePoint
Copyright © 2016, All rights reserved. SitePoint Pty Ltd. www.sitepoint.com. Translation copyright © 2016, KADOKAWA ASCII Research Laboratories, Inc. Japanese syndication rights arranged with SitePoint Pty Ltd, Collingwood, Victoria,Australia through Tuttle-Mori Agency, Inc., Tokyo

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

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

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

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

02

今回は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;
}

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

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

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

という動きにします。

空の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 contenthidden contentです。各セクションには空のCardコンポーネントを記述します。またCSSもいくつか追加して、レシピカードの周囲に余白をつくり、lightgreyカラーでカードを区別します。Revealが幅290pxCardコンポーネントのデフォルト幅にマッチするようにスタイルを上書きし、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

Copyright © 2016, Ivaylo Gerchev All Rights Reserved.

Ivaylo Gerchev

Ivaylo Gerchev

独学でWeb開発者/デザイナーになりました。HTML、CSS、jQuery、PHP、WordPress、Photoshop、Illustratorを操作するのが大好きで、モットーは「最小の努力で最大の影響を!」。

Loading...