-
【Swiper】一定速度で横に流れ続ける無限ループスライドショーを実装する方法
高機能なスライダーを実装できるJSライブラリ「Swiper」を使用して、以下のような機能のスライドショーを作成していきます。 一定速度で横方向にゆっくり流れる1枚ずつ... -
【コピペOK】Contact Form 7でお問い合わせ完了ページに遷移させる方法
WordPressプラグインの「Contact Form 7」では、簡単にお問い合わせフォームを作成することができますね。 しかし標準ではお問い合わせ完了ページ（サンクスページ）を... -
MW WP Formでメールアドレス確認用の入力欄を作成する方法
WEBサイト内のほとんどのお問い合わせフォームでは、メールアドレスの入力間違いなどを防ぐために、 メールアドレス入力欄メールアドレス確認用の入力欄 のように、メー... -
【コピペOK】CSSで方眼紙のような模様の背景を実装する方法
Web上で方眼紙のような模様の背景を実装したい場合があるかと思います。 方眼紙模様の背景画像を用意して使うこともできますが、その場合は色を変えたり、線の太さを変... -
【モダンブラウザ対応】アスペクト比を固定するaspect-ratioプロパティの使い方
以前の記事で、padding-topの性質を利用して、要素のアスペクト比を固定しつつレスポンシブ化する方法を紹介しました。 しかしこの方法だと、比率を計算して%で表記する... -
素のJSとSwiperでモーダル内にスライダーを表示する方法
今回の記事では、モーダルとスライダーを組み合わせて使用する方法を紹介していきます。 ページ上のボタンをクリックするとモーダルが開き、その中にスライダーを設置す... -
開始日からの経過年月を自動で計算する機能をJavaScriptで実装する方法【ポートフォリオに最適】
ポートフォリオサイトなどで自身のスキルを示したい時、経験年月を合わせて記載することが多いかと思います。 参考：筆者のポートフォリオサイト HTMLで年月をベタ書き... -
CSSのグラデーションで文字に2重下線を引く方法【改行にも対応可能】
文章を強調したいときに、2重下線で文字を装飾したいという場面があるかと思います。 CSSには2重下線を実装できるtext-decorationプロパティがありますが、 色を一色し... -
CSSでグラデーションカラーのテキストを実装する方法【コピペOK】
CSSではlinear-gradientなどの関数を使うことで、背景にグラデーションカラーを設定することができますね。 しかしこの関数はbackgroundプロパティにしか使えないため、... -
ホバーすると表裏が反転するカードをCSSで実装する方法
マウスホバー時に裏表が反転するカードをCSSで実装してみました。 以下のカードにマウスカーソルを当ててみてください。（SPの場合はタップ） このアニメーションをCSS... -
【Sass】変数と@mixinでメディアクエリを簡単に記述する方法
CSSでは、レスポンシブに対応させるためのメディアクエリを書く機会が多いですよね。 特にブレイクポイントの多いサイトだと、以下のように記述量が多くなってしまいが... -
Sassで使える2種類のコメントについて【コンパイル時の挙動も解説】
CSSでは、/*と*/で文字を囲うことでコメントを記述することができますね。 /* ここにコメントを記入 */ .sample { color: red; } Sassではコメントの記述方法が2種類用... -
Sassで使用できる4つのアウトプット形式の特徴や使い方を解説
Sassとは、CSSを効率的に記述できるように設計・開発された言語です。 入れ子の使用、変数・関数の使用など便利な機能が多く、Web制作者なら必ず身につけておきたいスキ... -
【Sass】色を操作するのに便利な10つのSass関数を紹介！
Sassを簡単に説明すると「CSSの拡張版」で、CSSにはない多くの便利な機能がありますね。 その中でも色を操作するための関数がとても便利ですので、紹介していこうと思い... -
Sassでファイルを分割管理する方法と3つのメリット【@import, パーシャル】
大規模なWeb制作案件になると、CSSのコード量も膨大になりますよね。 パーツごと・役割ごとにCSSファイルを分割することで管理しやすくなりますが、その場合、 読み込み... -
【Swiper】サムネイル付きの画像スライダーを実装する方法
Swiperとは、スライダー（カルーセル）を簡単に作成できるJSライブラリです。 jQueryなどのフレームワークに依存せず、また用意されているオプションを指定するだけで高...
