スポンサーサイト

2014.01.27 Monday

一定期間更新がないため広告を表示しています

  • -
  • -
  • -

相変わらず広告が挿入されております。

更新頻度が少なすぎる。。。

とあるサイトをとりあえずスマホに対応させたいなぁ、

簡単な感じでいいんだけど、、、。

と長いこと考えていてやっと重い腰を上げてとりかかってみました。

その時躓いたことなどをメモ。

htmlは弄らず(増やさず)CSSのみで対応したい

CMS(CMSをあまり理解していませんが、、、)など使用してなかったので

更新の度にPC用、スマホ用両方更新するのメンドクサイ。

とりえずCSSだけでどうにかしよう。

どうにかなるだろう。

とりあえずやってみたこと

  • 不要な画像、ナビゲーションをdisplay: none
  • 各セクションのdivのwidthを100%に
  • 消したいテキストはtext-indentで画像置き換え
  • リストのナビゲーションのアンカーをブロック要素に
  • nth-child(n)::afterでcontentを挿入


まずはがんがんdisplay: none;で画像やら不要なナビを非表示に。

なんて無駄が多いんだ。

body,div#header,div#main,div#footerなどのdivのwidthを100%に変更。

その際子のブロック要素にうっかりwidth: 100%を設定し、paddingを設定してしまうと

横スクロールが出てしまうのでご注意を。

そんで画像に置き換えたいテキストがあればCSSのtext-indentで画像置換え。

画像置換えは→[CSS]画像置換「-9999px」のパフォーマンスを改善した新しいテクニック

ヘッダー、フッターのナビをうまいこと必要な分だけ利用してなんとなくナビを作成。

リスト内アンカーをブロックにして入りきらいテキストは...表示にするため、

text-overflow、white-space、overflowを設定。

 ↓こんな感じでリストメニューはOK??
.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;
}


そして擬似要素before afterでコンテンツを挿入。

こんなんで大丈夫だろうかと思いつつも続行。

ボタンはCSS3 Button Generatoここで素敵なのが簡単に作れますね。

retina用にアイコンサイズは倍で作って

-webkit-background-size:これで半分表示に。

 予想外。意外とまとまった。

このCSSをどう読み込むか、ヘッド内でメディアクエリで読み込むか。

とも思ったけどjavascriptでユーザーエージェントで判別して

既存のCSSを書きかえることにしました。

PCサイト、スマートフォンサイトの切り替えをどうしよう。

ここ、悩みました。

とりあずの対応だったんですがなんとなくこの機能は譲れなっかたんです。

ヘッド内でメディアクエリで分岐したらPC表記への切り替えられても

ページ遷移したら戻っちゃうし。そもそも全html直したくないし。

普通はPHPとかでやるんですよね、きっと。

が、しかし、PHPよくわからなかったので、

javascriptのセッションストレージという便利なものがあったのでそれで対応。

以下自信ないですがコード。
(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();
    
})();


最初はリロードしないで表示を切り替えるつもりだったので色々無駄が多いです。

 ページをロードしないとどーもviewportがうまいこといきませんでした。

更にリロードしてもAndroidがどーもしっくりこなかったので

PCサイト用のwidthを入れてみたらまぁなんとか。

キャッシュなんですかね〜?

それでこれを全てのhtmlで読み込んでる共通のスクリプト(あればですが、、、)

に記述すればPC用表示にして他のページに移動してもPC表記のまま!

すぐぶちあたった欠点

なんといってもプライベートブラウズではwebストレージが使用できません!!

残念。

だけどChromeのシークレットモードはOKでした!

それとPC、SP切り替えをまたいでブラウザの戻るボタンで移動すると

キャッシュを読んでるためなんだかなぁ。って感じです。

それとAndroidのページ内移動(a href="#top"ってやつです)、

 これ一回しかできないんですね。

そんなこと思いもせず結構悩みました。

ここはjavascriptで対応するしかなさそうですね。

それと直接関係ないですがiPhoneはどうやらjQueryの

live関数と相性が悪いらしくイベントが登録されないみたいです。

JQueryのliveイベントがiPhoneのSafariで登録できない

確かにonclick属性を入れたらちゃんとイベントが実行されました。

上のコードの切り替えボタンは

javascript:void(0)あたりが効いてるのでしょうか?

一応動きます。

結論

viewport、特にAndroidがよくわかりません!

Androidが欲しい。

何かミスがありましたらご指摘いただけると嬉しいです。

prefix

without prefix


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;
}
.transition-prefix:hover { width: 80%; height: 80%; } .transition-without-prefix:hover { width: 80%; height: 80%; }
いつも思い出せないcss3 animationとtransitionとプレフィックスのメモ。

マウスオーバーかタッチでtransitionを実行。

プレフィックスがあると適用されないプロパティもある。

当然ないと適用されないプロパティが沢山

やっぱし併記が必要。

早くプレフィックス無しで動いて欲しいな。


body {
/*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;
}
}
iPhoneとIE6のposition: fixedが効かなくて困った時のメモ
それとIE6,7,8のopacityの仕方を覚えられないのでメモ

cssのセレクタ

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>
 単純だけどすぐ忘れる。

1

calendar

S M T W T F S
     12
3456789
10111213141516
17181920212223
24252627282930
31      
<< March 2024 >>

profile

last entry:2013/06/10

selected entries

categories

archives

recent comment

search this site.

others