CSS Category Archive

CSS カテゴリの記事一覧。(1 / 13 ページ)

Web デザイナーさん向け Grunt を使った コーディング作業の効率化、はじめの一歩

GruntGrunt の導入記事なんか珍しくもないし、色々な方がわかりやすい記事を過去にも書かれていているので今さらではありますが......

とはいえ、まだ使ったことがない人もいるだろうということで、「Grunt って何ですか?」 とか「使ってみたいけどよくわからない......」 なんていう Web デザイナー (主に HTML や CSS を書くフロントエンドな人) さん向けに、初めて Grunt を使うならこれだけまずはやってみたら? っていう内容で書いてみようと思います。

なるべくコンパクトに書こうと思ったんですが、終わってみればかなり長い記事になってしまいました...... 覚悟してどうぞ。

Posted by:

今年も Web 関連の良記事がそろう Advent Calendar 2013

Adventarアドベントカレンダー (Advent Calendar) ってのは、元々クリスマスまでの日数を数えるために使用されるカレンダーですが、ある話題だけで 25日間記事を書いていこうぜっていう Web 版アドベントカレンダーが、今年も Adventar で多数立ち上がり、多くの人が記事を書いています。

Posted by:

background-blend-mode プロパティで背景をブレンドしてみよう

CSSCSS Property Advent Calendar 2013、6日目の記事です。「CSS のプロパティに関することだったら何でも OK です」 とのことでしたが、広く使われているプロパティについて今さら書いても仕方ないし、多分他の人とかぶるしってことで、最近になってブラウザが対応したあまり一般的じゃないプロパティを選択してみました。

それが今回取り上げる、background-blend-mode プロパティです。

Posted by:

Google っぽいプリローダーを CSS だけで作る

Lea Verou 氏の Blog に、CSS のみで、Google の Web アプリケーションで使われているようなプリローダー (画面ロード中に表示されるインジケーター) を作るっていう記事がアップされていましたので紹介。

CSS だけで再現しているため、サイズの調整などにも柔軟に対応できます。

Posted by:

Firefox 25 が正式リリース、Web Audio API、iframe srcdoc 属性などに対応

FirefoxFirefox の最新版、Firefox 25 が正式リリースされ、自動更新も提供開始されました。

Web Audio API をサポートしたほか、iframe 要素の srcdoc 属性、CSS3 で追加された background-attachment プロパティの値 「local」 のサポートに加え、ECMAScript 6 関連の実装強化などが行われています。また、Android 版では、ゲストブラウジング機能が追加されました。

Posted by:

Google が無料の Web コンテンツ作成ツール 「Google Web Designer」 を公開

Google Web DesignerGoogle さんが、HTML5 広告をはじめとした Web コンテンツをデザイン、作成するための無料ツール、「Google Web Designer」 を公開しました。

Photoshop などのような、視覚インターフェースを使用して、広告などの Web コンテンツを作成し、HTML5、CSS3、JavaScript を書き出すことが可能です。コードエディタも搭載されているので、出力されたコードを直接編集して、より高度なコーディングを行うこともできるようになっています。

基本的にはインタラクティブな要素を持った 「広告」 の作成を簡単に行うためのツールで、AdMob や DoubleClick といった広告プラットフォームとの連携機能も搭載されています。

Posted by:

CSS filter プロパティで 「半透明ガラス」 効果を再現してみる

2つ前の記事、「Chrome Canary が dialog 要素に対応、ダイアログボックスの表示が簡単に」 で、::backdrop 疑似要素に色々スタイル当てて遊んでたとき、::backdrop 疑似要素に対しては半透明の白いレイヤーになるようにスタイル当てて、その上で、CSS filter プロパティを使って画面全体をぼやかしたら、iOS 7 (Windows Aero ...) とかで使われてる、所謂 「半透明ガラス」 っぽい効果が出せるんじゃね? と思ってやってみました。

Posted by:

Chrome Canary が dialog 要素に対応、ダイアログボックスの表示が簡単に

Google ChromeHTML5Rocks の記事経由ですが、Chrome の Canary build が、HTML 5.1 で策定中の dialog 要素に対応したとのこと。

現状では、chrome://flags から enable-experimental-web-platform-features を有効にする必要がありますが、これによってダイアログボックス (モーダルウィンドウ) の表示を HTML と簡単な JavaScript API で行えます。また、::backdrop 疑似要素を使用することで、ダイアログボックス表示時の、画面背景を暗くするあれも CSS だけで簡単に実装可能です。

Posted by:

Firefox 24 が正式リリース HTML5 track 要素への対応など

FirefoxFirefox の最新版、Firefox 24 が正式リリースされ、自動更新も提供開始されました。

media.webvtt.enabledtrue にする必要はありますが、HTML5 で策定中の新要素、track 要素に対応したほか、同時にリリースされた Android 版では、デスクトップ版では Firefox 22 でデフォルト有効になっていた、WebRTC をサポートしました。

Posted by:

Firefox Nightly が position: sticky; に対応

Firefox Nightlyちょっと前の話になってしまいますが、現在、Firefox Nightly としてリリースされている、Firefox 26 で、CSS の position プロパティに対する新しい値、position: sticky; がサポートされました。

今のところ、Firefox Nightly でもデフォルトでは無効になっていますが、layout.css.sticky.enabledtrue にすることで試すことができます。

Posted by: