何を伝えたいか

に が投稿 — コメントはありません ↓

久しぶりに素晴らしいページに出会ったので、ご紹介を。

これはウェブページです｡

見れば分かりますが、画像はありません、CSSもたった2行です、javascriptもアクセス解析用のものしかありません。ソースはとてもシンプルです。

でも、読み手に伝える力があるページです。とても。

ウェブページとは、どんなふうに見せたいか、ではなく、何を伝えたいか、なのだよな、と再確認できました。

「これはウェブページです｡」のページでは、それは言葉でした。
もしかしたら伝えたいのは「写真」のページもあるかもしれませんし、「動画」のページもあるかもしれません。

デザインは、伝えたいものを伝える為の技術の1つです。
綺麗に、格好良く、可愛く、派手に、煌びやかに、シックに、シンプルに。色々飾ることはできますが、飾ることが「主」になっていないか。

伝えたいことを、どうやったらより伝えることが出来るのか。伝えたいことが薄れるような、余計な事していない？
それを考えるのが大事だな、と改めて思いました。

今後サイト作りでちょっと迷うことがあったら、またここを見ようと思います。そして、もう一度考えようと思います。

テーブルの偶数行又は奇数行の背景色を変えて縞模様にする

に が投稿 — コメントはありません ↓

YahooのCSSフレームワーク「Pure」のストライプテーブルは、実現のさせ方がちょっと面倒(全部の奇数行のtrに「class=”pure-table-odd”」をつける)だったので、tableにclassを設定すればOKな記述を、Pureと併用する自作の方のCSSに追加することにしました。

■Pure使ってる人のテーブル記述

<table class="pure-table stripe-table">
<tr><th>列1</th><th>列2</th></tr>
<tr><td>項目1-1</td><td>項目1-2</td></tr>
<tr><td>項目2-1</td><td>項目2-2</td></tr>
<tr><td>項目3-1</td><td>項目3-2</td></tr>
<tr><td>項目4-1</td><td>項目4-2</td></tr>
</table>

■Pure使ってない人のテーブル記述

<table class="stripe-table">
<tr><th>列1</th><th>列2</th></tr>
<tr><td>項目1-1</td><td>項目1-2</td></tr>
<tr><td>項目2-1</td><td>項目2-2</td></tr>
<tr><td>項目3-1</td><td>項目3-2</td></tr>
<tr><td>項目4-1</td><td>項目4-2</td></tr>
</table>

■奇数行のみ背景色を変えたい場合のストライプテーブルのCSS記述

.stripe-table tr:nth-child(odd) td, .stripe-table tr:nth-child(odd) th {
  background-color:#f9f9f9;
}

■偶数行のみ背景色を変えたい場合のストライプテーブルのCSS記述

.stripe-table tr:nth-child(even) td, .stripe-table tr:nth-child(even) th {
  background-color:#f9f9f9;
}

※使いたい方(奇数か偶数か)のCSS記述のみを、自分のCSSファイルに追記して下さい。
※背景色(上の例では「#f9f9f9」)は、ご自分で好みの色に変えて下さい。

こんな感じで、使うtableのclassに「stripe-table」を設定すればOKです。
(Pureのテーブルのデザインも併用するので、実際の記述は「<table class=”pure-table stripe-table”>」となってます。)

ただし、IE8以下はnth-childが未対応なのでご注意を。
(IE9以上とFireFoxやクローム等の他ブラウザは対応してます。)

YahooのCSSフレームワーク「Pure」

に が投稿 — 1件のコメント ↓

ちょっと前に知った、Yahooが公開しているjavascript不要で軽量なCSSフレームワーク「Pure」関連のメモ。
Pureという、他でもわんさか使われてるような単語が名前になってるので、検索に引っかかりにくいということもあり、このページにメモっておくことにしました。

Pure(公式)
Pure自体が欲しい方は、ここにいけばOKです。

Pureを使うには、

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.2.0/pure-min.css">

と1行書くだけで大丈夫です。これに全機能が入ってます。
※2013年6月11日に0.2.0が公開されました。

全機能入ったもの(pure-min.css)で20KB程度です。
Bootstrap2.x系は100KB位なので、ずいぶん軽いですね。もちろんその分シンプル(出来ること、デザイン・色のパターンは少ない)ですが、フレームワークは必要最低限のもので、後は自分で作るという人には選択肢の一つとしてありかと思います。

Pureで出来ることの内主なものは、

  • Grids
    グリッドデザイン、レスポンシブデザインなど
  • Forms
    フォームデザイン(横並び、縦並び、マルチカラム、グループ化、input欄のサイズ指定、入力必須、フォーム項目無効化など)
  • Buttons
    ボタンデザイン(色、サイズ、ボタン無効化、ボタンにアイコンをつける)
  • Tables
    テーブルデザイン(表の枠、背景色、横線のみ表示、ストライプ)
  • Menus
    メニューデザイン(横並びメニュー、縦並びメニュー、ドロップダウンメニュー、ページング)

な感じです。
公式サイトの左メニューを押せば、それぞれの書き方が出てきます。

レイアウトに関しては、公式のLayoutsに掲載されているページと、そのソースを見つつ、試行錯誤してみるのが良いかと思います。

日本語で、という方は以下のページが参考になります。
Pure を使って 5分でレスポンシブな Blog テンプレートを作る(WWW WATCH)