css

コードメモ / css

Sassってみよう!〜@mixin編〜

mixin編

今回は@mixin

@mixinはスタイルをまとめて定義することが出来る便利な機能です。
これだけだと前回ご紹介した@extendと似ているのですが、
@mixinは引数を使えるという点と、
@extendと違いセレクタがグルーピングされない
という点において違いがあります。

続きを読む

Sassってみよう!〜@extend編〜

@extend編

今回は@extendについてです。

@extendは指定したセレクタのスタイルを「継承」してくれる便利な機能です。
例えば、見出し周りや表組み、ボタンなどの部品をcssのコード量を増やさずに、すっきりと効率よく管理できるようになります。
その上、使い方はとても簡単なので、是非とも活用したい機能のひとつです。

続きを読む

Sassってみよう!〜ネスト編〜

Sassネスト編

前回はインストールからコンパイルまでをご紹介しましたが、
今回から数回に分けてSassの基本的な使い方を簡単にご紹介しようと思います。(私自身、Sassの基本的な機能しか使えませんww)

続きを読む

Sassってみよう!〜コンパイル編〜

(※当記事ではSass = SCSSとしています。)
前回のインストール編に続き、今回はコンパイル編
そもそも前回、何のためにSassをインストールしたかと言えば「コンパイル」するためです。
せっかくのScssも、コンパイルしないとそのままでは使えないのです。
そこで、いつものごとく簡単に備忘録してみました。
この記事では「ターミナル」「Dreamweaver」でのケースをご紹介します。
続きを読む

Sassってみよう!〜インストール編〜

Sassのインストールにちょっと手こずったので備忘録。
といっても、作業自体は5分もかからないので
Sassに興味がある方はこの機会にインストールだけでもしてみてはいかがでしょうか。
(※インストール編となっていますが、今後、続編を書くかは気分次第です(^_^;)
続きを読む

便利なEmmet

そんなにガシガシ使いこなしている訳ではないですが、
(効率を要求されるような仕事もしてないですし。)
やはり知っていると便利な「Emmet」
続きを読む

使いやすいhsla

前回、色名を覚えれば感覚的に指定できて便利という記事を書きましたが、
色の知識がある方や、DTPの現場におられた方、グラフィックソフトを使われている方には
16進数やrgbよりもhslの方が感覚的に指定できて便利かもしれません。
しかもhslaだと透明度まで指定できて更に便利です。
続きを読む

覚えやすい色の名前

コードを書いていて
とりあえずで、ざっくりとレイアウト組む時
それぞれのboxに色付するのですが、
16進数やRGBでは値がわからず感覚的に指定できないので、
そんな時、色名で指定すると早かったりします。

私も全部は覚えていませんが、
色名を覚えていたら便利なのでまとめてみました。
(あくまでも私が覚えやすい色名ですが…)
続きを読む

1 / 212