Photoshopのレイヤースタイルパネルを模したインターフェイスで、ドロップシャドウや角丸やグラデーションなどを生成できるCSSジェネレーターを紹介します。
え！Photoshop？って見間違うほどのUIを備えたCSSジェネレーター -LayerStyles
Photoshopのレイヤースタイルパネルを模したインターフェイスで、ドロップシャドウや角丸やグラデーションなどを生成できるCSSジェネレーターを紹介します。
基礎から理解するためのCSS3に関するサイトのまとめ｜Webpark
CSS3はIEが対応できていないこともあって、今まであまり紹介してませんでしたが、使いこなせると面白そうなのでまとめてみました。 CSS3リファレンス 有名なサイトですね。CSS3に限らず、HTMLやJavaScriptなど膨大な情報量です。 CSS-EBLOG 各ブラウザで先行実装しているCSSプロパティがまとめられています。 CSS3 Files 【2010.4.25 追加】海外サイトですが非常に見やすいです。各ブラウザの対応状況の載っていて重宝します。 次にブラウザごとの対応状況を確認するサイトを紹介。 HTML5 & CSS3 READINESS HTML5とCSS3のブラウザごとの適応状況を視覚的に見ることができます。2008年からの年別でも見ることができます。 HTML5 & CSS3 Support こちらもブラウザごとの対応状況がまとめられています。CSS3はプロパティ、セ
Sass 3.x系を知る - すがブロ
はじめに この記事はRuby Advent Calendar jp: 2010 : ATNDの10日目です。前日はTrinityTさんでした。 最近注目の浴びている Sass を改めて学んでみましょう Sass - Syntactically Awesome Stylesheets 前フリ Ruby 界隈では Haml とセットで１〜２年前くらいから話題にはなっている（と思っている）のですが、私の周りでは Haml の話は聞くことがあっても Sass をバリバリ使ってるぜ、という話しはあまり聞きません。 しかし、Haml と違い Sass の場合は単体での使用も現実的な選択だと思っているので*1、Ruby/Rails 案件という枠組みを超えた使い方ができるのでは無いかと考えています。 そんなわけで一年前に以下のライブラリを作ったのですが、現在の Sass 3 系では --watch オプシ
WebKit最新開発版に見るCSS3の「縦書き」 - builder by ZDNet Japan
論理プロパティでの実現という課題を残しつつも、CSS3でのサポートおよびEPUB3.0でのサポートが決まった「縦書き」ですが、そろそろビューワレベルでの対応（実装）も開始されました。その先陣を切るのが、SafariやGoogle Chromeに採用されているHTMLレンダリングエンジン「WebKit」です。 WebKitのブログ「Surfin' Safari」では特に触れられていませんが、先日公開された最新開発版（Nightly Build）から、縦書きのサポートが開始されています。まだ実装の初期段階ではありますが、EPUBの描画機能とは切っても切れないHTMLレンダリングエンジン分野における最新動向ということもあり、本連載で検証してみたいと思います。 CSS3の縦書き対応で最先端を行く「WebKit」 最初のテストは、とにかく「横書きを縦書きで表示する」ことにしました。H1タグなど見出し
EPUB仕様策定の当事者たちが語る。EPUBとは何か、歴史的経緯と最新の進捗状況
電子書籍フォーマットの1つとして注目が高まっているのがEPUBです。EPUBは、HTMLやCSSといったWeb標準によって構成されているのが最大の特徴ですが、現在の使用ではまだ縦書きやルビといった日本語対応が十分ではありません。 しかし来年5月に制定予定のEPUB3ではそれらに対応する予定で、それがEPUBに注目が集まっている大きな理由でもあります。 11月15日に行われたWebデベロッパーのためのイベント「Web Directions East 2010」において、このEPUBの仕様策定に関わっている当事者たちが登壇し、EPUBとは何か、そしてその現状がどうなっているのかを解説するセッションが行われました。 この記事では、そのセッションの内容を紹介しましょう。 EPUBの概要 村田真氏は、電子書籍のフォーマットを策定する米国の団体IDPF（International Digital Pu
フォントサイズを変える「大・中・小」ボタンを実装する方法
知り合いのデザイナーさんに、「大・中・小」のボタンでフォントサイズを変更する方法ってどうやるのですか？という質問をいただきました。 CSSとJavaScript（場合によってはJSのみ）で簡単にできてしまうので、サンプルをご紹介しておきます。 フォントサイズを変える「大・中・小」ボタン実装 jQueryを使ってフォントサイズを変える「大・中・小」ボタンをサクサクっと実装してみようと思います。 まずは仕様を考えてみましょう。 仕様 ・大・中・小のボタンをクリックするとフォントサイズが変更される ・それぞれのボタンにIDをセットしておき、そのID名をもとにclassをセット ・CSSにあらかじめ各class用のフォントサイズを入れておく ・再度訪れたとき、クッキー情報があればそのサイズ、なければ中サイズを。 スタイルシートごと変更する方法もあるのですが、今回はCSSとclassでセットで対応し
ウィンドウサイズによってスタイルシートを変える - builder by ZDNet Japan
ウェブページを表示するブラウザのウィンドウサイズは、閲覧環境によってさまざまだ。特定のウィンドウサイズを想定してウェブページを作成すると、それ以外の大きさのウィンドウではコンテンツが読みづらくなるなどの問題が発生する。最近ではiPhoneのような携帯端末からのアクセスも考慮する必要性が出てきているが、サイズ別にページを用意するのは制作にも管理にも手間がかかってしまう。 こんなとき、CSS3の「Media Query（メディアクエリ）」の機能を利用すれば、ウィンドウサイズに応じて適用するスタイルシートを切り替えて、ユーザーの環境ごとに最適なデザインでページを表示することができる。 現在、Media Queryの規格はW3Cの勧告候補（Candidate Recommendation）となっており、Firefox 3.5以上、Safari、Google Chrome、Operaが対応している。
MediaQuery まとめ - IT戦記
Media Query とは CSS3 から導入される Media Type を大幅に拡張する仕様です。 そもそも Media Type とは Media Type とは CSS 2 系に元々ある仕様で CSS を適用するメディア（パソコンの画面、テレビ、プリンタ用紙など）を指定するときに使います。 以下の例だと、 media 属性の中に記述されている all や screen や print が Media Type です。 <link rel="stylesheet" type="text/css" href="共通の.css" media="all" /> <link rel="stylesheet" type="text/css" href="パソコンの画面の.css" media="screen" /> <link rel="stylesheet" type="text/css"
CSS の「値」とは何か - IT戦記
この前 以下のようなエントリを書きました CSS の名前の整理 - IT戦記 今回は CSS における この「value（値）」という言葉の意味、そして曖昧さについて書きたいと思います。 6 つの値 CSS において「値」は曖昧な言葉です。 なので、「値」という言葉を使って CSS の説明をするのは非常に効率が悪かったりします。 たとえば、「ここの値って、 hogehoge の意味の値？」「いやいや、ここの fugafuga の意味の値が piyopiyo なんだよ」というように、まったく無駄な会話が繰り広げられるわけです。 ですので、今日からはちゃんと CSS の「値」をちゃんと説明できるように、「値」に以下の 5 つの名前を付けましょう。 Declared values Cascaded values Specified values Computed values Used valu
CSS3 のカスケーディングについてのおさらい - IT戦記
いつも忘れて、毎回どうだったっけって確認するのがめんどいのでまとめておきます。 仕様 参照する仕様は CSS3 とします。（ワーキングドラフトなので、この内容は変わる可能性があります） CSS3 の仕様は以下から探してください site:http://www.w3.org/TR/css3 - Google Search カスケーディングとは カスケーディングに関する言葉の意味は以下に書いてあります。 CSS allows several style sheets to influence the rendering of a document, and the process of combining these style sheets is called “cascading”. http://www.w3.org/TR/css3-cascade/#abstract 超意訳すると CS
Cascading Style Sheets, Level 2
前 次 目次 特性 索引 標準情報(TR) TR X 0032:2000 CSS2 目 次 まえがき 序文 1 概要 1.0 適用範囲 1.1 規定の読み方 1.2 規定の構成 1.3 規約 1.3.1 文書言語の要素及び属性 1.3.2 CSS特性定義 値 初期値 適用対象 継承 パーセント値 メディアグループ 1.3.3 簡略記述特性 1.3.4 備考及び例 1.3.5 画像及び長記述 1.4 貢献者 1.5 著作権表示 2 CSS2への導入 2.1 HTMLのためのCSS2概説 2.2 XMLのためのCSS2概説 2.3 CSS2処理モデル 2.3.1 描画面 2.3.2 CSS2アドレス付けモデル 2.4 CSS設計原則 3 適合性(要件及び勧告) 3.1 定義 3.2 適合性 3.3 エラー条件 3.4 text/css内容型 4 CSS2の構文及び基本データ型 4.1 構文
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS3 ドラえもん