Front-end CSS Frameworks
UI is the vocabulary of the web. Semantic empowers designers and developers by creating a language for sharing UI. Lose the Hieroglyphics: Semantic is structured around natural language conventions to make development more intuitive. Have a conversation with your components: Semantic gives you a variety of UI components with real-time debug output, letting your code tell you what its doing.
Google HTML/CSS Style Guide
Revision 2.1 This style guide contains many details that are initially hidden from view. They are marked by the triangle icon, which you see here on your left. Click it now. You should see “Hooray” appear below. Hooray! Now you know you can expand points to get more details. Alternatively, there’s a “toggle all” at the top of this document. This document defines formatting and style rules for HTML
CSSでアイコンをデザイン
ものすごく大雑把に言うと今まで画像編集ソフトでやっていた、角を丸くするとか背景をグラデーションにするなどという作業をCSSでやってしまおうというお話。もちろんCSSでできないことは多くあるので万能というわけではないが、できることに限って言えば数行のCSSコードでスクリーンショットのような効果を柔軟に適用することができる。 Demo: Design icon with CSS ul li a { display: block; width: 32px; height: 32px; background-image: url("icons-w.png"); background-repeat: no-repeat; text-indent: -10000px; } 各アイコンになるa要素へのスタイルは以上のような単純なものがベースになる。icons-w.pngがアイコンの前景をつなげたスプライ
[CSS]CSS3のMedia Queries（メディアクエリ）の使い方と実装例
CSS3 Media Queries 下記は各ポイントを意訳したものです。 はじめに CSS2のMedia typesではscreen, printなどのように特定のメディア用のスタイルシートを設定することができました。CSS3ではクエリを加えることで、さらに効率的にスタイルシートを使用できます。 Media Queriesはユーザーの状態を調べ、それにあった特定のスタイルシートを適用することができます。例えば、大きいディスプレイ用と小さいモバイル用にそれぞれ異なるスタイルシートを指定することができます。 Media Queriesの使い方 まずは、デモページをみてください。 ブラウザのサイズを変更すると、スタイルが変更されます。
ドコモでも CSS を外部参照で使える docomo_css プラグインをリリース - milk1000cc
milk1000cc/docomo_css · GitHub テスト書いてからリリースしようと思っていたのですが、 これ読んで今出さねばと思い、リリースです。 内容は、コントローラに class ApplicationController < ActionController::Base docomo_filter end とか書いとくだけで、 のようなリンクタグで指定した外部 CSS を読み込んで、style="" の中にインライン化します。 a:link などの疑似クラスにも対応しています。 README にもうちょい詳しいサンプル載せてるので、そちらもご覧ください。 なお、hpricot と、先日作った tiny_css が必要です。 tiny_css とか怪しいから gem で入れたくないよ、っていう人はなんか頑張れば大丈夫だと思います。 これを作るにたって、id:tokuhiro
max-height－スタイルシートリファレンス
max-heightプロパティは、 <IMG>・ <INPUT>・ <TEXTAREA>・ <SELECT> などの領域の高さの最大値を指定する際に使用します。 最大値を指定することで、これらの要素の高さを一定範囲内に収めることができます。 指定方法には、実数値にpxなどの単位をつけて指定する方法と、親ボックスに対する割合を％で指定する方法があります。 また、高さを制限させないようにするにはnoneを指定します。 ■値 none 最大値の制限をしません。これが初期値です。 数値で指定 数値にpxなどの単位をつけて指定します。pxとは1ピクセルを1とする単位で、実際に表示されるサイズは72dpiや96dpiといったモニタの解像度により変化します。 ％で指定 ％値で指定します。 スタイルシート部分は外部ファイル（sample.css）に記述。 img.sample {max-height: 5
960 Grid System
960 Grid System Download - CSS, sketch paper, and templates for: Acorn, Fireworks, Flash, InDesign, GIMP, Inkscape, Illustrator, OmniGraffle, Photoshop, QuarkXPress, Visio, Exp Design. Repository at GitHub. Essence The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns,
Adobe - デベロッパーセンター : Dreamweaver CS3 拡張機能 for Movable Type 4.1 によるテンプレートカスタマイズについて
Dreamweaver CS3 拡張機能 for Movable Type 4.1 によるテンプレートカスタマイズについて はじめに ブログが注目されている理由は、以下に挙げられるように、ウェブにおける表現の自由が個人レベルまで高められた点にあります。 誰もがカンタンに投稿し即時にウェブ公開できる ウェブサイトの更新情報を RSS 技術により効率的に配信できる 検索エンジンとの親和性が高い Movable Type （ムーバブル・タイプ） は、シンプルでカスタマイズ性が高いと定評のあるブログ作成ソフトウェアです。図1のように投稿データと出力用のテンプレートを個別にデータベースへ格納し、公開のタイミングにデータベースより取得した投稿データとテンプレートを使い、XHTML とスタイルシートを自動生成します。 図1 これまで、Web 制作を自社で行わない企業などは、デザインの変更・ウェブコンテ
1ピクセルのずれも許せないWebデザイナのためにResetting Again | エンタープライズ | マイコミジャーナル
CSSがWebページデザインの主要技術になってから、WebデザイナはCSSの振る舞いに頭を抱えなかったことはない。もっとも悩ましいのは、同じCSSでもWebブラウザごとに表示が異なるところにある。なるべく同じ表示を実現しようと、一見すると奇っ怪にみえる設定を加えたり、意味がないような行を加えたり、背景色と同じ色の画像を調整用に追加したり、涙ぐましい努力は後を断たない。 世界中のWebデザイナやフロントエンドデベロッパが同じ悩みを抱えているから、Webブラウザ間の互換性を実現するCSSライブラリがいくつも登場したり、ベストプラクティスをまとめたCSSリファレンスドキュメントが登場したり、CSS擬似クラスといったテクニックが紹介されたり、IEのCSS/HTML非準拠に対処するライブラリが登場するといったことが相次いで起こっているわけだ。 しかし、ほかのライブラリに依存せずにいちから自力でCSS
ウノウラボ Unoh Labs: JavaScriptを使わないスターレイティングの作り方
こんにちわ、山下です。 Amazonなどで使われているような商品を☆の数で評価するスターレイティングというものがあります。今回は、CSS The Star Matrix Pre-loadedに紹介されている記事を参考に、その作り方を簡単に紹介しようと思います。 1.画像を用意する まず次のような1枚の画像を用意します。16×16ピクセルの☆が、横に5個、縦に11個並んでいて、下に向かうに従って色の付いている☆の数が増えているのがポイントです。 2.HTMLを書く HTMLはとてもシンプルで、ULリストを使います。 <ul class="rating onestar"> <li class="one"><a href="#" title="1 Star">1</a></li> <li class="two"><a href="#" title="2 Stars">2</a></li> <l
標準準拠・後方互換モード各々の CSS 解釈の違いをまとめたドキュメントを共有
2007-07-27T21:11:11+09:00 最近のブラウザには DOCTYPE 宣言の有無や種類で大きくわけて2種類の表示モードを切り替え、CSS や HTML の解釈を変える機能が備わっています。マイクロソフトは同様の機能を DOCTYPE スイッチとしており、一般的にもそう呼ばれることが多いように感じます (この記事でも DOCTYPE スイッチとします)。 DOCTYPE スイッチはオンの状態で standards mode (標準準拠モード) に、オフの状態で quirks mode (後方 (過去) 互換モード) になります。標準準拠モードは仕様に準拠した厳格な表示モード、後方 (過去) 互換モードは仕様に準拠していない古いブラウザとの互換を目的とした表示モードです。つまり DOCTYPE 宣言の記述が無いようなコンテンツに対しては、仕様に準拠していない古いブラウザの解釈
white-space－スタイルシートリファレンス
white-spaceプロパティは、ソース中のホワイトスペース（連続する半角スペース・タブ）・改行の表示方法を指定する際に使用します。 white-spaceプロパティは、 １.ソース中のホワイトスペース（連続する半角スペース・タブ）の表示方法 ２.ソース中の改行の表示方法 の２点を指定するプロパティです。 この２つの表示方法の組み合わせパターンの数だけ値が用意されている、と考えると理解しやすいかもしれません。 ■値 normal ソース中のホワイトスペースを無視 ソース中の改行を1つの半角スペースとして表示 ボックスサイズが指定されている場合にはそれに合わせて自動改行する（初期値） pre ソース中のホワイトスペースをそのまま表示 ソース中の改行をそのまま表示 ボックスサイズが指定されている場合にも自動改行しない nowrap ソース中のホワイトスペースを無視 ソース中の改行を1つの半角
CSS Nite公式ブログ:収支概算を公表します：［Web標準の日々］
お金のにおいが強すぎるとか1600万円強の利益があるはずとか、好き放題言われるのはよいのですが、ご参加いただく方には気持ちよくご来場いただきたいので、現時点での収支概算を公表します。 この規模のイベントでは、イベント制作会社をかますのが一般的です。軽く200万は飛びます。昨年の［Web標準の日］でかなり痛い思いをしたので、これを削っています。 基本的に会場は先払いなので、持ち出しが必要です。 赤字になったときに、負担するのは株式会社スイッチです。 「supported by デジタルハリウッド」となっていますが、ただで教室を貸してくれるわけではありません。ただで手伝ってくれるわけではありません。 動員目標1300人はのべ人数です。単純にユニークユーザーは650人。ただし、いずれかの日しか参加されない方もいるので、850人くらいです。 主催の経費として計上しているのは制作費のみです。これは外
栄光ゼミナール；塾選びガイド
栄光ゼミナールとほかの塾との授業料、サービスなどさまざまなポイントについて比較しています。栄光ゼミナールの授業料、サービスなど充実させたコンテンツで作成していますが、やはり一番栄光ゼミナールを知るには、資料請求が一番です。 栄光ゼミナール資料内容 日程と授業料についてのご案内 栄光ゼミナールの夏期講習のご案内 個別指導のご案内。 「今子供たちは・」資料集栄光ブックレット とっておきなＤＶＤ（届くまでお楽しみ） 栄光ゼミナールでは、はじめての方には無料の夏期講習会になります。テキストの教材費は自己負担になりますが、それでも1教科につきたったの2100円。 栄光ゼミナールは特に中学生を対象に向けて圧倒的人気のサービスです。もちろん、それに付随するしっかりとしたサービスがあります。大手の学習塾には、有名講師が授業を100人程度で聞くタイプと少人数制（6人から20人程度）できめ細やかな授業
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
KSSで作るパターンライブラリ
Components · Twitter Bootstrap
Online Inmate Search | Mugshots | Jails | Bluetrip Criminal Data
blueprintcss - Google Code
Google Code Archive - Long-term storage for Google Code Project Hosting.
cyano: なぜCSSは先でJavaScriptは後に読み込ませることが推奨されるのか