Flasher-Flash/Web Design-Webデザイン制作,Flash制作

[CSS]画像の天地の上限を設定し、垂直方向の中央に配置するCSSのテクニック | コリス

Responsive Web Design用にサイズを100%で設置した画像の天地の上限を設定し、垂直方向の中央に配置するCSSのテクニックを紹介します。

ASCII.jp：CSS3 transformならバッジも5分で作れる！｜菊池 崇の実践！CSS3道場

画像ソフトを使ってデザインしていたWebサイトのパーツも、CSS3なら簡単なコードを書くだけですぐにデザインできる。今回のCSS3道場では、イベントやキャンペーンの告知などで活躍する楕円形の「バッジ」を作ってみよう。これまでに何度も登場しているborder-radius／box-shadowプロパティと、transform プロパティを組み合わせればおどろくほど手軽だ。

ASCII.jp：もう画像は要らない！CSS3で作る申し込みボタン｜菊池 崇の実践！CSS3道場

CSS3（Cascading Style Sheets,level 3）がいよいよ実用段階に入ってきた。大半のモダンブラウザーで実装が進み、アップルやグーグルなどの先進企業がCSS3を本格的に活用し始めている。CSS3を使うと従来は画像やスクリプトを使わないとできなかった表現が、スタイルシートだけでできるようになる。デザイン表現の自由度を広げ、マークアップの効率を上げるのがCSS3だ。本連載ではCSS3を使ったデザインTipsをサンプルとともに紹介する。

　「申し込みボタン」や「キャンセルボタン」などのボタンは、Webのユーザーインターフェイスの中でも重要な要素の1つだ。テキストや他の要素に埋もれてユーザーが操作に迷わないように、画像を使って凝ったデザインにすることが多い。

　CSS3を使えばテキストだけでも画像に引けを取らないボタンを手軽に作成できる。画像を用意する手間が減るうえに、CSSプロパティやHTMLを変更するだけで色を変えたり文字を書き換えたりできるので、修正や流用も画像編集ソフトを使うより効率的だ。

CSS スナップショット 2010

概要

この文書は、2010 年現在の CSS を構成する仕様すべてをまとめ定義したものである。主な対象は CSS の実装者であり制作者ではない。これは、この文書で定義したモジュールが、Web ブラウザーの実装度合いではなく仕様の安定度合いによって選定されることにある。
この文書のステータス

