-
ホームページに定休日カレンダーを実装する方法【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メソッドを使うこ…
-
【GSAP】アニメーションをクリック・ホバーイベントと連動させる方法
GSAPはデフォルトでは、ページが読み込まれたタイミングでアニメーションが開始されます。 しかし、これを制御して、クリックやホバーなどのイベントが発生してからアニメーションを開始させることもできます。 今回はGSAPのア…
-
【GSAP】ScrollTriggerプラグインの使い方！スクロールとアニメーションを連動させる方法
GSAPは、簡単にトゥイーン（始点と終点の間を補間するアニメーション）を作成できるJSライブラリですが、デフォルトではスクロールと連動していません。 しかし、ScrollTriggerプラグインを使うことで、以下のように…
-
【GSAP】タイムラインの使い方！複数要素のアニメーション順を制御する方法
アニメーションライブラリ「GSAP」を使うと、以下のように複数要素のアニメーション順を制御することができます。 See the Pen GSAP タイムライン機能 by E-VALUE WORKS (@evw) on C…
-
アニメーションライブラリ「GSAP」の基本！to、set、from、fromToメソッドの使い方
GSAP（GreenSock Animation Platform）は、おしゃれなギミックを取り入れたWebサイトを制作する際に便利なアニメーションライブラリです。 GSAPを使えば、複雑な動きも短いコードでスムーズに実…
-
Vivus.jsを使ったSVGアウトラインアニメーションの作り方！
今回は、Vivus.jsを使ってSVGアウトラインアニメーションを作成する方法を解説します。 Vivus.jsを理解すれば、サイト読み込み時などでよく見られる、ロゴの輪郭が線で描かれていく以下のようなアニメーションが作れ…
-
SVGを自在に変形！JSライブラリ「Snap.svg」を使ってモーフィング表現を実装する方法
JSライブラリ「Snap.svg」を使用すると、異なるpathで描いたSVG画像をスムーズに変形アニメーションさせられます。 このように、連続する2つの画像の間をコンピューターグラフィックスによって補間し、自然な変形を実…
-
symbol・useタグを使ってSVGアイコンを使い回す方法
SVGアイコンはインラインで表示すると、CSSで色を変えられたり色々便利です。 しかし、コードが長くなってしまうため、たとえばボタンの矢印部分をSVGアイコンで繰り返し使う場合などは、記述量が多くなってしまいソースが読み…
-
SVGとは？ツール毎のSVG書き出し方法、SVGコードの基本的な使い方を解説
SVGはベクター形式の画像データです。 ベクター形式は、点や線、色、カーブを数値データで記録するため、軽量で拡大しても画像が荒れない点が大きな特徴です。 今回は、SVGとJPG・PNGとの違いやメリット・デメリット、SV…
