Q&A
問題の出ているクライアントの環境情報はありますか？（OS、ブラウザ種類とバージョン）
またクライアント側で試されたこと（キャッシュクリア、別デバイスや別種類のブラウザで確認等）はありますか？
また可能な範囲で問題画像周辺のHTML/CSSも開示ください。他の要素との関係が影響している可能性もあるので。
###前提・実現したいこと
お世話になります。
ウェブサイトを制作しクライアント様に確認頂いたところ、下記のようになるとスクリーンショットを頂きました。
始めて遭遇する現象で修正する目処がつかず困っております。
下記の様な状況になるにはどのような条件が考えられますでしょうか？
皆様のお知恵をお貸し頂ければと思います。
###発生している問題・エラーメッセージ
－－問題が起きている付近のHTML－－－－－－－－－
<body> <div class="gridContainer clearfix"> <!--見出し文言--> <div id="header" class="fluid"> <p class="mo_site_pr"><img src="xxx/xxx/image.svg" alt="" title="画像のテキスト"></p> </div> <!--グローバルナビゲーション-->
……以下省略
※画像名、パス、タイトルは代替です。
－－HTMLに関連しているcss－－－－－－－－－－－－
.gridContainer { width: 100%; clear: none; float: none; margin-left: auto; } .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } .fluid { clear: both; margin-left: 0; width: 100%; float: left; display: block; } .mo_site_pr { padding: 10px 0 0; text-align: center; }
－－－－－－－－－－－－－－－－－－－－－－－－－－－
作った画像は
↑こうなのですが
クライアント様が送ってくださったスクリーンショットは
↑このように画像の中に空白が生じてしまっておりました。
###試したこと
画像をSVG形式からPNG形式やJPG形式に変更してみましたが修正されませんでした。
###補足情報(言語/FW/ツール等のバージョンなど)
・HTML5/css3で制作しています。
・問題の画像はページの最上段に表示される画像です。
・他の画像ではこの問題は起きていません。
・画像はIllustratorから書き出しています。
・自分の閲覧環境（Windows10、Google Chrome52.0.2743.82m版/IE EDGE25.10586.0.0）では問題が再現できませんでした。
・ググって見ましたが、画像と画像の間に隙間が出来る。というのはみつかりましたが、画像そのものに隙間が生じる。という現象はみつけられませんでした。
ご返信頂きありがとうございます。
クライアント様が送ってくださったスクリーンショットからIE EDGEであることだけはかろうじて分かりました。
ご教授頂きました点、クライアント様にお願いしてみます。
有難うございます。
また、HTML,CSSを本文の方に付け足しました。原因となりそうな箇所がございましたらご指摘頂ければと思います。
コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。
ご指摘ありがとうございます。見辛い質問をしてしまい大変失礼いたしました。
コードブロックで囲みました。
例示画像は白背景に青文字になっていますが、HTML側の背景とは違う色の背景を持つ画像にした場合、隙間部分はどうなりますか？
ご返信ありがとうございます。
HTML背景は白のまま、画像背景色を（例えば黒）変更した場合ということですね。
クライアント様とはすぐに連絡が取れない為私の環境ではありますが、試してみます。（試し後SSとって本文にはりつけさせていただきます）
ありがとうございます。
【画像のテキスト】って一枚画像じゃないんですか？
ご返信ありがとうございます。
一枚画像です。
＞kei344様 背景色を変更しSSを張ると申しましたが、ご回答頂きましたコメントから、SVGデータ自体に問題であることが解りました為、SSの件はご容赦頂ければと思います。大変申し訳ございません。
回答2件
0
ベストアンサー
画像のヘッダ情報が誤って書き出されているのだとしたら
イラレのバグ、データの壊れかもしれません
試してほしいこと
「書き出した画像をフォトショで開いて保存し直す」
イラレの画像書き出しのヘッダ情報が間違っているのが原因ならこれで治るはずです
次にヘッダ情報が間違っているのが原因とわかった場合
「イラレでオブジェクトをCtrl+Aで全選択してカーソルキーで移動」
イラレの一部のオブジェクトの見た目と実体の座標がズレている症状の場合これで治ります
「必要なオブジェクトだけを選択ツールで選択して抜き出し別ファイルで作り直す」
イラレのファイルが壊れていたり、不可視の破損したオブジェクトのデータが原因の場合はこれで治ります
「イラレをSVGで保存して作り直す」
オブジェクトの付加情報が破損している場合の対処です、スタイルなどは全部なくなります
投稿2016/08/03 04:28
総合スコア7804
ご回答頂きましてありがとうございます。
ご指示頂きました方法の「書き出した画像をフォトショで開いて保存し直す」を試そうとしたところ、SVG形式で保存しなおせませんでした。（PNG形式、JPG形式にすることは出来ました）
その為ファイルデータの破損を疑い、「必要なオブジェクトだけを選択ツールで選択して抜き出し別ファイルで作り直す」 を行ったあと、作り直したSVGファイルをIllustratorで開いた結果、クライアント様のおっしゃる現象が再現できました。
KazuhiroHatano様のおかげでHTMLではなくSVGデータの問題である事が解り、また、SVGデータの確認方法も私なりに確立することが出来ました。
自環境では確認出来ない問題であっただけに、頭を悩ませておりました。
ご助言賜り、本当に感謝申し上げます。
問題のSVGファイルは
Illustratorでデザインされたデータを「アウトライン化して」アセットの書き出しから書き出しすることで、空白部分がなくなりました。
このファイルで一度クライアント様にご確認頂こうと思います。
0
画像パス見るとsvgファイルです。
gif,png,jpgといった1枚画像とはだいぶ異なるものです。
svgの問題として検索してみたほうが答えが見つかると思いますよ。
【追記】
ちょっと回答として不親切だったので追記しますね。
SVGをイラレから書き出したとありますので、SVGファイルの中を見ればSVGコードが書いてあるのがわかると思います。
このコードがもしおかしかったら、そのSVGからPNGなどに変換しても見た目は変わりません。
また、SVGはブラウザ側でそのコードを解釈して描画するので、古いブラウザや対応が完璧でないブラウザなどがあります。
クライアントの環境とSVGのコード、それらを確認してみないと何がおかしいかは特定できません。
一度そのあたりを踏まえて確認してみてください。
投稿2016/08/03 03:45
編集2016/08/03 03:48
総合スコア1298
ご回答頂きましてありがとうございます。
画像の一形式と思ってSVGファイルを使用しておりました。恥ずかしい限りです。
SVGファイルの中身を確認してみます。
また、クライアント様から閲覧環境の詳細を頂けていない状態ですので、
併せて確認をとってみたいと思います。
NatsumiOki様のおかげで、SVGデータがただの画像ではないという事がよく解りました。
問題のSVGデータを秀丸で開いてみましたところ、クライアント様のおっしゃる空白位置でタグが挿入されており、恐らくこの部分が私の環境とクライアント様の環境とで違うレンダリング結果となって見えていたのかと思われます。
KazuhiroHatano様宛のお返事と重複してしまいますが、
問題のSVGファイルは
Illustratorでデザインされたデータを「アウトライン化して」アセットの書き出しから書き出しすることで、空白部分がなくなりました。
このファイルで一度クライアント様にご確認頂こうと思います。
ご回答頂きまして、本当に有難うございました。
あなたの回答
tips
プレビュー
