読者です 読者をやめる 読者になる 読者になる

MotomichiWorksBlog

その日学習したことについて書いている日記です。誰かの役に立ったらそれはそれで嬉しいです。

sweet-styleguideで簡単スタイルガイド作成 その0001 準備をする

制作 sweet-styleguide

技術的なことがわからなくても簡単!

sweet-styleguideを使用すると技術的なことがわからなくても簡単にスタイルガイドの作成と運用ができます。

XAMPPのインストール

まずXAMPPをインストールします。

今回 xampp-win32-5.6.23-0-VC11-installer.exe をダウンロードしてインストールを行いました。

インストールは以下のページの手順通りにやると簡単にできると思います。

XAMPPをインストールする方法【超初心者向け】 | TechAcademyマガジン

インストールの際に言語選択は以下のようなものが出たので、英語を選択しました。

f:id:motomichi_works:20160731043104p:plain

XAMPPコントロールパネルについて

インストール直後は自動でコントロールパネルが開きますが、一度終了したあとは、Windowsの左下のスタートから「スタート > すべてのプログラム > XAMPP > XAMPP Control Panel」から開くことができます。

Apacheをstart

さきほどの参考ページの「XAMPPをインストールする方法【超初心者向け】 | TechAcademyマガジン」通りにApacheのstartをクリックして、ApacheのstartができたらOKです。

sweet-styleguideではMySQLは使用しませんので、Apacheだけstartできれば大丈夫です。

Apacheがstartできない場合

Skypeを使用している場合などはstartできない場合がよくあります。

C:\xampp\apache\confのフォルダ内にあるhttpd.confを二行だけ編集します。

Listen 80となっている箇所があるのでListen 81に変更してください。

ServerName localhost:80となっている箇所があるのでServerName localhost:81に変更してください。

httpd.confを上書き保存して、再度XAMPPのコントロールパネルでApacheのstartボタンをクリックして、startできたらOKです。

sample.htmlの作成と配置をして表示確認

sample.htmlというファイル名で以下の内容でファイルを作成します。記述内容はタグとか無しでsample pageだけで大丈夫です。

sample page

作成したsample.htmlは以下のhtdocsフォルダに配置します。

C:\xampp\htdocs

以下の画像のような感じです。

f:id:motomichi_works:20160802154948p:plain

ブラウザで「http://localhost/sample.html」にアクセスして、sample.htmlの内容が表示されたら成功です。

Apacheがstartできなくて、httpd.confを編集している場合は、ブラウザでhttp://localhost:81/sample.htmlにアクセスしてください。

sweet-styleguideのダウンロードと配置

GitHub - MotomichiWorks/sweet-styleguide」ページでダウンロードします。

以下の画像の赤枠内の「Clone or download」>「Download ZIP」の順にクリックします。

f:id:motomichi_works:20160802155109p:plain

ダウンロードした sweet-styleguide-master.zip を展開すると、中に「project1」フォルダがあるので、それをC:\xampp\htdocsフォルダに移動します。

さきほどのsample.htmlと同様にproject1フォルダをまるごとhtdocsフォルダ内に配置します。

この段階で以下の画像のようになっているかと思います。

f:id:motomichi_works:20160802155705p:plain

sweet-styleguideのサンプルページを確認する

project1フォルダの配置ができたらブラウザで表示確認します。

以下のいずれかのURLにアクセスすると、表示が確認できると思います。
どちらのURLにアクセスしても同じページが表示されます。

さきほどApacheがstartできなくて、httpd.confを編集した場合は以下の81番ポートのURLでアクセスしてください。

以下の画像のようなページが確認できたら成功です。

f:id:motomichi_works:20160802161547p:plain

これでsweet-styleguideを使用する準備は完了しました。

次回はスタイルガイドの具体的な編集方法です。

今回はXAMPPを使って環境構築をしましたが、Vagrantやサーバーのことがわかる方はDocumentRootにproject1ディレクトリを配置して頂ければ、それだけで動くと思います。