【CSS】覚えておいて損はない CSS の定番テクニック BEST 5 | バシャログ。
ネットで検索をすると CSS のテクニックが山ほど公開されていますが、実際に商用サイトの制作をしていて個人的に利用する頻度が高いテクニックの BEST 5 をご紹介します。 ちょっと凝ったデザインのサイトをコーディングする時に、これらのテクニックに助けられることが多いです。どれも覚えておいて損はないものばかりです！ IE6 でも min-height を使う 例えば、異なる高さのブロックを float しつつ底辺のラインを揃えたい時などに、「IE6 が min-height に対応していたら楽なのに！」と思うことがありますが、以下のテクニックを使えば IE6 でも min-height（相当）の適用が可能になります。 [CREAMU]CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 IE6 に mi
[JS]軽量のスムーズに開閉するドロップダウンメニューのスクリプト | コリス
leigeberのエントリーから、ドロップダウンメニューをスムーズに開閉する、1.8KBの軽量のスクリプトを紹介します。 Sliding JavaScript Dropdown Menu デモページ スクリプトはjQueryやPrototypeなどの他のスクリプトに依存せず、単独で動作するもので、対応ブラウザはIE6, IE7, IE8, Firefox, Opera and Safariとなっています。 ドロップダウンメニューはリスト要素で実装されており、項目はテキストなので日本語で実装することも可能です。
フォームをちょこっとだけ使いやすくする小技いろいろ - IDEA*IDEA ～ 百式管理人のライフハックブログ ～
ドットインストール代表のライフハックブログ
Lightbox JS でブログパーツ等の Flash を PNG 背景画像の下に隠す
サムネール画像から拡大画像をポップアップさせずにスマートに表示する Lightbox JS、以前当サイトでもLightbox JS で画像を表示するをエントリー致しましたが、ブログに設置している Flash（こうさぎ等）については拡大画像表示時に PNG 背景画像（overlay.png）の下に隠れないという問題があります。 Flash は門外漢なのですが、テンプレートご利用サイトの Atelier Shuhei Weblog さんより解消するための情報（下記リンク参照）を頂きました。ありがとうございました。 またこの件に関して他の方からもご質問を頂いておりますので、本エントリーにて紹介させて頂きます。本カスタマイズを行うことで、スクリーンショットのように拡大画像を表示した際、ブログツールを背景画像の下に隠すことができます。 Atelier Shuhei Weblog：隣の花は紅い Sit
CSSで角がまるい吹き出しを作る「CSS Speech Bubbles」とか吹き出しいろいろ - GIGAZINE
CSSを使って吹き出しを作成することができるCSSファイルとJSファイル、それから画像ファイルをひとまとめにしたセットです。XHTML1.0準拠で、Internet Explorer 6 と 7、Firefox 2.0、Safari 2.0、Opera 9.0で動作確認ができています。 ダウンロードは以下から。 willmayo.com >> CSS Speech Bubbles 実際のサンプルは以下にあります。 CSS Speech Bubbles 角をまるくしているのは、「curvyCorners」を使用しているとのこと。 ほかにもこの吹き出し方のものは以下に多くあります。 入力欄（フォーム）部分をマウスでクリックすると吹き出しが出てくるタイプ Tooltip for forms リンクの上にマウスを乗せると吹き出しが表示されるタイプ Ajax tooltip リンクの上にマウスを乗せ
ブロックレベル要素の高さを揃えるheightLine.js[to-R]
ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。 ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。 このライブラリは新バージョンがあります。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。 このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。 設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja
![ブロックレベル要素の高さを揃えるheightLine.js[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
入力値を簡単に制限する「yav」とかフォーム入力チェックいろいろ
メール送信フォームやらアンケートの回答フォームやら、とにかくネット上には様々なフォームが存在しています。入力する値が間違っていると「エラー」表示を出すタイプのモノが多いですが、出される側から見れば「そんな値を入力できるようにするなよ！」「8文字までしか受け付けないんだったら、最初から入力可能な文字数を8文字に制限しておけよ！」「エラーが出たらどこを再入力すればいいのかわかりやすく表示してくれ！」などと思うこともしばしば。 というわけで、この「yav」は入力エラーチェックだけでなく、最初から入力できる値を制限したり、数字であれば範囲指定したり、入力チェック後にフォームの色を変えてわかりやすくしてくれたり、とにかくいろいろ便利な入力チェック機能を簡単に組み込むことができるオープンソースで開発されているJavaScriptファイルです。入力チェック後のエラー表示もポップアップウインドウやページ内
Webデザイナー/開発者が覚えておくとよい２５のテクニック:phpspot開発日誌
25 Code Snippets for Web Designers (Part1) There are loads of handy scripts, bits of html and widgets that you can incorporate into your websites and blogs - here we bring together 25 of the most helpfull in the first part of this series … Webデザイナー/開発者が覚えておくとよい２５のテクニックが紹介されていました。 知っておいてサイトに組み込めば、一歩レベルが上のサイトを構築できるはずです。 CSSを使うものだけでなく、JavaScript や PHP も絡んでくるものもありますが、サンプルを改変することで設置をすることも出来るはずです。 バブルツー
サンプル web creators
本サイトからダウンロードできるサンプルデータはすべて記事をよりよく理解するための参考用です。データの著作権はすべて各制作者にあります。許可なく譲渡、販売または営利目的で使用することを禁止します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryを使った、ランダム画像で様々なシャッフル演出効果のあるプラグイン*ホームページを作る人のネタ帳
[CSS]背景が透けるカラムを実装するスタイルシート | コリス
youmos.com
web制作者の為の2007年7月に見逃がせないベストエントリ66個ほど*ホームページを作る人のネタ帳
SiMPLE*SiMPLE - ウェブ職人のための小粋なネタ帳
WEB制作者とブロガーの『遊び心をくすぐる』26のブックマークまとめ*ホームページを作る人のネタ帳