ブログBlog

また、久しぶりにブログを掲載させて頂きます。今回は、ブラウザ間の表示の差分についてです。

Webサイト制作を実施していくと、ブラウザのHTMLやCSSの仕様の解釈の違いや不具合等で表示が異なっていたりすることがたまにあります。

特に、Google ChromeのDebug機能は非常に便利なので、Google Chromeをベースとして開発と動作検証を進めていくと、ChromeのiPhoneの動作をシミュレートする機能で動作検証する形になります。

当然、その後、iPhoneなどの実機で、Safariのブラウザを使って評価試験をしていくわけですが、仕様が異なり表示が異なっていたりするわけです。

このSafariでの実機評価を怠ると、お客様の方から、PCとスマホで見え方が異なっているとご指摘を受けてしまいます。

Google ChromeとMicrosoft Edgeは同じ表示なのに、Safariのブラウザで見た場合だけ、表示が異なるという事が結構あります(ネット情報を見ても結構出てきますね。)

この辺りは、仕様の解釈の違いなどもあるので、ブラウザの良し悪しはさておき、現場としては表示を合わせなければなりません。

Google Chrome Microsoft Edge Safari

今回は、弊社で確認した差分について、いくつか紹介したいと思います。

1.「display:inline-flex」 使用時の注意

inline-flexは、幅を指定しなくても勝手に中身依存の幅になることができるinline-blockの性格とflexの性格を持った万能な要素です。div要素で使い、その子供にimgタグを使いちょっとしたアニメーション(画像の拡大)で使っていたところ以下の事象に遭遇しました。

事象の発生するHTML文

<div class=”scale”>     <img src=”./img/thumbnail.jpg” alt=”画像拡大”> </div>

事象の発生するCSS文

.scale{     display:inline-flex;     overflow:hidden; } .scale img:hover{     transform:scale(1.1);     transition-duration:0.5s; }

本内容は、子要素のimgタグに指定されている画像の大きさに合わせて表示を行い、マウスカーソルがその上をhover(その上に乗ったら)したら、0.5秒の速度で1.1倍で画像を拡大表示するという文です。

遭遇した事象

Google Chrome、Microsoft Edgeでの表示や、動作に問題はございませんでしたが、Safariで確認すると、上記形式でinline-flexを使用すると、画像が、かなり縦に間延びするという事象が発生します。

修正方法

以下のCSS文のように、display:inline-flexの指定に合わせて、justify-content、align-itemsを使い、子要素の表示方法を指定すると改善します。

事象の発生するCSS文

.scale{     display:inline-flex;     overflow:hidden;     justify-content:center;     align-items:center; } .scale img:hover{     transform:scale(1.1);     transition-duration:0.5s; }

2.電話番号/FAX番号/電話番号っぽい数字の羅列に<a>タグが入る

電話番号やFAX番号、電話番号っぽい数字の羅列(例えば住所の番地記載等)に、色を指定していないのにSafariの時にだけ色が勝手に変わっていたならば、本件が原因です。

Safariのブラウザでは、電話番号っぽい数字の羅列を見つけると、勝手にaタグを入れて、電話番号をリンク先にする機能があります(スマートフォンから電話を掛けられるようにする機能)。

<p class=”faxno”>FAX:012-456-7890</p>

上記を記載するとSafariは電話番号と認識し、aタグを自動挿入します。なお、Google Chromeや、Microsoft Edgeでは何もしません。

<p class=”faxno”>FAX:<a href=”tel:0124567890″>012-456-7890</a></p>

そのため、羅列された番号の要素がaタグ内に変わるため、記載しているCSSの内容によっては色などが変わってしまうわけです。

修正方法

あらかじめaタグが挿入される事を前提に、以下のように影響を与えないようなCSS文を追加しておきましょう。事前に本処理を入れておくことで色が変わらないように設定する事ができます。

.faxno a{     color:(色を指定)     text-decoration:none; }

3.テキストのグラデーションが機能しない。

親要素にグラデーションを指定したが子要素へ引き継がれず、Safariの時だけテキストのグラデーションが利用できず、何も表示されない。

HTML文

<h2 class=”title”>     <p>         <span class=”linectl”>グラデーション文字</span>     </p> </h2></span

CSS文

.title p{     background:linear-gradient(to right, #cc9726, #8a5c01,#c4b491);     -webkit-background-clip: text;     background-clip: text;     color:transparent; } .linectl{     display:block;     text-align:left; }

修正方法

この場合は、テキストグラデーションを子要素に指定して頂ければ解決致します。

.title p{ } .linectl{     display:block;     text-align:left;     background:linear-gradient(to right, #cc9726, #8a5c01,#c4b491);     -webkit-background-clip: text;     background-clip: text;     color:transparent; }
 

弊社で確認したブラウザでの表示の違いと、その対処方法について掲載させて頂きました。何かのお役に立ててれば幸いでございます。

WEB DESIGN

RishunTradingでは、日本にはないコンセプトや高いデザイン性をもったヨーロッパ製品の輸入販売、及び、Webサイト制作事業などをおこなっております。

「全てお任せ!ホームページ制作」は、ドメイン取得からサーバー設定、レスポンシブルデザイン(スマホ、タブレット対応)、SEO対策がすべて含まれたお得なホームページを制作するサービス商品です。

運用開始後に「Webサイト運用管理サービス(保守)」と組み合わせて購入しますと、メンテナンス、更新も含めてすべて弊社で実施しますので、お客様は安心して本業に集中する事ができます。

しかもなんと、「全てお任せ!ホームページ制作」は、¥99,800!で提供しております。

本業が忙しい中小企業様に大変ご好評を頂いている商品です。

  • 独自ドメイン取得

    独自ドメイン取得

  • サーバー開設&設定

    サーバー開設&設定

  • レイアウト設計

    レイアウト設計

  • レスポンシブルデザイン

    レスポンシブルデザイン
    (*1)

  • 検索エンジン最適化(SEO対策)

    検索エンジン最適化
    (SEO対策)

  • 場所Maps

    場所Maps

  • お問い合わせフォーム

    お問い合わせフォーム

  • SSL化

    SSL化

  • 各種SNS連携

    各種SNS連携

  • 運用マニュアル

    運用マニュアル

≫詳細はこちら

MENU