【HTML】Sass・SCSSを使ってWEBサイトの制作を効率化する

CSSコーディング

現在の多くのWEBサイトではHTMLとCSSによって構築されています。WEBサイトの制作方法を勉強するとHTMLとCSSについてを学ぶと、ここ最近は、SassやSCSSといったキーワードが出てきます。SassやSCSSを活用しなくても、もちろんWEBサイトを制作することができますが、Sass・SCSSを使うことでWEBサイトの制作を効率化することができます。今回は、Sass・SCSSとは何か?を簡単にご紹介します。

Sassとは?

Sass(サース、サス:Syntactically Awesome Stylesheets)は、CSSを効率よくまとめ、開発効率を良くしようと開発されたスクリプト言語の一つです。拡張子は.sassという形で管理ができます。

WEBサイトを構築するとCSSは、何千行ものコードによって記述されることがあります。規模の大きなWEBサイトになるとさらに膨大なコードの記述になり、開発時間がかかったり、記述ミスや、見落としが出ているリスクが高まります。

そこでSassでは、記述するコードの簡略化、CSSだけでは記述できなかった変数の利用、プログラミングなどで使われるループ、引数、複数のファイルを統合するといった管理方法で効率化しています。

SCSSとは?

SCSSは、Sassで構文をよりCSSの構文に近づけたブロックの書式を用いたものです。拡張子は.scssという形で管理ができます。

Sass・SCSSをWEBサイトに組み込む方法

Sass・SCSSをWEBサイトへ組み込む場合、そのままではCSSとして認識できないためCSSに変換するか、変換するためのスクリプトと一緒に読み込み利用することができます。Sass・SCSSを変換する(コンパイル)の方法としては、コマンドや専用のソフトを使う方法があります。

WEBのコーディングで使われるAdobeのDreamweaverでもSass・SCSSを変換(コンパイル)してCSSにすることができます。

関連記事

【HTML】Bootstrap4を使いレスポンシブサイトをコーディングする《導入編》

Twitterのデザイナーや開発者が作成した『Bootstrap』は、フロントエンドのフレームワークとオープンソースプロジェクトです。『Bootstrap』は、CSS、JS、およびフォントが基本セットになっています。HTMLのテンプレートソースを組み合わせて、レスポンシブ対応...続きを読む

2018.09.22BootstrapHTMLコーディング

業務支援・統合型AIとは何か|日常業務にAIが溶け込む時代へ

前回の記事では、検索型AIとChatGPTの使い分けを整理しました。 ここまで学ぶと、 「生成AIには、それぞれ得意な役割がある」 という感覚が少しずつ身についてきたと思います。 では...続きを読む

2026.01.04生成AIパスポート

【WP】標準ギャラリーをスライド式にするプラグイン『WordPress Canvas Gallery』

『WordPress Canvas Gallery』は、WordPressの標準ギャラリーをスライド式のギャラリーに対応させることができるプラグインです。 『WordPress Canvas Gallery』ダウンロード プラグインは「wordpress.org」のプ...続きを読む

2015.02.18WordPress

個性こそが美? 〜ロマン主義と「魂の表現」〜

「カノン」からの決別 18世紀末〜19世紀初頭、フランス革命や産業革命によって社会が大きく揺れ動く中、 人々の心には、理性や秩序では語り尽くせない“不安”や“希望”が渦巻いていました。 そんな時代に登場したのが、「ロマン主義(Romanticism)」です。 美しさとは...続きを読む

2025.07.24カノンデザイン論ロマン主義

Google Chart API でQRコードを自動生成する方法

Google Chart APIはGoogleが提供しているグラフなどのイメージを作成してくれるAPIサービスです。URLに必要な値を与えるだけで、グラフなどのイメージを返してくれます。 主にグラフなどを作成することができるのですが、その機能のなかにQRコードを作成して...続きを読む

2015.03.09HTMLコーディング