NodeSchoolに入学しよう!

StylusCSSプリプロセッサ

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
stylusモジュールによってCSSプリプロセスして簡易的なCSS記法を使用する方法について説明します。
講師:
05:05

字幕

このレッスンでは、 expressアプリケーションから StylusCSSプリプロセッサーを 利用する方法について 説明します。 それではまずワークショッパーを 起動しましょう。 expressworks エンター。 今回はこちら5番目の、 STYLISH CSS という問題を解きます。 エンターを押します。 問題。 Stylusミドルウェアんいよって、 CSSを前処理されたindex.htmlを 配信するアプリケーションを 作成してください。 ただし、ポート番号と、 index.html,stylusファイルのある ディレクトリのパスは、 それぞれ1番目と2番目の コマンドライン引数で 与えられるものとします。 Stylusというのは CSSプリプロセッサーの一種で、 こちらの文にあるように、 問題文の部分ですね。 stylという拡張子で書かれた ファイルを、 Stylusの独自の スタイル記述ファイルである、 と解釈して、それをCSSに変換して ファイルを生成したうえで、 サーバーの処理を実行してくれます。 Stylusの独自のスタイル形式というのは このように、 普通のCSSとは若干違った 見た目になっています。 このようにStylusのような CSSプリプロセッサーを使用することによって、 CSSの記述を大幅に簡略化して、 生産性を高上させることができます。 Stylusを使用するためには、 問題文のヒントのこちらにあるように、 アプリケーションのuseというメソッドを 使って、Stylusのモジュールで 生成したミドルウェアに、 Stylusの独自のstylという拡張子を 持ったファイルが格納されている ディレクトリのパスを指定してやります。 これによってサーバーがその独自ファイルを CSSに変換してくれるようになります。 それではStylusのモジュールを インストールしましょう。 npm install stylus インストールができました。 これでStylusが使えるはずです。 ではここでいったん手を止めて、 皆さんで問題を解いてみてください。 いかがでしょう、 問題は解けましたでしょうか。 それでは答え合わせを していきたいと思います。 私の方でプログラムを 作成してみます。 テキストエディターでソースコードを 開きます。 prgram.js まずはexpressモジュールの ロードですね。 require ('express') それから、Stylusも使用しますので、 それもロードしましょう。 require ('stylus') そしてアプリケーションインスタンスの 作成ですね。 それからアプリケーションのuseメソッドを 使ってミドルウェアの設定ですね。 まず今回静的配信を行いますので、 expressのstaticミドルウェアを 使用します。 静的ファイルの配信パスは、 processのargy配列の3ですね。 それからもう一つ、Stylusの ミドルウェアを使用するために、 middlewareメソッドを使用します。 Stylusのファイルのパスも、 静的ファイルの ドキュメントルートと同様です。 そしてこれで設定ができたので、 後はアプリケーションのlisten、 listenするポートは、 これも コマンドラインパラメーターで 与えられます。 これでファイルの記述は 完了しましたので、 検証してみましょう。 expressworks verifyの program.js ソースコードの記述が 間違っていたようですので、 再度編集します。 こちらのStylusの部分が、 スペルミスでしたね。 修正して再度実行します。 この問題に関しては、 答え合わせをするときに、 特権が必要な様ですので、 この答え合わせに使用するファイルが、 配置されている場所が 特権ファイルへの権限が、 必要な場所ですので、 実行するときに先頭で sudoを付与してみてください。 これできちんと正解が通りました。 このレッスンでは、express.js アプリケーションで、 StylusCSSプリプロセッサーを使用する 方法について説明しました。

NodeSchoolに入学しよう!

NodeSchoolワークショッパーとは、オープンソースで開発されているNode.jsやJava Scriptについて学ぶためのクイズ形式のアプリケーションです。このコースでは、learnyounodeとexpressworksという2つのワークショッパーを通じてNode.jsとExpress.jsの基本的な使い方を学びます。

3時間13分 (24 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
Node.js Node.js 0.10.24
価格: 3,990
発売日:2015年04月07日

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

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

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