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ブラウザでviewportのwidth指定
続：Androidブラウザでviewportのwidth指定 １年ほど前にAndroidブラウザでviewportのwidth指定という記事を書いたのですが、１年間いろんな端末や状況に対応しているうちに今は結構違うスクリプトを利用しています。 var portraitWidth,landscapeWidth; $(window).bind("resize", function(){ if(Math.abs(window.orientation) === 0){ if(/Android/.test(window.navigator.userAgent)){ if(!portraitWidth)portraitWidth=$(window).width(); }else{ portraitWidth=$(window).width(); } $("html").css("zoom" , por
14のjQueryベストプラクティス[to-R]
14のjQueryベストプラクティス 原文:14 Helpful jQuery Tricks, Notes, and Best Practices 良かったので翻訳してみました。かなりの意訳で、上手に訳せてない箇所も多いので詳しくは原文を参照してください。 1.メソッドはjQueryオブジェクトを返す ほとんどのメソッドがjQueryオブジェクトを返すのが重要です。 これにより次のようなメソッドチェーンが可能になっています。 $someDiv .attr('class', 'someClass') .hide() .html('new stuff'); jQueryオブジェクトを返すのがわかっていれば次のように分割して書くことも出来ます。 var someDiv = $('#someDiv'); someDiv.hide(); 次のように一行で書くことも出来ます。 var someDiv
mixiチェックのチェックボタンを設置
mixiチェックのチェックボタンを設置 mixiチェックのチェックボタンを設置してみました。（参考:mixiチェックとは？）FacebookのLike Button(いいねボタン)のmixi版のような感じです。 設置方法 mixi Developer Centerのmixiチェックに設置方法が書かれていますが、設置には「mixi チェックキー」が必要のようです。 mixi チェックキーの取得 チェックキーの取得にはデベロッパー登録が必要で、mixi Developer Centerでデベロッパー登録ができます。 個人の場合はmixiアカウントとメール認証が出来る携帯電話が必要です。 デベロッパー登録が終了したら、mixi Developer Centerの右上のログインリンクからダッシュボードに移動し、mixi プラグインに新規登録からチェックボタンを設置するサイトを登録します。URL許可
jQuery基礎文法最速マスター[to-R]
jQuery基礎文法最速マスター はやっているようなのでまとめてみたいと思います。 jQueryの読み込み Google AJAX Libraries APIで簡単に読み込めます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> jQueryの記述場所 基本的にはscript要素内の次の箇所に記述していきます。 <script type="text/javascript"> $(function(){ /*ここにjQueryを記述*/ }) </script> 上のコードは$(document).ready()のショートカットなので、次のように書いても大丈夫です。 <script type="text/javascri
[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：セレ
[ASCII.jp]CSS3のセレクターで作るストライプテーブル
[ASCII.jp]CSS3のセレクターで作るストライプテーブル ASCII.jpの連載「Web制作の現場で使えるjQuery UIデザイン入門」で第12回 CSS3のセレクターで作るストライプテーブル が公開されました。 今回からは応用編ということで、実践的なサンプルを作っていきます。 CSS3を利用したストライプテーブルの作成方法と、テーブルの行や列のハイライト表示について解説しています。 ストライプテーブルはオーソドックスなテクニックですが、ハイライト表示に関してはかなりよい感じのTIPSかなと思います。 興味がある方はぜひ一度ご覧になってください。 関連エントリー [ASCII.jp]jQueryによるアニメーションエフェクトの基本 [ASCII.jp] jQueryでAjaxを利用する基本チュートリアル [ASCII.jp] jQueryによるフォームのデザインの基礎 [ASCI
[ASCII.jp]jQueryによるアニメーションエフェクトの基本
[ASCII.jp]jQueryによるアニメーションエフェクトの基本 ASCII.jpの連載「Web制作の現場で使えるjQuery UIデザイン入門」で第11回 jQueryによるアニメーションエフェクトの基本が公開されました。 jQueryの魅力のひとつアニメーションの解説を行っております。 animate()の解説で利用しているクリックギャラリーなどは応用性が高いのじゃないかなと思います。 一応、基本編はこれで終了で次回からより実践的なTIPSに入っていきます。 関連エントリー [ASCII.jp] jQueryでAjaxを利用する基本チュートリアル [ASCII.jp] jQueryによるフォームのデザインの基礎 [ASCII.jp] jQueryのイベントをチュートリアルで学ぶ [ASCII.jp]サンプルで学ぶjQuery：(X)HTML/CSSを操作する [ASCII.jp]初
jQueryを良くする25のTIPS
jQueryを良くする25のTIPS ネタ元：Improve your jQuery - 25 excellent tips ちょっと多いですが、かなり良いTIPSがまとまっています。 Google AJAX Libraries APIを利用しよう Google AJAX Libraries APIを活用すればすばやくライブラリを読み込むことが出来ます。 <script src="http://www.google.com/jsapi"></script> <script type="text/javascript"> // Load jQuery google.load("jquery", "1.2.6"); google.setOnLoadCallback(function() { // Your code goes here. }); </script> 直接読み込むことも出来ます。
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(){...})などで包む必要があります。[
WEB製作者の為のSEOチートシート[to-R]SEOmozで配布されているSEOチートシートが素敵ですので日本語にしてみました
WEB製作者の為のSEOチートシート SEOmozで配布されているSEOチートシートが素敵ですので日本語にしてみました。 重要なHTML要素 title要素にキーワードを含みましょう。 h1,h2,h3要素にキーワードを含みましょう。 b要素、strong要素でキーワードを包みましょう。 img要素のalt属性、ファイル名にキーワードを含みましょう。 a要素のtitle属性、アンカーテキストにはキーワードを含ませましょう。 a要素のnofollowを上手に使いましょう。 インデクシングに関する限界 ページのファイルサイズは150KB以下にしましょう。 ページ内のリンクは100個以内にしましょう。 title要素は70文字(半角)以内にしましょう。 meta要素のdescriptionは155文字（半角）以内にしましょう。 URLの含まれるパラメーターは2個以内にしましょう。 ディレクトリの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
