Sass入門ガイド

Google Chromeでソースマップを使う

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ソースマップは、CSSプリプロセッサなどのコンパイルや圧縮が行われたファイルの、元の位置を確認できるようにする仕組みです。ここでは、Google Chromeを使ったソースマップによるデバッグの方法を紹介します。
講師:
03:42

字幕

ソースマップは CSS プリプロセッサなどコンパイルや圧縮が行われるファイルの元の位置を確認できるようにする仕組みです。このレッスンでは Google Chrome を使ったソースマップによるデバッグの方法を紹介します。予めデスクトップには my-sass というフォルダを作成しています。このフォルダの中には簡単な Web サイトを作成したファイル群が入っています。CSS は Sass ファイルをコンパイルして作っています。また CSS のコンパイル時に合わせてソースマップファイルも出力しています。まずは通常通りGoogle Chrome で html ファイルを開いてみましょう。タブクリックで Web ブラウザを開きます。Web ページの内容はこの様な感じになっています。また、それぞれの要素には簡単なスタイルが定義されています。これらのスタイルは Web ブラウザに搭載されているデベロッパーツールで確認デバッグすることができます。Google Chromeではデベロッパーツールという名前ですが他のブラウザでは開発者ツールなど他の名前になっていることもあります。ここでは Google Chrome の例をご紹介します。 右上のメニューボタンをクリックしてツールからデベロッパーツールを選んでデベロッパーツールを起動します。デベロッパーツールが起動しました。デベロッパーツールでは表示している Web ページに対して様々な機能でデバッグ行うことができます。例えばエレメンツタブでは表示している Web ページの要素を選択してその要素のスタイルがどの様になっているのか確認することができます。また、その時このスタイルがCSS ファイルの何処の行に定義されているのかこの様な情報も合わせて確認できます。しかし Sass ファイルをコンパイルしてCSS ファイルを出力している場合元々、作業、編集している Sass ファイルとこの Web ブラウザで表示しているCSS ファイルは全くの別のファイルでありまた、このスタイルが定義されている行数も異なります。この編集するファイルと表示するファイルの違いを埋めるために作られたのがソースマップファイルです。現在はGoogle Chromeのデベロッパーツールの設定でソースマップファイルを使う設定にしていませんのでこの部分には CSS ファイルの情報が表示されています。そこで、このオプションをオンにしてソースマップファイルの情報を使ってデバッグできる様にしてみましょう。 デベロッパーツールの右上にあるセッティンスグアイコンをクリックします。表示されたオプションの中から「Enable CSS source maps」というオプションを探します。このオプションにチェックを入れるとGoogle Chrome のデベロッパーツールでCSS のソースマップを利用できるようになります。チェックを入れてみましょうセッティングスの画面を閉じます。すると、先ほどはこの部分に表示されていたデバッグの情報がscreen.css によるものでしたがオプションをオンにしたことでscreen.scssつまり Sass ファイルの情報が表示されるようになりました。また行番号も更新され実際に Sass ファイルの行番号が表示される様になっています。このようにソースマップファイルを使うと実際に表示に使われているのはCSS ファイルで「デバッグに使うのはSassファイル」というようなことができる様になります。ここでソースマップファイルの中身をちょっと確認してみましょう。Web ブラウザを最小化し先ほど作成していたソースマップファイルをIDE にドラッグ & ドロップして開きます。尚ソースマップファイルはCSS や Sass ファイルなどと同じ様に通常のプレーンテキストファイルです。 ソースマップファイルを開きました。ソースマップファイルの主な中身はWeb ブラウザなどが解釈できるように書かれていますので特に詳しく理解しなくても構いません。ここで重要になるのはこの sources という部分とfile という部分です。sources は、このソースマップファイルの元となっているファイルつまり CSS でいうところのSass ファイルにあたります。そのため、ここには screen.scss というそのファイル名が書かれています。またこの Sass ファイルから出力されたファイルそれがどのファイルであるかということがfileという部分に定義されておりこれは CSS ファイルscreen.css というファイルがこの Sassファイルからコンパイルされ出力されたファイルであることを示しています。この両者を繋ぐためのファイルがソースマップファイルです。Web ブラウザからはこのソースマップファイルを元にSass ファルと CSSフ ァイルの関連をチェック、表示していますのでこのソースマップファイルがないとWeb ブラウザでソースマップを使ったデバッグはできません。また Web ブラウザによっては未だソースマップに対応していないものもあります。 ソースマップは比較的新しい機能ですのでお使いの Web ブラウザでソースマップが使えるかどうか一度確認してみてください。尚 Web ブラウザによっては拡張機能などをインストールすることで使える様になることもあります。このレッスンではCSS プリプロセッサなどコンパイルや圧縮が行われたファイルの元の位置を確認できるようにする仕組みソースマップについてGoogle Chrome を使ったデバッグの方法を学びました。

Sass入門ガイド

SassはCSSを効率的に書くための拡張言語です。Sassにはセレクタの入れ子、変数の利用や条件分岐などCSSだけでは実現できないパワフルな機能が数多く用意されています。これらの機能を使うことでCSSを記述するのに割く時間を大幅に減らすことが可能です。このコースではSassの導入方法からひと通りの機能を使いこなせるところまで順を追って解説します。

3時間41分 (43 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年10月16日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。