この章は、この文書の公開時におけるステータスについて説明する。他の文書がこの文書を上書きする可能性に注意されたい。この技術文書や W3C から公開された他の文書の最新版は W3C 技術文書インデックス (http://www.w3.org/TR/) より探すことができる。

草案としての公開は、W3C Member による支持を意味するものではない。この文書は草案段階にあり、更新、置き換え、もしくは廃止される可能性もある。策定中であることを記さずに、この文書を参照することは適切ではない。

仕様に関する議論は、公開メーリングリスト www-style@w3.org (アーカイブ, 参加の手引き) 上で行うことが望ましい。メールを送信する際には、“css-2010” を件名に含めていただきたい。たとえば “[css-2010] …コメントの要約…” といった形が望ましいだろう。

この文書は Style Activity の CSS Working Group によって作成された。

この文書は 5 February 2004 W3C Patent Policy の下で活動するグループにより作成された。W3C は 特許情報の開示に関する公開リスト を関連する団体と共に、その成果物とあわせて管理している。リストには情報開示に関する説明もあるため、あわせて参照されたい。特許について十分に知識のある人物が、当該仕様に Essential Claim(s) が認められると判断した場合は、W3C 特許方針の第 6 章 に従い情報を開示する必要がある。

この文書は CSS スナップショット 2010の最初の公開草案になる。以前のスナップショット は 2007 年版となる。

CSSの生みの親、新しいウェブレイアウトの可能性を描く - builder by ZDNet Japan

CSSの生みの親であるホーコン・ウィウム・リー氏が、オスロで行なわれたインタビューで、CSSを用いた新たなウェブレイアウトの可能性について語った。

ノルウェーのオスロ発--ウェブフォーマットの標準仕様であるCSS（カスケーディングスタイルシート）は、知る人の比較的少なかった長い期間を経て真価が認められ、新世代のインタラクティブで洗練されたウェブページの開発技法として中心的な役割を担うようになった。CSSは現在、新たな方向に発展しようとしており、この技術を生み出したHåkon Wium Lie氏は、新たな方向に改良が進めば、CSSを使ってさらに複雑なウェブページのレイアウトができるようになると考えている。

　Opera Softwareの最高技術責任者（CTO）でもあるLie氏は、オスロで行われたインタビューで「レイアウトのためには、まだやるべき重要な作業が残っている」と語った。現在策定中の新しいCSS3は多段組みのテキスト配置に対応しているが、「CSSで新聞の紙面を模倣することはできなかった」。

　現在、グリッドレイアウトおよびテンプレートレイアウトというCSSモジュールによってこの点に対処する取り組みが進められている、とLie氏は述べた。

　CSSコードの中に直接、テキストで構成された一種の視覚的デザインである「アスキーアートでレイアウトを描き、そこにコンテンツを流し込む。実験的な仕様だが、CSSに不可欠な簡潔性や簡明さ、ミニマリズムを実現しながらも、かなり高度なレイアウトを作成できると思う」（Lie氏）

　ウェブはオンラインドキュメントからオンラインアプリケーションへと発展しつつあるが、パブリッシングは依然として非常に重要だ。特に「iPad」をはじめとするタブレット製品が登場したことで、パブリッシャーがそういう媒体の利用を図る中、洗練された柔軟性のあるレイアウトを作成するツールは欠かすことができない。

　Lie氏によると、レイアウトツールは、策定作業が進んでいる現行のCSS3仕様に、おそらくモジュールとして組み込まれるだろうという。

　Lie氏は、ウェブの生みの親である欧州原子核研究機構（CERN）のTim Berners-Lee氏と協力して、1990年代にCSSを作り出した。CSSは次第に進歩し、最新のバージョンでは、ウェブページでどのようなことができるのかを新たに示すだけでなく、ウェブアプリケーションで可能になることも次第に示しており、その点で注目を集めている。

　当初は基本的なフォントスタイルの指定や長方形のボックスを描く程度のグラフィック作業に利用されていたCSSは、成長を遂げた。

　CSS3の新機能としては、変形（たとえば、要素をウェブページ内で移動させたり、サイズを変更したり、回転させたりするなどの）やアニメーション（写真が広がって背景となるといった効果を制御する）などがある。どちらの新機能にも、ハードウェアアクセラレーションが役立っている。

　Web Open Font Format（WOFF）が加わったことも、大勢の新聞業界関係者に役立つ。WOFFは、長年にわたる断続的な取り組みを経て、わずかな「ウェブセーフ」フォントによる制限を超える手段として、タイポグラフィー専門家の支持を勝ち取ったように見える。

　CSS3を利用すれば、プログラマーは膨大なJavaScriptコードを書くことなく、ユーザーがマウスポインタをオブジェクトの上に置いたことを検知してアクションを起動できるウェブページを構築できる。「Adobe Photoshop」を使った作業やネットワークデータの使用量を減らして3Dレイヤ効果を実現するドロップシャドウも、新機能として搭載される。

この記事は海外CBS Interactive発の記事を朝日インタラクティブが日本向けに編集したものです。

【レビュー】CSS3メディアクエリを使った適応型のWebデザイン | エンタープライズ | マイコミジャーナル

モバイルデバイス、ディスプレーサイズ、解像度、ブラウザの種類など、Webブラウザからの閲覧は多種多様な状況が想定される。こうした多種多様な閲覧状況に対してそれぞれ適切なデザインを提供するための要となる機能が、CSS3とともに導入されるメディアクエリとなる。メディアクエリを使うことでブラウザやデバイスの情報を取得することができ、それぞれに対応したスタイルの適用が可能になる。

CSS3 Media Queries and creating adaptive layouts - Robert's talkにおいて、メディアクエリを使ってデザインを変更する基本的な方法が紹介されている。サンプルつきで紹介されており、どういったコードがどういった出力になるのかがわかりやすく参考になる。次に、CSS3 Media Queries and creating adaptive layoutsで紹介されている処理を、それぞれ単体のHTMLファイルとして試しやすくしたものと、その実行例を掲載する。

CSS スプライト作成に便利な拡張機能「CSS Sprite Extension」 | デベロッパーセンター

本記事では、最近のWeb制作で利用されている「CSSスプライト（CSS Sprites）」という手法と、その実装を便利にしてくれるFireworksの拡張機能「CSS Sprite Extension」について解説します。

CSSスプライト（CSS Sprites）とは

CSSスプライトは、複数の画像を1つにまとめてCSSのスタイルで部分的に表示し使い回す手法です。
CSSスプライトの仕組み

CSSスプライトはたいてい、今まで独立した１枚画像にしていた部分や画像置換※で表示していた画像と置き換えることができます。

※ 画像置換：HTMLにテキストだけを記載しておいて、CSSのスタイルで文字を隠し、その代わりに画像を表示しているように見せる手法。画像をHTMLからimg要素で呼び出している時とは違い、CSSでデザインを変更したときに一緒に見た目を変えることができるのでデバイスに合わせた幅で表示したい場合にもHTMLを変更する必要がないので便利です。

例えば、既存のサイトにCSSスプライトを適用する場合、サイト内のどの画像をCSSスプライトの対象にするか決定し、選択した画像を1 枚の画像になるように並べ、画像の一部分を表示するためのHTMLとCSSを記述します。

Clean CSS - A Resource for Web Designers - Optmize and Format your CSS

CSS圧縮ツール

ASCII.jp：Googleも採用！CSS3実践テクニック

「CSS3をWebページに実装する」というと意見は真っ二つに分かれる。「完全肯定派」と「完全否定派」だ。しかし、Internet Explorer（IE）を除く主要なWebブラウザー（Safari/Firefox/ Opera/Google Chrome）は現実にCSS3への対応を進めており、少しずつだが、CSS3を利用するWebサイトも現れ始めた。代表例が、おなじみの「Google」だ。

新CSS WGは何を出す？ | Web標準Blog | ミツエーリンクス

CSS WGのメンバーであるfantasaiが、新しいCSS WGの活動計画と各CSS仕様のステータスについて、“CSS Working Group Charter 2008”という記事を書いています。

新しいCSS WG
新しいCSS WGの活動内容は、CSS WGの憲章で決められています。活動期間は2010年11月までの2年間となっており、今回のエントリはこの2年間で勧告する、あるいは推し進めていく仕様についてをまとめています。

CSS Marquee Module Level〓

CSS Mobile Profile 2.0

Adobe - CSS Advisor

CSS Advisorについて
CSSやブラウザの互換性に関する問題の解決策を見つける。
コミュニティで見つけた解決策や回避策を共有する。
解決策にコメントを付け、改善を提案する。

Adobe - CSS Advisor (ベータ版)

Dreamweaver デベロッパーセンター

CSS Maker - スタイルシート作成ツール

CSS Makerは、スタイルシートをブラウザ上で簡単に作成できるスタイルシート作成ツール

カスケーディング・スタイルシート : Hotwired

できるポケット 使って覚える HTML&CSS の基本がマスターできる本
佐藤 和人 できるシリーズ編集部

CSS+XHTMLホームページ作成テクニカルガイド―基礎から実践まで体系的に学べ、リファレンスも充実 XHTML Basicで携帯電
佐久嶋 ひろみ

スタイルシートによるレイアウトデザイン見本帖
大藤 幹 松原 慶太 押本 祐二

HTML&スタイルシートレイアウトブック―「脱!フレーム&テーブル」で「最新・標準」レイアウトにリメイク!
外間 かおり

詳解HTML&CSS&JavaScript辞典
大藤 幹 半場 方人

XHTML+CSSスタンダード・デザインガイド―XHTMLとデフォルトスタイルシートを基本にしたデザインコントロールの実践
エ・ビスコム・テック・ラボ

CSSクックブック―Webデザインのための活用テクニック集
Christopher Schmitt

詳解HTML&XHTML&CSS辞典
大藤 幹

HTML&CSSビジュアル・リファレンス
シーズ

- evolution - MerryCSS

スタイルシート作成支援ソフト。リクエストによってスタイルシートの対応数を増加。