タグ

2015年2月4日のブックマーク (3件)

  • CSS: marginの正しい理解 - kojika17

    toggle()や変数、calc、:matchなど、今までにないCSSプロパティ、セレクタが提案・実装されて、CSS3, CSS4も楽しくなってきています。 border-radiusや、box-shadowなども、古いAndroidブラウザ以外なら、prefixなしで使える状況も増えてきました。 最新技術は、これから必要になってくるかもしれませんが、基も大切です。 float や position など、CSSコーディングを悩ませるタネはいくつもありますが、今回はその中でも私がCSSで一番難しいと思う margin について書きます。 「marginはバグが多い」という声をたまに聞きます。 しかし話を聞いてみると、正常な動作をバグと間違って認識しているケースもあります。 marginを正しく理解することによって、効率的なレイアウトを構築できますので、基的な内容ですが、読んで頂ければ幸

    CSS: marginの正しい理解 - kojika17
    iwmr
    iwmr 2015/02/04
  • CSS の calc を使えば複雑なサイズ指定が可能らしい | NeGiMeMo.net

    bell賞味期限切れコンテンツ この記事は公開または最終更新から1521日くらい経過しています。 このメッセージが表示されている記事(特にプログラミング系)は情報が古くなっている可能性があるので注意して下さい。 こんにちは。 サイトを作ってる時、デザインによっては、%指定とピクセル指定を混在させたい時ってありませんか? 例えば、「幅100%指定しつつそのなかの要素はそこから10px引いたサイズを利用したい」なんて状況ですね。 そんな時は calc() というファンクションを使うと簡単に実現できるそうです。 どんな時に使うのか 例えば hx タグの装飾でたまに見かけるこーんなデザイン 普通に書くとこんな感じでしょうか? h1 { font-size: 16px; border: 1px solid #cccccc; background-color: #2f3297; position: r

    CSS の calc を使えば複雑なサイズ指定が可能らしい | NeGiMeMo.net
    iwmr
    iwmr 2015/02/04
  • SASS/SCSSで基本カラーを設定して効率よくカラーバリエーションを作成する

    共通のSCSSファイルを作成する カラー設定は他のSCSSファイルから共通して使用すると効率が良いです。 なのでカラー設定用のSCSSファイルを最初に作成します。 共通の変数は「_variables.scss」というファイル名にします。 「_」で始まるファイルはコンパイルされません。 _variables.scss $base-color: #536A97; とりあえず「$baseColor」という変数を一つ作成しました。 変数を使用する さきほどカラー設定した変数を使用してみましょう。 base.scss @import "_variables.scss"; h1 { color: $base-color; } 適当なファイル(base.scss)を作成したら、カラー設定した「_variables.scss」をインポートします。 あとは使いたい場所に「$baseColor」を記述するだけ

    SASS/SCSSで基本カラーを設定して効率よくカラーバリエーションを作成する