定義 国際規格のISO 9241-11では、ユーザビリティを「特定の利用状況において、特定の利用者によって、ある製品が、指定された目標を達成するために用いられる際の、有効さ、効率、利用者の満足度の度合い」と定義している。 有効さ（Effectiveness） 利用者…

Basic認証 .htaccess .htpasswd を配置するだけで、Basic認証がかけられます。 .htaccess 「.htaccess」ファイルの中には、次のように記述します。 AuthUserFile /ID・パスワード格納ファイルの所在 AuthGroupFile /dev/null AuthName "表示されるメッセージ…

リンクがはれて、動的に月を変えられるカレンダー demo配布元：Schwarz Lanzenreiterより、「calendar2.js」をダウンロードする。 <script type="text/javascript" src="calendar2.js"></script>内にJavaScriptを読み込ませる。 <script type="text/javascript"> <!-- calendar_print(); // --> </script>内に 配置したい場所に実行スクリプトを設置する。 リンク…

シンプルな「自動切り替え」タブ型メニューボックス。 demo デザインはCSSで行います。 タグの構造もシンプルなので実装が簡単にできます。 配布元：yetiiページ下部にある「yetii.js」をダウンロード （※ファイルが表示されるので、それをyetii.jsと名前を…

シンプルなタブ型メニューボックス。 demo デザインはCSSで行います。 タグの構造もシンプルなので実装が簡単にできます。CMS等にも導入しやすいとか。。。 自社サイトをリニューアル中なので、さっそく導入してみました！ 配布元：yetiiページ下部にある「y…

webページを印刷するとき、 メイン部分のみ印刷したいのに、 ヘッダー、フッター、サイドバーも印刷されてしまう。 そんなときはスタイルシートで、 印刷する範囲に含める、含めないの指定をします。 スタイルシートで印刷範囲を指定するタグは、 head main …

エビアン（evian）のCMライブラリーで見つけた、 動画をLightBox風に表示させることができる「Shadowbox」。 YouTube動画や、拡大画像表示として広範囲で利用できるすぐれもの！ Prototype、jQuery、YUI、Extなど複数のJavaScriptのライブラリに対応した、画…

Nivo Slider Nivo Slider パラパラめくれながら、画像が切替るスクリプトです。Nivo Sliderより、 jQuery Nivo Slider script Nivo Slider CSS をダウンロードします。16種類の画像切替えパターンがあるので、 組合せることも可能です。 「boxRainGrow」で切…

jQueryを使用したツールチップです。 a要素についた title属性 をツールチップテキストとして表示したり、 Jabascript でタグをレイアウトして表示することができます。配布元のcssglobe.comより「easyTooltip.zip」をダウンロードします。 （demoでは「jque…

jQueryを使用して、リストやテーブルなどでよく見かけるストライプ表示、白、カラー、白、カラーのような表示を簡単に実装することができます。※実装には jquery.js が必要です。 <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".stripe li:even").addClass("gray"); }</script>…

jQueryで動きのあるツールチップを作成 <script type="text/javascript" src="js/jquery-1.3.1.min.js"></script> <script type="text/javascript" src="js/jquery.betterTooltip.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.tTip').betterTooltip({speed: 150, delay: 300}); }); </script>Build a…

cssでは a { outline: none; } で Firefox や Safari は ok! でもIEには適用されない。。。 JavaScriptでは IEににも適用させるなら、aタグにJavascriptを入れる事で回避可能。 ＜a href="URL" onfocus="this.blur();"＞しろうさぎ＜/a＞ 「onfocus="this.bl…

Simple Spy Simple Spyは、フェードインで最上部に表示したコンテンツを自動でスクロールし、最下部に移動したらフェードアウトで非表示にするスクリプトです。 Simple jQuery Spy Effect demo Simple Spyは、リスト要素(ul)で実装されており、オプションで…

すべてのIEに適用 IE6のみ適用 <link href="css/ie6.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="xxxxx.js"></script> </link>

レイアウト要素 header header要素は、ヘッダにあたるセクションを表す。 footer footer要素は、フッタにあるセクションを表す。フッタには作者にかんする情報、著作権にかんする情報などを含むことができる。 section section要素は、文書やアプリケーショ…

ページ構造 ビジュアル表現 グラフィックツール リッチメディアのサポート JavaScriptの強化 <br>要素 HTML5では、XHTMLで必要だった改行要素<be>を終了する / が不用になります。ただし、このコードはXHTMLブラウザでも機能しましす。</be>

行の末尾で、「Ctrl+カンマ（,）」で変換する。 html：変換前 div html：変換後 ＜div＞＜/div＞ html：変換前 #header+#wrapper+#footer html：変換後 ＜div id="header"＞＜/div＞ ＜div id="wrapper"＞＜/div＞ ＜div id="footer"＞＜/div＞ html：変換前…

変換前：変換後：２行目を見ると「」と変換されてしまうので、「zen-setting.js」ファイルを書き換えます。 ファイルのある場所（Win XP） [ドライブ名]:\Documents and Settings\[ユーザー名]\Application Data\Adobe\Dreamweaver 9\Configuration\commands…

自宅も職場もcs３なので「Zen Coding v0.6」をダウンロードして使用するんだけど、少し工夫が必要だったので。。1.Google Codeのzen-codingプロジェクトページから「Zen Coding for Dreamweaver v0.6」をダウンロードする。 2. [コマンド]-[拡張機能の管理]…

ソフト名 Microsoft Expression Web SuperPreview for Windows Internet Explorer「Microsoft Expression Web SuperPreview for Windows Internet Explorer」は、IE6/7/8でのWebサイトにおける見栄えの違いを比較・検証できるマイクロソフト製ソフト。Windows…