スタイルシートマニア

jQueryで作るナビゲーション

庄野英朗 — Wed, 01 Oct 2014 11:04:46 +0000

すごく久方ぶりの更新です。
最近、企画だけやたらと盛り上がって自分のやるべきことをしないまま、最終的に無駄なものを作らされて、おもいっきり振り回されたあげく、ちゃんとお金を払わない人間にだまされてる今日この頃です。
こういう人間を見分けるにはどうしたらいいんでしょう！

そんなことはさておき！最近ナビゲーションのデザインやらレスポンシブルやらで悩んでいるときに見つけた便利なjQueryです。

Slidebars

横からにょきっと出てくるサイドバーです。
スマホサイトによさそうですね！

Demo | Source

Pushy

こちらも横からにょきっと出るタイプ。
注目すべきはコンテンツ部分にブラックのオーバレイをかけてナビゲーションを目立たせる優れ物！

Demo | Source

Slinky.js

THE なぞ！(笑)
スクロールすると見出し部分が付いてきます。
だ・け・ど！肝心のリンクがないのはなぜだ！
っというか、こんな感じでスクロールするごとにこんだけ積み重なったら見える部分がなくなって余計使いにくいし！(笑)
まあ、リンクは入れればいいと思うけど、もっとも使えないブラウザIEで使えないという(笑)
いよいよダメです！
まあ、たまにはこんなのもね！

Demo

jQuery pop menu

これは素晴らしい！
こういうポップアップナビをやりたかったんですよ！
Demo | Source

jQuery Square Menu

すごい！けど！何か足りない！
そんな感じの一品。

Demo | Source

Perspective page view navigation

どこかWindows8を彷彿とさせるように感じるのは僕だけでしょうか？
だけど、なかなかかっこいいです。
使いようによってはいい仕事しそう！
元に戻りたい時に表示されているスクリーンをクリックすると戻れるというのが分かりにくいかなぁっというのはありますが、こういうの好きです！

Deomo | Source

Naver

一見なんの変哲もないただのナビゲーションですが、実はレスポンシブ対応で縮小すると自動的にナビゲーションがスマホサイズ仕様になります。
これはコーディングが楽ですね！

Demo | Source

SlickNav

スマホ用のナビゲーションです。
びよんびよんっとなるギミックが楽しいスクリプトですね。

Demo | Source

SlimMenu

階層メニューが横に広がるタイプのナビゲーション。
確かに縦に長くなると少々うっとうしい感じになるので、スリムに見えますね。
しかし、階層が深くなりすぎて横にはいりきらなくなったらどうなるのでしょう！

Demo | Source

Horizontal Nav

横幅いっぱいに伸びて適度に各横幅を調整してくれるスクリプト
レスポンシブまで対応してたらよかったのかも・・・。

Demo | Source

Mmenu

こちらもスマホで使えそうな横からにょきっと出てくるナビゲーションスクリプト。
スワイプ対応でスマホサイトにはなかなかよさそう。
カスタマイズも簡単と書いているが、どうでしょう？

Source

Sidr

これは過去に使ったことがあるスクリプトですね。
なかなか良いんだけど、古いアンドロイドは未対応でした。

Menu Aim

こちらは、カーソルを合わせるとサムネイルが出てくるスクリプト。
すごいけど、多分使えない！
スマホにも対応みたいになっているけど、タップした時の挙動を確認していないので不明。
っというか、スマホはタップした時点でページ飛んじゃうからね。

Demo | Source

まとめ

スマホサイトで使うならjQuery pop menuやSlidebarsがよさげですね。
個人的にはPerspective page view navigationも使いようによってはいい感じがしそうな気がします。

CSS で3D BOX

庄野英朗 — Wed, 04 Sep 2013 11:15:05 +0000

どうタイトルをつけたものか迷いましたが、読んで字のごとくCSSで3Dつくるやつです。
少し前まではこういったことはFlashの十八番だったんですが、もはやCSSとHTMLで出来る時代になってしまいました。
まあ、やる人がやればゲームまで作ってしまうみたいです。

デモ

ダウンロード

かなりお手軽ですごくて、こういったものは大好きですが、これはこれで少々使い処が難しそうですね。
いつか使う日がくるかもということで。

IE10だけに効かせたい！

庄野英朗 — Sun, 11 Aug 2013 12:33:52 +0000

はい！またまたやってきました！
僕の大っきらいなIE！

