スマフォ・iPhone の記事一覧
![[CSS]-webkit-box-reflect による鏡面効果の設定方法とAndroid への対応方法](https://www.webantena.net/wp-content/uploads/2013/08/webkit-box-reflect.png)
CSS3 の -webkit-box-reflect プロパティを使って画像に「鏡面効果」を与える方法のご紹介です。
以前紹介させていただいた reflection.js のような Javascript を使う方法もありますが、SafariやChrome、iPhoneなどのスマホへの対応に限るものの、CSS だけで手軽に鏡面効果を演出できるので便利なプロパティだと思います。
続きを読む
![[IE]IE8 でCSS3 のMedia Queries が効かない場合の対処法](https://www.webantena.net/wp-content/uploads/2013/08/mediaqueries.png)
IE8 以下でもレスポンシブWEBデザインに対応させることができる css3-mediaqueries.js は便利なJavascript なのですが、「IE でMedia Queries が効かない…」という問題によく悩まされます。
原因不明のモノもありますが、よくブログでも紹介されている回避策と自身で実践してみた上での対処法も合わせて、今回はMedia Queries がIE8 で効かない場合の解決方法を以下にまとめてみました。
続きを読む
![[JS]スマホアプリのように左右からメニューをスライド表示できるjQueryプラグイン「mmenu」](https://www.webantena.net/wp-content/uploads/2013/07/mmenu.png)
スマホアプリのようにアイコンボタンをクリックして左右からメニューをスライド表示できるjQuery プラグイン mmenu のご紹介です。
オプションで色々カスタマイズができますが、まずは今回は mmenu の基本的な設置方法から使い方までをご紹介します。
続きを読む
iPhone でWEBサイトをブックマークして、ホーム画面にアイコンを設置する方法のまとめです。
今回はアプリのお話ではありませんが、「アイコン画像をどのサイズで用意すれば良いのか？」を考える上で、iPhone、iPad、Android アプリのアイコン画像サイズのまとめ の記事でも紹介させていただいたアイコンサイズも参考にしています。
続きを読む
![[Mac]スマホサイトの確認に便利なiPhone用の無料シミュレータ「iPhoney」](https://www.webantena.net/wp-content/uploads/2013/04/iphoney.png)
スマホサイトを構築する上で厄介なのが「実機での動作検証」です。
細かい動きは実機を使って厳密にチェックする必要がありますが、レイアウトが崩れていないか？のチェックをするのであれば、iPhone用の無料シミュレータ「iPhoney」を使うと便利です。
続きを読む
iPhone、Android のアプリやスマホサイト向けに「どのサイズのアイコン画像を用意すれば良いのか？」を調べていると、各ブログで色々紹介されていましたので備忘録としてまとめました。
続きを読む
![[スマホ]iOS や Android でリンクタップ時のハイライト表示を変更する方法](https://www.webantena.net/wp-content/uploads/2013/04/webkittaphighlightcolor.png)
スマホサイトでリンクをタップすると、iPhone（iOS）ならリンク周りにグレーの影が、Android であればリンクの周りにオレンジの枠 が表示されると思います。
このグレーの影やオレンジの枠（ハイライト表示）をCSS の -webkit-tap-highlight-color で無効にしたり、ハイライトカラーを変更する方法をまとめました。
続きを読む
![[CSS]iPad、iPhone 5 向けレスポンシブWEBデザインに必要な Media Queries のまとめ](https://www.webantena.net/wp-content/uploads/2013/03/iphoneipad.png)
レスポンシブWEBデザインへの対応で頻繁に使うCSS の Media Queries ですが、条件分岐のやり方をよく忘れるので整理しました。
「iPad」「iPhone」「iPhone 5」の端末別に加えて、「ブラウザ幅」での条件分岐もまとめています。
続きを読む
WEBサイトを閲覧する環境もだいぶ変わってきまして、
今ではPC以外のスマートフォン、iPadによるアクセスも増えてきました。
今までPCでの閲覧に適したサイトデザインだったので、iPadやiPhone見ても正常に見えないよ!!ということもあると思いますが、それぞれのデバイス別に最適化するのもちょっと面倒…
続きを読む
![[CSS]スマホサイトで、端末を横にしても文字サイズを拡大させない方法](https://www.webantena.net/wp-content/uploads/2012/12/webkittextsizeadjust.png)
iPhone など向けにスマホサイトを作っていると「端末を横にすると、文字が拡大表示されちゃう！」と困った経験があるかもしれませんが、
CSS の -webkit-text-size-adjust:100% を使って端末横回転時の文字拡大表示を防ぎます。
続きを読む
meta viewport は、デバイスに応じてウィンドウの幅や高さを調整できたり、画面を拡大縮小率を調整したりと、表示領域を設定する上で重要なメタデータです。
特に、スマートホンやiPad などのタブレット向けにサイトを構築したり最適化する際に、<head> 内に meta viewport を設定しておかないと上手く収まってくれません。
続きを読む
PCやスマート本など、端末別にWordPress のテーマを分けてみたいと思っていところで、便利なプラグインを発見しました。
スマフォやiPad、ガラケーなどの端末別にテーマを切り替えることが可能なWordPress プラグイン Multi Device Switcher です。
設定も簡単ということで、自分が運用しているWEBサイトに導入してみようかなと思い、ちょっと触ってみました。
続きを読む
