CSSハックを使わないブラウザー対策 から require.jsのこと

Posted by 管理者

「企業サイトなので、ＩＥ６以上に対応を求む」いまだに少なからずある要望です。
コピペで対応したいので記しておきます。
動作確認はコピペ無理なのでやはり時間はかかります

Web Desining 参考

・htmlで分岐させてます。JavaScriptなしでも分岐可能
・JavaScript で、nojaクラス名を削除して、スマホ、タブレット、PCを分岐

html

<! DOCTYPE html>
<!--[if lt IE 7 ]><html class="nojs ie ie6" lang="ja"><![endif]-->
<!--[if IE 7 ]><html class="nojs ie ie7" lang="ja"><![endif]-->
<!--[if IE 8 ]><html class="nojs ie ie8" lang="ja"><![endif]-->
<!--[if IE 9 ]><html class="nojs ie ie9" lang="ja"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html class="nojs" lang="ja"><!--<![endif]-->

と書いていたら、ほかにいろいろと気になることが出てきた。
とっちらかったメモになるので非公開に

まずは require.js を入手
公式サイトか、github のリポジトリからダウンロード
jrburke/requirejs – GitHub
ダウンロードしてきたら適当な場所に解凍、プロジェクトの js ディレクトリにおいて

htmlのヘッダーに scriptの読み込みを書きますが、属性をつけます。
data-main=”js/index の部分です。

そして、index.jsに読み込むjsの順序を書くという。

テンプレファイル（パスワード：1234）
html5shiv.js で、IE8以下を無理やり、html5のタグを認識するようにしてます。

パララックス

Posted by 管理者

今更かもしれませんが、前から気になっていました。
暇を見つけては勉強しているのですが、ＰＣのブラウザーではおもしろいなぁというサイトも、スマホで確認すると全然ダメというパターンが多いので腰が引けていました。スマホだと全然見れないというパターンには、効果がおもしろい分とてもガッカリしてします。

スマホでも見れるサイトを紹介してくれているところを見つけたので引用させてもらいます。

http://fb-research.net/facebook/2012/07/_paralla/
こちらのサイトです。

NIKE「CHOOSE YOUR FIGHT」
これを見て衝撃を受けました。
やはりＰＣもスマホもバッチしＯＫですが、サイトのＵＲＬを変えています。
やっぱり普通にすれば、同じ仕組みではダメなのか・・・・
PCのURLでもモバイルに飛ばされるので気づかないのですが・・・

PC
http://www.nike.com/jumpman23/aj2012/
スマホ
http://www.nike.com/jumpman23/aj2012/mobile/

—————-

レッスン動画

http://dotinstall.com/lessons/parallax_html

clearfix（度忘れメモ）

Posted by 管理者

暗記していたのですが度忘れしてしまいました・・・・
メモを見ると覚えないのですが、仕方がない。。。φ(..)メモメモ
ちなみにclearfixつけるBOXを間違えるとうまくいかないよ・・・（親につける）

.clearfix:after {
content: “.”; /* 新しい要素 文字は何でもＯＫ */
display: block; /* 要素をブロックに */
clear: both;
height: 0;
visibility: hidden;
}

.clearfix { /* IE6、7 :afterサポートなし対策 子要素の高さも含めて算出するバグ利用 */
min-height: 1px;
}

/* IE6以前min-heightサポートなし対策 「* html」をつけるとIE6以前のみ有効（Starハック）*/

* html .clearfix {
height: 1px;
/* 以下macＩＥ4,5のみのハック */
/*¥*//*/
height: auto;
overflow: hidden;
/**/
}