7 CSS Snippets to Borrow from HTML5 Boilerplate
Style Scavenger: 7 CSS Snippets to Borrow from HTML5 Boilerplate The "Scavenger" series looks at large-scale projects and focuses on the small snippets you can take from the project without needing the complete project. Starting a web application from scratch can be a boring, time-consuming task. Paul Irish's HTML5 Boilerplate project is an exceptional starting point for creating a website of any
PrefixFree: Break Free From CSS Prefix Hell — Smashing Magazine
A solution for when prefixes cause maintenance troubles, bloat CSS files, and make it harder to tweak values. In this article, Lea Verou presents her recent tool: prefixfree. Editor’s note: This article is the first piece in our new series introducing new, useful and freely available tools and techniques presented and released by active members of the Web design community. Lea Verou is well-known
あらゆるCSSスニペットのまとめ「31 CSS Code Snippets To Make You A Better Coder」｜BLACKFLAG
WebサイトをCSSレイアウトにて構築する際に ブラウザごとの特性によって記述を変えたり、 全てのブラウザで正常にレイアウトされるように 細かな調整が必要になります。 そんなCSS構築の際のレイアウト調整で使える CSSの技を集めたエントリー「31 CSS Code Snippets To Make You A Better Coder」が これから先、役立ちそうだったのでメモ書き。 ≫31 CSS Code Snippets To Make You A Better Coder CSSハックから、 クロスブラウザで実現する透明度（opacity）、ボックスシャドウ、 min-height、Fixed、Clearfixなどから iPad Orientation CSS、CSS3 Media Queries、ブラウザリセットなどなど。 知っておくと便利なCSS小技的なものも含まれており ブラ
CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 - (DxD)∞
CSSを拡張するためのメタ言語として、代表的なものに「SCSS(Sass)」と「LESS」があります。今回、導入を検討するにあたり、両者を比較しました。 結果的には、「SCSS(Sass)」を導入することにしましたが、特に「SCSS(Sass)」を選択する決め手となった点に重点を置きつつ、両者の違いをまとめまてみました。 はじめに Webサイト、Webアプリケーションが大規模になるにつれて、CSSの設計・管理にもリソースを割かれるようになります。CSSのモジュール化、コンポーネント化による再利用性を考えたとき、現状のCSSを取り巻く状況は十分とは言えません。 一つの選択肢としてあがるのが「Blueprint」や「960 Glid System」等のCSSフレームワークの利用ですが、その再利用性と構造・表現の分離度はトレードオフです。 そこで、CSSの利点を活かしつつ、再利用性を高めるために
モバイルサイトの3キャリア共通CSSと最新コーディング事情 : LINE Corporation ディレクターブログ
こんにちは、「livedoor Blog」を担当している吉沢です。 スマホの登場で、すっかりケータイ (フィーチャーフォン/ケータイ/ガラケー) が日陰に追いやられた感がありますが、ケータイも毎年進化していて、モバイルサイトの開発が行いやすいケータイがユーザへ浸透してきています。 livedoor Blog では、スマートフォン分野に注力しながら、月間15億PV あるケータイ版のUI最適化にも引き続き取り組んでいます。今回は、livedoor Blog で採用した事例を元に、この先1〜2年のケータイ開発・運用に役立てられる、3キャリア共通の CSS から最新のコーディング事情を紹介したいと思います。 アクセスシェア〜ライブドアの場合 まずはどの世代のケータイをメインに開発して表示くずれを起こさないようにするか検討するため、アクセスシェアを把握します。 1年前と比べると、iモードブラウザ2.
The Guide To CSS Animation: Principles and Examples — Smashing Magazine
In this article, we will take our first steps with CSS animation and consider the main guidelines for creating animation with CSS. We’ll be working through an example, building up the animation using the principles of traditional animation. Finally, we’ll see some real-world usages. With CSS animation now supported in both Firefox and Webkit browsers, there is no better time to give it a try. Rega
Google+ Buttons in CSS | Improve your UI | Pixify
Use Google+ to Improve Your UI Google rolled out a new design across many of their services as part of the Google+ launch. The new look presents a sleeker, simplified Google that puts the emphasis on your data and not on the interface. Part of the design's success are the new buttons. Great UIs tend to have simple, obvious buttons that are standard across the entire application. I have created Goo
マックスは1KB。限られたリソースの中でWebサイトを多彩にアレンジする·CSS1K MOONGIFT
CSS1Kは1KBのCSSでどこまでWebサイトを表現できるかをチャレンジするプロジェクト。 CSS1KはCSS製のオープンソース・ソフトウェア。昨今のWebサイト開発ではCSSの存在を欠かすことができない。優れたWebデザイナーの作るCSSはとても美しく、分かりやすい。しかしCSS自体がとても冗長的なマークアップ言語であるために長くなりがちだ。 一例 idやclassの付け方、HTML自体の入れ子の深さによってもCSSはどんどん長くなる。しかし、そんなCSSの現状に甘んじることなくチャレンジするのがCSS1Kだ。 CSS1Kはその名の通り、1KBのCSSでどこまで表現できるかをチャレンジするプロジェクトだ。ルールは幾つかあるが、まず1024 bytesまでに収まることが大前提だ。さらに@font-faceや@importを使って外部CSSを読み込むのも禁止だ。 全く違うサイトに見える 元
Should You Start Using CSSLint?
Getting our code reviewed by a pro is a great way of improving code quality but what happens if you don't have access to a rockstar programmer? You do the next best thing and grab a 'lint' for that language. Today, I'd like to talk a little about CSSLint, a recently released code analysis tool for, you guessed it, CSS. Join me after the jump! What Exactly is a Lint? Let's hit Wikipedia for a defin
一歩進んだCSSを作成するためにアドバイスする·CSS Lint MOONGIFT
CSS Lintはより良いCSSであるためのアドバイスを行うソフトウェア。 CSS LintはJavaScript製のオープンソース・ソフトウェア。今、Webサイトを作る上で欠かせないのがCSSだ。デザインとHTMLマークアップとを切り離すことで、メンテナンスしやすく、かつ構造的な管理のしやすいWebサイトができあがる。 チェック画面 CSSはとても柔軟であるために適当に書いてもエラーが起きる訳ではない。正しいCSSかどうかはCSS validatorを使えばチェックできるが、より“こうした方が良い”という情報を提供してくれるのがCSS Lintだ。 CSS Lintはより見やすい、より問題の起きづらいCSSを書くためのヒントを与えてくれるソフトウェアだ。これはCSSを検証してもエラーとはならない。だがこうした方が失敗が少ないであろうノウハウをソフトウェアの形にして提供してくれる。Java
CSSの記述を最適化してくれるWebツール「CSS Lint」｜BLACKFLAG
CSSを構築する際、記述ミスや重複を防ぐためのチェックツールは 以前（2年以上前ですが…）の記事「CSSチェックツールについて」で紹介したものや、 それ以外でもいろいろあったりしますが、 記述したCSSをWebサイト上で診断して最適化できるサービス 「CSS Lint」が便利そうだったのでご紹介。 ≫CSS Lint ページ上に自分で記述したCSSを貼り付けて 「LINT!」のボタンを押すのみ。 記述ミスをしているところや プロパティが重複しているところや、まとめられる部分などなど 細かくチェックしてくれます。 診断結果画面は指摘内容がリストで表示され、 実際の該当箇所もCSS記述内に網かけで強調されるので 分かりやすいです。（診断結果画面は以下の様になります。） Webサイト制作の完了間近にチェックを入れたり 長い間更新を続けて収拾がつかなくなったCSSファイルなどの 記述整理にも使えそ
CSSで高さ（height）100%のボックス要素を作る方法｜BLACKFLAG
Webページ内に配置したボックスなどのブロック要素で 要素の長さを画面目いっぱいの高さに伸ばそうとしたとしても CSSで「height:100%;」と指定しただけでは理想通りにいかなかったりします。 CSSでボックスなどのブロック要素を画面目いっぱいの高さにする際の記述方法を いざという時に忘れてしまいがちなので、今さらながら紹介がてらメモしておきます。 まずはサンプルから。 高さ100%のブロック要素サンプル HTMLソース上では 単純な＜div＞のボックス要素を配置します。 ◆HTML <body> <div id="container"></div> </body> そして、この「#container」の高さを 画面目いっぱいにするにはCSSで以下の様な記述をします。 ◆CSS html,body { height: 100%; } body { font-size: 100%; l
MacVimでHTML,CSS,JavaScriptの文法チェック | Free Writing
鹿児島在住のエンジニアです。Webシステムの受託開発に携わってます。 Playframework/ExtJs/Sencha Touch/Backbone.jsをよく使います。
CSS: Elastic Videos - Web Designer Wall
While I was coding the Elemin Theme (a responsive WordPress theme that I recently designed), one of the challenges that I faced was to make the embedded videos elastic. Using the max-width:100% and height:auto trick works with native HTML5 video tag, but it doesn’t work with embed code using iframe or object tag. After hours of experimenting and Googling, I finally found a trick on how to achieve
!important CSS Declarations: How and When to Use Them — Smashing Magazine
When the CSS1 specification was drafted in the mid to late 90s, it introduced !important declarations that would help developers and users easily override normal specificity when making changes to their stylesheets. For the most part, !important declarations have remained the same, with only one change in CSS2.1 and nothing new added or altered in the CSS3 spec in connection with this unique decla
CSSファイルでHTMLソース内の不適切なマークアップを診断してくれる「holmes.css」｜BLACKFLAG
マークアップされたHTMLソースの記述や文法などをチェックしてくれるツールは数多くありますが、 HTMLソース内にある不適切な記述部分をCSSを使って診断・指摘してくれる「holmes.css」が 構文チェックをする際に使えそうだったのでご紹介。 holmes.css – CSS Markup Detective ≫holmes.css – CSS Markup Detective この「holmes.css」を使用するとHTMLソース内の ———————————————– ・タグの属性 ・リンク先などでの改善すべき記述 ＝ “#” ・W3Cの非推奨な要素／属性 ———————————————– をチェックし、改善すべき箇所を ———————————————– ・エラー（赤枠） ・警告（黄枠） ・推奨スタイル（灰枠） ———————————————– で囲って指摘してくれます。 実際に実装
@font-faceが便利 - スコトプリゴニエフスク通信
けっこう昔からある技術なのかもしれないが、@font-faceでローカルにインストールされていないフォントを指定してHTMLを描画することができることを知った。@font-face - MDC DocsMSDN Microsoft library の @font-faceCSS3 module: Web Fonts/W3C Working Draft以下はAthena Unicodeでギリシア語を表示する例。読みやすく表示されるのでかなりテンションがあがる。この機能はWebデザイナーよりもマイナー言語研究者や学生に有効そうだな。 html> head> meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> style type="text/css"> @font-face { font-family: "At
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
vim-scripts/Better-CSS-Syntax-for-Vim - GitHub
compass-style.org is almost here!
How to Create Diagonal Lines With CSS | Envato Tuts+
