Visual Studio CodeでWeb制作や開発をしていると、ウィンドウを複数開きながら作業することがよくあるかと思います。 画面上に複数のエディタが表示されていると、どの...

ランディングページやWebサイト上で、縁取り文字を見かけたことがあるかと思います。 これをウェブ上で実装するとなると、画像を使用する・SVGを使用する・CSSのtext-sh...

CSSで背景画像を指定するとき、以下のように記述が多くなりがちですよね。 .bg { background-image: url(sample.jpg); background-size: cover; background-position: c...

JavaScriptとCSSでキラキラ輝く星空エフェクトを作成してみましたので、実装コードの紹介とコードの解説をしていきます。 jQueryなしプラグインなしコピペのみで実装可...

現在表示中の記事内に、同じカテゴリーの関連記事一覧を表示したいという場合がよくありますよね。 特に記事下などに関連記事を表示しておけば、回遊率が向上しPVアップ...

WordPressの個別投稿ページ内で、「最近の投稿」一覧を表示したい場合があるかと思います。 この場合、記事一覧をそのまま取得してしまうと、現在閲覧中の記事も含まれ...

MW WP Formでフォームを作成する際に、エディター内で改行するとpタグやbrタグが自動挿入されてしまいます。 不要なタグが自動で挿入されると、デザイン崩れや思いがけ...

WordPressプラグイン「Contact Form 7」では、必須項目が未入力の場合や、入力値が正しくない場合にエラーメッセージを表示してくれます。 しかし、フォームの項目が多...

お問い合わせフォームでは、よく「プライバシーポリシーに同意する」や「個人情報の取り扱いに同意する」などのチェックボックスが用意されていることがありますね。 こ...

background-colorやbackground-imageのグラデーション関数を使用することで、文字に背景色をつけることができますね。（↓例） サンプルテキストサンプルテキストサンプ...

サイト制作において、グラデーションカラーを使用する機会がよくあります。 グラデーションカラーはbackground-imageプロパティのlinear-gradient関数を使用することで...

今回の記事では、CSSのcolumnsプロパティを使用して、段組みレイアウトを実装する方法を紹介します。 段組みレイアウトとは、本や新聞などで使われているように、長い文...

Webサイト上では、フッターのコピーライト表記など、現在の年を表示したい場合があります。 HTML上で年を直接記入することもできますが、その場合は更新するのを忘れた...

Webサイトのフッターのコピーライト表記など、今年の年を表示したい場合がありますよね。 HTMLでベタ書きしてもよいのですが、そうすると毎年書き直す必要があります。 ...

WordPressテーマの必須ファイルであるfunctions.phpを編集することで、テーマを拡張したり必要な機能を自作して使用することができますね。 オリジナルのWordPressテー...

スライダーを作成できるJSプラグイン「Swiper」で、以下のようなスライダーを作成する方法を紹介します。 スライド総数を表示現在表示中のスライド番号を表示 DEMOと実...

ランディングページのナビゲーションやブログページの目次など、ページ内の特定の場所にリンクを設定することは多いですよね。 ページ内リンクは、デフォルトだとリンク...

WEBサイトのレスポンシブ化をする上で、スマホなどの画面幅が狭いデバイスには収まりきらないコンテンツがあることが多いです。 特に情報量の多い表（テーブル）などは...

CSSとJSでページに桜を降らせるエフェクトを実装してみたので、紹介していこうと思います。 プラグインなしjQueryなしコピペするだけで使える 今回はjQueryやプラグイン...

レスポンシブ対応をする際に、「ブロック要素の比率を保持したままサイズを可変させたい」という場合がよくありますよね。 img要素だと以下のように指定するだけで、画...

WEBページのファーストビューに画面いっぱいに要素を表示したいとき、heightやmin-heightに100vhを指定することが多いですよね。 PCだと問題なく表示されますが、スマホ...

レスポンシブ対応をする中で、文字サイズの最大値・最小値を設定できたらいいなと思ったことはありませんか？ 横幅の最大値や最小値を指定できるmax-width min-widthの...

Webサイト上では、アコーディオンメニューがよく使われていますよね。 コンテンツを折り畳むことができるため、 ユーザーが欲しい情報をピンポイントで探せるページが縦...

Webページ上に「ファイルをダウンロードできるリンクを設置したい」という場面があるかと思います。 主に製品のマニュアルが記載されたPDFや、画像などのアセットを配布...

サイト運営者やWeb制作の経験がある方だと「YouTubeの動画をサイト上に埋め込みたい」と思ったことがあるかと思います。 YouTubeには動画を共有する用のタグが用意され...

最近では、ページの右下に「TOPへ戻る」ボタンがあるのが一般的ですよね。 1クリックでページの一番上まで戻ってくれるので、かなり便利な機能です。 このトップに戻る...

最近のWebサイト制作では、アニメーションを取り入れるのが一般的ですよね。 サイトに動きをつけることによってかっこよく見せたり、ユーザーの関心を惹きつけることが...

JavaScriptで今日の日付と現在時刻を表示するデジタル時計を作ってみたので、実装方法を紹介しようと思います。 難易度は比較的低めで、JavaScriptの初心者の方でも充分...

Webサイト制作をしていると、要素や画像を反転させたい場面があるかと思います。 特に矢印のアイコンなどは、右向き&左向き、上向き&下向きなどセットで必要な...

今回は、CSSアニメーションを設定する際によく使うscale()を紹介します。 この機能を使うことで、要素を自由に拡大・縮小することができますので、是非参考にしてみてく...

サイト制作の案件では、Google Mapをページ上に埋め込むことがよくあります。 共有コードをサイトに貼り付けるだけで会社やお店の場所を載せることができるので、すごく...

jQueryにはslideUp(),slideDown(), slideToggle()といったメソッドがあります。 これらを使用すると、少ないコードで要素をスライドしつつ表示/非表示にできるので、す...