-
WebpackでCSSファイルをminify（ミニファイ）する方法
今回は、CSSファイルを直接importしてMiniCssExtractPluginで出力している場合のminify設定方法を解説します。 Webpackでは、mode: ‘production’…
-
Webpackの設定ファイルを開発用と本番用で分割する方法
今回は、Webpackの設定ファイルを開発用と本番用で分割する方法を解説します。 設定ファイルを分けるメリットは、環境ごとに最適なビルドプロセスを構築できる点です。 例えば、開発環境では「高速なビルドとデバッグのしやすさ…
-
Webpackの「Asset Modules」機能を使って画像を処理する方法
Webpackは、エントリポイントを起点に依存関係をたどり、複数のJavaScriptファイルを1つにバンドルします。 その過程で、JSやCSSから画像ファイルへの参照を検知すると、それらもプロジェクトのアセットとしてバ…
-
Webpackで出力ファイルにハッシュ値を自動で付ける方法！
今回は、Webpackで出力ファイルにハッシュ値を自動で付ける方法を解説します。 Webpackでは、ブラウザキャッシュへの対策として、バンドルしたファイル名にハッシュ値を付与して出力することが可能です。 また、Html…
-
Webpackでバンドル後のJavaScriptをHTMLに自動で読み込ませる方法
今回は、Webpackでバンドル後のJavaScriptをHTMLに自動で読み込ませる方法を解説します。 正確には、MiniCssExtractPluginなどでCSSを別ファイルとして抽出している場合、これらもすべて自…
-
WebpackでSassをコンパイルする方法
今回は、Webpackを使ってSassをコンパイルする方法をはじめ、コンパイルされたCSSにベンダープレフィックスを付与する方法や、CSSを別ファイルとして出力・管理する方法について解説します。 本記事は、Webpack…
-
【Webpack入門】インストール方法とJavaScriptファイルのバンドル手順
今回から複数回に渡って、モジュールバンドラー「Webpack」の使い方を解説していきます。 Webpackを使うことで、複数のJavaScriptファイルを1つのファイルにまとめられるほか、SassをCSSにコンパイルし…
-
GoogleカレンダーをWebサイトに埋め込み表示する方法
Googleカレンダーに予定を登録しており、その予定をWebサイト上で共有したいケースもあるかと思います。 たとえば、お店を経営している方が、営業日や休業日、イベントの予定などをお知らせしたい場合です。 そのような場合、…
-
ホームページに定休日カレンダーを実装する方法【HTML・Googleカレンダー・プラグイン】
今回は、ホームページにお店の定休日を発信するのに便利な定休日カレンダーを実装する方法を解説します。 カレンダーを表示することで、テキストで表示するよりも一目で定休日が分かるようになります。 お店のホームページを運営されて…
-
npmとは？Voltaを使ってNode.jsとnpmをインストールする方法
Web制作の勉強をしていると、必ずと言っていいほど「npm」というキーワードを目にすると思います。 Webpackなどのモジュールバンドラーを学んでみようと思った際に、「まずはnpmをインストールしてください」「npmコ…
-
sectionやarticleの使い分け！よく使うセマンティック要素の使い方を初心者向けに解説
コーディングを学び始めた初学書の方にとって、最初に使いどころに迷うのがsectionタグやarticleタグといったセマンティック要素ではないでしょうか？ sectionタグやarticleタグなどは見た目上はdivタグ…
-
jQueryでAJAXを使う方法！非同期通信で画面の一部だけを更新する方法を解説
今回は、jQueryでAJAX（非同期通信）を使い、サーバー上のリソースを取得して画面の一部だけを更新する方法を解説します。 近年では、ブラウザ標準のfetch APIやAxiosといったライブラリが非同期通信の主流とな…
-
フォントサイズを完全レスポンシブ化！clamp()関数の使い方
画像であれば横幅を％指定するだけで画面幅に応じて自然に拡大・縮小できますが、文字サイズは同じようにはいきません。 vwを使って文字サイズをレスポンシブに調整する方法もありますが、最小値や最大値の設定が難しく、意図せず文字…
-
figure・figcaptionタグの意味や正しい使い方を解説
figureタグは、そのコンテンツがなくなったとしても本文の流れに影響を与えることがない自己完結型コンテンツに使用できるHTMLタグです。イラストや図、写真やコードの断片などに対して使用されます。 また、figcapti…
-
jQueryとは？基本の書き方・よく使うメソッドを解説
コーディング初学者が初めてJavaScriptを学ぶ際に、最初に触れることが多いのがJavaScriptライブラリの「jQuery（ジェイクエリ）」です。 現在のモダン開発のトレンドとは言えないものの、依然としてWebサ…
-
【静的サイトにおすすめ】無料メールフォーム「PHP工房」の使い方
Web制作を学び始めた方が最初に直面する壁の一つが、メールフォームの制作ではないでしょうか。 メールフォームを作成するには、PHPなどのプログラミング言語を扱う必要があり、初心者にとってはややハードルが高いと言えます。 …
-
スマホ・タブレット表示で横スクロールできるテーブルの作り方！
テーブルのカラムが3列以上あり、スマホ時に縦方向に並べ替えるのが難しいといった場合は、横スクロールで表示できるようにするのがおすすめです。 今回は、HTMLのtableタグで実装したテーブルを横スクロールできるようにする…
-
ScrollHintの使い方！横スクロールできる要素にヒントを表示する方法
今回は横スクロールできる要素にヒントを表示するJavaScriptライブラリ「ScrollHint」の使い方を解説します。 ScrollHintを使用すると、要素が横スクロール可能な状態になったタイミングを自動で検知し、…
-
【スライダー実装】Swiperの使い方、便利なオプションまとめ
Webサイトにスライダーを実装したい場合、JavaScriptライブラリ「Swiper」がおすすめです。 SwiperはjQueryを必要とせず、軽量で動作が速く、モバイルデバイスでのタッチ操作にも最適化されているのが特…
-
matchMediaを使ってGSAPアニメーションをレスポンシブ対応させる方法
アニメーションを作っている際に、PCとSPで微妙にアニメーションの動きやscrollTrggerプラグインのトリガー要素を変えたいことがあります。 こんなときGSAPを使っている場合は、mathMediaメソッドを使うこ…
