誰でも利用できますか?スマートフォンサイトも計測できますか?どの機能から使うべきか迷っています。エンジニアの森永です。以前の記事「モバイルファーストの時代。スマートフォン用ブラウザは2017年以降どうなる?」でも書きましたように、Webサイトの作成においてはモバイル用サイトを重視する傾向が強まってきております。スマートフォン用ブラウザの機能もPC用ブラウザと比べて遜色ないレベルに近づいてきており、画面サイズに気をつければHTMLやCSSのコーディングは同じ感覚で出来るようになってきています。スポンサーリンクしかしながら、PCで確認すると問題ないのにスマートフォンで見ると想定していた表示と異なっていたり画面が崩れていたりすることもまだしばしば発生することが現実問題として多々あります。CSSコーディングを行って実際に発生した3つの事例、およびその対応策について紹介いたします。スマートフォンと違う色、形になる場合があります。入力フォームの送信ボタンなどでボタンを設置するケースは多いかと思います。CSSを使い、ボタンをブラウザデフォルトのものから見やすいものなどに変更することも多いかと思います。以下のようなコードでボタンを設置する例を考えてみましょう。以下のようなボタンが表示されます。iPhoneで表示すると......このようにCSSで指定したスタイルがボタンに反映されません。デフォルトスタイルがかかってしまうことが原因で発生する現象です。対策としては以下の2つの方法が挙げられます。デフォルトスタイルを適用させないことで回避できます。none;●対策2input要素ではなくbutton要素を使うことによりこの現象を回避できます。button要素は閉じタグとの間にimgタグ(画像)を挟むことが出来るなど柔軟性も高いため、最近ではbuttonタグの使用を推奨する動きもあります。サンプルではボタンが表示されていますが、上から対策を施していないもの、対策1を施したもの、対策2を施したものの順となります。表示すると違いがわかるかと思います。Webサイトを見ていると、突然文字が大きくなってはみ出てしまうことが稀に発生します。毎回ではなく「稀に」発生することが厄介です。リロードすると直ってしまうことが多く、原因がつかめなくて悩んでいる方も多いのではないでしょうか。デフォルトスタイルが原因で発生しています。自動で文字の大きさを調整しようとする「-webkit-text-size-adjust」機能がオンになっているのですが、この機能が原因で大きくなってしまう現象が発生することがあります。対策としては、常に自動調整時の倍率を1倍にする以下の指定をCSSに記載します。採用するページも増えています。高さ、幅の指定が反映されず表示されない場合があります。パーセンテージのみで設定した場合、子要素の高さが認識されない場合があります。指定することで回避できます。サンプルをアップいたしました。見ると画像が表示されず画面が真っ白となります。parentまとめ今回紹介した3つの事例のように、PC上でのシミュレートを行った場合に問題なくても、実際にiPhoneで表示を行うと表示上の問題が発生する場合があります。他にもブラウザによる表示の差異は多数残っているのが現状ですので、表示の確認はPC、モバイル、各ブラウザでまんべんなく行っていきましょう。導入検討や他社ツールとの違い・比較について弊社のプロフェッショナルが喜んでサポートいたします。弊社のプロフェッショナルがコンサルティングいたします。今すぐお気軽にご相談ください。今すぐお気軽にご相談ください。10:00~19:00)いますぐ無料でお試しください。革新的な機能をお試しいただけます。Reserved.サイト内の記事・写真・アーカイブ・ドキュメントなど、すべてのコンテンツの無断複写・転載を禁じます。