iOS safariで画面下部のメニューバーが消えないようにする - Qiita
iOSのsafariでは、画面下部に標準メニューバーが存在しています。 しかし、このメニューバーの挙動が厄介で、 webサイトを開いた状態ではメニューバーが表示されているものの、 少し画面をスクロールすると、このメニューバーがひょいっと下に隠れてしまいます。ついでに画面上部のアドレスバーも小さくなってしまいますね。 サイト上でスクロールに応じた演出や、 position: absolute; や position: fixed; を使って表示位置をシビアに調整しないといけない演出をやりたいとき、 この仕様がとても邪魔になってしまいます。 iOS7までは、viewportにminimal-uiなるものを指定することで、 このメニューバーを 一切表示しないという選択肢があったのですが、 iOS8からはこのminimal-uiが廃止されてしまいました。 そこで、cssを使って メニューバーが隠れ
スマホで閲覧時にのみ電話番号画像をタップで電話がかけられるようにするjavascript（jQuery） : 森のコーディング
12月10 スマホで閲覧時にのみ電話番号画像をタップで電話がかけられるようにするjavascript（jQuery） カテゴリ:jQueryiphone/ipadサイト Tweet クライアントのサイトでは、大抵の場合、ヘッダーやフッターなどに電話番号画像がついたりします。 そして、こんな要望がでます 「スマホで見た時は電話番号をタップしたら電話がかかるようにしてよ」 これを実装はjqueryが便利です。 まずソースはこんな風になってるとします。 <header> <img src="img/tel.png" alt="0120111111" class="tel"> </header> jqueryから処理するためにclass="tel"をつけときます。 js側はこんな感じ。 $(".tel").wrap('<a href="tel:0120111111"></a>'); .wrapとい
スマートフォンとPCサイトやタブレット(iPad,Androidタブレット)でサイト表示を振り分けたい（参照元がスマホサイトの場合、リダイレクトしない） - ハリーかつき・旧技術ブログ
スマートフォンサイトとPCサイトを振り分け、さらにスマートフォンのユーザがPCサイトを見たい場合、再度スマートフォンサイトへのリダイレクトを防ぐという設定をしてみました。 /にPCサイトのindex.html、 /sp/にスマートフォンサイトのindex.htmlがある場合の例です。 function load(){ var ua =navigator.userAgent; var ref = document.referrer; var spsite = "http://****.com/sp/" //スマートフォンサイトのURLを記入してください if ((ua.indexOf('iPhone') > -1 || ua.indexOf('iPod') > -1 || (ua.indexOf('Android') > -1 && ua.indexOf('Mobile') > -1) )&
簡単なjQueryコードで動く、レスポンシブWebデザイン対応のカルーセルを実装する為の雛形っぽいやつを作成してみる
レスポンシブWebデザインに対応できる コンテンツスライダーのようなものの 雛形のようなものが欲しかったので、 自分で作成しました。テンプレなので 他の配布スクリプトのように親切な 設計じゃないですけど・・ レスポンシブWebデザイン対応のjQueryで動くカルーセルを作るための雛形っぽいのを作ってみました。全然大したもんじゃないんですがｗ 最初から小さい画面での表示も考慮しているのでプラグインではよくある機能も付けていません。 動作確認 デフォルトの状態を画面いっぱいに広がるようにしてありますので、Webサイトに応じてサイズを調整してください。クリックまたはタップでdiv要素がスライドします。 Sample01 ※responsivepxでレスポンシブWebデザインの対応を確認出来ます。 色々なデバイスで使うための雛形なので必要最低限の機能しかありません。※は理由です。 どんな画面サイズ
ResponsiveSlides.js · Responsive jQuery Slider & Slideshow
ResponsiveSlides.js v1.55 Simple & lightweight responsive slider plugin (in 1kb) ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slider using elements inside a container. It has been used on sites like Microsoft's Build 2012 and Gridset App. ResponsiveSLides.js works with wide range of browsers including all IE versions from IE6 and up. It also adds css max-width support for
15 Useful Code Snippets for Smartphone Website
2014年8月22日 Webサイト制作, スマートフォン スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい！ ↑私が10年以上利用している会計ソフト！ スマートフォンサイト用小技集 目次 いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントをiPhoneなどに切り替えてご覧ください！ 横幅をデバイスの幅にあわせる 文字サイズの自動調整をオフ リストのクリック（タップ）範囲を広げる 画面の幅にあわせてCSSを変える リンクテ
iPhoneサイト制作（スマートフォンサイト制作）最適化のために最低限必要なreset.cssをつくってみよう | HTML5でサイトをつくろう
iPhoneサイト制作（スマートフォンサイト制作）をする上で、ソースの無駄な記述を最低限に抑え、通信速度を上げることが「最適化」へとつながります。 スマートフォンサイト用に最適化したcssを制作する場合、reset.cssの記述を減らすことで、重複する命令を減らして、読み込みのスピードを上げることができます。 今回はスマートフォンサイトを制作する上で、最低限必要となるreset.cssの記述について紹介します。 iPhoneサイト制作（スマートフォンサイト制作）にreset.cssは必要？ そもそもreset.cssは各ブラウザ(IE・FireFox・safariなど)のブラウザ間のデフォルトのCSSの違いをなくすために読み込むものであり、必ずしもコーディングの際に必要となるものではありません。 PCサイトの場合は様々なブラウザやそのバージョンによって独自のデフォルトスタイルがあるため、r
PC版とスマートフォン版サイトを自動で切り替える方法 [ホームページ作成] All About
スマートフォンは、PC用に作られたウェブサイトでも表示できます。しかし画面サイズが小さいため、そのままの状態では読みにくい可能性があります。その場合の対策としては、 レスポンシブWebデザインを採用する スマートフォン専用サイトを作る などの方法があります。 ■更新や管理が楽なのはレスポンシブWebデザインだが…… 更新や管理の労力を考えれば、レスポンシブWebデザインを採用する方が楽でお勧めです。その方が、同じ情報を掲載したページを複数用意する必要がありませんし、新しい端末が登場しても(おそらくは)何もせずに対処可能ですから。 (参考) ブラウザの幅に合わせて表示を自動変更するレスポンシブ技12選 しかし、既存のPC用サイトがレスポンシブ化しにくいデザインな場合や、スマートフォンの特性を活かしたウェブサイトを用意したい場合では、PC版サイトとスマートフォン版サイトを分離する方が望ましいこ
![PC版とスマートフォン版サイトを自動で切り替える方法 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/38b8297bdad222f2431f20c9f03f3e35419e4f37/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F3%2F8%2F6%2F4%2F8%2F3%2F201510301459%2Ftopimg_original.png)
JavaScriptで振り分けてスマホサイト完成！ (1/5)
スマートフォンサイトの設計・デザイン、HTML5+CSS3による基本的なマークアップについて前回までに解説してきました。今回はページ内の要素にリンクを設定してスマートフォンサイトを仕上げます。 ページ内リンクを張る 今回制作しているスマートフォンサイトは、ページ内の各コーナーに移動できるナビゲーション（ジャンプボタン）を設置しています。まずはジャンプボタンにページ内リンクを設定しましょう。ページ内リンクは、PCサイトと同様、リンク先の要素にID属性を振り、a要素を次のように記述します。 <ul class="clearfix"> <li><a href="#access">アクセス</a></li> <li><a href="#tel">電話</a></li> <li><a href="#mail">メール</a></li> </ul> ボタン全体にリンクを貼る ページ内リンクを設定したサ
スマートフォンUSERAGENT一覧+モバイル版クローラ
以前、「スマートフォンUA一覧・2010夏」というエントリーを書きましたが、今後はこちらに統一しますので、ブックマーク等はこちらでお願いします。 自分用UA調査防備録 Luvpad（AD100）、LifeTouch Note（NEC）、Light-Tab（b-mobile）、XOOM（au）、OptimusPad（docomo）、京セラのデュアルディスプレイ搭載「Echo」（日本発売は未定ですが）あたりも調べないと。そう言えばPSPのゲームが出来る端末Xperia Playもついに発売ですか。欲しいなあ・・・。 参考URL 携帯向け開発者のための機種情報サイト ：： KEITAIALL：ケータイ・オール Android噂情報 | juggly.cn MOT：主にプログラム勉強メモ部屋 – 携帯用各クローラーのUSER AGENT Mobile-UserAgent検索システム – Happy
『スマートフォンサイトやアプリをデザインをするときに気をつけようと思ったこと。』
Xperia Ray楽しいです☆ ってただ遊んでるだけじゃないんですよ！！ …ということで、 ちっこいスマートフォン、Xperia Rayでサイトやアプリをいろいろ見て気になったこととか思ったことを、今後のデザインに活かすために忘れないうちにメモしておきたいと思います♪ あくまで私の主観ですのであしからず…。 (1)画面の一番下に固定でボタンを出す場合は横5個までならちゃんと押せる →一番下だと指を垂直にぴたっとクリックできるので5個ぐらいまでなら平気。 (2)一番下固定以外ならよほど縦に長いボタン（もしくはクリックできる領域が周辺にない状態）じゃない限り5個並べたら厳しい。せめて横4つまで。 →指の位置的にちょい斜めに押すことが多いし、上下もクリックできるエリアであればそこをさけるようにうまいこと狙わないといけないので4つぐらいまでじゃないと上手く狙えなくてイライラ (3)ようはAndr
WebサイトをiPhoneに対応させる -レスポンシブ・ウェブデザイン- - EC studio デザインブログ
このところのスマートフォンの広がりにより、デザイン部でもWebサイトのスマートフォン対応の必要性をひしひしと感じています。 実際のスマートフォン対応の取り組みとしてはこれからなのですが、その時のために従来のサイトをスマートフォンに対応させる方法、特に今回は閲覧環境に応じてページレイアウトを柔軟に切り替える、レスポンシブ・デザイン レスポンシブ・ウェブデザイン（Responsive Web Design）（ご指摘ありがとうございます。）に関していまさらながら調べてみたので、大枠的なことをふわっとまとめておこうと思います。 レスポンシブ・ウェブデザインって まず「レスポンシブ・ウェブデザインとはなんぞや」と言うところですが、 Webサイトのページレイアウトを閲覧環境（パソコン、iPhone、Android など）に応じて動的に変更させる手法で去年あたりからよく耳にするようになりました。 ブラウ
スマホサイト WEBデザイン集 AGT smartphone design gallery
スマホ向けWEBサイトデザイン集 AGT smartphone design galleryは、クオリティの高い、スマートフォン対応Webサイトを集めたギャラリーサイトです。
エックスサーバー サーバー初期ページ
このウェブスペースへは、まだホームページがアップロードされていません。 早速、エックスサーバー上へファイルをアップロードしてみましょう。 アップロードの方法などは、サポートマニュアルをご参照ください。
iOS5でのユーザーエージェント
iOS5でのユーザーエージェントさっそく取ってみた。 ■iOS3 Safari Mozilla/5.0 (iPhone; U; CPU iPhone OS 30 like Mac OS X; ja-jp) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7A341 Safari/528.16 ■iOS4 Safari Mozilla/5.0 (iPhone; U; CPU iPhone OS 435 like Mac OS X; ja-jp) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8L1 Safari/6533.18.5 Sleipnir Mozilla/5.0 (iPhone; U; CPU iPhone OS 435 like Mac
HTML5+CSS3の導入時に役立つ7つの設定
こんにちは、鴨田です。 個人的に仕事の大半はスマートフォン関連なので、 最近のマークアップはほとんど全てHTML5+CSS3で行っています。 とはいえ、PC向けのサイトではまだまだHTML4.01、XHTML1.0、CSS2.1を使用している場合が多いと思います。 ですので、今回はHTML5+CSS3を導入するにあたって、役立つと思う7つの設定について、書きたいと思います。 １．HTML5の初期テンプレート案 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>HTML5 初期テンプレート</title> <!-- reset.cssの設定 --> <link rel="stylesheet" media="screen" href="reset.css" /> <!-- Viewportの設定 --> <meta nam
[ Theme Switcher ] - 閲覧者がテーマ変更できる WordPress プラグイン
サイトの閲覧者が自由にテーマ変更できる Theme Switcher と言う WordPress プラグインを試してみました。 このプラグインを使うと、インストールしてある全てのテーマがリストに表示されるので、不要なテーマは削除しておいた方が良さそうです。 ## 使用中のテーマに設置する サイドバー ( sidebar.php ) のテンプレートに次のコードを追加します。 ### リストで表示する場合 次のようなコードを追加します。 表示はこんな感じです。 ### ドロップダウンメニューで表示する場合 次のようなコードを追加します。 表示はこんな感じです。 ## 似たような機能のプラグインがあったので覚え書き # Theme Switcher 0.5 : 今回使ってみたプラグイン。 ウィジェットには対応していないようなので、設置にはテンプレートの編集が必要。 Theme Switcher
レスポンシブウェブデザインについて | CSS Radar | For Frond End Developers
いまこの記事を読んでいるモニタのサイズは何インチだろうか？ iPhone、アンドロイドOS搭載スマートフォン、iPad、ネットブック、ノートPC、デスクトップPCと数年前なら思いもよらなかったモニタ/スクリーンサイズでユーザはウェブサイトを閲覧し始めている。 今後もさらに解像度が異なる環境が増えていくことは間違いない。 ではそのサイズのモニタごとに、スクリーンごとにデザインを作り、HTML/CSSを書き足していくのか？ その疑問への1つの回答がレスポンシブウェブデザイン(Responsive Web Design)。 多くの場合、CSS3で利用が可能になる予定のMedia Queriesを活用して、モニタ/スクリーンのサイズに合わせて最適なデザインを供給するデザイン/コーディング手法がレスポンシブウェブデザインと呼ばれている。 レスポンシブウェブデザインの例 Simon Colliso
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
webamb.com
WordPressのスマホ版テーマを作成しました。 » tamlog