CSSで作るボタン

フラット風にしたり、色つけたり、長さを統一するだけでもスッキリ


<STYLE TYPE="text/css">
<!--
.btn {
background: #EEE;
border: 1px solid #BBB;
color:#333;
width: 75px;
height: 23px;
font-size: 10px;
}

.btn2 {
width: 75px;
height: 22px;
padding: 2px 0;
font-size: 10px;
background-color: #DDD;
}
.btn3 {
width: 75px;
height: 22px;
padding: 2px 0;
font-size: 10px;
background-color: #FFF;
}
-->
</STYLE>


http://touch-slide.jp/column/304/

レスポンシブデザイン

ウェブの流行でいくと、いまはフラットデザインが今風なのでしょうか。

Windows8、Yahooとフラットデザインが採用されています。

個人的には、フラットかどうかよりＰＣ、スマートフォンなどで切り替えられるレスポンシブデザインに注目していろいろ試しています。

レスポンシブデザイン

CSSフレームワーク

いろいろ出てますが、乱立していてどれを採用していいのやら。

しかもほとんどが海外発の使用で、インストラクションも英語です。

今のところ良さそうなのが、

Kube CSS-framework

http://imperavi.com/kube/

デザインもシンプル、設置も簡単。

良さげです。

WEBのテーブルをgvChartでグラフ化。

tableの内容を簡単にグラフ化するjQueryプラグイン「gvChart」

http://www.skuare.net/2010/06/tablejquerygvchart.html

●１）gvChartファイルをダウンロード＆設置。

●２）ヘッダー記述。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.gvChart.js"></script>
<script type="text/javascript">
gvChartInit();
$(document).ready(function(){
$('#id名').gvChart({
chartType: 'ColumnChart',
//その他に AreaChart、LineChart、BarChart、ColumnChart、PieChartがあります。
gvSettings: {
vAxis: {title: 'No of players'}, //縦軸タイトル
hAxis: {title: 'Month'}, //横軸タイトル
width: 720, //幅
height: 300, //高さ
}
});
</script>

●３）テーブルを記述。

テーブルの数値でない部分はthでしっかり囲むこと。

<table id="id名">
<caption>Game players count</caption>
<thead>
<tr>
<th></th>
<th>Jan</th>
<th>Feb</th>
<th>Mar</th>
<th>Apr</th>
</tr>
</thead>
<tbody>
<tr>
<th>2010</th>
<td>125</td>
<td>185</td>
<td>327</td>
<td>359</td>
</tr>
<tr>
<th>2009</th>
<td>1167</td>
<td>1110</td>
<td>691</td>
<td>165</td>
</tr>
</tbody>
</table>

ついthをtdで記述してしまったりするが、ちゃんとthで囲まないと表示されないので注意！

MySQLでCASEを使って集計

年度別にセミナーA、セミナーB、合計の人数を出したい場合、

CASEを使う。

年度　　A　　B　　　計
---------------------
2011　　350　200　　550
2010　　250　150　　500
2009　　125　120　　245
2008　　200　100　　300

SELECT year_c,
SUM(CASE
WHEN seminar_c = 'A' THEN 1
ELSE 0
END
) as `A`,
SUM(CASE
WHEN seminar_c = 'B' THEN 1
ELSE 0
END
) as `B`,
SUM(CASE
WHEN seminar_c != '取消し' and seminar_c not in('A','B') THEN 1
ELSE 0
END
) as `計`
FROM `table`
GROUP BY year_c
ORDER BY year_c DESC

JQueryライブラリ

ダウンロードせず、Googleにリンクしたほうが簡単。

cssは、テーマがいくつかあり、見た目が変更出来ます。

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/blitzer/jquery-ui.css
" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js
"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js
"></script>

jQueryやUI、PrototypeなどのライブラリーをGoogleライブラリAPIから読み込む方法
http://worldwidedeb.net/2011/05/09/jquery-ui-prototype-google-api-url