スタイルは適度に小さく正確に - CHROMA
CSS Architecture Advent Calendar 2014 の12日目。 SMACSS や BEM など、去年のように新しい CSS の設計手法は今年学ぶ機会が作れなかった。その代わり、いくつかのサイトを作る中で気づいたことや、自分なりに気にかけたことがあるのでそれを書いておこう。 コードを載せたら少し長くなってしまったので、ページ内リンクを貼っておく。 要素本体と変化しやすいスタイルを分ける 表現したい内容を正確に表す ショートハンドは少なめに CSS を書く以上はプロパティや値の扱いを軽視することはできない。もしかしたら設計の話からは逸れているかもしれないが、2つ目と 3つ目ではプロパティや値に注意して書くことで予期した結果が得られるというようなことを書いた。 要素本体と変化しやすいスタイルを分ける 基準となるものは除いて、配置場所によって内容が変化しやすいスタイルは主
Media Query の設定 - CHROMA
em 指定で Media Query の設定を行った。 各サイズは font-size: 100% ( 16px ) を基に計算される。 コンテンツの横幅には一行40文字入るようにしてる。 コンテンツの横幅に48文字入るスペース、つまり左右に4文字ずつ入る余白が失われたときは font-size: 100% にする 左右に4文字ずつ以上の余白、上下に24文字入るスペースが失われたときは font-size: 112.5% にする 左右に24文字ずつ以上の余白、上下に4文字ずつ以上入る余白が確保されたときは font-size: 131.3% にする html { font-size: 100%; } @media (min-width: 48em) and (min-height: 24em) { html { font-size: 112.5%; } } @media (min-widt
CSS Coding Guide - CHROMA
ひとまず書き殴った。 プロジェクトでスタイルシートの「一貫性を保つ」ためのドキュメント。 このルールを守っていくのは難しい（しんどい）場合はドキュメント内容を見直そう。 このドキュメントでは以下の内容を含んでる。 エンコードなどのメタルール インデントなどの書式ルール ネストの上限などのコーディングルール メタルール エンコード UTF-8 を使用する: @charset "UTF-8"; コメント 普通のコメントは普通に、 /* */ 形式で書く。 TODO コメントは以下のように書く: .module { backround-image: url(//lorempixel.com/200/200/); /* TODO: change dummy image */ } Sass 使ってる場合、スタイルガイド用のコメントはコンパイル後消されるように // を使って書く: // ## Mod
Grunt を導入してみて - CHROMA
Frontrend Advent Calendar 2013 21 日目の記事。残りの日数もあと僅か。 明日は @ygoto3 さん。 Grunt を入れた。 まだ実際のプロジェクトでは使えてなくて下の方であげている Gruntfile.coffee のタスクもちょっと動かしてみただけ.. なので、今の設定はこれから色々変更するかと思う。 導入に参考にさせてもらったのは以下の通りなので、導入を考えてる人は一度見てみてはどうだろう: Getting started 今どきのGruntを使ったフロントエンド開発（HTML/CSS編） Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門 今入れてるパッケージと、入れてないけど気になってるやつ 今回 Grunt を使い出すのをきっかけに、いい機会だから「HTML でも普通に書けるし.. CSS でも普通に書けるし.. 」って
CSS レイアウト関連の内 4 つをみてみる - CHROMA
CSS Property Advent Calendar 2013 14日目の記事。 明日は @watilde さん。 先日のHTML5 CONFERENCE 2013 の中で "CSS Regionsを使った新しいCSSレイアウトを作る方法" というセッションを聞いて依頼、CSS レイアウトが気になったので少し調べてみました。 今回は Flexible Box Layout, Multi-column Layout, CSS Regions, CSS Shapes を調べました。 各 CSS レイアウト の概要を書く際、Microsoft Developer Network の CSS セクション を参考にさせて頂きました。 参考サイトにデモが上げられているものが、こちらに関しては Google Chrome Canary 動作を確認しました。 また、Canary で各サイトのデモを確認
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
アニメーションに残像をつける - CHROMA
Webとネットワークの基本用語 - CHROMA
