スタイルシートマニア
ホームページカスタマイズ Tips
Jazz up a Static Webpageの使い方
以前、オシャレなヘッダ画像の演出ができるJazz up a Static Webpageでご紹介したJazz up a Static Webpageの使い方。
正式名称はどうなのかわかりません！実は！(笑)
そんなことはさておき、中身に入って行きましょう。
このスクリプトはｊQuery等の外部ライブラリは使わないです。
スクリプトの読み込みは本体のプログラムとプログラムを走らせる関数を書くだけ。
<script type="text/javascript" src="js/skrollr.js"></script>
<script type="text/javascript">
skrollr.init({
forceHeight: false
});
</script>
意外と簡単！
そして、HTMLこちら
<header class="band" data-0="background-position:0px 0px;" data-500="background-position:0px -250px;"> <div class="container"> <div class="columns sixteen" data-0="opacity: 1" data-180="opacity: 0"> <h1>Meaningless Pap</h1> <a class="button" href="http://webdesign.tutsplus.com/author/ian-yates/">by Ian Yates</a> </div><!--/ columns--> </div><!--/ container--> </header><!--/ band-->
このサンプルの構造上スクリプトが働く部分がヘッダになるので<header>で書いていますが、別にこの部分は<div>でも問題ないです。
そして、この<header>に書いてある物が重要なのです。
「data-0="background-position:0px 0px;"」が背景の基準点。
「data-500="background-position:0px -250px;">」がdata-500でbackground-position:0px -250px;にしますということ。
これと同じく、<div class="columns sixteen" data-0="opacity: 1" data-180="opacity: 0">の中でやっていることが以下。
「data-0="opacity: 1"」で透過の度合いを設定（これは1）
「" data-180="opacity: 0">」がdata-180でopacity: 0にしますということ。
この辺が扱えれば自由にあつかえると思います。
この場合背景が下がって、文字がフェードアウトしていきますけど、その逆で上がってきてフェードインしたり使い方しだいではいろんなところに仕掛けを作ることができそうです。
そして、CSS！
サンプルのCSSはやたらと色々書いていますが、肝心なのは以下。
header.band {
background-image:url(../img/background.jpg);
background-size:100%
}
ここで背景を指定して枠ぎりぎりに画像を拡大しているんです。
ここの背景がdata-500="background-position:0px -250px;">で動いているということです。
これでちょっと変わったヘッダの演出が自由自在にできるはず！
が、しかーし！予測はしていたけど、iPadやらスマホやらで見ると動きがカクカクする上にサイズが変化するので見栄えが非常に悪い！（まあ、サイズに関してはFuid Glid Layoutにすればなんとかなりそう）
この人たちには適用されないように工夫。
if (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPad') != -1 || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
jQuery('div.band').css( 'background-position','0px 0');
}else {
skrollr.init({forceHeight: false});
}
これは何をやっているかというと、iPhone・iPad・iPod・Android端末だったらdiv.bandの背景位置を別途指定して、それ以外だったら（PCのみ）通常営業しますっということをやっています。
iPadでは検証済みですが、その他はわかりません！
まあ、この中の値をゴニョゴニョすればなんとかなると思います。
ちなみに、Androidのタブレットとスマホを見分けるには「mobile」と指定するとできるとな！
あっ！これはjQuery使ってやってるからこの技を使うならjQueryの読み込みを忘れずに！
jQuery gridsterの使い方
2012年に最も役だったjQuery Pluginでご紹介した中からgridsterの使い方。
まずはサンプル
では、htmlを見てみます。
headでCSSの読み込み
<link rel="stylesheet" type="text/css" href="./gridster.js_files/jquery.gridster.min.css"> <link rel="stylesheet" href="./gridster.js_files/style.css">
レイアウト部分
<div class="gridster"> <ul style="height: 640px; position: relative;"> <li data-row="1" data-col="2" data-sizex="2" data-sizey="1" class="gs_w"></li> <li data-row="4" data-col="1" data-sizex="1" data-sizey="1" class="gs_w"></li> <li data-row="4" data-col="2" data-sizex="2" data-sizey="1" class="gs_w"></li> <li data-row="2" data-col="3" data-sizex="2" data-sizey="2" class="gs_w"></li> <li class="try gs_w" data-row="1" data-col="5" data-sizex="1" data-sizey="1"></li> <li data-row="3" data-col="1" data-sizex="2" data-sizey="1" class="gs_w"></li> <li data-row="4" data-col="4" data-sizex="1" data-sizey="1" class="gs_w"></li> <li data-row="1" data-col="6" data-sizex="1" data-sizey="1" class="gs_w"></li> <li data-row="2" data-col="5" data-sizex="1" data-sizey="1" class="gs_w"></li> <li data-row="2" data-col="2" data-sizex="1" data-sizey="1" class="gs_w player-revert" style="position: absolute;"></li> <li data-row="2" data-col="6" data-sizex="1" data-sizey="2" class="gs_w"></li> </ul> </div>
とりあえず<div class=”gridster”>は必須。
<li>の中にclass=”gs_w”も必須。
<li>の「data-row=”1″」で表示される行の初期位置（上から1,2,3）
<li>の「data-col=”2″」で表示される列の初期位置（左から1,2,3）
<li>の「 data-sizex=”2″」でobjectのサイズ（横）
<li>の「 data-sizey=”2″」でobjectのサイズ（縦）
最近はこの傾向が強いです。フッタでjavascriptの読み込み。
必要なjavascritpとjqueryファイルの読み込み
<script type="text/javascript" src="./gridster.js_files/jquery-1.7.2.min.js"></script> <script src="./gridster.js_files/jquery.gridster.js" type="text/javascript" charset="utf-8"></script>
gridsterの設定をするスクリプト
<script type="text/javascript">
var gridster;
$(function(){
gridster = $(".gridster > ul").gridster({
widget_margins: [10, 10],
widget_base_dimensions: [140, 140],
min_cols: 6
}).data('gridster');
});
</script>
widget_margins: [10, 10]はmarginの設定
意味はwidget_margins: [右,下]
widget_base_dimensions: [140, 140]はobejctの基本サイズ
意味はwidget_base_dimensions: [横, 縦]
ここで設定したものを元に<li>の「 data-sizex=”2″」等で何個分という設定
min_cols: 6はなぞです。
文字から考えて最低6列はある？とか
っと考えていじっても何も起きない・・・。
っとまあ、基本はこんな感じのようです。
この他にも
widget_selector: “> li”はセレクタを指定。（この場合はli）
max_size_x: 6で横幅の最大値を設定
max_size_y: 6で縦幅の最大値を設定
などなど、色々とカスタマイズできるようでうす。
しかし、根本的な問題として、これはcookieかなんかに並べ替えたレイアウトを記憶させといて、再度アクセスしたときにそのレイアウトで並ぶというような発想はなかったんでしょうか？
何かそこまでできないと完成じゃないと思うのです。でないと、半分ぐらい作る側の自己満足で終わってしまいますね。
まあ、作った人にしてみればそこまでやるんなら自分でやってくださいっと言ったところなんでしょう！
サンプルのダウンロードが意味分からないファイルだったので作りました。
http://source-marine.net/css-mania/download/gridster.zip
実際にちょと使ってみる
あまり理屈をこねてもややっこしくなるだけなので、実際にちょっと作ってみましょう。
<div class=”box01″>
<h2 id=”h2-css_use”>CSS使ってhtmlを作ってみる</h2>
<p>boxなど一ページに複数使用が予想されるものにはclassを採用</p>
<p>h（見出し）タグなどそのページには一度しか使用されないようなものにはidを採用</p>
<p>必ずしもh（見出し）タグにidを付けないといけないわけではありません。</p>
<p>これらは目安であり絶対ではありません。</p>
</div>
<!–box01終わり –>