猫カフェサイト

• レスポンシブ対応
• リセットCSS
• Google Mapの埋め込み
• OGP導入
• Google Fonts導入
• 「favicon.ico」「apple-touch-icon.png」を設置
• スクロールアニメーションを導入（JQueryプラグイン「AOS.js」）
• ライトボックスを導入（JQueryプラグイン「Lightbox2」）
• Sass導入
• PostCSSを利用してのベンダープレフィックスの自動付与

clone後の、Sass、PostCSS対応

プロジェクトのクローン後、npm install にて、package.jsonに記述されているパッケージをインストールする。

コマンドプロンプトにて、npm run watch:sassを実行。scssファイルに編集を加えるたびに、編集が反映されたcss/.cssファイルが作成。

コマンドプロンプトにて、npm run postcssを実行。作成済みのcss/.cssファイルにベンダープレフィックスを自動付与。

発展

ブログページを動的にすることが考えられる（フレームワーク、もしくはCMS利用想定）。

参考

以下、書籍を参考。

『HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門』

『1冊で身につく　HTML&CSSとWebデザイン入門講座』

『1冊で身につく　HTML&CSSとWebデザイン実践講座』

『Web制作者のためのSassの教科書』