スマートフォンサイトをデザインする上で知っておくべき10のTIPS
スマートフォンサイトをデザインする上で知っておくべき10のTIPS iPhoneやAndroidのスマートフォンの仕様を知らないけどデザインしなくちゃいけなくなったというデザイナーさんに知っておいてもらいたい10(+1)のTIPSです。 1.実機で確認する 当たり前のことですが作成したデザインを実機で確認して下さい。スマートフォンとPCでは目からの距離やDPIが違いますので、PCでは十分に見れたからといって実機で確認すると文字が小さすぎることなどがよくあります。書きだしたJPGをFTPでアップして確認してもいいですし、メールでスマートフォンに送って確認してもいいです。個人的にはDropboxで転送するのが手軽でおすすめです。 2.横幅は320pxもしくは640pxでデザインする スマートフォンでは基本横幅が320pxで表示されるのでデザインする際も320pxでデザインしましょう。ただ、Re
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:
Re:PHPで誰でも簡単Webサービス製作！でなんか作って公開した奴ちょっと来い
Re:PHPで誰でも簡単Webサービス製作！でなんか作って公開した奴ちょっと来い ネタ元：PHPで誰でも簡単Webサービス製作！でなんか作って公開した奴ちょっと来い PHPのXSSとSQLインジェクションの解説が書かれています。丁寧に書かれていますのでぜひ一読ください。ただ、読む上で1点注意することがあります。 XSSはそれほど単純じゃない！ ネタもとのXSS対策済みのソースコードの１行目で次のようなコードがあります。 <form action="<?=$_SERVER['PHP_SELF']?>" method="get"> 実はここにもXSSの脆弱性が含まれています。次のようなURLでアクセスされた場合、任意のスクリプトを実行することが出来ます。 http://www.example.jp/ example.php/%22%3E%3Cscript%3Ealert(document.co
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(){...})などで包む必要があります。[
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> 直接読み込むことも出来ます。
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
サイト内にウィンドウを開く「Prototype Window 」
サイト内にウィンドウを開く「Prototype Window 」 Prototype Windowはウェブサイト内にウィンドウを開く為のJavaScript ライブラリになります。 Prototype WindowはPrototype.jsを拡張するUIライブラリです。 また、「script.aculo.us 」のエフェクトも利用することが可能です。 利用方法 まずは、配布ページよりPrototype Window 本体をダウンロードします。 ダウンロードしたファイルからwindow.jsとprototype.jsをhead要素内などで読み込みます。 <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="window.js"></script> 次にテー
複数のjsライブラリを利用する際にonloadを書き換える方法[to-R]
複数のjsライブラリを利用する際にonloadを書き換える方法 複数のJavaScriptライブラリを利用していて、正常に動作しないや、どちらか一方しか動作しないなどの状況に陥ることがあります。 原因は様々なのですが、一番多いのがJavaScriptライブラリのonload記法に依存する問題です。 onload記法とはJavaScriptを実行するタイミングをonloadイベント（ブラウザがすべてを読み込んでから実行）に設定する際の書き方です。 DreamWeaverを利用している方は、以下のようなソースをよく見るかもしれません。 <body onload="MM_preloadImages('hogehoge')"> これはonloadイベントにMM_preloadImagesという関数を設定しているという意味です。 他にもソースコード中の window.onload = functio
footerをウィンドウ下部に固定する『footerFixed.js』
footerをウィンドウ下部に固定する『footerFixed.js』 footer部分を画面下部に固定するためのjsライブラリ『footerFixed.js』を作成しました。 フッターをコンテンツの内容量にかかわらずwindow下部に表示させるためのjsライブラリです。 サンプル 設置方法は head要素なのでfooterFixed.jsを読み込みます。 <script type="text/javascript" src="./footerFixed.js"></script> ウィンドウ下部に固定したい要素にid属性「footer」を付けます。 これでその要素をウインドウの下部に表示させることが可能です。 (ウインドウの下部というのがわかりにくいと思うのですが、内容量がウィンドウサイズを超える場合は通常通り、内容量がウィンドウサイズより小さい場合はウィンドウの下部に配置という意味です
アルファ画像を扱うalphafilter.jsライブラリ[to-R]
アルファ画像を扱うalphafilter.jsライブラリ IE6でアルファ画像(透過png)が使えないことにより、コーディングの作業量が大幅に増します。 そこで、IE6で透過pngを扱うjsライブラリを作ってみました。 設定は簡単、head要素内に条件付きコメントを利用してalphafilter.jsで読み込むだけ。 読み込みを高速化させるためdefer属性をの記述を忘れずに行ってください。 <!--[if lte IE 6 ]><script type="text/javascript" defer="defer" src="./alphafilter.js"></script><![endif]--> 透過にしたい画像にclass属性でalphafilterと入れるだけで、なんとIE6でも透過画像の使用が可能になります。 <img src="./sample.png" class="a
プログラムのコードを配色する「google-code-prettify」
プログラムのコードを配色する「google-code-prettify」 google-code-prettifyはプログラムのコードに色を付けるJavaScriptライブラリになります。 CやJava, Python, SQL, HTML, XML, CSS, Javascript,Ruby, PHP, Perlなど様々な言語に対応しております。 設置方法 ダウンロードしたprettify.cssとprettify.jsを読み込みます。 <link href="prettify.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="prettify.js"></script> prettyPrint()を実行します。 配布元ではonloadイベントで追加と説明していますがaddEventL
テーブルをソートできるようにするjsライブラリ-table sorting
テーブルをソートできるようにするjsライブラリ-table sorting table sortingはテーブルをソートできるようにするjsライブラリです。 テーブルの内容でソートしたり、奇数行、偶数行にそれぞれ異なるclassをつけたりが可能です。 設置方法 ダウンロードしたsortable.jsをhead要素内なので読み込みます。 <script type="text/javascript" src="sortable.js"></script> ソートの対象のtable要素のclass属性をsortableに設定して、任意のID名をid属性につけます。 <table class="sortable" id="foo"> ソートの対象にしたくない列がある場合はth要素のclass属性にunsortableを設定します。 <th class="unsortable"> ソートの対象にした
PHPでQRコード生成
PHPでQRコード生成 QRcode Perl CGI & PHP scripts ver. 0.50gを利用すると驚くくらい簡単にQRコードの作成が可能です。 PHP版について説明します。(Perl版でもほとんど同じですが) 使用方法 ダウンロードしたqr_img0.50g.zipを解凍してサーバーの適当な所にアップします。 qr_img.php?d=[QRコードに埋め込みたい文字列(要URLエンコード)] にアクセスすると生成されたQRコードが表示されます。 引数に&s=[イメージのサイズ]や&t=[画像タイプ]を追加することにより、ある程度汎用性がある形で生成することが可能です。 GDを使って生成されているので、毎回生成するのではなくキャッシュ化するなどの工夫は必要です。 キャッシュ化サンプル header("Content-type: image/png"); print make
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
ie以外でもクリップボードが使えるsetClipboard.js
ie以外でもクリップボードが使えるsetClipboard.js IE以外のブラウザでもクリップボードにコピーが簡単にできるjavascriptライブラリを作成しました。 IEにはclipboardData.setDataという関数があり、クリップボードへのコピーなどが簡単にできますが、IE以外のブラウザはクリップボードにアクセスする機能がありません。 そこでflashプレーヤ―のsetClipboard関数を利用してクリップボードにコピーするライブラリです。 まずは関連ファイルをダウンロードします。 ダウンロード(setClipboard.zip) 解凍してできる『setClipboard.js』と『setClipboard.swf』は同じディレクトリにアップしてください。 header要素などでsetClipboard.jsを読み込みます。 <script type="text/jav
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
