Androidのviewportに対する数値指定
Androidのviewportに対する数値指定 本日はjQuery Advent Calendar 2013がお休みなのでAndroid Advent Calendar 2013の6日目でブログを書いてみます。 Android端末はviewportに対する数値指定が無視されるといのは有名ですが現状のバージョンではどうなっているか調べてみました。 まず、viewportに対する数値指定とは以下のようにviewportを指定することで任意のviewportが指定できる機能でiPhoneやiPadでは問題なく動作します。 <meta name="viewport" content="width=数値"> まずAndroid2.3.6(GALAXY S2 LTE)で調べたところ、数値にどのような値を指定してもviewportは320に固定されます。これは「width=devce-width」が採
CSS3のFlexboxでパーセントで指定された要素を天地左右の中央に配置する
CSS3のFlexboxでパーセントで指定された要素を天地左右の中央に配置する ネタ元：[CSS]パーセントで指定された正確なサイズが不明な要素を天地左右の中央に配置するスタイルシートのテクニック | コリス これを読んでちょっとトリッキーだな。CSS3のFlexboxを利用すれば簡単にできるのにとおもったので紹介しておきます。 次のようなHTMLがあったとして、 <div id="outer"> <div id="inner"></div> </div> 次のようにCSSを指定すると天地左右中央配置が可能です。 #outer{ height:100%; display:-webkit-box; -webkit-box-pack : center; -webkit-box-align : center; } #inner{ width:50%; height:40%; background
Androidと-webkit-tap-highlight-color
Androidと-webkit-tap-highlight-color Androidと-webkit-tap-highlight-colorの関係がよくわからず色々と悩んでいたのですが、ひと通りの結論が出たので紹介します。 そもそも-webkit-tap-highlight-colorってなによ iPhoneなどのスマートフォンでa要素をタップしたときにハイライトさせるプロパティです。ハイライトと言ってもiPhoneの場合は半透明のグレーのレイヤーが表示されるのですが。 サンプル このレイヤーの色を-webkit-tap-highlight-colorで制御することが可能です。 a { -webkit-tap-highlight-color: rgba(0,0,215,0.40); } このようにするとハイライトカラーが半透明な青色に変わります。 サンプル ただし、このように指定してもA
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ AndroidやiPhoneなどのスマートフォンではHTML,CSS,JavaScriptにバグが多くてコーディングが大変になります。そこでバグを紹介しているサイト、記事をまとめてみました。(中にはバグではなく仕様なものもあるかもしれません) iOS 8.4.1の:hover問題 iOS 8.4.1で:hoverを指定していると1タップでページ遷移できない問題 【STINGER5】AndroidのChromeで＆nbsp;が「・」になってる気がする | ビビビッ を に変更すると直るとのこと。 Mobile Safari 8でposition: fixedした擬似要素が完全に位置が固定されない - Weblog - Hail2u.net Mobile Safari 8でposition:
スマホサイト案件の見積もりについて
スマホサイト案件の見積もりについて 「Android案件の見積り」や「スマホ案件の見積もりについて」を受けて、アプリではなくHTML+CSSでつくるスマホサイト制作の見積もりではまりやすいポイントをまとめています。 HTML+CSS構築ではPCの0.７倍くらいの単価 スマホサイトはPCより小さいのでHTML+CSSの構築コストも安くみます。ただ、CSS3で作ったほうが良いところで画象の切り出しより手間がかかることもあります。ならすとページ単価はPCの0.７倍くらいの感じじゃないでしょうか？ 検証コストは増大 対応端末が多く検証コストはPCと比較して増大します。iPhone3G、iPhone3GS、iPhone4、iPhone4Sの中から2端末ぐらい(iOS4.x系とiOS5系)。Android2.2、Android2.3から売れてる端末で2端末ぐらい検証するのがよいでしょう。(場合によって
Androidの画面サイズとDPI
Androidの画面サイズとDPI 前回、Androidではtarget-densitydpiでviewport調整を行えばよいと書きましたが、実際にどのようなサイズになるか具体的な説明をしたいと思います。 ディスプレイにおけるインチサイズ ドコモのGALAXY Sではディスプレイサイズが約4.0インチと発表されています。1インチが2.54cmなので約4.0インチは約10.16cmです。ディスプレイにおけるインチサイズは画面の対角線の長さなので次のような画面サイズになります。 ディスプレイ種類 GALAXY Sのディスプレイ種類はワイドVGAです。これはディスプレイの縦横比を表しています。wikipediaによるとワイドVGAの縦横比は15:9です。 ディスプレイサイズ 縦横比からピタゴラスの定理より実際の縦と横のインチサイズが算出できます。 対角線の比率をXとすると次の方程式が成り立ちま
Android端末のdevicePixelRatio
Android端末のdevicePixelRatio WebKit系のブラウザではdevicePixelRatioというプロパティが定義されています。これは画像1pxを実際のデバイス上で何pxとしてレンダリングを行うかというもの。 CSSでdevicePixelRatioを特定できる -webkit-min-device-pixel-ratioなどは iPhone4のRetina Display対応などで一時期注目されましたね。 【Webアプリ】iPhone4 で画像をきれいに表示する色々な方法【試行錯誤編】 | KAYAC DESIGNER'S BLOG JavaScriptでは次のように取得できます。 window.devicePixelRatio そこで、Android端末のdevicePixelRatioがどうなってるかTwitterで色々な方に協力いただき調べてみました。
[ASCII.jp]jQueryでタブパネルを作るチュートリアル
[ASCII.jp]jQueryでタブパネルを作るチュートリアル ASCII.jpの連載「Web制作の現場で使えるjQuery UIデザイン入門」で第15回 jQueryでタブパネルを作るチュートリアルが公開されました。 jQueryを利用したタブパネルやAjaxを利用した更新システムについて解説しております。興味があるかたは是非ごらんになってください。 関連エントリー jQueryでアコーディオンパネルUIを自作する jQueryで作る画像ギャラリーのチュートリアル CSS3のセレクターで作るストライプテーブル jQueryによるアニメーションエフェクトの基本 jQueryでAjaxを利用する基本チュートリアル jQueryによるフォームのデザインの基礎 jQueryのイベントをチュートリアルで学ぶ サンプルで学ぶjQuery：(X)HTML/CSSを操作する 初めてのjQuery：セレ
ユーザビリティテストツール『Silverback』
ユーザビリティテストツール『Silverback』 先日、SwapSkills+Plus × WDE-expressで行われた「ユーザーテスト：ワークショップ」に参加してきました。 ユーザビリティテストツール『Silverback』を利用してのワークショップだったのですが、このSilverbackなかなか面白いソフトです。 基本的にはユーザーの操作を記録する画面キャプチャのソフトなのですが、MacのiShightを利用してユーザーの表情と音声も同時に記録します。 ユーザーにはつまずいている操作や悩んでいるところを発言してもらうことにより、後で見返した際に客観的にサイトの問題点を見返すことが出来ます。 ワークショップでは「モデレーター」「スクリプター」「被験者」に分かれて行われました。 モデレーターが進行係で、被験者に対してタスクの説明をし、被験者がつまづいているようだったら何につまづいてい
VMware Player2とVMWare Toolsのインストール
VMware Player2とVMWare Toolsのインストール VMware Serverの調子が良くないので開発環境をVMware Player2に変更しました。 インストールと開発環境構築の備忘録です。 まずは、公式サイトよりダウンロード。名前などを入力すればダウンロードが可能です。 ダウンロードしたexeファイルを実行してインストール。すでにVMware系のソフトがインストールされている場合はアンインストールしてからインストールします。 ここまでは、簡単。ここからが少しややこしい。 VMware Serverは仮想HDDを作成してOSイメージからインストールが可能でしたが、VMware Playerでは仮想HDDの作成が出来ません。 EasyVMX!などで仮想HDDのvmxファイルを作成します。 Virtual Machine Nameに任意の名前 Select GuestOS
8のjQueryのすごいTIPS
8のjQueryのすごいTIPS 原文：8 awesome JQuery tips and tricks 微妙なTIPSもあるのですが、役に立つのもあるのでご紹介。 target="_blank" のリンクの作成 XHTML 1.0 Strict ではtarget=blank属性が利用できない。そこでjQueryを利用して別ウィンドウを開く方法を紹介しよう。 $('a[@rel$='external']').click(function(){ this.target = "_blank"; }); <a href="http://www.lepinskidesign.com.br/" rel="external">lepinskidesign.com.br</a> [to-R補足] 実際に利用する際はjavascript部分を$(function(){...})などで包む必要があります。[
CentOSの開発環境を整える
CentOSの開発環境を整える VMware Server上にCentOSをインストールしましたので開発環境を整えていきたいと思います。 CentOSが起動したらユーザ名を入力して「Enter」、パスワードを入力して「Enter」を押してログインします。 ログインしたら「アプリケーション」から「アクセサリ」、「GNOME端末」を選択します。これでCentOSをコマンドラインから設定を行うことができます。 以下のコマンドでrootユーザでログインし直します。 # su パスワードはインストール時に設定したrootユーザーのパスワードを入力します。 次にyumをインストールします。 # yum -y install yum-fastestmirror 色々と表示された後に「Complete!」と表示されればOKです。 次にyumをアップデートします。結構時間かかります。 # yum -y up
VMware ServerにCentOSをインストール
VMware ServerにCentOSをインストール VMware Serverのインストールは完了しましたのでCentOSをインストールしてみたいと思います。 CentOSは、Red Hat Enterprise Linuxと互換性を持ったLinux OSです。 まずはCentOSのDVDイメージをダウンロードしてます。 http://ftp.riken.jp/Linux/centos/5.2/isos/i386/CentOS-5.2-i386-bin-DVD.iso サイズが大きいので結構時間がかかると思います。 VMware Serverのインストールと仮想マシンの作成は終了していますので、作成した仮想マシンにCentOSをインストールしていきたいと思います。 CentOSのインストール まずはVMware Serverを起動します。 左メニューで作成した仮想マシン(今回はCent
VMware Server のインストール
VMware Server のインストール VMware Server はサーバ仮想化を行うためのソフトウェアです。WindowsなどのOSに仮想マシンを作成し、サーバーをインストールすることが可能です。 Windows VISTA上にCentOSをインストールするまでの備忘録です。 ダウンロード ダウンロードページよりダウンロードするVMware Server のバージョンを選択します。 バージョンは最新の2.0と1.x系がありますが、個人的には情報が多く安定している1.x系のほうが、まだ使いやすいのではないかなと思います。 確認画面で「Yes」を選択。 今回はWindows VISTAにLinuxをインストールしようと思うので、ダウンロードするファイルは「VMware Server for Windows Operating Systems」 結構なサイズなのでダウンロードにはそれなり
viの基本的な使い方
viの基本的な使い方 サーバーの設定を変更する際に利用するviエディタの基本的な使い方です。 コマンドラインから vi 編集したいファイル で編集を開始することができます。 [i]を入力すると文字の挿入が可能になり、「Esc」を入力するとノーマルモードに切り替わります。 ノーマルモードでは viの終了 :q 保存 :w 保存せずに終了 :q! 行番号の表示 :set number などがよく利用するコマンドです。 また、 [w]次の単語に移動 [0]行頭に移動 [^]タブや空白を除くカーソル行の先頭に移動 [$]行末に移動 でカーソル位置の変更 [y 移動先]移動先までコピー [yy]カーソル行の1行コピー [(行数)yy]指定した行数だけコピー [p]でペースト [u]直前のコマンドの取り消し [Ctrl + r]直前のコマンドの取り消しの取り消し [? (検索語)]前検索 [/ (検索
jQueryのコードを良くする5つのTIPS
jQueryのコードを良くする5つのTIPS 5 Tips for Better jQuery CodeでjQueryのコードを良くする5つのTIPSが紹介されています。 DOM中にデータを保存できるdataメソッドを使おう $('selector').attr('alt', 'this is the data that I am storing'); // then later getting that data with $('selector').attr('alt'); 「alt」などのHTMLにデータを保存しておくと後で取り出せなくなってしまうことがあるから良くない。 $('selector').data('meaningfllname', 'this is the data I am storing'); // then later getting the data with
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