普段あまり使わないでいたらいつの間にかOSのマイナーバージョンアップと一緒にIEがバージョン10に上がっていました。
まあ、そのあたりはほっといてもいいんです。
ついでにVideoタグも使えるようになっていたのでやっと普通のブラウザに追いついてきたかな？っと思いきや！
やっぱりでました！自分勝手なIEの挙動！
バージョンアップするたびに、挙動を変える方がめんどくさいと思うんですけどね。
そんなこんなで、IE10対策です。

今回からなんと！

っというのが使えなくなっているのです！
もぉー、あほというかなんというか。
まあ、嘆いていてもしょうがないので先へ進みましょう。

色々調べてみましたが、ちゃんと効いたのがこれ！

まず、javascriptを追加。

var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);

これを入れると、IE10だけに

というのが追加されます。

後はcssで

html[data-useragent*='MSIE 10.0'] #promotion {
  backgroudn: none;
}

ってしてしまえば解決！

Jazz up a Static Webpageの使い方

庄野英朗 — Sat, 16 Feb 2013 10:59:13 +0000

以前、オシャレなヘッダ画像の演出ができるJazz up a Static Webpageでご紹介したJazz up a Static Webpageの使い方。
正式名称はどうなのかわかりません！実は！(笑)

そんなことはさておき、中身に入って行きましょう。

このスクリプトはｊQuery等の外部ライブラリは使わないです。
スクリプトの読み込みは本体のプログラムとプログラムを走らせる関数を書くだけ。

意外と簡単！

そして、HTMLこちら


	

	

						
Meaningless Pap
				
by Ian Yates

このサンプルの構造上スクリプトが働く部分がヘッダになるので

で書いていますが、別にこの部分は

でも問題ないです。
そして、この

に書いてある物が重要なのです。
「data-0="background-position:0px 0px;"」が背景の基準点。
「data-500="background-position:0px -250px;">」がdata-500でbackground-position:0px -250px;にしますということ。

これと同じく、

の中でやっていることが以下。
「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の読み込みを忘れずに！

WordPressでAdobe Edge Animateを取り入れる

庄野英朗 — Fri, 08 Feb 2013 03:36:26 +0000

これはなかなか使えそうな感じがしますね。

Google Feed APIでRSS情報をサイトに表示（基本編 2）

庄野英朗 — Tue, 05 Feb 2013 11:40:15 +0000

今回は具体的に少し動かしてみようと思います。
まず、基本系

google.load("feeds", "1");
function initialize(){
// RSSの中身を解析して表示する処理
}
google.setOnLoadCallback(initialize);

次に読み込むRSSを指定

var feed = new google.feeds.Feed("http://source-marine.net/css-mania/feed");

これは、google.feeds.Feed(“RSSのURL”);で指定します。

続いて、準備したRSSの情報を呼び出します。

feed.load(dispfeed);

これは、先ほどgoogle.feeds.Feed(“RSSのURL”);で取得した情報を「var feed」に格納して、これを元にRSSの中の情報を「feed.load(関数)」で読み込んで後で作る関数で処理をしています。
これで前準備は完了！

