「Compass」、基礎から応用まで！ | 株式会社LIG
こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh
:link、:visited、:hover、:active の記述順序とその覚え方 - jmblog.jp
スタイルシートでa要素のリンクのデザインをする際に、次のように 4 つの擬似クラスを用いることが多いと思います。 a:link { color: blue; } a:visited { color: purple; } a:hover { color: red; } a:active { color: yellow; } 実はこの 4 つの擬似クラスの記述順序には注意が必要で、 link visited hover active の順番で記述しないと意図した結果にならなかったりします。この順序についてちょっと調べてみたので、まとめてみたいと思います。 なぜこの順番じゃなければダメなのか？ 実践 Web Standards Design には、次のように書かれています。 :hover 擬似クラスと:active 擬似クラスは一連の動作であるので、スタイルシート内でもこの順番で記述しないと有効
Zen-Coding の CSS のチートシート - モノラルログ
Zen Coding で html をパパっと書くのはけっこう慣れてきたんですが、CSS をパパっと書くのはほとんどやったことなかったなあ、ちゃんと覚えたいなあと思いまして、とりあえずチートシートを探してみました。 Zen-Coding のオフィシャルに PDF があったんですが、全部盛り込まれててちょっと量が多い…覚えられない… できたら印刷用に 1ページで、必要なやつだけまとまってるやつが欲しい… ということで、我流で、チートシートを作ってみました。 1ページに納まるように自分が使わなさそうなやつは外して、抜粋した感じで入れてあります。 ↓こちらの PDF です http://monaural.net/lab/zen/zen_css_cheatsheet.pdf これで勉強しまっす。 "margin-left" は "ml", "text-align" は "ta" みたいな感じでけっ
どんなフォームにも使えるjQueryのフォームバリデーション exValidation :: 5509
jquery.validation.jsというフォームバリデーションプラグインを公開していますが、使える場面が割と限定されてしまうような作りだったので、より幅広く使えるようにexValidationという名前で新しいjQueryプラグインとして作り直しました。伴って仕様や使い方が異なる部分も多いので、ドキュメントとして書いておきます。ただし前半のバリデーションルール周りは同じエンジンを使ってるので、ほぼ同じです。ちなみにすごい長いです。。 ルールを割り当てる際のclass名がhogeからchkhogeに代わりました。アップデートして使う場合は注意してください。 サンプル1: エラーを右上に表示 サンプル2: エラーを下に表示 トピックス ダウンロード 使い方 1. JSファイルを読み込む 2. 基本バリデーションルール 3. select, checkbox、radio、複数項目の場合 4
今更幅指定しないボックスの中央寄せ - oogatta のブログ
今更ですみません。常識ですみません。 あれ、これ IE でどうやるんだろ。と思ったので近くにいた凄腕コーディング職人に訊いてみた。こうだった。 display:inline; zoom:1; へぇー！これで IE6/7 で inline-block をエミュレートできるんですね。知らなかった。 というわけで、 <!DOCTYPE html> <html> <head> <style type="text/css"> #outer { border:1px solid #f00; width:400px; height:400px; text-align:center; } #inner { border:1px solid #00f; display:inline-block; *display:inline; zoom:1; text-align:left; } </style> </h
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
