Recommendation:
Chrome
Firefox
Safari

Suport:
iPhone/iPod-touch
Retina display

12/06/01 NL version 13.1の特徴



特徴まとめ

・タブレット普及に向けたレスポンシブウェブデザイン
・ウェブフォントの導入
・演出とブラウジング共存の追求

version 13.1 より、レスポンシブウェブデザインを意識しております。
レスポンシブウェブデザインとは、昨今のスマートフォンやiPadといった”タブレット”の普及により定着してきた言葉で、ユーザの使っている端末に合わせて形を適正化していこうとするデザインの仕組みです。同じURLのウェブサイトを見ているのに、パソコンで見た時、iPhoneで見た時、iPadで見た時でその見た目が変わります。

いまご覧頂いている、このウィンドウのサイズを変えてみると…手軽にお試しいただけます。

当サイトではCSSのmedia命令で、実装しています。

参考:640未満のディスプレイで見た場合
	@media screen and (max-width: 639px) {
	  body#TP { background-image: none; }
	}
同様にApple社さんの Retina display で見た場合は高解像度の画像に差し替わり、鮮明な表示ができるようになっています。 メニュー等にウェブフォントを実装しています。ウェブフォントはGoogle社さんのフリーウェブフォントを利用しております。拡大したときに変化がよくわかると思います。 フォントが置かれているサーバーにアクセスするため、クライアントのメモリをあまり使わないかもしれませんが、応答待ちが増える可能性はありますが、デザインの幅は増えるものと思います。 jQueryにより、このページを開いたときは ふわ〜っ と表示されます。見た時に思わず見入るような、それでいてストレスゼロなデザインの兼ね合いを意識しました。 感性と理論を両立させるよう心がけています。

12/06/01 NL version 13.1の特徴


<繋ぎ目テストのため、同じ文章を繰り返して配置しています>

特徴まとめ

・タブレット普及に向けたレスポンシブウェブデザイン
・ウェブフォントの導入
・演出とブラウジング共存の追求

version 13.1 より、レスポンシブウェブデザインを意識しております。
レスポンシブウェブデザインとは、昨今のスマートフォンやiPadといった”タブレット”の普及により定着してきた言葉で、ユーザの使っている端末に合わせて形を適正化していこうとするデザインの仕組みです。同じURLのウェブサイトを見ているのに、パソコンで見た時、iPhoneで見た時、iPadで見た時でその見た目が変わります。

いまご覧頂いている、このウィンドウのサイズを変えてみると…手軽にお試しいただけます。

当サイトではCSSのmedia命令で、実装しています。

参考:640未満のディスプレイで見た場合
	@media screen and (max-width: 639px) {
	  body#TP { background-image: none; }
	}
同様にApple社さんの Retina display で見た場合は高解像度の画像に差し替わり、鮮明な表示ができるようになっています。 メニュー等にウェブフォントを実装しています。ウェブフォントはGoogle社さんのフリーウェブフォントを利用しております。拡大したときに変化がよくわかると思います。 フォントが置かれているサーバーにアクセスするため、クライアントのメモリをあまり使わないかもしれませんが、応答待ちが増える可能性はありますが、デザインの幅は増えるものと思います。 jQueryにより、このページを開いたときは ふわ〜っ と表示されます。見た時に思わず見入るような、それでいてストレスゼロなデザインの兼ね合いを意識しました。 感性と理論を両立させるよう心がけています。