サイト制作に関するメモ書き

HOME > HTML・CSS > Web Starter Kitを使ってみる

Web Starter Kitを使ってみる

Googleから提供されているフレームワーク「Web Starter Kit」を使ってみたいと思います。

準備

公式サイトからファイルをダウンロードします。

try-to-use-the-web-starter-kit01

ファイルを解凍して、作業ディレクトリにコピーします。

コマンド プロンプトを起動し、作業ディレクトリに移動します。

cd 作業ディレクトリ

必要なプラグインをインストールします。

npm install

結構時間がかかりますが、インストールが終わったら準備完了です。
 

起動

ローカルサーバを立ち上げて表示を確認します。

gulp serve

ブラウザで以下のように表示が確認されれば成功です。

try-to-use-the-web-starter-kit02

現在表示されているのはappディレクトリ内のindex.htmlです。
同じディレクトリ内にあるstyleguide.htmlにスタイルガイドが記載されています。

try-to-use-the-web-starter-kit03

こんな感じでずらっとならんでいます。

同じディレクトリにあるbasic.htmlはheadの情報のみ入っていてbodyは空の状態です。
このファイルをベースにして開発を進めていく感じなんだと思います。

ちょっと触ってみただけなのでまだイマイチ分かっていませんが、割と使い勝手はよさそうな感じがします。
案件などで使うかはちょっとわかりませんが、使っていない機能もあるので またそのうち触ってみます。
 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP