Web系 Node.jsで追加したCSSのパッケージを利用する
LESSのmixins系ライブラリであるlesshatをnpmでインストールし、webpackで圧縮して使用することにします。 インストール $ npm install -D lesshat; 設定ファイル package.json { "...
Node.js
Web系 Web系 npmでインストールしたライブラリをjsファイルで読み込んで利用する方法
基礎過ぎて今更感が半端無いですが、個人的にド忘れしていたので、今後の為にも書いておくことにしました。 ここでは、テーブルが横スクロール出来ることを明示してくれるライブラリ「scroll-hint」を利用する例で説明します。その他の前提条件と...
Web系 Node.jsとEJSとwebpackでテンプレート管理出来るweb制作環境を作る
過去に似たようなことを試しましたが、webpackのバージョンも上がり新たに環境を作ってみました。 前回はEJSのwebpack用プラグインを使いましたが、アップデートが放置されており不安だったのと、プラグインを使わない方法を実践している参...
Web系 軽量CSSフレームワークのmini.cssを使ってみた
レスポンシブ対応ウェブサイトを作る際に、全て自分でCSSを設計するのは面倒なので、適当なフレームワークを使うことが多いです。これまではbootstrapばかり使ってきましたが、せっかくなので別のCSSフレームワークを使ってみることにしました...
Web系 Windowsにてnpmでグローバルインストールしたパッケージのコマンドが使用できない場合の対処法
Gatsbyという静的サイトジェネレーターを使用したかったので、npmコマンドにてグローバルインストールを実行して"gatsby"コマンドを叩くも、有効なコマンド認識としてされない問題が発生しました。 Winodwsでコマンドが使えない理由...
Web系 webpackを用いた静的サイトのテンプレート管理
昔の名残で未だ静的サイトを作る際はAdobe Dreamweaverを使っていますが、重いし何かと不安定なところもあり、使うこと自体辞めたいと思いつつも使っているのは、共通部分をテンプレートとして管理する為だけだったりします。 静的サイトジ...
Web系 日本語サイト向けBootstrapのhonokaをwebpackでビルドする
レスポンシブ対応サイトを手早く作れるHTMLフレームワークである"Bootstrap"は様々な所で採用されていますが、本家からフォークされ日本語サイト向けにカスタマイズされた"honoka"というフレームワークがあります。 配布元のwiki...