コーディング
イベントプロデュース会社リニューアルコーディング
コーディング中に発生したエラー
paddingとmarginを指定していないにも関わらず要素間に余白ができる問題について解説しています。余白の原因や対処法を詳しく紹介し、要素の表示を正しく調整する方法を説明します。要素の間に不要な余白を解消する方法を理解して、意図したデザ
デザイン会社LPコーディング
PC4枚、スマホ1枚両端見切れスライダーを作成しました。
実務で依頼をいただき作成したswiperスライダー（自動再生・PC4枚・スマホ1枚両端見切れ）を紹介しています。
よくある質問のアコーディオンを作成しました。
よくある質問のアコーディオンメニューのHTML・CSS・JavaScriptのソースコードを紹介しています。またjQueryを使用しないパターンも紹介しています。
makeshopコーディング
下記記事にあるようなサイドメニューを作成しました。
makeshopのテンプレートタグとcssを使用して作成したサイドメニューを記事で紹介しています。親をカテゴリーをホバーすると子カテゴリーが開くような階層構造を持ったサイドメニューになっています。
カスタマイズ・実装
静的ページからWordPressへ移行、ブロックエディターで作成。
htmlの知識がない方でも修正などできるようにブロックエディターから作成しました。
iPhoneのSafariのみスクロールイベントが発生しないエラーが発生しました。下記記事で紹介している方法でエラーを解消しました。
iPhoneのSafariのみスクロールイベントが起こらなかった時の対処法について記事にしています。
指定した位置にピンを差したGooglemapの挿入
googleマイマップを使用して作成しました。
マイマップの作成方法は下記記事で紹介しています。
好きな場所にピンをつけたGoogleMapをWebサイトに表示するためのマイマップの作り方について解説しています。
画像の一部分にリンクを追加
HTMLのイメージマップ（Image Map）を使用してクライアント様のサイトに実装しました。
画像の一部分にリンクを追加のサンプルは下記で紹介しています。
HTMLの「Image Map」を使用して、1枚の画像に複数のリンクを追加する方法についてご紹介しています。
またImage Mapのレスポンシブ対応には下記の「image-map-resizer」を利用しています。
Responsive HTML Image Maps. Contribute to davidjbradshaw/ima…
クリックした項目に関連するもののみを表示切り替え
下記の「Mixitup」というライブラリを使用してクライアント様のサイトに実装しました。
表示切り替えのサンプルデモは下記記事で紹介しています。
実務経験でクリックした項目に関するもののみを表示するフィルター機能を「MixItUp」ライブラリで実装しました。今回の記事はそのデモになります。
Contactform7で郵便番号から住所を自動入力
Contactform7で郵便番号を入力したときに住所が自動で入力されるようにしました。
下記記事で紹介している方法で実装しています。
WordPressのContact Form7で郵便番号から住所を自動入力する機能を実装した方法とid属性が反映されなかった時の解決方法について紹介しています。
