CSS Grid Layout入門。対応ブラウザが出揃った新しいレイアウト仕様 - ICS MEDIA
CSSのGrid Layoutとは、ウェブサイトのレイアウトを構築するための新しい仕様です。今まではウェブサイトのレイアウトを実現するために、floatやFlexboxを使っていた方が多いのではないでしょうか。 Grid Layoutを使えば、HTML要素の構造を汚さず、従来の手法に比べてウェブサイトのレイアウトがつくりやすくなります。たとえばfloatだと親要素にdivを増やす必要があったのが、Grid Layoutを使えばそのようなムダなHTML要素を増やさなくて構わなくなります。 今回はレイアウトをつくりながら、Grid Layoutの基礎知識について紹介します。余裕のある方は、記事を読みながら実際に手を動かしてレイアウトをつくってみましょう。 この記事で学べること Grid Layoutの基本的な使い方 Grid Layoutの利点 サブグリッドの使い方 よくあるレイアウトをつくり
PostCSS - a tool for transforming CSS with JavaScript
Add vendor prefixes to CSS rules using values from Can I Use. Autoprefixer will use the data based on current browser popularity and property support to apply prefixes for you. :fullscreen { }CSS input:-webkit-full-screen { } :-ms-fullscreen { } :fullscreen { }CSS output PostCSS Preset Env, lets you convert modern CSS into something most browsers can understand, determining the polyfills you need
CSSシークレット
本書はデザインの手引書ではありません。――「はじめに」より 本書では、デザインに焦点を当てるのではなく、「いかに問題を解決するか」がコードで示されます。視覚効果、ページ構造、ユーザーエクスペリエンスといった8つのカテゴリーから47の項目を挙げ、日々直面する現実的な問題――同じことを繰り返さず（DRY）、保守性、柔軟性に富み、軽量かつ標準に準拠したCSSスタイル設計を実現する――をコーディングで解決していくテクニックを学ぶことができます。解決策を発見するまでのプロセスを理解することが課題解決までの近道であるという考えのもと、背景にある考え方までひもといて解説。すでにCSSを使っている中・上級のCSS開発者を対象とした本書は、CSSで実現できることを広げてくれる一冊です。 推薦の言葉 はじめに 謝辞 メイキング 本書について 1章 イントロダクション Web標準は敵か？ 味方か？ CSSコーデ
This domain name is registered with Netim
Netim offers nearly 1,000 geographical (ccTLDs) and generic (gTLDs) extensions. Find the perfect domain name Netim regularly offer discounts on domain names. Some extension start at $1.50 excl.tax for the first year. Discover all of our special offers Whether your website is personal, professional or an online store, you will find the perfect offer for your projects! Discover our web hosting plans
sanitize.css
Render elements consistently. Style with best practices. sanitize.css makes browsers render elements consistently and allows you to style with today’s best practices out-of-the-box. CSS inheritance is assigned universally so that styles cascade naturally and consistently. Wherever possible, the box model operates more intuitively. Every normalization and opinionated default is carefully documented
Ja - Scalable and Modular Architecture for CSS
大規模なプロジェクトにおいて最適な構造を見つけ出すために自分自身(そして自分の周りの人たち)のプロセスを分析してきたが、その結果、私が見つけ出したのはプロセスは規模の大小に関わらず大規模なサイトであっても小規模なサイトであっても同じように有効なプロセスだった。 プロジェクトやチームが大きくなるのに併せてCSSをより柔軟に、よりメンテナンスしやすいCSSを書くための構造について学んでいこう。 What is it? SMACSS (スマックスと発音する) は厳格なフレームワークというよりはスタイルガイドである。インストール、またはダウンロードするライブラリは本書にはない。SMACSSはデザインプロセスを分析するための手法であり、厳格なフレームワークを柔軟な思考過程とする手法だ。そしてCSSを使ったウェブサイトの開発に対する一貫したアプローチをドキュメント化する試みでもある。いったい誰が現在に
Home - Scalable and Modular Architecture for CSS
SMACSS was written in 2011. This site remains for archival and educational purposes. I’ve been analyzing my process (and the process of those around me) and figuring out how best to structure code for projects on a larger scale. What I've found is a process that works equally well for sites small and large. Learn how to structure your CSS to allow for flexibility and maintainability as your projec
Object-oriented CSS
Hosted Play with these in Firebug to learn the basics. Template Grids Module Content (very alpha) Downloads on Github Velocity download Alternate download Stuck? If you don't keep up with any of the exercises you can view (and download) the finished examples here. Starting Template Exercise 1: Template Exercise 2: Grids Exercise 3: Module Manipulation Exercise 4 Module Creation Welcome, Velocity C
【保存版】IEのバージョンを判別し、バージョンごとにスタイルを適用する3つの方法 | DX.univ
エンジニアの菊池です。 今回、初めてブログを投稿させていただ[...]エンジニアの菊池です。 今回、初めてブログを投稿させていただくことになりました。 業務では主にフロントエンドの実装とマークアップ等を担当しています。 さて、Windows XPのサポート終了まで残り約8ヶ月となりました。 ようやく長くにわたり苦しめられてきたIE6から解放されることになりますが、でも実はIE7、8、9もIE6ほどではないまでもバグや独自解釈が多かったりします。 そんな時にはCSSハック等の手法やJavascriptを利用してIEだけ特別な処理やスタイルを適用したりします。 ということで今回かなり今更感はありますが、自分用の備考録も兼ねてIE6〜10のバージョン別CSSハックと条件付きコメント分岐、jQueryによるIEバージョン判別の3つの方法についてまとめてみました。 1.CSSハック /* I
マークアップ・エンジニアのTips
マークアップエンジニアの業務は一般に「HTMLを作ること」とされますが，実際には，HTMLを書くだけに留まらず，Webサイトのユーザー・インタフェースを実装したり，そのためのツールに精通している必要があります。ユーザーがサイトを訪れてから目的を達成するまでの“体験（エクスペリエンス）”の質を左右する仕事，というわけです。この連載ではマークアップエンジニアの仕事にまつわる話を中心に取り上げます。 ・第1回 マークアップエンジニアって何？ ・第2回 CSSレイアウトとか，Web標準とか ・第3回 Webページで行間はどのくらいにしましょうか？ ・第4回 やっぱりXMLか ・第5回 Internet Explorer 8 Betaについての雑感 ・第6回 マークアップする人から見た，こんなディレクターは嫌だ！ ・第7回 CMSの需要について考えてみた ・第8回 「CSSによるデザインワークと相性
meyerweb.com
What happened was, Brian and I were chatting about W3C GitHub issues and Brian mentioned how really long issues are annoying to search and read, because GitHub has this thing where if there are too many comments on an issue, it snips out the middle with a “Load more…” button that’s very tastefully designed and pretty easy to miss if you’re quick-scrolling to try to catch up. The squiggle-line wou
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Mads Kristensen
GitHub - hiloki/flocss: CSS organization methodology.
GitHub - postcss/postcss: Transforming styles with JS plugins
GitHub - MoOx/postcss-cssnext: `postcss-cssnext` has been deprecated in favor of `postcss-preset-env`.
BEM
BEM