スマートフォンサイトをデザインする上で知っておくべき10のTIPS
スマートフォンサイトをデザインする上で知っておくべき10のTIPS iPhoneやAndroidのスマートフォンの仕様を知らないけどデザインしなくちゃいけなくなったというデザイナーさんに知っておいてもらいたい10(+1)のTIPSです。 1.実機で確認する 当たり前のことですが作成したデザインを実機で確認して下さい。スマートフォンとPCでは目からの距離やDPIが違いますので、PCでは十分に見れたからといって実機で確認すると文字が小さすぎることなどがよくあります。書きだしたJPGをFTPでアップして確認してもいいですし、メールでスマートフォンに送って確認してもいいです。個人的にはDropboxで転送するのが手軽でおすすめです。 2.横幅は320pxもしくは640pxでデザインする スマートフォンでは基本横幅が320pxで表示されるのでデザインする際も320pxでデザインしましょう。ただ、Re
複数のjsライブラリを利用する際にonloadを書き換える方法[to-R]
複数のjsライブラリを利用する際にonloadを書き換える方法 複数のJavaScriptライブラリを利用していて、正常に動作しないや、どちらか一方しか動作しないなどの状況に陥ることがあります。 原因は様々なのですが、一番多いのがJavaScriptライブラリのonload記法に依存する問題です。 onload記法とはJavaScriptを実行するタイミングをonloadイベント（ブラウザがすべてを読み込んでから実行）に設定する際の書き方です。 DreamWeaverを利用している方は、以下のようなソースをよく見るかもしれません。 <body onload="MM_preloadImages('hogehoge')"> これはonloadイベントにMM_preloadImagesという関数を設定しているという意味です。 他にもソースコード中の window.onload = functio
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
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個以内にしましょう。 ディレクトリの
非常に美しいcoverflowスライドギャラリー『ImageFlow』
非常に美しいcoverflowスライドギャラリー『ImageFlow』 ImageFlowはPHPとJavaScriptで作られている非常に美しいcoverflowスライドギャラリーです。 設置方法 配布サイトより関連ファイルをダウンロードし、サーバーにアップします。 スライドギャラリーを利用したいページのhead要素内で『screen.css』と『imageflow.js』を読み込みます。 <link rel="stylesheet" title="Standard" href="screen.css" type="text/css" media="screen" /> <script language="JavaScript" type="text/javascript" src="imageflow.js"></script> スライドを利用したい箇所に以下のHTMLコードを記述しま
IE6以下をWeb標準に準拠させるライブラリ『IE7.js』
IE6以下をWeb標準に準拠させるライブラリ『IE7.js』 多くの人が待ちに待ち望んだライブラリ。やはりすごい人はすごいものを作るんですね。 このライブラリを読み込むことによりIE6以下でもIE7と同じようなXHTM/CSSの解釈を行ってくれます。 ただし完全にIE7と同じような形にするのではなく、より近い形ということです。 現在公開されているバージョンはversion 2.0 (beta)ということで、まだ実務で使うのは難しいかもしれませんが、MITライセンスで公開されておりますので正式にリリースされればweb制作の現場を変えてしまうライブラリです。 設置方法 Google コードのie7-jsより直接読み込むことが可能です。 以下の要素をhead要素内などに記述します。 <!--[if lt IE 7]> <script src="http://ie7-js.googlecode.c
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」を付けます。 これでその要素をウインドウの下部に表示させることが可能です。 (ウインドウの下部というのがわかりにくいと思うのですが、内容量がウィンドウサイズを超える場合は通常通り、内容量がウィンドウサイズより小さい場合はウィンドウの下部に配置という意味です
半角ｶﾅを全角カナに変換するjsライブラリ
半角ｶﾅを全角カナに変換するjsライブラリ 半角ｶﾅを全角カナに変換するjsライブラリ『convertKana.js』を作成しました。 携帯用コンテンツなどで、『半角カナ』で入力されることが多いサイトに関してPC上で表示する際に若干見栄えがよくなります。 設置方法 convertKana.jsをダウンロードしてhead要素内などに読み込んでください。 <script type="text/javascript" src="./convertKana.js" charset="UTF-8"></script> charset属性でライブラリの文字コードと整合性を保持しているので、charset属性も忘れずに記述してください。 サンプル でも個人的にはサーバーサイドで処理するのが良いかと思ってたりします。 関連エントリー ブロックレベル要素の高さを揃えるheightLine.js アルファ画像
ユーザーがページのどこをクリックしたか解析するツール[to-R]
ユーザーがページのどこをクリックしたか解析するツール ユーザーがどのようにサイトを巡回しているかはアクセス解析なのでわかりますが、ページのどこをクリックしたかも知りたくないでしょうか？ 今回は、ページのどこがクリックされたかを解析するツールを紹介します。 Crazy EggはwebページにJavaScriptのコードを一行追加するだけでwebページのどこがクリックされているかを解析できるおもしろいツールです。 ちなみにto-Rを解析した所、このような結果になりました。 最初のエントリーの『続きを読む』にクリックが集中してますね。 CSSのカテゴリーページも結構人気っぽいです。 お約束として『パーマリンク』を用意しているのですが全くクリックされていませんので必要なさそうですね。 などアクセス解析やデザインを見ているだけではなかなか見えないwebサイトの性質が見えてきます。 セットアップ まず
![ユーザーがページのどこをクリックしたか解析するツール[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/0330939009a892e86a58d7eebfca00c0ecd1fe43/height=288;version=1;width=512/http%3A%2F%2Fblog.webcreativepark.net%2Fimg%2F20070820_01.jpg)
CSSをデバッグするツール色々
CSSをデバッグするツール色々 Web標準の日々のグループディスカッションでCSSの編集を直感的(?)にできるライブラリの案が出てたのですが、世の中すばらしいツールがいっぱいあるので、今回はそんなツールを紹介します。 Firebug Firefoxのアドオン(拡張機能)のFirebugは最強です。 私がメインで使っているCSSデバッグツールはFirebugです。 もうFirebugがないとCSSなんて触れないと言っても過言ではありません。 公式サイトよりインストールしたら、右下にできる緑丸ボタン(下図a)でFirebugを起動できます。 起動したら左上の調査ボタン(下図b)をクリックして、調査したい要素を選択すればその要素に反映されいるCSSがすべて表示されます。 また、リアルタイム編集することも可能です。 Internet Explorer Developer Toolbar IEでのデ
ブロックレベル要素の高さを揃える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
Yahoo!がリニューアル！どうなるビジネスエクスプレス
Yahoo!がリニューアル！どうなるビジネスエクスプレス Yahoo! JAPANがサイトデザインのリニューアルを発表しました。 2008年初頭をめどにリニューアルを行うようです。 参考：Yahoo! JAPANがトップページデザイン変更を発表、秋からβテストを開始 発表されたデザインにはYahoo!カテゴリへのリンクがありません。 今までYahoo!カテゴリ登録を行うメリットの一つとしてTOPページからリンクをたどってくるユーザーがいたのですが、そのメリットは失われるようです。 現在、Yahoo!Japanのフッターにあるビジネスエクスプレスへのリンクも、リニューアル後のデザインでは削除されています。 Yahoo!カテゴリの露出は、かなり減るようです。 検索窓に『登録サイト』の選択が残っているのが、まだ救いです。 (米Yahoo!は登録サイト[Directory]の選択もmoreの中に隠
CSSで実現するスマートなロールオーバー
CSSで実現するスマートなロールオーバー 暇があればコーディングコンテストの作品を眺めているのですが、ほんと勉強になります。 長谷川賞を受信したComplexさんが行っていたロールーオーバーの手法が、JavasScriptも画像置換も使わずにと素敵だったので紹介します。 サンプルはボクの方でアレンジしていますので、オリジナルも合わせて参考にお願いします。 まずサンプルのXHTMLソース <ul> <li class="ajaBtn"><a href="/ajax/"><img src="ajax_a.gif" alt="ajax" /></a></li> <li class="amaBtn"><a href="/amazon/"><img src="amazon_a.gif" alt="amazon" /></a></li> <li class="cssBtn"><a href="/css
なぜSEO業者は『SEO対策』という単語を好んで使うのか？
なぜSEO業者は『SEO対策』という単語を好んで使うのか？ 前回のエントリー『SEO対策ツールまとめ』が好評なようですが、何人の方から「『SEO対策』なんて間違った言葉を使うな！」という意見をいただいたので、そのことに関する見解をしたいと思います。 「『SEO対策』なんて間違った言葉を使うな！」 どういうことかというと、『SEO』がSearch Engine Optimizationつまり検索エンジン最適化の意味を持つ言葉であるのでしたら『SEO対策』は検索エンジン最適化対策となります。 最適化自体が対策の意味を持つ為、おかしな日本語になるという事。 では、なぜ『SEO対策』という言葉を使うのか？ キーワードアドバイスツールでSEOというキーワードを調べてください。 2007年2月の『SEO』の検索数は146,816回と莫大な数です。 注目して欲しいのは、よく検索される関連キーワードの『s
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
