カスタマイズSharePC・タブレット・スマホCSSレスポンシブデザイン対応のための備忘録こんにちは!!ようこそ、当ブログgcbgardenへ。管理人のsakurabaaa(@sakurabaaa_g)です。最初に面白いツールを見つけたので紹介します。StatCounter世界中の検索エンジンのシェア率や、スマホのシェア率、ディスプレイサイズのシェア率などを調べることができるサービスです。実際にディスプレイサイズのシェア率がどうなのか調べてみました!!ディスプレイサイズのシェア率のグラフLINKStatCounter当たり前の結果ですが、360×640でスマートフォンサイズが圧倒的なシェアを握っています。ついでPCやタブレット、その他いろんなサイズ〜〜〜という結果でした。※あくまでもstatcounterの参考数値です。この結果だけでもディスプレイサイズが15パターンもありレスポンシブ対応を細かく行なっていたら拉致があかなくなってしまいますので、ブレイクポイントは決める必要がある!!では、なにを参考にすればいいのではと考えてしまうので、Bootstrapの数値を見てみましょう。フレームワークBootstrapでは??例えば、代表的なフレームワークであるBootstrap(Ver.3)では、768px未満をスマートフォン、992px未満をタブレット、1,200px未満を中型デスクトップ、1,200px以上を大型デスクトップに分類してブレイクポイントが設けられています。このような既存のフレームワークの設定値を参考にしても良いでしょう。参考レスポンシブCSSで使うブレイクポイントの決め方とのこと、大変勉強になります。{///////iPhone5sサイズ用/////////}※サイズは感覚です。このようなうちわけでレスポンシブ対応をしています。アナリティクスの数値をみてもスマホの閲覧率が90%を超えるので、可能な限りレスポンシブでスマホユーザーに優しいデザインを提供しようと書きながら思った次第です。笑みなさんもぜひ参考にしてみてください。sakurabaaa_gこの記事を書いた人。とあるネットベンチャーでがんばる働き屋さん、ブロガー。書きたいことを気ままに書いてます!Python、プログラミング、米株、カメラ、野球観戦がすき。Latex】ワードプレスでLaTeX(数式)を使えるようにするプラグインこんにちは!!ようこそ、当ブログgcbgardenへ。管理人のsakurabaaa(@sakurabaaa_g)です。本記事...記事を読む【コピペでできる!】「simplicity」に行った10のCSSカスタマイズこんにちは!!ようこそ、当ブログgcbgardenへ。管理人のsakurabaaa(@sakurabaaa_g)です。本記事では...記事を読むコピペでOK!ワードプレス記事ページのみにCSSを適用する方法こんにちは!!ようこそ、当ブログgcbgardenへ。管理人のsakurabaaa(@sakurabaaa_g)です。【備忘録】本記事で...記事を読む【ワードプレス】ショートコードを書いてプラグインで実装する方法こんにちは!!ようこそ、当ブログgcbgardenへ。管理人のsakurabaaa(@sakurabaaa_g)です。ワード...記事を読む【コピペでできる!】simplicityグローバルナビメニューの中央寄せこんにちは!!ようこそ、当ブログgcbgardenへ。管理人のsakurabaaa(@sakurabaaa_g)です。こんにちは!!ようこそ、当ブログgcbgardenへ。管理人の...記事を読む【コピペでできる!】simplicity記事カテゴリに背景色をつけてみたこんにちは!!ようこそ、当ブログgcbgardenへ。テーブル背景を透明化する方法こんにちは!!ようこそ、当ブログgcbgardenへ。管理人のsakurabaaa(@sakurabaaa_g)です。コメントをキャンセルメールアドレスが公開されることはありません。@sakurabaaa_g20代。とあるネットベンチャーでがんばる働き屋さん、ブロガー。Python、プログラミング、米株、カメラ、野球観戦。G検定(ジェネラリスト検定)を受験してみた。手数料で目減りしていく純金積立より、元本保証の円定期預金プレーオフがおすすめですよ。コメントありがとうございます。10)はわかりません。力添えできず申し訳ございません。