CSS(スタイルシート)のテクニックとトピックのポータル

10 Popular Firefox Add-ons for Web Developersというエントリーで、ウェブデベロッパーに人気のFirefoxアドオンが10種類まとめられていました。知っている人には当然のアドオンかもしれませんが、これからウェブデザイナーを目指そうといった人には参考になると...

Category ： CSS3最近は CSS3 ネタばかりですが、今回は CSS3 で使える background 関係のプロパティを紹介、解説です。background-size背景画像のサイズを指定します。横幅 縦幅の順で記述します。対応ブラウザ（2010 3/8 現在）Safari , Go...

ショートカット背景｜ 画像加工｜ ボタン｜ ナビゲーション｜ ロゴ｜ CSS｜ 素材サイト背景Fresh Generator グラデーションや角丸をpng形式で作成できます。【Box】ボックスのサイズ・色・不透明度・影【Corners】角丸の有無・カーブの加減【Border】ボーダーのサイズ・色・...

みなさん、こんにちは、まーしーです 週末の不摂生がたたって唇が荒れるやら口内炎やら。食事がつらくてげんなりなこの頃です。さて、Webサイトを多メディアに対応させるという話は先日の「webデザインNight!」でも話題にあがっていました。その簡単な例としてiPhoneとPCとで分ける方法を考えてみま...

少し変えるだけでサイトのレイアウトが完成してしまう、とてもクオリティの高いフリーのPhotoshopファイル2010年03月03日-30 High-Quality Free Website Templates to Download|Dzine Blog 少し変えるだけでサイトのレイアウトが完成し...

軽量で非常に高機能なjavascriptプラグイン。豊富な機能に加えて、デザイナーでも何とかわかる範囲の言語として最近さらに人気を集めていますが、今回紹介するのは最新の使えるjQueryプラグインを集めた「25 Amazing and Fresh jQuery Plugins」というエントリー。M...

ウェブページを表示するブラウザのウィンドウサイズは環境によってさまざま。特定サイズを想定して作成すると、それ以外ではコンテンツが読みづらくなる問題が発生する。最近はiPhoneのような端末に対応する必要もあるが、サイズ別にページを用意するのは制作・管理両面で手間。こんなときはCSS3のMedia ...

photoshop×960 Grid SystemでWEBデザイン「How to create an elegant web layout in Photoshop」画像処理ソフトは様々なものがリリースされており、WEB制作において利用されているソフトも多様にありますが、photoshopで作って...

かっこいいCSSメニューを作れるサービスは数えきれないほど存在します。そのなかでも、今回ご紹介するサービスは、デザインがクールな上に、シンプルかつ軽量なCSSメニューを作成できるサービスです。シェア癒し系テープのり OJ スイングバードグルーこのブログは、さくらのレンタルサーバで動いています。この...

1カラム、2カラム、3カラム、ヘッダ、フッタなどレイアウトのベースを設定する超軽量のCSSのフレームワークを紹介します。EZ-CSS_ An easy to use, lightweight, CSS framework.フレームワークにはあらかじめ多種なモジュールが用意されており、多彩なレイアウ...

Webサイトを制作して公開する際は おかしいところが無いか、不備は 無いか不安になったり、という方も 少なくないのではないかと思います。 そこで、公開前に色々と確認出来たり、 最適化できる様なフリーのサービスや フリーソフトをご紹介します。 ここで言う「公開前」とは「サーバーにアップする」事ではな...

Robert’s talkSteve Souders氏は最近獲得したブラウザのパフォーマンス改善に関して注目されるいくつかのテクニックを5回シリーズのブログで公開した。Steve Souders氏はGoogleのエンジニア。Googleに務める以前はYahoo!でYSlowの開発に従事。Webペー...

今日は、Webページの作り方に関して、ちょっとした細かい話を。ページに画像を入れるときに、imgタグの「文字の色」をCSSで指定しておきましょう。画像に文字色？ と思ったあなた、ちゃんと理由があるのです。なぜ画像なのに「文字の色」を指定しなければいけないのでしょうか。それは、画像が表示されない状態...

話題のHTMLやCSSコーディングあしすとツールのzen-codingを触ってみました。すごい楽ちんこ!zen-codingって何？使い方は？という人は以下のページを見てくださいね。Zen-Codingでできるあんなことこんなこと知らない人は損してる？コーディングが3倍速くなるZen-Coding...

CSS3 「gradient」と 「ウェブフォント（@font-face）」このページは背景画像を一切使用していません。 背景のストライプ模様はCSS3のbackground-image:gradient、フォントはCSS3の@font-faceでサーバー上に置いたフォントを読み込んで表示していま...