Technical Blog
技術ブログ
WordPressで継続して書いてきた技術記事・開発記録をまとめています。 学習内容、開発で詰まったこと、実装の理解を言葉に残しています。
display: grid; の基礎
私はこれまでdisplay: flexを使用してレイアウトを整えてきましたが、最近display: gridを使用する機会がありました。 スマホで親要素に以下のようなCSSを書き、 以下のようなレイアウトを実現したわけですが、あまりdisplay: gridについて理解しきれていないので、ネットの情報を調べ、本記事でアウトプットしたいと思いました。 display: gridの …
contact-form7の申し込みフォームで表にチェックボックスを追加する方法
先日、contact-form7の申し込みフォームで、表の中にチェックボックスを追加したいがやり方が分からないから困っているというご相談を受けました。 実際にWordPressにログインして1時間弱調べたのですが、やり方が分からず、納期が迫っている仕事もあったので結局対応をお断りすることになってしまいました。 後日実現できたので、方法を書いていきます。 今回実現できなかったご要 …
日本地図にリンクを設定する方法
HTML Imagemap Generatorというツールを使用して日本地図にリンクを設定する方法を紹介します。 私が住んでいる地域が東海エリアなので、東海3県の地図を使用していきます。 ※このイラストは、こちらのフリー素材を使用して作成しました。 サンプルサイト https://ki-hi-ro.com/sample/img-link/ それぞれの県をクリックしたら公式サイト …
横スクロールできるコンテンツの作成方法
先日、本サイトのトップページのブログコンテンツを横スクロールできるようにしました。 本記事では、横スクロールできるコンテンツの作成方法を紹介します。 検証してみると googleの検証ツール（デベロッパーツール）を使用して上記画像の要素を検証してみると、”top-contents__wrap” というクラスを持ったdivタグの中で、”skill-blog__link …