Sassのインポート @import
CSSでは@importを使用して、外部のCSSファイルをインポート（読み込む）ことができます。 SassでもCSSと同様に、...
「Web」一覧
SassをCSSにコンパイル（変換）する環境をVisual Studio Code（VSCode）で作成する
Sassでコーディングしたスタイルは、そのままではブラウザーで読み込むことができないので、CSSに変換する必要があります。 S...
Sassで演算を行う
CSSで横幅（width）や余白（padding）などのサイズを指定する際に、特定の要素のwidthプロパティの値から、paddin...
Sassで変数（Variables）を扱う
プログラムでは変数に値を格納しておくことで、その値を複数の箇所で共有することができます。 CSSでは変数を扱うことができません...
Sassで使えるコメントとコンパイル結果
CSSでは/*で始まり、*/で終わる部分がコメントとして扱われます。 CSSのメタ言語（CSSプリプロセッサ）であるSassも...
Sassでプロパティのネスト（Nested Properties）を使用する
Sassでルールのネストをする方法については、前々回に紹介しました。 Sassではルールセットのネストだけではなく...
Sassで親セレクタの参照を行う &（アンパサンド）
前回はルールのネストについて紹介しました。 ネストを使ってスタイルを記述していると、親のセレクタを参照したい時がありま...
Sassでルールのネスト（Nested Rules）を使用する
ルールのネストは、Sassを記述する上で、最も使用する機能です。 Sassではルールをネストできることで、スタイル（CSS）をHT...
ブラウザー上でSassをCSSに変換できるWebサービス SassMeister
Sassを使うと変数の使用やコードの再利用、条件分岐などのプログラム的な制御構文の利用をすることができます。 Sassを利用するこ...
Font Awesome 使い方・導入方法・カスタマイズ [Webアイコンフォント]
今回はアイコンフォントの「Font Awesome」の使い方についての使い方や導入方法などについて紹介します。 「Fo...
Bulma チートシート [CSSフレームワーク ブルマ]
CSSフレームワークのBulmaとは Bulmaは、オープンソースで開発されている無料のCSSフレームワークです。 レスポン...
Bulma 入門 Tips 使い方 日本語 ドキュメント [CSSフレームワーク]
当ブログでは、CSSフレームワークの「Bulma」の使い方を日本語ドキュメントとしてまとめています。 Bulmaの学習、クラスのリ...
Bulmaのクラス（部品）を組み合わせてWebページを作成する
今回は、Bulmaが提供してくれている様々なクラスを使用して一般的なWebページを作成したいと思います。 ここでは、以下のペー...
Font Awesome アイコンフォント一覧 [Free (フリー) のみ]
Font Awesomeのアイコンフォントの一覧です。 Free（無償で利用可能）のアイコンのみをリストにまとめました。 F...
Bulma viewportの幅に応じた表示と非表示 Responsive helpers [CSSフレームワーク]
Bulmaには、viewport（ビューポート）の幅に応じてコンテンツを表示するか、非表示にするかを切り替えるクラスが用意されていま...