スポンサーサイト
2014.01.27 Monday
一定期間更新がないため広告を表示しています
- -
- -
- -
2012.09.08 Saturday
.navi li { width: 100%; border-bottom: solid 1px #ccc; } .navi li a { text-decoration: none; display: block; padding: 10px 20px 10px 10px; margin-right: 5px; background: url('../images/arrow.png') no-repeat right center; -webkit-background-size: 20px 20px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
(function() { // セッションストレージに対応してるか? if(typeof sessionStorage === 'undefined') return; var spFlag = false; var n = navigator.userAgent; var uap = new RegExp('iPhone|Android.+Mobile|iPod'); //ユーザーエージェントにてスマホ判別 if(n.match(uap)) { spFlag = true; //対応しててもプライベートブラウズだとエラーになってしまうので。 try { //セッションスタートかどうかチェック //confirmはお好みで //if(sessionStorage['SPorPC'] == undefined) sessionStorage['SPorPC'] = confirm('スマートフォン用サイトを表示しますか?') ? 'sp' : 'pc'; if(sessionStorage['SPorPC'] == undefined) sessionStorage['SPorPC'] = 'sp'; } catch(e) { //プライベートブラウズ時、他ストレージエラー時はスマホフラグをfalseに spFlag = false; }; }; //PC、スマホ切り替えボタンにclickイベントをliveで紐付け $('#pc, #sp').live('click', function() { sessionStorage['SPorPC'] = this.id; scrollTo(0,0); //changeView();// no load location.reload();// reload }); function changeView() { //スマホの時のみ呼ばれsessionStorageがPCかSPかを //判別してフラグを書き換えます。 spFlag = !(sessionStorage['SPorPC'] == 'pc'); //既存(PC用)のスタイルシートをデフォルトのままかスマホ用に書き換えてます。 //全てのスタイルシートを書き換えてるので変更の無いCSSもスマホ用が必要になってしまいますが、、、。 //下はスマホ用は頭に「sp_」を付けて正規表現でパスを書き換えています。 var $path = $('link[rel="stylesheet"]'); for(var i = 0,len = $path.length; i < len; i++) { $path[i].href = changePath($path[i].href); }; function changePath(path) { //コピペするとこの正規表現のバックスラッシュがエラーになりますのでご注意を。 var trim = path.match(/sp_[0-9a-z]+¥.css|[0-9a-z]+¥.css/); trim[1] = (spFlag) ? 'sp_' + trim[0] : trim[0].replace('sp_', ''); var changedPath = path.replace(trim[0], trim[1]); return changedPath; }; //viewportをheadに挿入 if(spFlag) { var meta = '<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />'; $('head').append(meta); } else if(!spFlag && n.indexOf('Android') != -1) { //AndroidはPCサイトに切り替えた際PC用のwidthをviewportに設定しないとdivice-widthのままになっているような気がします。 var meta = '<meta name="viewport" content="width=980" />'; $('head').append(meta); }; $(function() { //スクロールしてURLバーを隠します scrollTo(0,1); //PCからスマホ、スマホからPCへの切り替えボタンを挿入。 if(spFlag) { var btn = '<div id="spbtn"><a href="javascript:void(0);" class="btn" id="pc">PC</a></div>'; $('h1').after(btn); var $switch = $('#switch'); if($switch) $switch.remove(); } else { var swt = '<div id="switch">表示切替 : <a href="javascript:void(0);" id="sp">スマートフォン</a></div>'; $('#footer').after(swt); var $spbtn = $('#spbtn'); if($spbtn) $spbtn.remove(); }; }); }; //スマホだったらchangeViewを実行 if(spFlag) changeView(); })();
2012.06.25 Monday
div.css-testbox { margin: 10px auto; width: 300px; height: 300px; border: solid 1px #cdcdcd; } div.box-prefix { -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; -webkit-box-shadow: 0px 0px 5px 3px rgba(0,0,0,.2); -moz-box-shadow: 0px 0px 5px 3px rgba(0,0,0,.2); -o-box-shadow: 0px 0px 5px 3px rgba(0,0,0,.2); -ms-box-shadow: 0px 0px 5px 3px rgba(0,0,0,.2); } div.box-without-prefix { border-radius: 10px; box-shadow: 0px 0px 5px 3px rgba(0,0,0,.2); } @-webkit-keyframes rotate { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg) } } @-moz-keyframes rotate { 0% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg) } } @-o-keyframes rotate { 0% { -o-transform: rotate(0deg); } 100% { -o-transform: rotate(360deg) } } @-ms-keyframes rotate { 0% { -ms-transform: rotate(0deg); } 100% { -ms-transform: rotate(360deg) } } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg) } } /* animation-name: ;keyframeの名前 animation-duration: ;実行時間(1000sm>1s>1秒) animation-timing-function: ;easing animation-delay: ;開始時間(1000sm>1s>1秒) animation-iteration-count: ;実行回数(infinite>無限) aniamation-direction: ;反転再生(normal,alternate) */ .animation-prefix { -webkit-animation: rotate 5s ease-in-out infinite; -moz-aniamation: rotate 5s ease-in-out infinite; -o-animation: rotate 5s ease-in-out infinite; -ms-animation: rotate 5s ease-in-out infinite; } .animation-without-prefix { animation: rotate 5s ease-in-out infinite; } /* transition-property: ;cssプロパティ名(all,none,プロパティ名) transition-duration: ;実行時間(1000sm>1s>1秒) transition-timing-function: ;easing transition-delay: ;開始時間(1000sm>1s>1秒) */ .transition-prefix { width: 100%; height: 100%; -webkit-transition: width 500ms ease-in-out 0, height 1s ease-in-out 0; -moz-transition: width 500ms ease-in-out 0, height 1s ease-in-out 0; -o-transition: width 500ms ease-in-out 0, height 1s ease-in-out 0; -ms-transition: width 500ms ease-in-out 0, height 1s ease-in-out 0; } .transition-without-prefix { transition: width 500ms ease-in-out 0, height 1s ease-in-out 0; }いつも思い出せないcss3 animationとtransitionとプレフィックスのメモ。
.transition-prefix:hover { width: 80%; height: 80%; } .transition-without-prefix:hover { width: 80%; height: 80%; }
2011.01.19 Wednesday
body {iPhoneとIE6のposition: fixedが効かなくて困った時のメモ
/*ie6fixed*/
height: 100%;
/*iPhone*/
position: relative;
}
#overlay {
position: fixed;
top: 0;
left: 0;
/*ie6fixed*/
position: expression('absolute');
top: expression(documentElement.scrollTop + 'px');
left: expression(documentElement.scrollLeft + 'px');
z-index: 90;
width: 100%;
height: 100%;
background-color: #000;
-ms-filter: "alpha( opacity=0 )";/*IE8*/
filter: alpha( opacity=0 );/*IE6,7*/
opacity: 0;
}
/*iPhone overlay position*/
@media screen and (max-device-width: 480px) {
#overlay {
position: absolute;
top: 0;
left: 0;
}
}
2011.01.08 Saturday
p { color: #000;} p .blue { color: blue;} p.red { color: red;} p, .black { color: #000;}
<p>p要素</p> <p>p要素<span class="blue">p要素内のblueクラスが青</span></p> <p class="red">p要素のredクラスが赤</p> <p>p要素とblackクラスの全て</p> <p class="red black">redクラスとblackクラスを適用</p>単純だけどすぐ忘れる。