• スポンサーリンク

• スポンサーリンク

概要

・ブラウザ上できれいな円を表示したいので色々試行錯誤。
・今回はCSSを利用したけど、レスポンシブだと円の大きさや中のフォント位置・サイズなどを色々なウインドウ幅で調整しなくてはいけないので色々面倒。
・良い方法あれば教えて下さい。
・【8/31追記】SVG形式で画像を配置するか、PNGの書き出し方法が悪いとの指摘あり。両方とも下記に結果を追記しました。結論的にはPNG書き出し時の色のビット数を8から24に変更するだけで解決でした。また、SVGファイルも有効なようです。IE対応を考えるとレスポンシブで画像サイズを変化させる際はSVGが良いかもしれません。

各種方法による表示例(ここのセクションはHTMLで記述したものが表示されています。末尾に主なブラウザでのスクリーンショット掲載)

デモサイト：モバイルで表示出来ない場合はこのデモサイトを御覧下さい

https://www.nakamurayuji.com/demo/circle.html

100*100画像(PNG-8)をCSSで100*100表示

・おそらくどんなブラウザでも外周にジャギーが出ていると思います。

500*500画像をCSSで100*100で表示

・おそらく、Chrome等ではなめらかな画像表示になっていますが、Internet Exploler11(Android4.1.1でも？)では外周にジャギーが出ていると思います。

CSSで100*100の円を表示

・おそらく、CSS3対応であればどんなブラウザでもなめらかな画像表示になっていると思います。

【追記】100*100画像(PNG-24)をCSSで100*100表示

・これでジャギー修正出来てるっぽいですね！

【追記】SVG方式の画像をCSSで100*100表示

・これでジャギー修正出来てるっぽいですがテキストが乱れます。

【追記】SVG方式(テキストはアウトライン化)の画像をCSSで100*100表示

・これでジャギー修正出来てるっぽいです。テキストも画像化した上でSVG出力しているので大丈夫です。

実装のポイント・経緯・説明

・あるblock要素の右上に「Product」アイコンを100*100の大きさで表示したい
・アイコンは、そのblock要素のafterないしはbefore擬似要素で挿入。
・アイコンは、当初100*100の画像で配置したが、外周のジャギーが目立ってしまう(【追記】PNG8で画像作成しておりましてこれが原因かと)
・そこで、500*500の画像を作成したところ、Chrome等では問題ないが、Internet Explolerでジャギー改善されず
　参考：IE9では大きな画像を縮小表示させるとジャギーが発生しますが、何か対策は存在しますか。 – マイクロソフト コミュニティ
・最終的には、border-radius等を使用したCSSで円を描きました。
　参考：The Shapes of CSS
※今回、フォントは、Webフォントとしても使用できる「Google Fonts Oswald」を使用しています(本音は日本語でも美しく表示したいのですが・・・)
・【追記】数名よりアドバイスを頂き(有難うございます！)、PNG書き出し方法が良くないのでは？という指摘と、SVGファイルを使用したら、というサジェストあり、試してみました。
・【追記】100*100画像をイラストレータ「Web用に保存」で「PNG-8」ではなく「PNG-24」で保存し、配置したところ、ジャギーは見えない。
・【追記】テキスト部分はアウトライン化した上で、SVGファイルを作成し、配置したところ、ジャギーは見えない。※テキスト部分のアウトライン化を行わないとテキストが乱れます。

コード

100*100画像(PNG-8)をCSSで100*100表示

●HTML

<div class="small3128">
</div>

●CSS

.small3128 {
position:relative;
display:block;
width:280px;
height:200px;
border:red 1px solid;
background-color:#447;
}

.small3128:before {
position:absolute;
content:'';
right:-5%;
top:-5%;
display:block;
width:100px;
height:100px;
background: url('https://www.nakamurayuji.com/wp-content/uploads/product100.png'); /* 100*100 */
background-size:contain;
background-repeat:no-repeat;
z-index:10;
}

500*500画像をCSSで100*100で表示

●HTML

<div class="large3128">
</div>

●CSS

.large3128 {
/* small3128と同じ */
}

.large3128:before {
background: url('https://www.nakamurayuji.com/wp-content/uploads/product500.png'); /* 500*500 */
/* 他はsmall3128と同じ */
}

CSSで100*100の円を表示

●HTML

<div class="css3128">
</div>

●CSS

.css3128 {
/* small3128と同じ */
}

.css3128:before {
position:absolute;
content:'Product';
line-height:104px;
text-align:center;
font-size:26px;
color:white;
font-family: 'Oswald', sans-serif; /* Google Web Font 利用 */
right:-5%;
top:-5%;
display:block;
width:100px;
height:100px;
background-color:#ed8f25;
background-size:contain;
background-repeat:no-repeat;
z-index:10;
border-radius:50px;
}

【追記】100*100画像(PNG-24)をCSSで100*100表示

●HTML

<div class="small3128-24">
</div>

●CSS

.small3128-24 {
/* small3128と同じ */
}

.small3128-24:before {
background: url('https://www.nakamurayuji.com/wp-content/uploads/product100-24.png'); /* 100*100 */
/* 他はsmall3128と同じ */
}

【追記】SVG方式の画像をCSSで100*100表示

●HTML

<div class="svg3128">
</div>

●CSS

.svg3128 {
/* small3128と同じ */
}

.svg3128:before {
background: url('https://www.nakamurayuji.com/images/product.svg'); /* SVG */
/* 他はsmall3128と同じ */
}

【追記】SVG方式(テキストはアウトライン化)の画像をCSSで100*100表示

●HTML

<div class="svg3128-outline">
</div>

●CSS

.svg3128-outline {
/* small3128と同じ */
}

.svg3128-outline:before {
background: url('https://www.nakamurayuji.com/images/product-outline.svg'); /* SVGテキストアウトライン化 */
/* 他はsmall3128と同じ */
}

各種方法による表示例(ここのセクションは主なブラウザでのスクリーンショットを掲載しています)

Mac-Chrome

Mac-Safari

Windows7-IE11

Windows7-Firefox

当記事の内容は、上記以外も以下実機・シミュレータで目視確認しています(2015.8.31現在)

Mac実機-Chrome、Safari、Firefox
iPhone4S実機-Safari縦、横
Windows7実機-IE11、Chrome、Firefox
Google Nexus S-4.1.1(AndroidシミュレータGenymotion)縦、横
Google Nexus 4-5.1.0(AndroidシミュレータGenymotion)縦、横

最後に

・画像表示に関して思わぬ落とし穴で対処するのに半日は費やしました。
・でももしかしたら画像作成を工夫することで、もっと簡単な方法があるのかも？→【追記】あった！しかも基本的なことでした。
ーーーーーー

• スポンサーリンク