【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にすることができます。

関連記事

【フォント】サインに最適なフリーのシンボンルフォント

WEBサイトや印刷物のデザインにおいて、メニューやボタン、マップ上のシンボルなどに利用者にわかりやすく内容を伝えるためアイコンを用いることがあります。 ビジュアルで内容を伝えることができるシンボルタイプのフリーフォントをまとめてみました。 Heydings Com...続きを読む

2015.02.14フォント

【WP】WordPressへのログインセキュリティを高める『Login LockDown』

WordPressの管理画面には「ユーザー名」と「パスワード」を使用してログインをしますが、ブルートフォースアタックなど外部から不正なログインが行われるリスクも存在します。 ブルートフォースアタックとは、辞書ツールや単語帳を使いあらゆる文字の組み合わせてパスワードと合う...続きを読む

2015.02.20WordPress

HTML5の可能性とメリット

HTML5とは? W3C より2008年1月22日にHTML5のドラフト(草案)が発表、2014年には正式に勧告されるのではないかと言われています。 HTML5は、ウェブページのヘッダ情報を示すhead要素、ナビゲーションのブロック用のnav要素、コピーライトなどのフッタ...続きを読む

2015.02.06HTMLコーディング

森のなかま藤枝様WEBサイトの制作

ペレットストーブ・木質燃料の販売の「森のなかま藤枝」様のWEBサイトの制作いたしました。 ペレットショップ「森のなかま」は、2002年から地域の環境や自然、森林、エネルギーに関わる仲間があつまり活動してきた「静岡森林エネルギー研究会」の店舗として2015年に浜松市天竜区に開...続きを読む

2018.11.30WEBサイト制作

美容室グランディール様ロゴ制作

富士宮市にある『美容室グランディール』様のロゴを制作いたしました。 お店のお名前である「grandir(グランディール)」はフランス語で「成長する・育つ・大きくなる」という意味を持つことから芽が育つ、そしてお客様から愛されるお店をなることをイメージしてハートをモチーフに...続きを読む

2015.02.06ロゴ制作美容室