Thu, March 30, 2017

フォントサイズの指定はCSS3の「rem」が便利そう

フォントサイズの指定は、相対指定のem、%、絶対指定のpxが一般的ですが、 CSS3の新しい「rem」という単位を使った指定方法をご紹介します。 emや%の相対指定の場合、親要素の影響を受け、子要素は複利計算されてしまい [...]

スマートフォン(iPhone / Android)でposition: fixedを実現する方法「iScroll.js」

スマートフォンで非対応(仕様のようです)のposition: fixedですが、「iScroll」使って実現することが出来ます。 ■iScroll デモはこちら(PCでは機能しません) ■使い方 ダウンロードしたiscr [...]

画像ギャラリー等、スマートフォン(iPhone / Android)用にフリック・スワイプ操作を実現するjQueryプラグインまとめ

画像ギャラリー等、スマートフォンサイトには必須のフリック・スワイプ操作を実現するjQueryプラグインをまとめました。 ■jquery.flickslide.js フリック操作でスライド。画像ギャラリーに最適なjQuer [...]

PC上でスマートフォン(iPhone / Android)サイトを確認するためのシミュレータいろいろ

■iPhoneシミュレータ Applelから配布されているiPhoneSDKに含まれているiPhoneシミュレータ。 導入方法参考記事 iPhoneシミュレータ – iPhoneをMac上で再現するソフト | Macのホ [...]

ユーザーエージェントによってPCとスマートフォン(iPhone / Android)を振り分ける方法いろいろ(PHP / JavaScript / .htaccess等)

PCでアクセスした場合はPC用サイトへ、スマートフォンでアクセスした場合はスマフォ用のアドレスに振り分けられるようにする方法です。 ■PHPによる振り分け ユーザーエージェントを判別して「iPhone」、「Android [...]

スマートフォン(iphone、Xperia、GALAXY等)のviewportの最適な指定方法とは? – 画面サイズ(画面解像度)の一覧も

iphone、Xperia、GALAXY等、スマートフォンの主要機種それぞれを考慮したviewportの指定方法です。 640px960pxを基準とし、画面サイズ320pxに合わせるように指定するのがよいかと思います。 [...]

WordPressをPCとスマートフォン(iPhone / Android)でテーマを切り替えるためのプラグイン

One Source Multi Use(ワンソース・マルチユース)ということで WordPressを使用したサイトでユーザーエージェントによりテーマを切り替える必要があり プラグインを検討してみました。 iPhone・ [...]

スマートフォン(iPhone / Android)サイトでjquery mobileを使おうとしている人に役立ちそうなサイトのまとめ

最近仕事でjquery mobileを使うことがあったので 参考にさせていただいたサイトをまとめました。 ■jQuery Mobile ダウンロードはこちら ■jQuery Mobile 日本語リファレンス 本家日本語リ [...]

W3Cが公開したHTML5ロゴがイケてる。

ロゴ、イケてる。 Tシャツ(22.5ドル)。 イケてる。 ウエブサイト用のバッジビルダー。 自サイトにも使えそうです。 イケてる。 提供されているロゴ素材は、ウエブサイトのほか、Tシャツやステッカーなどにも自由に使えるよ [...]

CSS3を使ったクリエイティブなテキストエフェクトチュートリアル集「8 Examples Of Stunning CSS3 Text Effects」

CSS3を使ったテキストエフェクトのご紹介です。 エンボスやグラデーションなど、Photoshopで作成したような効果を実現しています。 それぞれチュートリアルも用意されてあるので、見てみてください。 ■How to C [...]

HTML5Rocksがいつの間にかv2に。HTML5のデモンストレーションを提供するサイトHTML5 Studioも公開 – Google

Googleが公開しているHTML5まとめサイト「HTML5Rocks」がいつの間にv2になっていますね。 v2ではコンテンツが追加され、さらに多くのHTML5の機能が紹介されいるようです。 内容はこちら HTML5Ro [...]

HTML5のおさらい(続編)

以前ご紹介したW3G Blog Studiesさんのエントリーの続編になります。 ■続HTML5についてのおさらい – W3G Blog Studies 内容はこんな感じです。 hgroup要素 – 見出しの [...]