Grid
Why bother with responsive? We want our websites to be useable on all devices by responding to the user’s behavior, screen size and screen orientation. A Fragmented World As of 2013, there are thousands of different devices and screen sizes that browse the internet, so it’s impossible to design layouts to target them all. Instead, we must take a more fluid approach to design. Mobile First The term
メンテナブルCSS
概要 メンテナブルなCSSを目指し、定義された一般的なCSSルールの紹介と、それらのルールを適用するにあたって活用できるツールを報告します。 1. 序論 CSSは記述ルールが簡素であり、少しの学習コストですぐに記述ができる手軽なツールです。 しかし、大規模なアプリケーションで複数人で開発するケース等では、見栄えだけしか考えずに身勝手にコーディングしてしまうと、 非常にメンテナンスコストがかかる負の遺産が作られてしまいます。 そのためCSSの品質を保つために様々なプロジェクトで、CSSの定義ルールが決められています。 本稿では一般的なCSSの定義ルールと、そのルールがなぜ作られたのかを合せて報告致します。 また、CSSのルールを適用するにあたって、手動・目視でルールの適用をチェックするのは非常にコストが高い作業です。 これらルールの適用を補助するツール群を、合せて報告致します。
雑に書いたCSSでもがっちりと美しく整形してくれるwebサービスを使って見えないところもオシャレに変身！ * prasm（プラズム）
インナーのタンクトップにまでこだわる男。フレッシュです。 さて、本題に。 ブログやサイトの見た目をいじる方は避けて通れないCSSです。 できれば後々の管理を楽にするためにちゃんと書きたいところですが、なんだかんだ動けばいいやの精神で雑に書いてしまうのです。僕は。 とはいえ、直接CSSを覗かれた時に「ははーん、雑！」とか言われないため（そんなシチュエーションはまあないけどな！）に、簡単にどうにかする便利なサービスがありますので、ご紹介を。 見えないところにも気を配りたいものですね。後々のいらいらを減らすことは、すなわち効率に関わるのです。だろ？未来の俺！ はい、という訳で。 #header { background: #8bcdba; border-bottom: none; padding:0; margin: 0; } #header .header-wrap { background:
Sass で Font Awesome を使おう « shilog
この記事は CSS Preprocessor Advent Calendar 2012 23日目の記事です。 Font Awesome Font Awesome と言えば Twitter Bootstrap のアイコンを Web フォントとして使えるということでお馴染みのサービスです。Web フォントなので、CSS でアイコンの色やサイズを調整することができますので、ある程度柔軟にアプリや Web サイトなどで使用することができます。 Font Awesome のサイトを見てみると、LESS と CSS についての導入方法は書いてあるのですが、Sass については書いてない（と思う）ので、その手順をシタタメます。 導入手順 まずは Font Awesome のサイトでファイル一式をダウンロードして解凍します。するといくつかフォルダが出来上がります。 Font Awesome のサイトに
【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜Compass基礎編 | DevelopersIO
はじめに 季節の変わりめで風邪をひいていませんか？僕は38度の熱で会社を休みました。ごめんなさい。 前回は「【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜基礎編」でGUIでSCSSを使えるScout.appのインストールからセットアップについて、またSCSSの4つの主な機能「変数」「宣言ブロックのネスト」「Mixins（関数）」「セレクタ継承」についてご紹介しました。 そこで、今回はGUIツールのScout.appに同梱されているCompassについて活用方法を紹介したいと思います。Compassは、SCSS使いなら必須の便利なフレームワークです。 Compass - CSS オーサリングフレームワークとは compassはSassを使ったオープンソースのCSSオーサリングフレームワークです。 compassを使うことで、Bender Prefix、CSS Spriteを自動
【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜基礎編 | DevelopersIO
はじめに 早速ですがみなさん、黒い画面（コンソールやターミナル）はお好きですか？ ちなみに僕は最近やっと黒い画面に対していくつかの呪文使えるくらいになりました。文系理系でもどちらでもなくさらに低学歴の僕にとっては潜れば潜るほど黒い画面がつきまといます。（今では好きですよ、黒い画面） 今回は、すぐに使えるSCSS入門｜基礎編ということで、「黒い画面など見たくない！」というあなたにも、GUI操作だけですぐに使えるアプリケーションのインストールからSCSSの基本的な利用方法について、実際の開発に使えるポイントを押さえて解説していきたいと思います。 SCSSを覚えて生産的で楽しいWebサイト制作・アプリケーション開発をしていきましょう。 まだSCSSを知らない方向けに「SCSS」って？ 前回の記事「Media Queriesの記述を少し楽にしてくれるSCSS（Sass） Mixin（自作）」からの
オンラインでCSS編集&ホスティング。本家終了に伴いオープンソース化·WebPutty MOONGIFT
WebPuttyはオンラインでCSSを編集し、リアルタイムプレビューできるサービスです。2012年末のサービス終了に伴ってオープンソース化されました。 オンラインでCSSを編集してリアルタイムプレビューしたり、ホスティングまで行うサービスWebPutty。今年いっぱいを持って終了が発表されており、そのシステムはオープンソース化されています。 ローカル版です。システム自体は本家と変わりません。 ログインします。 最初にチュートリアルが見られます。順番にシステムの説明が表示されます。 エディター画面です。 Firebugも使えます。 色を変えました。リアルタイムに反映されます。 編集をシェアできます。 コードをサイトに埋め込めばホスティングも可能です。 エクスポートして保存すればローカルで使えます。 MOONGIFTを読み込もうとしたらエラーが出てしまいました…。 WebPuttyはCSSをダ
465+ Useful CSS Layouts for Download | Tripwire Magazine
465+ Useful CSS Layouts for Download by Sonny M. Day | Last updated Oct 8, 2016 | CSS | 12 comments Cascading Style Sheets (CSS) is a language which is used primarily in text formatting. But nowadays, CSS is not only used in presentation semantics but in positioning contents as well. Positioning content in a webpage using CSS however, is a very difficult and time-consuming task especially for new
CSSでモーダル・ウィンドウ
pointer-eventsプロパティでnoneを指定すると最前面に置いた要素を無視して普通にページ操作が可能になります。なので、そういう風にしておいた要素をopacityプロパティで非表示にしておけば、普段は見えないけど特定の操作で最前面に飛び出すモーダル・ウィンドウとかも簡単に出来ます。pointer-eventsプロパティってこういう使い方するためにあるの？ Demo: Pure CSS Modal Window .window { opacity: 0; pointer-events: none; } で、見えない・操作できないウィンドウが作れるので、:target擬似クラスで表示の切替を行えばOKです。 .window:target { opacity: 1; pointer-events: auto; } 簡単！ デモのようにposition: fixed;とかしておくとよりら
軽量で、シンプルなCSSフレームワーク・Atatonic
結構前からあるみたいですけど、なかなか 良かったのでメモがてらご紹介。軽量で シンプルなCSSフレームワークです。有名 なフレームワークは使いやすく、高性能 な傾向ですが、結局無駄が出てしまうので 場合によってはこういうシンプルなもの が役に立ったります。 ちょっと触って良さそうだったので忘れないように、みたいな記事です。軽量なCSSフレームワークで、中身もシンプルだったので好みでした。最近はレスポンシブ対応ばかり目に行ってるので、こういうのも試しておきたいです。あんまり時間無いですけど・・ 一応HTML5にも対応してました。タイポグラフィに目を向けたCSSフレームワークで、罫線に沿ったテキストコンテンツを実装出来ます。 一応触ってみましたけど、結構悪くなかったです。個人的な感想ですけどｗ 柔軟性を考慮したCSSフレームワークは便利なんですけど、理解するのが面倒なので僕程度ならこれくらいで
HTMLとスタイルシート（CSS）の業務スキルレベル 判別表 （５段階） - 主に言語とシステム開発に関して
スキルチェックの目次へ HTMLおよびスタイルシート（CSS）を利用したWebページ制作の，簡易スキルチェックのための調査表。印刷用。 マークアップ・エンジニアとしてのレベルを測定する。 これは，「Webページをコーディングして作る人」全般に当てはまる。 レベルは，０から４までの５段階。 （０） 非エンジニア （１） 初学者（入門書を学習してゆく段階） （２） ノーマル（基礎的な知識があり，ある程度の画面を作れるようになった段階） （３） 中級者（Webアプリの開発プロジェクトで１人月としてカウントできる水準） （４） 上級者（メインPG/デザイナとして，Web UIの主担当を任せられる水準） Webアプリのプロジェクト開始時に作業振り分けをするにあたって，新規メンバ全員にこれを渡して回答してもらうという用途を想定。 なお，システム開発上のスキルをチェックする事が主眼なので，アーティスト（
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSでよく使うコードのまとめ、ブレイクポイントの定義・Flexboxのグリッド・ボタン・フォーム・ユーティリティなど -Corpus
CSS Reference | Codrops
filter.css
悩まないコーディングをしよう！ OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計（Sass対応）
CSS Architecture with OOCSS, SMACSS, BEM
Kadoppe’s Blog
イマドキCSS設計
Absolute Centering
CSS Filter experiment
