Webデザイナーに役立つWebデザインのネタ、Webデザインに関連するテクニックやツールを紹介しています。随時人気の話題だけをピックアップしているので、Webデザイン業界の動向をまとめ読みするのにも最適です。Webデザイナーの日々のWebデザイン業務にどうぞお役立てください～。
Webデザインには一般のデザインスキルのほかに、HTML・Javascript・CSSなど多様なスキルが求められます。Webデザイナーが、さらに複雑化するWebデザインを把握する一助にでもなれば幸いです。
フッターは画面の下にピッタリくっつけておきたいという要望は意外とあるようです。 でもテーブルもフレームも使わないとなると、なかなか難しい。 今回紹介するのは、「height100%のボックス」のテクニックを拡張したこれを実現する方法です。 テクニック使用後 サンプル ウィンドウのサイズを変えてもフ...
CSS3のマルチプルバックグランドを使用せずに、CSS2.1の擬似要素を使用して一つの要素に複数の背景やボーダーを配置するテクニックを紹介します。Multiple Backgrounds and Borders with CSS 2.1CSS3のサポートは必要なく、対応ブラウザはCSS2.1の擬似...
『 長い文字列が枠外にはみ出すのを防止するCSSらしい。CSS2/3,Opera4-7,Mozilla,IE5+に対応らしい。 』
Creating 10 Most-Used Javascript Techniques Using Pure CSS Styling | DevSnippets CSSオンリーでJSを使った風のよく使われるテクニック集１０。 よく使われているかどうかは実際はよくわかりませんが、ピュアCSSというこ...
Curtis is the name I’ve given for a family of geometric sans-serif fonts currently in development. Other incarnations exist as Fontstructions: Curtis...
ハイパーテキストリンクをデザインする上で知っておきたい基礎知識から、実用的なチップス、やってはいけない間違いなど、すぐに役立つテクニックをSmashing Magazineから紹介します。The Definitive Guide To Styling Web Links以下は、各ポイントを意訳した...
フッタをブラウザ下部に固定配置したい。そんなときにおすすめなのが、『cleanstickyfooter』。フッタをブラウザ下部に固定配置するCSSテクニックです。IE6とそれ以前のブラウザ用に、ハックは1つしか使っていないとのこと。min-heightの部分のハックのようですね。ほかには同様のテク...
CSS HappyLife ZEROは、CSS初心者・中級者の方を対象にしたリファレンスやレイアウト講座など、CSSに関するアレコレがつまったサイトです。CSS HappyLife ZEROは、主にCSS初心者・中級者の方を対象にしたCSSに関するアレコレがつまったサイトです。プロパティやセレクタ...
『 CSS3のボーダーに画像を指定する機能を使って、画像の上にフレームを重ねています。なるほど。 』
JSや画像を使わず、cssとHTMLオンリー でマウスオーバー時に噴出し状のツール チップの実装が可能なナビゲーション KntL Pagerをご紹介します。これは結構 便利そう。ありがたい事にIE6にも対応、 cssも無料でダウンロードも可能です。 jsや画像を使用せず以下のようなページネーション...
『 viahttp://blog.creamu.com/mt/2010/01/htmlcss.html 』
テーブルなどをHTMLで組んだ後に、CSSコーディングを簡略化したい。そんなときにおすすめなのが、『Primer』。HTMLからCSSのベースを作ってくれるサービスです。HTMLをペーストして、「PRIME IT」ボタンを押すと、idやclass名からCSSのベースを作ってくれます。プログラマが作...
小粋の定義は分かりませんが、 ちょっと「おっ」と思えるcssの テクニックをいろいろと。以前、 記事にさせていただいた、ｃｓｓ とHTMLのみで3D効果を実現 したテクニックで他にも無いかな と思って同様に驚いたテクニックです。 3Dのテクニック同様に実用性があるかどうかは考えていませんが、何かの...
IE8にも対応したクロスブラウザ用の不透明度の指定方法をSnipplrから紹介します。Crossbrowser Opacityselector {opacity: .75; /* Standard: FF gt 1.5, Opera, Safari */filter: alpha(opacity=...
ちょっとしたトリックを使用して、テキストを画像の下に回り込ませないようにするスタイルシートをNO Margin No Errorから紹介します。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ligula arcu, lu...
これはすごく便利。Easy Front-End Frameworkは今風のウェブサイトを作る際に使えるテンプレートである。HTML、CSS、Javascriptが全部含まれているので、見出しや本文、テーブルといったスタイルだけではなくて、Tooltipsや浮かび上がってくる画像なども簡単に作れる点...
Webkit、すごすぎっすね・・・。HTMLとCSSでここまで出来るという良いお手本っぽいですよ。↑ まずは映像でどうぞ。MacOS X＋最新のSafariをお持ちの方はこちらでも見れるようですね。Chromeも動くけどちょっと残念な感じ。↑ Win+Chrome。ちょいと厳しいですね。ソースを見...
はじめに 本連載では、「クロスブラウザに対応したデザインテクニック」をテーマに、保守性や互換性に優れたXHTML+CSSの書き方を紹介していきます。 今回は、ページレイアウトする際に、最低限おさえておきたい代表的なCSSプロパティとして、floatプロパティ、および、positionプロパティを中...
このブログをリニューアルして思ったことやっぱりCSS3は便利でした。 自分でちゃんと触ってみて4点ほど、利点があったのでそれについてチマチマ書いて見ます。レイアウト組むのが楽ちんセレクタが便利画像に頼らず色々出来るアニメーションが素敵といった4点が利点かなー なんて思いました。本日はレイアウトにつ...
IE共通の9つのCSSバグをそれぞれ解決する方法がNettutsにて紹介されています。 どれも、なんでだろうと頭を悩ましそうな問題なので解決法を知っておくと簡単に対処できそうです。 1. センタリングが効かない問題 margin: auto を指定した場合の期待する結果 IEの場合以下のようになり...
Category ： CSS リファレンス今まで使ってコーディングが楽になったと思われるCSSテクニック（一部CSSではない部分もありますが...）などをまとめておきたいと思います。コーダーの方は知っている事が殆どだと思いますが、知らない人は直ぐにでも使える簡単な事も多いので是非使ってみて下さい。...
