SCSS– tag –

SCSS を使っているとより高度な記述をするようになっていくことと思います。 今回は、記述した場所より上のセレクタ（親）のネストを解除する方法を説明したいと思います。 【セレクタのネストを解除する】 @at-root を記述することで、親セレクタのネスト...

前回の SCSS でのカラー管理 に引き続き、比較的利用頻度の高いカラー操作についてのメモとなります。 配列で管理されたカラーのバリエーション作成時等に活用できれば、大幅なコストダウンにつながるかと思います。 【目次】 利用頻度の高いカラー操作の...

先週説明した カラーの配列 は Sass v3.3 から追加されたデータ型、map を使用したものです。 今回は map の使い方について、もう少し詳しく説明したいと思います。 【目次】 map（連想配列）の操作の仕方 まとめ 【map（連想配列）の操作の仕方】 前回使...

SCSS では、ネストされたクラスの記述・メンテナンスのしやすさに加え、ループ処理や変数が利用できるのが最大のメリットです。 今回は SCSS 変数にカラー名で配列化し、利用する方法を説明します。 【目次】 カラーを配列化し利用する まとめ 【カラーを...

SCSS でカラーを変数化すると、再利用性が高くなりとても便利です。 今回は、SCSS で変数化されたカラーを利用して、明るさや彩度を変更する方法を説明したいと思います。 【目次】 定義したカラーの明るさを調整する まとめ 【定義したカラーの明るさを調...

Bootstrap でよく利用するオブジェクトの一つがボタンだと思います。 Bootstrap ボタンには通常時と hover 時の色が細かく指定されていますが、今回は hover 時の色変更を opacity での透明度で表現し、色変えを行いやすいサンプルコードをメモしておきま...

A4 サイズを Web 上で描画したい場合、パーセント比率で指定した div を作成すれば簡単に実現できます。 しかし、レスポンシブデザインで可変する横幅に合わせ A4（ISO 216 A列）の縦横比率を、維持した高さを定義しようとすると、少々面倒なことになりま...

Bootstrap 4 Alpha から Beta の仕様変更で、グリッドレイアウトの offset クラスがなくなりました。 今回は、Bootstrap 4 Beta での offset の代わりとなる、auto の使い方をメモしておきます。 【目次】 Bootstrap 4 Beta グリッドレイアウト auto の使...

Bootstrap のグリッドシステムを利用し、iOS 各デバイスに対応した SCSS メディアクエリを作成しました。 現時点での最新 iOS デバイスである iPad Pro 10.5 にも対応しています。 スタイルコーディング時のテンプレートとしてご活用ください。 【目次】 B...