月: 2013年6月

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

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

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)

FuelPHPのFieldsetで作るformタグに属性(classやid)をつけるには

に が投稿 — コメントはありません ↓ 
Fieldset::forge('form_name');

と書くと

<form accept-charset="utf-8" action="～" method="post">
　～ここに色んなinputとかselectとか～
</form>

と出力されるのですが、これを

<form class="form-horizontal" accept-charset="utf-8" action="～" method="post">
　～ここに色んなinputとかselectとか～
</form>

みたいにしたい。(CSSフレームワーク使う時に、出来ると嬉しい。)

FuelPHP(1.5)ドキュメントのFieldSetのページには

forge($name = 'default', $config = array())

と書かれているのですが、この$config部分をどう書いてよいのか分からなかったので試行錯誤していたのですが、同じページの1番下に書いてあった。

それを参考に書いてみると

Fieldset::forge('form_name', array(
	'form_attributes' => array(
		'id' => 'myform',
		'class' => 'form-horizontal'
	)
));

と書けば

<form id="myform" class="form-horizontal" accept-charset="utf-8" action="～" method="post">
　～ここに色んなinputとかselectとか～
</form>

になった。とっても希望通りな感じになりました。

要するに、ドキュメントは隅々まで読みましょうね、という話ですね。