-
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にコンパイルし…
-
【初心者向け】SEO SIMPLE PACKの使い方・設定方法
今回はシンプルで扱いやすいSEO対策プラグイン「SEO SIMPLE PACK」の使い方について解説します。 「SEO SIMPLE PACK」は、他のSEO対策プラグインと比べて機能を必要最低限のもの（例: ページ毎の…
-
【サロン向け・時間枠予約】WordPressの予約システム「Booking Package」の使い方
サロンやスクールなどを運営していて、Web上で「何時から何時まで」のように予約を受け付けられるようにしたい場合、WordPressを利用しているなら「Booking Package」がおすすめです。 Booking Pa…
-
GoogleカレンダーをWebサイトに埋め込み表示する方法
Googleカレンダーに予定を登録しており、その予定をWebサイト上で共有したいケースもあるかと思います。 たとえば、お店を経営している方が、営業日や休業日、イベントの予定などをお知らせしたい場合です。 そのような場合、…
-
ホームページに定休日カレンダーを実装する方法【HTML・Googleカレンダー・プラグイン】
今回は、ホームページにお店の定休日を発信するのに便利な定休日カレンダーを実装する方法を解説します。 カレンダーを表示することで、テキストで表示するよりも一目で定休日が分かるようになります。 お店のホームページを運営されて…
-
npmとは？Voltaを使ってNode.jsとnpmをインストールする方法
Web制作の勉強をしていると、必ずと言っていいほど「npm」というキーワードを目にすると思います。 Webpackなどのモジュールバンドラーを学んでみようと思った際に、「まずはnpmをインストールしてください」「npmコ…
-
【ノンエンジニア・初心者向け】WordPressとは？メリット・デメリットやインストールの基本的な流れを解説
ブログやホームページを自分で開設したいと考えている方であれば、WordPressの名前を一度は聞いたことがあるかもしれません。 WordPressは現在世界・日本で最も利用されているブログ・ホームページ作成ソフトで、世界…
-
sectionやarticleの使い分け！よく使うセマンティック要素の使い方を初心者向けに解説
コーディングを学び始めた初学書の方にとって、最初に使いどころに迷うのがsectionタグやarticleタグといったセマンティック要素ではないでしょうか？ sectionタグやarticleタグなどは見た目上はdivタグ…
-
【Contact Form 7】ページタイトルの値をフォームに自動反映する方法（投稿・カスタム投稿・固定ページ）
不動産サイトやリクルートサイトでは、投稿やカスタム投稿で運用している物件情報ページや求人情報ページに共通のお問い合わせフォームを設置し、フォームが送信された際に「どのページから送信されたのか」が分かるよう把握したいケース…
-
jQueryでAJAXを使う方法！非同期通信で画面の一部だけを更新する方法を解説
今回は、jQueryでAJAX（非同期通信）を使い、サーバー上のリソースを取得して画面の一部だけを更新する方法を解説します。 近年では、ブラウザ標準のfetch APIやAxiosといったライブラリが非同期通信の主流とな…
-
フォントサイズを完全レスポンシブ化！clamp()関数の使い方
画像であれば横幅を％指定するだけで画面幅に応じて自然に拡大・縮小できますが、文字サイズは同じようにはいきません。 vwを使って文字サイズをレスポンシブに調整する方法もありますが、最小値や最大値の設定が難しく、意図せず文字…
-
Figmaで表・テーブルを効率良くデザインする方法を解説！
今回は、Figmaで表・テーブルを効率良くデザインする方法を紹介します。 本記事では、以下のように柔軟にカスタマイズできる「テーブル用テンプレート」を一から作成し、そのテンプレートを活用してさまざまなデザインの表を作成で…
-
【宿泊予約】WordPressの予約システム「Booking Package」の使い方
宿泊施設のWebサイトに予約機能を導入したい場合、WordPressを利用しているなら「Booking Package」がおすすめです。 Booking Packageは無料から利用でき、月額660円（税込）の有料版では…
-
figure・figcaptionタグの意味や正しい使い方を解説
figureタグは、そのコンテンツがなくなったとしても本文の流れに影響を与えることがない自己完結型コンテンツに使用できるHTMLタグです。イラストや図、写真やコードの断片などに対して使用されます。 また、figcapti…
-
ページタイプ毎にウィジェット内容を変える方法！Widget Optionsの使い方
ウィジェット機能を使って、ページタイプごとにサイドバーの表示内容を切り替えたい場合もあると思います。 そのようなときは、プラグイン「Widget Options」を使用すると便利です。 今回は「Widget Option…
-
jQueryとは？基本の書き方・よく使うメソッドを解説
コーディング初学者が初めてJavaScriptを学ぶ際に、最初に触れることが多いのがJavaScriptライブラリの「jQuery（ジェイクエリ）」です。 現在のモダン開発のトレンドとは言えないものの、依然としてWebサ…
