Scss

【Scssの基本】@mixin(ミックスイン)の基本的な利用方法

@mixinとはスタイルの集まりを定義し、いろいろなページで呼び出して使い回すことができる機能です。引数を利用すると、定義した@mixin内のスタイルの値を一部変更することもできます。
他ページでも利用されるスタイルを定義する場合、@mixinを作成しておくとスタイル定義の重複が無くなり見やすいScssを作成することができます。

  1. @mixinの基本的な使い方
  2. 引数を利用した@mixinの使い方
  3. 引数に初期値を設定
  4. 引数を複数指定
続きを読む

【Scss】@mixinを利用してFontAwsomeアイコンを疑似要素(:before)で挿入

FontAwsomeを利用すると、Webページ上でWebアイコンフォントを表示することができます。Webアイコンフォントとは、文字と同じように表示できるアイコンのことで、拡大してもぼやけず、色もサイズも簡単に変更できるので非常に便利です。
アイコン挿入方法として、主にHtml内にiタグを貼り付ける方法とCssの疑似要素(:before)を利用して挿入する方法があります。Cssでアイコン挿入のスタイルを作成しますが、Scssの@mixinを利用すると、より便利でわかりやすくアイコン挿入のスタイルを作成することができます。今回は、Scssの@mixinを利用してのFontAwsomeアイコン挿入方法を、サンプルコードを提示しながら説明します。

  1. Fontawsomeとは
  2. Fontawsome5でアイコン表示
  3. 下準備(アコーディオンメニュー作成)
  4. @mixinを利用
続きを読む

【Scss】レスポンシブ対応 メディアクエリ

以前のWebサイトは「PCで見られる」ことを前提にレイアウトを作成していましたが、最近はユーザーの環境も変化し、スマホやタブレットでWebサイトを見る人が増加しています。
本来であれば、PCとスマホのレイアウトをそれぞれ(2つ)用意する必要があり、デザイン作成時間が2倍になるため、非常に手間がかかってしまいます。
そんな中、1つのレイアウトでどのウィンドウサイズにも柔軟に対応できる「レスポンシブWebデザイン」が注目を浴びています。
今回は、レイアウトをレスポンシブ対応するために必要不可欠なメディアクエリについて説明していきます。

  1. メディアクエリとは
  2. メディアクエリの基本
  3. メディアクエリをScssで定義
続きを読む