Android4系でoverflow: hiddenとposition: fixedで位置がおかしくなるバグ
Android4系でoverflow: hiddenとposition: fixedで位置がおかしくなるバグ 表題のとおりですが、少しわかりにくいので詳しく説明します。 このバグはAndroid4.0とAndroid4.1のブラウザで発生を確認しました。ChromeやiPhoneのMobile Safariでは発生しません。 ページ内にposition: fixedした要素(A要素)が存在し、別の要素(B要素)にoverflow: hiddenを指定しています。B要素にはwidth:100%やwidth:autoでウィンドウ幅いっぱいになるように設定しています。そしてB要素の内側にはブラウザ幅を越える要素を配置します。 HTML/CSSはこんな感じ。 <div id="a"></div> <div id="b"><div></div></div> #a{ width:100%; heigh
Firefox5におけるnth-childセレクタのバグ
Firefox5におけるnth-childセレクタのバグ すごい勢いでアップデートを進めるFirefoxですが特定のバージョンにのみ含まれるバグなどもあってかなりの製作者泣かせです。 次のようなHTMLがあり、 <dl> <dt>リスト1</dt> <dd>リスト1の内容</dd> <dt>リスト2</dt> <dd>リスト2の内容</dd> <dt>リスト3</dt> <dd>リスト3の内容</dd> <dt>リスト4</dt> <dd>リスト4の内容</dd> </dl> 次のようなセレクタを指定した場合、 dt:nth-child(3){ color:red; } 通常は「<dt>リスト2</dt>」が赤色になるのですが、Firefox5だけ「<dt>リスト3</dt>」が赤色になります。nth-of-typeセレクタと同じ動きですね。Firefox4やFirefox6ではちゃんと「
スマートフォンサイトをデザインする上で知っておくべき10のTIPS
スマートフォンサイトをデザインする上で知っておくべき10のTIPS iPhoneやAndroidのスマートフォンの仕様を知らないけどデザインしなくちゃいけなくなったというデザイナーさんに知っておいてもらいたい10(+1)のTIPSです。 1.実機で確認する 当たり前のことですが作成したデザインを実機で確認して下さい。スマートフォンとPCでは目からの距離やDPIが違いますので、PCでは十分に見れたからといって実機で確認すると文字が小さすぎることなどがよくあります。書きだしたJPGをFTPでアップして確認してもいいですし、メールでスマートフォンに送って確認してもいいです。個人的にはDropboxで転送するのが手軽でおすすめです。 2.横幅は320pxもしくは640pxでデザインする スマートフォンでは基本横幅が320pxで表示されるのでデザインする際も320pxでデザインしましょう。ただ、Re
Androidの「target-densitydpi」でviewportの調整
Androidの「target-densitydpi」でviewportの調整 どうも色々調べているとAndroidのviewport調整はtarget-densitydpiというプロパティで行うのがよさそうです。 「target-densitydpi」はAndroid2.0以上で利用でき、表示時のdpi(dots per inch/1インチの中に何ドット表示するか)を指定できます。 <meta name="viewport" content="width=device-width;target-densitydpi=device-dpi"> device-dpiを指定すると画面解像度とディスプレイ表示が同じサイズになります。これでかなり直感的でわかりやすくなると思いますが、画像が多いデザインだととファイルサイズが気になるところです。 キーワード指定では「low-dpi(120dpi)」、
MacのAndroid エミュレータでサイト制作
MacのAndroid エミュレータでサイト制作 Mac OS X へのAndroid エミュレータのインストール方法です。Windowsはこちらを参照(Android エミュレータでサイト制作)。 Android エミュレータのダウンロードサイトよりMac OS X (intel)の「android-sdk_r10-mac_x86.zip」をダウンロード。 ダウンロードしたファイルを解凍してアプリケーションフォルダに移動、「/tools/android」をクリックしてAndroid SDK and AVD Managerを開きます。 左メニューの「Available packages」を選択し、「Android Repository」をクリック。ダウンロードできるAPIが表示されます。 必要なAPIを選択して「Install Selected」ボタンを押します。 Choose Packe
Safariの開発者メニューでスマートフォン開発
Safariの開発者メニューでスマートフォン開発 AndroidやiPhoneのスマートフォンのサイト作成を行う際にSafariの開発者メニューを利用すると便利です。 開発者メニューは環境設定の詳細タブから設定が可能 「メニューバーに"開発"メニューを表示」にチェックを入れることでメニューバーに開発者メニューが追加されます。 開発者メニューではユーザーエージェントの切り替えができるので、ユーザーエージェントで処理を変えている場合もSafariで検証が可能です。 iPhoneやiPod touch、iPadなどだけではなく「その他」から任意のユーザーエージェントも選べます。複雑なユーザーエージェント分岐を行っていなければ「Android」などと入力するだけでAndroid用の処理が実行できます。 また、Webインスペクタを起動することでFirebugに似たデバッグツールが利用できるようになり
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で色々な方に協力いただき調べてみました。
「 rel=
「 rel="canonical"」で重複コンテンツ対策 Google,Yahoo!,Microsoftの検索エンジン3社が新たに「 rel="canonical"」のサポートを開始しました。 これは一つのコンテンツに複数のURLが存在する場合、どのURLが正規のURL（検索エンジンにインデックスして欲しいURL）かを定義するための属性です。 たとえば、to-Rでは http://blog.webcreativepark.net/tag-seo.html http://blog.webcreativepark.net/cgi/mt/mt-search.cgi?tag=seo http://blog.webcreativepark.net/cgi/mt/mt-search.cgi?tag=seo&blog_id=1 などtagページは同じコンテンツで複数のURLからアクセスできる仕様になって
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
tableにおけるmarginの相殺
tableにおけるmarginの相殺 ネタ元：tableのmargin相殺 Firefoxのtableにおけるmargin相殺はちょっとややこしいので補足しておきます。 基本的に垂直方向の2つの要素にtable要素(display:table)が含まれる場合、marginの相殺は行われないです。 p{ margin-bottom:20px; } table{ margin-top:20px; } サンプル table要素にcaption要素が含まれる場合、table要素のmargin-topとcaption要素のmargin-bottomでmarginの相殺が行われます。 p{ margin-bottom:20px; } caption{ margin-bottom:20px; } table{ margin-top:20px; } サンプル Firefox以外のブラウザでは通常のブロック
JSONとJSONP
JSONとJSONP ネタ元：JSONについての勉強メモ：外部URLから呼び出せない。どうやったら・・・ JSONやJSONPを利用したJavaScriptでのデータをの取り扱い方です。 JSONの場合 JSONはJSONについての勉強メモで書かれているようにデータをオブジェクトとして記述しておく方法です。 var jsonData ={"users": [ { name: "hamu", age : 24, language:["XHTML" , "CSS"] }, { name: "h2", age:25, language:["PHP" , "Java"] }, { name: "hoge", age:26, language:["JS" , "jQuery"] } ]} とJSONを定義しておけば、 for(var index in jsonData.users){ documen
Firefox3でメイリオを指定するとinputのsizeが倍増する
Firefox3でメイリオを指定するとinputのsizeが倍増する Firefox3のデフォルトのフォントをメイリオに変更すると検索窓がグニョーンと伸びるよと教えていただきました。 検索窓は <input id="search" name="search" size="20" /> といたってシンプルなコード。 フォントの指定も font-family:sans-serif; と非常にシンプル。 font-family:"ＭＳ Ｐゴシック"; などに変更すると元の長さに戻ります。 font-family:"メイリオ"; などとすると同じように伸びます。(デフォルトのフォントをMS P ゴシックに変えても伸びてます) 解決策としては input にかかっているfont-familyを"ＭＳ Ｐゴシック"に変更するか、widthで明確に横幅を指定するかのようです。 というわけで、widthで
CSSのレイアウトテクニック - Faux Absolute Positioning
CSSのレイアウトテクニック - Faux Absolute Positioning ネタ元：CSSレイアウトテクニック"偽装絶対指定" 久々にCSSでの面白いテクニックですね。 Faux Absolute Positioningについて細かい説明は原文の解説にまかせるとして、かいつまんで説明すると、float方向のネガティブマージンとposition:relativeのleft(right):100%を利用して擬似的に自由配置するというもの。 これを利用するとfloatのみでは再現不可能だったレイアウトが可能になります。 例えば、メインカラムを先に記述して、後にサイド部分を記述するというマークアップの3カラムのリキッドレイアウト。 リキッドレイアウトの為、メインカラムを100%にして、サイド部分にfloatで入り込める領域を作成しなくてはいけないのですが、floatとマージンによる制御だ
re:マルチシートアプローチとかクラス名とか
re:マルチシートアプローチとかクラス名とか ネタ元:マルチシートアプローチとかクラス名とか いろいろな人の意見が出てきて面白いところですので、私の意見も書いておきたいと思います。 個人的にはスタイルシートを、分けないほうが効率が良いと思ってます。 Firebugを利用すれば編集したいCSSが、どのスタイルシートの何行目に記述されているかが3秒でわかるので1枚だと非常に楽です。 作業的には ブラウザで確認→Firebugでスタイルの確認→エディタに移動(Alt+Tab)→編集する行に移動(Ctrl+g)→編集保存→ブラウザに移動→最初に戻る。 で済むのですが複数枚で管理していると ブラウザで確認→Firebugでスタイルの確認→エディタに移動(Alt+Tab)→編集するスタイルシートに移動(Ctrｌ+Tab)→編集する行に移動(Ctrl+g)→編集保存→ブラウザに移動→最初に戻る。 という
Slice Imageでサイトを高速化
Slice Imageでサイトを高速化 ネタ元:CSS Spritesでサイトを高速化&CSS Sprites化と画像減色でサイトを高速化 ナローバンド時代にサイトの表示を高速化する為に利用された古典的手法「Slice Image」と、ネタ元のCSS SpritesやSlice Imageで、なぜサイトの高速化が可能かを解説したいと思います。 注)古典的な手法で現在はバッドノウハウです。実際には利用しないでください。 Slice Imageは画像を分割し、複数の画像として表示することにより、表示を高速化する為のテクニックです。 例えば、大きい画像を表示する際に、一度に読み込むよりは10個の画像にわけて読み込んだほうが表示は高速になります。 1個の蛇口からバケツに水を注ぐより、10個の蛇口から水を注いだほうが速く満杯になるのを想像してもらったら解りやすいと思います。 画像の分割はFirewo
re:HTML及びCSSは習得が難しい言語か！
re:HTML及びCSSは習得が難しい言語か！ ネタ元：HTML及びCSSは習得が難しい言語か！[リンク切れ] 今まで人に教えてきた私の経験上(といってもまだそんなに多くの人に教えてはないんですけど)、HTML及びCSSは習得が非常に容易な言語だと思う。 これは私が今まで教えてきた人たちが優秀だったからに他ならないんだけど、私が人にXHTMLやCSSを教える際に必ず伝えていることがあって、これが理由だと信じている。 『XHTMLやCSSはさっさと覚えてしまって次のステップに行こうよ』 少なくとも私が教えてる人にとってXHTML+CSSの習得は通過点でしかすぎない。 その先にデザインであったり、プログラミングであったり、、ディレクションであったり、もっと習得が困難で奥の深い工程が用意されている。 会社員のときは新人の子にはXHTML+CSSは1ヶ月ぐらいで覚えてもらうようにしていた。 求めら
[to-R]
理想論というよりは営業トークもしくは逃げ口上 ネタ元:SEO業者が語る理想論の限界 最近、SEOの話題が盛んなのでどこかでクチを挟もうと思ってたのですが、河野さんのエントリーが一番面白かった。 河野さんは渡辺さんの考え方を理想論と切り捨てているが、私はそんなことはないと思う。 なぜかというと、理想論だけではビジネスが成立しないからである。 理想論を掲げ実行し、クライアントが満足するのであれば理想論を掲げるべきである。そうすることにより上質のクライアントを得ることができる。 言うなれば営業トークである。 ただ、理想論だけで検索エンジンの上位に食い込むことはできない。 ただ、この理想論にはもうひとつの側面があり、『逃げ口上』としても利用できる。 検索エンジンに上位に表示されない場合、コンテンツに責任転嫁ができる。 「コンテンツが悪いから上位にひょうじされない」と ここらへんは誤解を招きそうなの
FFFTPの最新バージョンがすごく便利
FFFTPの最新バージョンがすごく便利 普段業務でFTPソフトにFFFTPを使用しているのですが、最新バージョンがすごく便利になってました。 サブディレクトリを含めたファイルの転送ができる ホスト側でファイルやディレクトリをドラッグで、サーバー内のサブディレクトリに移動できるようになってます。 また、ローカル側でデスクトップなどに、ドラックでファイルを移動(正確にはコピー)できるようになってます。 FFFTPをエクスプローラー代わりにも使用することが多いので、このバージョンアップはかなり重宝します。 こういうミニアプリのバージョンアップ情報は、なかなか流れてこないのでバージョンアップする機会が少ないですよね。 個人的には、あとタブ化できるようになると言うことなしなのですが・・・・ 関連エントリー FFFTPを10倍早く使う為のショートカット FFFTPでFTPがつながらない場合 FFFTP
Re:href=
Re:href="#" onclick の悪習 ネタ元：某日記：href="#" onclick の悪習 <a href="#" onclick="...">検索</a> なんて書き方やめようぜ！というお話 a要素のhref属性に値が入ってるとonclick属性の内容を実行後にhref属性の値を参照しようとする。 #なんかが入ってるとページの一番上部にページ内遷移をする。(※1) 某日記さんの代替案ですけどspanで代替するもの <span style="cursor: pointer" onclick="...">検索</span> 私だとこんな書き方 <a href="javascript:void(0)" onclick="...">検索</a> onclickイベントハンドラを実行しようとしてるなら、こんな書き方もある <a href="javascript:（onclickの内容
ブロックレベル要素の高さを揃えるheightLine.js[to-R]
ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。 ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。 このライブラリは新バージョンがあります。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。 このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。 設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
