Chrome DevToolsとSourcemapを使ってSassやCoffeeScriptをブラウザで編集
いままで普通に使っていたけど、知らないという方から質問を受けたので、再確認も含めてざっくりまとめ。 ChromeのDevToolsを活用してブラウザでの開発環境が整ってきている。SassやCoffeeScriptの様なPreprocessorもブラウザで編集、変換、再読込みを自動でできる。 まず、SassはSorcemap対応の3.3系を利用。 [shell] $ gem install sass –pre [/shell] 今回はCoffeeScriptはnpmで [shell] npm install -g coffee-script [/shell] たとえばstyle.scss, script.coffeeという以下のようなファイルがある場合 [css] body { background-color: #000; } [/css] [ruby] func = -> console
[CSS]ウェブページを印刷対応にする際に、加えておくと効果的なスタイルのまとめ
ウェブページを制作する際に、デスクトップ・スマフォ・タブレットと多様なデバイスでの表示を検討する必要がありますが、プリンターでの印刷も忘れてはならない大切なデバイスです。 あなたのウェブページを印刷対応にする際に加えておくとよい、シンプルで効果的なスタイルシートを紹介します。 The printer is a device too! Responsive Design.isは文字通り、レスポンシブ デザインについてさまざまな情報を提供するサイトで、「プリンターも大切なデバイスですよ！」というのは、確かに忘れがちですね。 印刷対応にするスタイルはHTML5用で、シンプルながら非常に効果的なスタイルがまとめられています。 多くのウェブページはそのまま適用しても問題ないと思います。 CSS @media print { section { display: block; page-break-b
色の組み合わせチェック - 読みやすい前景色と背景色
誰にも読みやすいコンテンツとするためには、文字色と背景色のコントラストをしっかり確保しなければなりません。これを客観的にチェックするため、色の明るさの差などを計算する仕組みを用意してみました。 色の組み合わせ検証 テストの手法 コントラストの計算 色覚偏位のシミュレーション 当サイトが独自に加えたコントラストの段階評価 コントラストと読みやすさの相関関係 色の組み合わせ検証 検証してみたい文字色と背景色の組み合わせを入力してみてください。色の指定には3桁もしくは6桁の16進数カラーコード、あるいは色名（CSS2の色名＋SVGの色名、計147色）およびrgb()の表現が使えます（初期値は、読みにくい例が入っています）。また、入力欄左ボックスから216色のパレットを呼び出して入力することもできます。文字色2、3は、複数の文字色の組み合わせを表示するためのオプションで、コントラストなどの計算は行
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
