JavaScript Swiperの矢印を消さない方法｜スライドの最初と最後では押せない状態で表示する
Swiperでスライドを切り替える前後の矢印ボタンを実装すると、最初のスライドでは「前へ」、最後のスライドでは「次へ」を押せない状態にしたいことがありませんか？デザインカンプでは、押せない矢印を非表示にせずに薄い色で残して「このボタンは押せ...
Web制作
JavaScript 
JavaScript Swiperのスライドが1枚のときは動かさない｜2枚以上だけ動かす方法
コーポレートサイトをコーディングするとき、商品や強み、お知らせをスライド形式で見せることがありますよね。デザインカンプに複数のカードが並んでいれば、Swiperでそのまま再現すればよさそうです。でも、その中身がお知らせ投稿やカスタム投稿など...
CSS transform: scale()で画像がカクつく・ずれるときの対処法｜rotate(0.001deg)で改善したケース
カードをホバーしたとき、画像がふわっと少し拡大する演出はよく使いますよね。ところが、transform: scale()で拡大しているだけなのに、ホバーを外した直後に画像がわずかにずれたり、動きが滑らかに見えなかったりすることがあります。こ...
JavaScript スクロールで数字が増えるカウントアップアニメーション「jquery-numerator.js」
サイト制作をしていると、こんな要望が出てくることがあります。クライアント画面をスクロールしたら、数字がゼロから特定の値まで増えていくアニメーションを付けたいんだけど。どういうことか言うと、採用サイトやコーポレートサイトなどで、何らかの数値を...
CSS 【CSS】三角形の簡単な作り方2種類（borderとclip-path）
Webサイトをコーディングしていると、三角形のデザインをCSSで再現することがありますよね。でも、三角形って地味に作るのが難しい…従来はborderプロパティを使用して三角形を作ることが多かったと思いますが、なぜborderで三角形が作れる...
ライブラリ ScrollHintの使い方｜スマホで横スクロールに気づかせるUIの実装方法
Webサイトをコーディングしているときに、テーブルや横長の画像は、スマホのような画面幅が狭いブラウザで閲覧するときに、縮んでしまってみづらくなったりデザインが崩れてしまうことがありますよね。そんな時は、CSSでoverflow-x: aut...
WordPress 【HTML】静的サイトにお問い合わせフォームを実装する方法【WordPress】
ホームページを制作する場合、お問い合わせフォームを実装することが多いかと思います。WordPressサイトであれば、Contact Form 7やMW WP Formなどのプラグインを使用して、そこまで難しくなくお問い合わせフォームを実装で...
WordPress 【初心者必見】Web制作でお問い合わせフォームを実装する際の注意点【WordPress】
WordPressでお問い合わせフォームを実装するときは、送信できることだけでなく、入力エラー、キーボード操作、メール到達性、迷惑送信対策まで確認する必要があります。Contact Form 7などのフォームプラグインを使う場合にも共通する...
CSS 【CSS】inputタグのボタンに疑似要素などで装飾する2つの方法
Web制作でホームページなどを構築する時、お問い合わせフォームを実装することが多いかと思います。お問い合わせフォームには問い合わせ内容を入力した後にinputタグで送信をボタンを作成することがありますが、このボタンに疑似要素で矢印などの装飾...
CSS 【display:noneはNG】自作ラジオボタン/チェックボックスをTABで操作する
Web制作で、お問い合わせフォームを実装するにあたり、デザインカンプを再現するためにラジオボタンやチェックボックスを自作するケースが多いかと思います。その際、デフォルトのラジオボタンやチェックボックスを「display:none」で非表示に...