アイコンの効果的な使い方を実例から学ぶチュートリアルをSmashing Magazineから紹介します。 How To Use Icons To Support Content In Web Design 下記は、その意訳です。 How To Use Icons To Support Content In Web Design アイコンは、ユーザーをあなたのウェブサイトの内容に惹きこませるシンプルで、効果的な方法です。 アイコンを使用して、ウェブサイトのコンテンツをサポートする素晴らしいサンプルとベストプラクティスを紹介します。 1. How To Use Icons アイコンを効果的に使用する方法 アイコンを使用する際のゴールの一つは、ユーザーに情報を素早く、そして効率的に伝えることです。 アイコンを効果的に使用すると、説明を必要とせずに、有効なコミュニケーションを可能にし、少ないコンテ
25 jQuery Plugins for Navigation ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集。 階層メニュー、タブ、ツリーやページャにいたるまで、ナビゲーション部分に使えるjQueryプラグイン集25種がまとまっていました。 jQuery (mb)Menu クールなアイコン付階層メニュー BDC Drilldown Menu (iPod Style) iPod風ドリルダウンメニュー jBreadCrumb 動くパンくずリスト Treeview そのまんまツリービュー jQuery Full Width Navigation Widthを指定のサイズにあわせる jQuery Nested Tabs タブ内タブというネストが可能なプラグイン FastFind Menu クールなメニュー実装 jQuery Pagination Pagerを実装 全部見る 最近
Googleの表示速度の速さの秘密に、コネクションを極力減らすということがある。それが複数の画像を一つにまとめてしまい、CSSのポジションをずらすことで表示するという手法だ。これを使うと画像のダウンロードは一回で済むのでコネクションが少なくて済む。 実際、検索結果のGoogleロゴを見ると、複数の画像が混ざった結果なのに気づくはずだ。これをやるのは非常に面倒に感じるだろう。だが、小さなアイコンなどはこういう手法をとればサイトの負荷軽減、高速化につながる。それを手軽に実現できるのがこのソフトウェアだ。 今回紹介するオープンソース・ソフトウェアはCSS Sprite Generator、CSSによる画像分割補助ソフトウェアだ。 CSS Sprite Generatorは複数の画像をZipで固めてアップロードすると、その画像を連結し、さらに表示するためのCSSを生成してくれる。これを使えばまさに
端末特性に応じたユーザビリティの考え方最も身近で、どこでも気軽に使えるインターネット端末となった携帯電話。端末の急速な普及とハイスペック化にともない、携帯電話向けインターネットサービスによるマーケティングが各企業で本格的に取り組まれるようになっています。PC向けWebサイトと同様、携帯向けWebサイト(以降“モバイルサイト”)の構築においても当然、ユーザビリティの高いサイトを構築することが各企業のビジネスによい影響をもたらすことは必然です。 しかし、モバイルサイトでは、これまで各企業が構築・運用してきたPC向けWebサイトと比べると、画面サイズや1ページで表示できるページ容量制限、キャリアごとの違いなど、モバイルならではの制約があります。それらを踏まえたうえで、どうすればモバイルサイトでユーザーにメッセージを正確に伝えることができ、ストレスなく利用できるユーザビリティの優れたサイトを実現で
僕は今、連れ合いのMystery Guestと一緒に、カリフォルニア州オーシャンビーチにある親戚の家で休暇を過ごしている。一緒にお気に入りのテレビ番組を見た後、Mystery Guestは1時間ほど前に眠り込んでしまった。さっきまで降っていた雨も上がり、とても静かだ。聞こえてくるのは波の音ばかり。時おり、表を通る酔っ払いの声もするけどね。 今の幸せな気分をみんなと共にしたくて、ちょっとしたプレゼントを用意した。SEOに関連して知っておいて損はない10の秘訣だ。あまり手間はかからず、かなりの効果が期待できるよ。 #1 キーワード カニバリゼーションをリダイレクトで解消するだいたいどこのサイトでも、最も重要なキーワードでターゲティングしているページが複数あるものなんだ。同じサイトのページが検索結果の2ページ目と、3ページ目、4ページ目、それに5ページ目といった具合に分かれて表示されて、結果的に
Fixed Footer Backgrounds with CSS demo, demo 2 デモではスクロールバーの有無の2パターンがあり、スクロールをしてもブラウザのサイズを変更しても背景画像がフッタの位置に固定表示されています。 仕組みの概要は、bodyに背景色と背景画像を指定し、背景画像は「fixed bottom」にします。 コンテンツを内包するdiv(headwrap)を設置し、ページ上部に表示される背景画像を指定します。 <textarea name="code" class="html" cols="60" rows="5"> <body> <div class="headwrap"> <div class="container">Content</div> </div> </body> </textarea>
Photoshopでやってしまいがちな12個の間違った使い方 – GIGAZINEが面白かったので、Flash版として「Flashでやってしまいがちな16個の間違った使い方」としてまとめてみました。 1.シンボル化しないままトゥイーンを作成している まずは誰でも一度はやったことがあるであろう、シンボル化しないままのトゥイーン作成。ライブラリに「トゥイーン○」という名もなきシンボルが作成され、後で見返したときや他の共同作業者が非常に困ることになります。 2.テキストフィールドに直接リンクURLを設定している getURLやnavigateToURLなんてスクリプトを知らない初心者のころはテキストフィールドにURLをいれてテキストリンクを作っていました。これは演出が作れないので、慣れてくると使うことはないでしょう。 3.文字をボタンに含めたときに後ろにシェイプを敷いていない ボタンを作ったとき
デジパのベトナムオフィシャルサイトがオープンしました。 さて、今回はこのデジパベトナムを組むのに辺り、最初は無理(もしくは相当厄介)だと思ってたことが思ったよりカンタンに出来たのでご紹介。 Movable Type 4のデフォルトテンプレートもそうですが、コンテンツの内容が少ない場合に、フッター部分は当然上に来てしまい、下がbodyに指定している背景色になってしまいます。 キャプチャみたいな感じです。 コレがイヤでフッターをページ下部に固定する方法とかを使う事もあるかと思いますが、アレはアレでコンテンツ部分が間延びしてしまう感じも無きにしも非ずだったりします。 と、言うか個人的には1サイトに1ページ有るか無いかも分からないような部分に労力を割きたくないのが正直なトコロなので、出来れば見逃して欲しい部分だったりします。 htmlとbody要素にheight: 100%指定して...みたいなの
9か月前、最初にSEOmozで働き始めたとき、僕はウェブ制作のインターンだった。それ以前の経験といえば、コードを書いたことがあるくらいだった。 SEOmozに参加してから、それこそ何百時間もかけて、いろいろな分野の知識を広げていった。特に、定番のSEO手法と中小企業向けの実務は力を入れて勉強した。この間投稿したSEO初心者のためのチェックリストは、僕が新しく手に入れた知識の結晶なんだ。 原点に立ち帰るために、SEO技術のトラの巻の母体となるべきものを丸1日かけてまとめてみた。このトラの巻は、ブログ記事として読むよりもPDFで印刷して読んだ方がいいよ(ブログ記事は印刷しにくいからね)。 ダウンロードする前に内容を確認できるように、簡単な説明をしておくよ。じゃあね! SEO基本技術のチートシート(トラの巻)――表面
印刷用デザインもWebサイトにとっては1つのデザインだと言えます。制約がある印刷用デザインをきれいにまとめるためのポイントを上げてみました。 印刷用デザインをどうするか。 当ブログで印刷用CSSをはじめて取り上げたのが2006年12月でした。また、2007年4月にも印刷用CSSをもっとよくするための4つのTipsという内容で取り上げました。 さて、今回取り上げるのは今までと違い、印刷用CSSのコーディングではなく、純粋に印刷用デザインはどのようなものがよいか、というものです。コーディングではなく、いかにデザインするか。 ちょうどアックゼロヨン・アワード2007の結果発表もあったことなので、その受賞作の印刷用デザインを参考にしました。また、ADP: 印刷用CSSの書き方(基本編)もかなり(むしろほとんど)参考にさせてもらいました。そのポイントを以下の7つにまとめました。 なお、文末にアックゼ
CSS-Tricksのエントリーから、異なるサイトにも利用が可能な、よく使用するクラスをまとめたスタイルシート「Toolbox CSS」を紹介します。 <textarea name="code" class="css" cols="60" rows="5"> .floatLeft { float: left; } .floatRight { float: right; } .clear { clear: both; } .layoutCenter { margin: 0 auto; } .textCenter { text-align: center; } .textRight { text-align: right; } .textLeft { text-align: left; } </textarea>
という素敵仕様なので、泣く泣く各タグ内にstyle属性を書きます。 どーしても我慢できない場合は、外部スタイルシートをインライン展開するようなフィルターを作成するとかでしょうか。ググッてみたら、HTML::DoCoMoCSSというPerlモジュールを作成されている方もいらっしゃいました。 ■画像形式 GIFとJPEGであれば大丈夫なようです。 ・iモード対応コンテンツ作成時の仕様 | サービス・機能 | NTTドコモ ・KDDI au: 技術情報 > 機種別情報一覧 ・ソフトバンク 端末情報 Part1 ~ ソフトバンク 端末情報 Part4 ・Mobile Creation 対応フォーマット一覧 ただ、SoftBankの場合、 ソフトバンク 端末情報 と気になる記述があったりするのですが、この2機種は、 ・V801SHをご利用のお客さまへ ・V-NM701/V801SAをご利用のお客さま
CSSnewbieのエントリーから、ボックスモデルのマージン(margin)とパディング(padding)の利用シーンにおける違いを紹介します。 When to Use Margins and Padding マージン(margin)を採用する場合 パディング(padding)を採用する場合 ブラウザによる問題 マージン(margin)を採用する場合 borderの外側にスペースが必要な場合。 スペースに背景色(画像)を適用したくない場合。 上下に隣接したボックスにスペースを設ける場合、マージンの相殺を期待して、大きいサイズを有効にしたい場合。 例:15px + 20px の場合、スペースは20px。 ※相殺されない場合もあります。 パディング(padding)を採用する場合 borderの内側にスペースが必要な場合。 スペースに背景色(画像)を適用したい場合。 上下に隣接したボックスにス
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く