[JS]シンプル！軽量！簡単！三拍子揃ったスライドショーのスクリプト -jQuery.TinySlider jQuery.TinySlider デモ [ad#ad-2] jQuery.TinySliderの実装 HTML スライドで表示されているイメージはdiv要素の背景画像です。 <div id="slider"> <div class="image" style="background-image: url(img/img1.jpg);">Simple</div> <div class="image" style="background-image: url(img/img2.jpg);">Light</div> <div class="image" style="background-image: url(img/img3.jpg);">Easy</div> </div> JavaS

ウェブサイトに最も大切なのは、ユーザービリティです。 どんなにかっこいいデザインでも、どんなに重要なコンテンツを掲載しても、それを使うことができないのであれば意味はありません。 ウェブサイトのユーザビリティを向上する20のポイントを紹介します。 The Ultimate 20 Usability Tips for Your Website [ad#ad-2] 下記は各ポイントを意訳したものです。 最新の情報を中心にウェブサイトのデザインを組み立てる もし新しいコンテンツをあまりリリースしないのであれば、スタティックなコンテンツに重点をおいたデザインにします。更新頻度が高いようであれば、ブログ風に新着が目立つデザインにします。 ロゴは左上、メニューは右か下 ロゴは左上に配置し、メニューは右か下に配置します。ロゴはクリックして、サイトのトップページにリンクするようにします。このことはたいていの

ページに配置するエレメントの特質を理解し、1/3ルールやスペースやグリッドなどのデザインルールを取り入れ、「機能するレイアウト」を作るポイントを紹介します。 Using Landmarks Makes Page Layout Easy 下記は各ポイントを意訳したものです。 はじめに レイアウト、あるいはページのコンテンツの配置はウェブデザインの成功にとって重要です。レイアウトは一つのエレメントから次のものに向けるためにコンテンツの優先順位をつけます。 もしレイアウトが正しく機能していれば、ユーザーはコンテンツに興味をもち、他のものには気をそらさないでしょう。ここではあなたのデザインで機能するレイアウトを作るためのヒントをいくつか紹介します。 下記の例では、多くの人が最初に写真あるいは見出しに目がいき、その後にテキストに、そして最後にリンクの順番になるでしょう。 このレイアウトでは、見出し、

シンプルなHTMLで、ごく簡単なCSSで、画像もシンプルに一枚だけ使用して実装するロールオーバーエフェクトをDeveloper's Paradiseから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <div class="rollover_img"> <a title="Ace Infoway India" href="http://blog.aceinfowayindia.com"> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum. In volutpat. Vestibulum elit. Aenean eget enim vitae tellus bibendum pellentesque. Sed

シンプルでvalidなマークアップで実装できる、超軽量（約5KB）の画像ギャラリーのスクリプトを紹介します。 Nivo Slider デモ このスクリプトの大きな特長ともいえる画像変更のエフェクトには下記の9種類が揃っています。 スライス（下） スライス（下左） スライス（上） スライス（上左） スライス（上下） スライス（上下左） ホールド フェード ランダム サポートしているブラウザはIE7+, Fx3+, Safari4+, Chrome4+で、主要なブラウザに対応しています。 実装にはｊQueryのプラグインのため、jquery.jsが必要です。 ライセンスはGPL（GPL -Wikipedia）で、商用でも無料で利用が可能です。

Zoom-Info ? How To Create An Informative Image Gallery With jQuery & CSS | AddyOsmani.com | Where Web Businesses Grow カーソルを合わせると画像がキャプション付でアニメーション表示されるギャラリースクリプト。 ギャラリーの殆どはクリックすると拡大するものですが、カーソルを合わせると、キャプションとともに画像が縮小されるギャラリーの登場。 触ってみるとなかなかクールで、何かに使えそうだなと思いました。 デモページはこちら アニメーション効果がなかなかイカしてます。 jQueryとCSSベースで構築されているみたいです。 関連エントリ 半透明がいい感じのクールな写真ギャラリー作成用jQueryプラグイン「jPhotoGrid」 3Dでクールに回転するFlashを使った画像ギャラリ

スクリプト無しで、画像にマウスをホバーした際にテキストを配置したパネルを表示するスタイルシートをSix Revisionsから紹介します。 Snazzy Hover Effects Using CSS デモページ パネルのデザインはグラデーションを採用した透明度のあるもので、ボックスシャドウなどCSS3を使用して実装されています。 表示位置も真ん中だけでなく、さまざまな位置に表示が可能です。

Home ＞ ウェブデザイン基礎講座 ＞ ウェブサイトを台無しにする、10点の致命的なミス ウェブサイトを台無しにする、10点の致命的なミス 投稿日：2011年1月11日　　　レベル：−　　　　ソフトウェア：− このチュートリアルでは、ウェブサイトを台無しにする、10点の致命的なミスをご紹介します。 Step1 ： はじめに Step2 ： 値段表がない Step3 ： 検索ツールが使いづらい Step4 ： 横スクロールを必要とする Step5 ： フォントサイズを変更できない Step6 ： テキストばかりである Step7 ： リンクにJavaScriptを使用している Step8 ： FAQ内に、あまり聞かれない質問がある Step9 ： プライバシーポリシーを掲載せずに、メールアドレスを集める Step10 ： URLが長すぎる Step11 ： 予期しない場所にMailtoのリ

投稿日：2011年1月14日　　　レベル：−　　　　ソフトウェア：− このチュートリアルでは、ウェブデザインによくある 10の間違いをご紹介します。 Step1 ： はじめに Step2 ： 広告を入れすぎない Step3 ： メディアプラグインを使用する Step4 ： 極力 Flashを使用しない Step5 ： レイアウトやナビゲーションをわかりやすくする Step6 ： 外部リンクを適切に設置する Step7 ： リンクをわかりやすく表記する Step8 ： 電子メールのリンクはわかりやすく明示する Step9 ： リンク切れをなくす Step10 ： ベーシックなフォントを使用する Step11 ： 標準的なサイズのフォントを使用する

最近のFlashやShockwaveなどプラグインを使った動画や、単なる静止画像も含めて、画像の中に書かれている文字は、検索エンジンロボットから文字として認識されません。つまり、検索キーワードには一切引っかからないので、SEO的（検索結果で自然に上位表示される）には非常に不利です。広告宣伝に巨額の費用を投下できる企業様以外にはお勧めできません。 SEO関係のトップへ フレームとはWebサイトを分割して、ある部分をスクロールしても他の部分はスクロールされないようにするもので、昔はよくメニューなどに使われていました。 フレームがあると、検索エンジンロボットが正しく コンテンツをキャッシュしてくれない場合があります。これについては弊社SEO事業部のサイトで詳しく説明しているので、こちら（SEO-WEB）をご参照ください。フレームはデータベースを使用するような社内用のWebシステムでは非常に有効で

Google Analytics アクセス解析の使い方 無料で使えるGoogle Analytics(グーグル・アナリティクス)の使い方やホームページのアクセス解析の活用方法を説明してします。 アクセス解析 Google Analyticsの使い方 もし、把握できてないのなら、ホームページのアクセス解析をお勧めします。 Google Analyticsなどを使用してアクセス解析を行うことで、あなたのホームページの様々なことがわかります。 ホームページの訪問数や何ページ見ているか？ どのページに人気があるのか、または不人気なのか？ 訪問者はどこからアクセスして来たのか？ どのようなキーワードで検索してたどり着いたのか？ 売り上げに繋がる検索キーワードは何か？ 訪問者が逃げている場所はどこか？ など、アクセス解析では様々な分析が可能で、効率的な検索エンジン対策やリンスティング広告（検索連動型広