まだ、RSSが取得できなかった時の処理やらなんやらありますが、その辺はまた後でやるとして(^^;
feed.load(dispfeed);で書いたdispfeedという関数の処理を作って行きます。

function dispfeed(result){
var htmlstr = "";
for (var i = 0; i < result.feed.entries.length; i++) {
　var entry = result.feed.entries[i];
　htmlstr += '' + entry.title + '';
 　}
container.innerHTML = htmlstr;
}

まずは、「for() {　}」っというループ処理。
これは、僕も勉強し始めた時に相当悩まされました。
分かってしまうと意外と簡単なんです。

これは「for(数字宣言（変数宣言）;iがループする回数以下なら;＋１){実行する処理}を繰り返しやります」っというのを書いています。
「var i = 0」で「i」は0からスタートしますよー。
「 i < result.feed.entries.length;」で「result.feed.entries.length」が「i」の数以下ならっという条件
「i++」で「i」にプラス１する。
っということです。
「result.feed.entries.length」っというのがRSSにある記事（以下、エントリ）の数を数えてくれています。
これは「配列等など.length」っという形でその中にいくつあるか？っというのを数える時に使えたりします。
まあ、簡単に書いてしまうなら「for(var i = 0; i < 10; i++)」っという事ですね。
ただ、毎回「 i < 10」の部分を人間が数えていたらあほくさいので「result.feed.entries.length」という関数を使ってループ回数を決めているわけです。

そして、ここからが重要な部分になってきます。
「var entry = result.feed.entries[i];」っというのは、いくつかあるエントリを一つ一つ分解してタイトルやリンク先の情報を入れているんです。
「[i]」っというのはループ回数の「i」ですね。
だからこれは、一つ目のエントリの情報を「result.feed.entries[1]」で取得して「var entry」に入れているわけです。（正確には、0からスタートするので二つ目）
そして、「entry.title」でタイトルを表示して「 entry.link」でリンク先を表示するということです。
多分これでもわからない人にはわからないんだろうなぁ・・・。（僕がそうでした。）
まあ、使っていくうちに分かれば大丈夫！
そんでもってしれーっっと「var htmlstr = “”」頭の方で宣言した「htmlstr」！
「htmlstr +=」で先ほどせっせと作った「'’ + entry.title + ‘’」を継ぎ足し継ぎ足し入れて行っているわけです。
そして、最後に「container.innerHTML = htmlstr;」で表示っという構造になっているのです。

まとめると

google.load("feeds", "1");
function initialize(){
var feed = new google.feeds.Feed("http://source-marine.net/css-mania/feed"); 
feed.load(dispfeed); 
function dispfeed(result){ 
var htmlstr = ""; 
for (var i = 0; i < result.feed.entries.length; i++) { 　
var entry = result.feed.entries[i]; 　
htmlstr += '' + entry.title + ''; 　
}//for End 
container.innerHTML = htmlstr; 
}//dispfeed End 
}//initialize End 
google.setOnLoadCallback(initialize);

これでとりあえず完成です。
サンプル：http://source-marine.net/css-mania/sample/feedapi/sample01.html

書いててこんな壮大なお話になるとは思わなかった（笑）

Google Feed APIでRSS情報をサイトに表示（基本編）

庄野英朗 — Mon, 04 Feb 2013 11:34:10 +0000

だんだん大元のCSSについて語るというところから徐々に離れてきているような気がしている今日この頃ですが、そのあたりは気にしない方向でいきたいと思います。
そんなことはさておき！RSSとは！

RSSは、ニュースやブログなど各種のウェブサイトの更新情報を簡単にまとめ、配信するための幾つかの文書フォーマットの総称である。

※Wikipediaより抜粋

っということなんですが、要するにサイトの更新情報を発信するための一つの道具っと思ってもらっていいんじゃないかと思います。
一時期は大流行してRSSで情報収集している人もいたようないなかったような・・・。
僕の大っきらいな、IEにもRSS取得して更新情報を一覧で見れるっというような機能もありました。
このRSSをちょこちょこっと更新してサーバにアップロードしておくと、RSSを購読しているユーザーに更新情報が送られていち早くそこの情報を得る事ができるっというものです。

今回はこのRSSから情報を取得して更新情報に表示してしまおうじゃないかっというお話です。これができれば、RSSを更新するだけで全てが更新されるので、いちいちRSSを更新してサイトの更新情報を同じように更新なんて手間も省けてしまいます。

まずは準備

これであらかじめGoogleのスクリプトを読み込みます。

次にGoogleのスクリプトで何を使うか？っという指定。
今回はFeedを読み込むわけですから「Feed」を指定します。

ちなみに「”feeds”, “1”」の”1″はバージョンを指定しています。（あんまり気にしなくてもOK）

そしてこのスクリプトの基本的な流れですが、ここから先でRSSの中身を解析して表示する関数を用意します。そして、その関数をブラウザが読み込んだ時にgoogle.setOnLoadCallback(関数名);で動きだすように設定します。

google.load("feeds", "1");

function initialize(){
// RSSの中身を解析して表示する処理
}
google.setOnLoadCallback(initialize);

古いIEをCSS3に対応させる CSS3 PIE

庄野英朗 — Sat, 26 Jan 2013 03:20:50 +0000

これもかなりの勢いで今更ネタですが・・・。
IEみたいに役に立たないものを作るところもあれば、こんな素敵なプログラムを作ってくれる人もいるという。
まあ、そんなことはおいといて。

CSS3では「角丸」や「グラデーション」等など、様々なハイパー技が使えるようになりました。
しかし！相も変わらずIEはついて来ていません。
っというか独自路線を爆走しそうな勢いですね。
またまた、話がそれそうになりましたが、そんな偏屈でへなちょこなIEにもハイパーなCSS3を少しだけ対応できるようにしてくれるのがこの「CSS3 PIE」
では、使い方！

っといっても本当に使い方は簡単！

まずはダウンロード

下記URLへアクセスしてダウンロードをクリック。
http://css3pie.com/
圧縮ファイルを開いて「PIE.htc」っというファイルをサーバへアップロードしましょう。
この時、アップする場所が意外と重要なのでちゃんとわかる場所へアップします。（適当にアップしたらいけませんよー）
ちなみに僕はCSSフォルダの中に放り込んでいます。

そして、CSSを書きます。
今回はベタベタですがボックスを角丸にしてみます。

.box {
 border: 5px solid #999;
 border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 -o-border-radius: 5px;
 behavior: url("/css/PIE.htc");

ポイントは behavior: url("/css/PIE.htc")です。
さきほど、アップロードする場所が意外と重要と書きましたが、ここを失敗するとうまく動いてくれません。
ここでいえばhttp://source-marine.net/css-mania/css/PIE.htcっというのが設置場所になります。（実際のPathはWordPressなので違いますけど。）
そうすると、スタイルシートマニアはSource Marineのサブフォルダの中で動かしているので「/css-mania/css/PIE.htc」っという書き方になります。
要するに、一番上の階層（ウェブ上から見える）からの位置を指定するということです。
僕は、これでかなりはまりました・・・。
WordPressだったのでなおさらはまりました。
それと、どうしても効かない時はpositionをrelativeに入れると効く事が多いです。

さぁ！これでへなちょこIEにもCSS3を取り入れることができます！
だけど、角丸+グラデーションなどの組み合わせはどうやら出来ない様子。
いつになったら、IEの束縛から逃れられる日がくるのでしょうか・・・。

スマホサイズのナビゲーションを最適化

庄野英朗 — Fri, 25 Jan 2013 11:10:18 +0000

またまた、最近話題のブラウズサイズに合せてCSSを最適化する「Fluid Grid Layout」に便利なお話。
タブレットやPCサイズなら問題ないんですが、スマホのナビゲーションで困った事はないでしょうか？
特に一つのソースでマルチにみせるFluid Grid Layoutだと「スマホだけにjQuery Mobileを使うわけにもいかず、ナビゲーションが・・・。」みたいなことを経験している人は少なからず存在していると思います。（僕もその一人です。）
そんなスマホサイズのナビゲーションにお困りの方にはこれ！

Big Menus, Small Screens: Responsive, Multi-Level Navigation

サンプル：http://source-marine.net/css-mania/sample/tessa-lt-dropdowns/

試すときは、以前の記事でご紹介したResizerを使うと便利です。

仕組みとしては、jQueryでブラウズサイズを取得して768以下だったら、toggleMenuのdisplayをinline-blockで表示させているようです。
時間があれば記事にしようと思います。

ダウンロード：http://webdesigntutsplus.s3.amazonaws.com/tuts/378_tessa/tessa-lt-dropdowns-21c7868.zip

様々な端末サイズを確認できるViewport Resizer

庄野英朗 — Thu, 24 Jan 2013 10:46:49 +0000

最近ちょくちょくお話のネタになっています、「Fluid Grid Layout」ですが、動作確認をするのにいちいちそれぞれの端末を手にとってリロードか、端末にAdobeが出しているAdobe Edge Inspectを入れて起動してChromeと同期させて確認するか、ブラウザのサイズを縮めて確認するかのいずれかでの確認だったと思います。
Adobe Edge Inspectはなかなか便利だったんですが、どうもiPadちゃんとの相性がよろしくないようでしょっちゅう落ちるし、サイトの下の方まで確認しようと思ったら結局手にとってスクロールしないといけないし。
方やブラウザを縮めるとChromeでせっかく便利な要素の検証がものすごく使いにくくなるというとっても残念な感じ。
そんなどれもいまいちな感じがぬぐえなかったんですが、このViewport Resizerが全部解決！

VIEWPORT RESIZER

使い方はとっても簡単！
トップ画面の「Click or Bookmark」を文字通りクリックするかブックマークして、後は確認したいサイトに行って先ほどブックマークした「Resizer」をクリックするだけ！
すると、画面上部にぷらんぷらんっとリサイズするアイコンが出てくるのでこれをクリック！
するするっと表示部分がその大きさになって表示具合をチェックできます！
素晴らしい！

更に、デフォルトのサイズ以外にも「BUILD YOUR OWN BOOKMARKLET HERE」で好きなブラウズサイズをクリックしてカスタマイズできるから、様々な端末の確認ができます。AppleのCinema Displayサイズ（2560×1600）なんてのもあるので試しに入れてみると面白いかもしれません。

制作段階ではこれぐらいがお手軽でいいですね。
もちろん最終確認で端末使って確認しましょう！