[JS]スムーズなアニメーションで開閉するアコーディオンのスクリプト -Accordion Image Menu
画像を使って、スムーズなアニメーションで開閉するアコーディオンメニューを実装するjQueryのプラグインを紹介します。 デモ：vertical, easeOutBack [ad#ad-2] Accordion Image Menuの実装 HTML 各パネルはリスト要素で実装されています。 <ul id='menu'> <li><a href='link1'><span>title 1</span><img src='image1.jpg' /></a></li> <li><a href='link2'><span>title 2</span><img src='image2.jpg/></a></li> <li><a href='link3'><span>title 3</span><img src='image3.jpg' /></a></li> <li><a href='link4'>
ウェブサイトのユーザビリティ、とっても大切な20のポイント
ウェブサイトに最も大切なのは、ユーザービリティです。 どんなにかっこいいデザインでも、どんなに重要なコンテンツを掲載しても、それを使うことができないのであれば意味はありません。 ウェブサイトのユーザビリティを向上する20のポイントを紹介します。 The Ultimate 20 Usability Tips for Your Website [ad#ad-2] 下記は各ポイントを意訳したものです。 最新の情報を中心にウェブサイトのデザインを組み立てる もし新しいコンテンツをあまりリリースしないのであれば、スタティックなコンテンツに重点をおいたデザインにします。更新頻度が高いようであれば、ブログ風に新着が目立つデザインにします。 ロゴは左上、メニューは右か下 ロゴは左上に配置し、メニューは右か下に配置します。ロゴはクリックして、サイトのトップページにリンクするようにします。このことはたいていの
overflowを使ってfloatの問題を解決するスタイルシートのテクニック | コリス
フロートした子要素を内包するコンテナが高さを拡張しない問題を解決するためのテクニックはさまざまなものがあります。 その中から、overflowを使った方法とその際に生じる問題点とその解決方法を紹介します。 CSS: Clearing Floats with Overflow [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに Demo 1: overflow:auto; Demo 2: overflow:hidden; overflowを使って生じる問題点と解決方法 はじめに フロートベースのレイアウトをする際、ラッパーとなるコンテナがフロートしている子要素に対して高さを拡張しないことは、普通によくある問題です。 デモ：１ フロートをクリアする要素を配置して解消した例 しかし、この問題を解決するために、「overflow」プロパティでもできることを知っていましたか？ これは
[JS]使いやすく高性能なフォームが簡単に設置できるフレームワーク -jFormer
簡単なログインフォームをはじめ、お問い合わせフォーム、コメント用フォーム、ショッピングカート用フォーム、アンケート用フォームなど多種多様なタイプが用意された、バリデーション機能も備えたフォームのフレームワークを紹介します。 jQuery Form Framework - jFormer [ad#ad-2] jFormerの特徴 クライアントサイドのバリデーション サーバーサイドのバリデーション AJAXを使ったページ変更機能 CSSベースの簡単なカスタマイズ Botの防止（CAPTCHAは無し） 入力データのレジューム機能 フィールドのロック機能 フォームのテンプレートも多数用意 jFormerのデモ デモには、さまざまな実用的なフォームがあります。
マンネリ化から抜け出し、新鮮なウェブデザインを生みだす10のアイデア
いつもの同じようなデザインから離れて、新鮮でユニークなウェブデザインを生みだすために役立つ10のアイデアを紹介します。 10 Ideas for Creating Innovative and Unique Web Designs [ad#ad-2] 下記は各ポイントをピックアップして意訳したものです。 カンバスはブランクから始める Photoshopで作業をはじめる時は、白ではなくブランクから始めるようにします。 白は白がある状態なので、何も無い真っさらな状態にします。 用意されたレイアウトに頼らない 960 Grid Systemなどのフレームワークを利用するのは確かに簡単で素晴らしいですが、そういった用意されたレイアウトには頼らずに自身で考えて作りだし、それを機能させる方法を見つけだしてください。 CMSは使わない 今日、WordPressを始めとする素晴らしいCMSが数多くリリース
HTML5とCSS3をページ全体or少しずつ導入するチュートリアル
デモページの全体のキャプチャ 下記は各ポイントを意訳したものです。 全体をHTML5化しても、面白そうなCSS3のエフェクトを少しずつ適用しても面白そうです。 ウェブページにHTML5を導入 ウェブページにCSS3を導入 ウェブページにHTML5を導入 デモページのHTMLの構造は、下記のようになっています。 HTML5：ページのベース 各エレメントを配置する前のHTMLのベースは、下記のようになります。 <!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8" /> <title>Ferris Buller on Abduzeedo</title> <link rel="stylesheet" href="style.css"> <!--[if IE]> <script src="http://html5sh
HTML5+CSS3で実装された、さまざまなUIエレメントのコレクション
パラグラフ・リスト・見出しなど [ad#ad-2] UIパーツの使い方 下記の3つのステップで、これらのUIを自分のページで利用できます。 IEへの対応 IEにHTML5を理解させるために、2つの重要なファイルを使用します。 <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <link rel="stylesheet" href="ie.css" type="text/css" /> <![endif]--> CSSのインクルード スタイルシートファイルをインクルードしてください。もし使用するエレメントが限られているのであれば、その箇所のみで大丈夫です。 <link rel="stylesheet" href="reset.css"
[JS]jQueryのプラグイン100選 -2010年総集編
2010年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年は、アニメーションのエフェクトやレイアウト、後半は背景画像関連のプラグインが特に目立っていたように思います。 [ad#ad-2] コンテンツスライダー・カルーセル関連 ギャラリー・画像拡大関連 ナビゲーション関連 タブ関連 パネル・ボックス関連 ツールチップ関連 レイアウト関連 背景画像関連 その他UI関連 アニメーション関連 スクロール・ドラッグなど操作関連 テーブル・リスト・データ関連 フォーム関連 コンテンツ生成 その他 コンテンツスライダー・カルーセル関連
[CSS]ユーザーがクリックしやすいリンクのリストを作成するチュートリアル
Keep Margins Out of Link Lists 下記は各ポイントを意訳したものです。 HTML：スタイルシート無しの状態 CSS：リンクをブロックレベルに CSS：さらによい実装方法 [ad#ad-2] HTML：スタイルシート無しの状態 HTMLは非常にシンプルです。 文字数の異なるテキストリンクをリスト要素で実装します。 HTML <ul> <li><a href="#">リスト1</a></li> <li><a href="#">リストリストリスト2</a></li> <li><a href="#">リストリスト3</a></li> </ul> デモページ（当方作成） リストのアイテムはブロックレベル、リンクはインラインレベルになり、リンクのクリックできる領域はテキストの長さに依存するため、小さく窮屈なものになっています。 CSS：リンクをブロックレベルに a要素をブロ
[JS]JS/CSSの管理、ユーザー環境の検出など便利な機能がつまった超軽量スクリプト -Head JS
複数のJSファイルの管理、CSSのサポートが異なるブラウザへの対応、ブラウザとバージョンの自動検出、スクリーンサイズの自動検出など、headで制御したい便利な機能がつまった超軽量（2.3KB）スクリプトを紹介します。 Head JS [ad#ad-2] 下記に、Head JSでできることを簡単に説明します。 詳しい使い方は下記ページで解説されています。 Usage: Head JS 外部JSファイルの読み込み JavaScriptの管理 CSSのサポートが異なるブラウザへの対応 HTML5非対応ブラウザへの対応 スクリーンサイズに合わせた表示 Dynamic CSS CSSを特定のページのみに CSSをブラウザごとに指定 外部JSファイルの読み込み 通常、複数のJavaScriptファイルを外部ファイルとして読み込ませるとブロッキングが生じます。 そのブロッキング解消し複数のファイルを並列
[CSS]text-shadowでここまでできる、かっこいいエフェクト集
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de; レタープレスのテキストエフェクト
ユーザーが何色を求めているかをまとめた -Color of the Year 2010
感情をあらわしたキーワードとカラー、国ごとの色合い、月ごと・曜日ごと・時間ごとの色合いなど、2010年のカラーをまとめたインフォグラフィックを紹介します。 Color of the Year 2010: By The People [ad#ad-2] 「Color of the Year 2010」は、世界137ヵ国1,088人の人々を対象に2010年のカラーについて調査を行ったもので、カラーの流行について具体化したインフォグラフィックとなっています。
[JS]背景やボーダーの不透明度をアニメーションで変更するスクリプト -Transify
IE6にも対応した、指定したエレメントの背景やボーダーの不透明度をアニメーションで変更するjQueryのプラグインを紹介します。 IE6でのキャプチャ Transifyの特徴 あらゆるエレメントの背景とボーダーの不透明度を変更します。 設置は簡単で、軽量のスクリプト。 主要ブラウザの全てで動作します。 機能するのは、背景のカラー、背景の画像、ボーダーです。 マウスのホバーで、不透明度をアニメーションで変更します。 jQuery1.4.3でテスト済みです（前のバージョンでも動作します）。 [ad#ad-2] Transifyの実装 「jquery.js」と「transify-min.js」を外部ファイルとして指定し、下記のように記述します。 「#selector」は任意のエレメントを指定します。 $('#selector').transify(); デフォルトでの不透明度は60%に設定されて
[CSS]幅は可変で高さは異なるカラムの高さを等しくするスタイルシートのまとめ
幅は%で指定した可変、高さはそれぞれ異なるカラムを使ったレイアウトで、スタイルシートを使用してカラムの高さを等しくする今までの方法から、これからの方法までを紹介します。 Fluid Width Equal Height Columns [ad#ad-2] 下記は各ポイントを意訳したものです。 Doug Neiner メソッド Nicolas Gallagher メソッド Using Tables One True Layout メソッド Flexbox メソッド メモ 訳者注 各デモは「:nth-child」を使用しているため、モダンブラウザのみ期待通りに表示します。詳しくは「メモ」を参照ください。 Doug Neiner メソッド 「Doug Neiner」メソッドは、CSS3グラデーションからアイデアを得た方法です。 [css] .five-columns { background-i
これは便利！よく使うコードを保存・管理できる個人用リポジトリ -Code Bank
HTML, CSS, JavaScriptをはじめ、XML, ActionScript, Flex, Java, Perl, PHP, SQL, Cなどさまざまな言語に対応したコードを手軽に管理できるソフトウェアを紹介します。 Code Bank [ad#ad-2] Code Bankは簡単に個人でコードを保存・管理できるAdobe Airのアプリケーションです。Subversionのコード専用お手軽版という感じでしょうか。 データベースはローカルとサーバーのどちらにも作成することができます。 画面はシンプルで、使い勝手もよいです。 コードの登録画面では、Language（登録する言語）、Title（タイトル）、Description（説明文）、Code（コード）、Tag（タグ）を登録できます。
ページの属性ごとに見出しの構造を変更するチュートリアル
The heading structure for your blog 下記は各ポイントを意訳したものです。 はじめに HTMLの見出しの5つの基本原則 トップページのための見出し構造 記事ページやシングルページのための見出し構造 カテゴリやタグの一覧ページのための見出し構造 見出しとHTML5 はじめに ページの見出し構造はSEOの非常に重要な要因の一つです。見出しはコンテンツのどの箇所が重要であるか、そしてそれらがどのように相互に結びつけられているかを定義するものです。 トップページ、あるいは記事ページ、カテゴリページなどそれぞれに適した見出しの構造があり、ここではそれを得るために基本的なポイントを説明します。 HTMLの見出しの5つの基本原則 構造の前に、見出しについて基本原則をまとめます。 ページに関する最も重要な見出しは「h1」であるべきです。 どんなページでも通常、たった一つの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5の勉強に役立つチートシートやリファレンスのまとめ
ちょっと使ってみたくなるHTML5/CSS3のUIエレメント集 -Boxtuffs
[JS]jQueryのプラグイン33+1選 -2010年11・12月
[CSS]実用的なものをはじめ、ちょっと使ってみたくなるCSS3の14のテクニック