WEBデザインのTIPSまとめサイト「ウェブネタチョ」 デモページ

CSS

• float で並べた要素の高さを揃える方法
• img タグの画像を border-radius で角丸にして表示する方法
• チェックボックスにチェックを入れた時に要素に変化を付ける方法
• CSS のclip で長方形の画像を正方形で切り抜き（マスク）する方法
• CSS の display:inline-block で並べた要素間の隙間を埋める方法
• IE6でも 疑似要素の hover を使う方法のまとめ
• CSSで画像縮小表示させる際に、IE7でもキレイに表示する方法
• マウスでドラッグした際の文字を選択範囲の色（ハイライトカラー）を変更する方法
• 2カラム、3カラムサイトの可変レイアウトのHTMLとCSSまとめ

Javascript

• jQuery の animate によるアニメーションのサンプルまとめ
• IE7、8でも background-size:contain が利用できるjQueryプラグイン「jquery.backgroundSize」
• 背景全体に画像を固定させ、ランダム表示もできるjQuery プラグイン「jQuery Backstretch」
• レスポンシブWEBデザイン対応のjQuery スライダープラグイン「bxSlider」
• WYSIWYGエディタを実装できるシンプルで軽量なjQueryプラグイン「CLEditor」
• 画素や動画、iframeも Lightbox 風に立ち上げる jQueryプラグイン「Colorbox」
• jQuery を利用して、現在のページのメニューデザインを変更する方法
• 角丸を作れるjQuery プラグイン「jQuery curvyCorners」の使い方
• jQuery と jQueryUI を利用したお手軽Datepicker の実装方法
• Javascript で a 要素のリンクを無効にする方法のまとめ
• シンプルなドロップダウンメニューが簡単に実装できるjQueryプラグイン「Droppy」
• Lightbox 風に画像や動画をオーバーレイ表示できるjQueryプラグイン「Fancybox」
• レスポンシブWEBデザイン対応のコンテンツスライダー「Flex Slider」
• <table> をレスポンシブWEBデザイン対応させるjQueryプラグイン「FooTable」
• 複数の要素を縦にも横にも「ふわふわ」動かすjQueryプラグイン「jqFloat」
• jQuery の fadeIn() でページ読込み時にフェードインで要素を表示する
• 背景いっぱいの画像を表示できるjQuery プラグイン「jQuery Fullscreenr」
• ブロック要素の高さを揃えて配置できるjQueryプラグイン「jQuery.lineUp」
• スマホでもIE7 にも対応したjQuery ベースの「マーキー」っぽいスクロール
• Pinterestっぽいサイトを作れるjQueryプラグイン「jQuery Masonry」
• 「jQuery Text Resizer」と「jQuery Cookie」を利用して文字サイズを大中小と変更する
• フォームのバリデーションと入力ヒントの表示も可能なjQueryプラグイン「JQuery Form Validation And Hints」
• Pinterestのようにタイル状にコンテンツを配置できるjavascript「The Wookmark jQuery plugin」
• 指定した要素を「ふわふわ」動かすjQueryプラグイン「jquery.yurayura」
• 画像の読み込みを遅延させるjQueryプラグイン「Lazy Load Plugin for jQuery」
• 画像をオーバーレイで拡大表示させる「Lightbox 2.05」の使い方
• 画像をオーバーレイ表示できる「Lightbox」の新バージョン2.5 の使い方
• レスポンシブWEB対応で、画像や動画をLightbox 風に表示できる「Magnific Popup」
• スマホアプリのように左右からメニューをスライド表示できるjQueryプラグイン「mmenu」
• ランダムで、しかも指定件数分だけ要素を表示させるjavascript「randomDisplay.js」
• 画像を鏡面反射させるJavascript「reflection.js」
• jQueryでページスクロールしてもナビゲーションを固定させる方法
• SWF や WMP などの動画ファイルもLightbox 風に表示できるjQueryプラグイン「Shadowbox」
• SimpleModal と jQuery Cookie による認証ボックスの実装方法
• Google画像検索のような画像の拡大表示ができるjQueryプラグイン「Superbox」
• jQuery を利用して <table>の<tr>にリンク先を指定できるようにする方法
• フォームの入力文字数をカウントするjQueryプラグイン「Textchange」

Wordpress

• jQueryでツイート数、いいね数などを取得して、WordPressの記事別に設置する方法

Bootstrap

• Bootstrap で「ドロップダウンメニュー」を実装する方法
• Bootstrap のLightbox プラグイン「Bootstrap Lightbox」
• Bootstrap でModal（モーダルボックス）を使う方法
• Bootstrap のタブメニューを Cookie に保存して記憶させる方法

IE

• 角丸をIE8以下でも利用できるようになる「border-radius.htc」の使い方と注意点
• IE6、IE7、IE8 で角丸やドロップシャドウなどを利用できる「IE-CSS3.htc」
• PIE.htc を利用したIE下位バージョン向けサンプル