‘Web製作’ カテゴリーのアーカイブ

フリー和文フォント「Noto Sans Japanese」

2014年7月20日 日曜日

和文フォントと言えば有料が多く、デザインに使えるフォントの種類の少なさに苦心したものですが、Google から凄いフリー和文フォントが登場しました。

ポイントは、ウェイト(文字の太さ)パターンが7つも存在する事。和文だけでなく英文も綺麗。Web 制作やデザインに幅広く使えそうです。インストールしておいて損はありません。

Google Noto Fonts

ウェブサイトのスマホ対応待ったなし

2014年2月8日 土曜日

既にネットサーフィンや、楽天等ネットショッピングを行う端末としてスマートフォンシェアが伸びてきている事はそう目新しい話ではありません。2014年は更にスマートフォンシェアが急増するのは確実。ウェブサイトのスマホ対応は急務と言えるでしょう。仕事でもスマホ対応サイトを作る事が多くなりました。

私もスマートフォンでニュースやブログを読みますが、スマホ対応してないと読まずに離脱という事が気づくとよくあります。

ウェブサイトをスマホ対応するには

1.一つの html でスマホ対応(レスポンシブデザイン)
2.スマホ対応 html を別に作ってユーザーエージェントで振り分ける。
3.WordPress なら WPtouch 等で簡易的に対応。

一つの html でスマホ対応(レスポンシブデザイン)

Android であろうが、iPhone だろうが、iPad だろうが、PCでも一つの html で対応する手法です。既に作ってしまっているサイトを作り変えるのは困難。

スマホ対応 html を別に作ってユーザーエージェントで振り分ける。

既に作ってしまっているサイトをスマホ対応するにはこれが無難かと。スマホサイトなら古いIEを気にせずにすむので、最新の CSS を遠慮無く使えるので作りやすいと思います。

参考:スマホサイトの作成・基本編 – ウェブデザインラボ

WordPress なら WPtouch 等で簡易的に対応。

WordPress プラグインの WPtouch なら、プラグインを入れるだけで即座に簡易的にスマホ対応してくれます。ナビゲーションを追加したり多少ならカスタマイズも効くので、こちらで済ますのも手です。

スマホ対応の心がけ

・画像は width 100%。
・画像は極限まで軽く。画像最適化ツール等も使ってサイズを落とします。


私が今まで作ったサイトもスマホ対応しました。このサイトもそうですし、効果音素材サイトも。効果音素材サイトをスマホで見てどうするの?という疑問はありますが、結構なスマホアクセスがあるんですよね。

width100%でborder指定すると100%を越えて段落ちする

2014年1月25日 土曜日

例えば親要素を width 100% 指定して、中身を width 50% の2カラムを組んだ場合、横線も引きたいと思って border 指定すると段落ちしてしまいます。

これは、width 100% 指定していても、実際に表示されるのは width + padding + border-width の為です。

width をピクセルで絶対指定している場合、padding と border 分を width から引いて対処していたのですが、%の相対指定の場合そうはいきません。仮に width を49%と指定しても幅が足りなくなります。

こんな時に役立つものがありました。CSS3となりますが「box-sizing」というものがあります。これを使うと、width 指定を border と padding を含めたものにしてくれるのです。padding と border を差し引いて width を計算する必要もありません。

CSS3なので、IE6,7等未対応ブラウザがありますが、スマホ向けサイトなら十分に使えます。

参考

box-sizing-CSS3リファレンス