lecture

アクションパネルで自動処理と一括実行そしてドロップレット〜Photoshop

実務上では多くの画像を一括でサムネイルサイズに変換したいなどの要望が出てきます。単純作業はできるだけ自動化して効率をあげましょう。 Photoshopでは単純作業的なアクションは自動化することができます。その手法はエクセルのマクロ作成のよ...
HTML&CSS

CompassをインストールするMac OS X El Capitan編 〜Sass(7)

CompassはSassを利用したCSSフレームワークです。導入はちょっと面倒ですが、うまく導入できるとCSSがすごく楽に書けるようになります。 Compassでできることは、ベンダープレフィックスなどの複雑なCSSを簡単に記述できた...
HTML&CSS

Sassのミックスイン 〜Sass(6)

Sassのミックスインは関数的な働きをするもので、引数で指定した値を利用しながらスタイルを柔軟に定義できます。 ミックスインは「@mixin」で定義をして、「@include」で呼び出しをします。 ミックスインの書き方 @mi...
HTML&CSS

Sassの演算と関数 〜Sass(5)

演算 Sassでは四則演算を行うことができます。それぞれ次の記号を使います。 加算 + 減算 - 乗算 * 除算 / 除算だけは計算式を丸括弧()で囲みます。fontプロパティで使用する記号がバッティングするための処置のようです...
HTML&CSS

Sassの@import 〜Sass(4)

SassではCSSと同様に複数のscssファイルを@importを使ってインポートすることができます。 更に便利な機能としてパーシャルという機能があります。これは複数のscssファイルをインポートして、余計なCSSを作成せずに、ひとつのC...
HTML&CSS

Sassの変数 〜Sass(3)

Sassでは変数を使用することができます。グローバル変数の仕様がSass v3.4から大きく変更されていますので注意してください。(この記事はSass 3.4.19で確認した内容です ) 変数の宣言は$の後に変数名を書き、コロン(:)の後...
HTML&CSS

Sassのネスト 〜Sass(2)

子孫セレクタをSassで書くにはネストで記述します。最近のCSSの書き方として、深い階層の子孫セレクターを使用した記述は敬遠される傾向にあります。そのためネストの恩恵は子孫セレクターよりも後述するメディアクエリなどの方が価値があるかもしれま...
HTML&CSS

Sassの導入 〜Sass(1)

Sass(Syntactically Awesome Stylesheets)はCSSを拡張したメタ言語です。 機能を拡張してより効率的にCSSを書けるようにするものです。 具体的には、変数や関数をはじめ、演算、条件分岐、ループなどスク...
HTML&CSS

Sublime Text3にColorPickerの導入

しばらくatomを使っていたのですが、起動時間が遅いので再びSublime Textに戻ってきました。 Sublime Text3にColorPickerを導入したのでその方法です。 atomはColorPickerのプラグインを入...
HTML&CSS

疑似要素で下線を引く

テキストに下線を引く方法としては「text-decoration: underline」を使用しますが、装飾的な下線としては使い勝手が悪いです。そのため「border-bottom」を使用したりします。けれども、これも決して使い勝手の良いも...
スポンサーリンク
タイトルとURLをコピーしました