Web開発 テーブルの行と列をCSSで入れ替える方法
概要テーブルの行と列（横と縦）をCSSだけで入れ替える方法です。サンプル行と列入れ替え前 See the Pen テーブルの行と列の入れ替え前 by take it easy (@take-it-easy) on CodePen.行と列入れ...
CSS
Web開発 
Web開発 【HTML・JavaScript】日付の入力で西暦と和暦の切り替えをする
概要少し前に、Webの日付の入力フォームで、西暦と和暦を切り替えられるようにできないかとの話があった時のメモです。サンプル最終的に、西暦・和暦を切り替えるプルダウンを作る西暦はinputを使用する和暦は、元号をプルダウン、年・月・日はinp...
Web開発 【JavaScript】テーブルにソート機能やフィルタリング機能、ページング機能を簡単に追加するList.jsの使い方
概要「List.js」というライブラリを使用することで、テーブルに、ソート機能、フィルタリング機能、ページング機能を簡単に追加することができます。その、「List.js」の使い方です。List.jsPerfect library for a...
Web開発 ハンバーガーメニューをチェックボックスを使ってCSSだけで作る方法
概要ヘッダーにあるメニューが三本線のナビゲーションメニューになるレスポンシブサイトをよく見ると思います。そのハンバーガーメニューを、Javascriptを実装せずに、チェックボックスを使って、CSSだけで実装をする方法です。サンプル See...
Web開発 input要素でwidthに100%を設定すると親要素からはみ出てしまう
概要input要素でwidthに100%を設定すると、親要素からはみ出てしまうことがあります。次のcodepenで、上の方がwidthに100%を設定しただけの場合で、親要素（赤枠）からはみ出ていることがわかると思います。 See the ...
Web開発 【Javascript】郵便番号から住所情報をフォームに自動入力をする
概要住所を入力するフォームでよくある、郵便番号を入力して検索ボタンを押したら、住所が自動入力される機能の作り方のサンプルです。郵便番号から住所情報をフォームに自動入力をするサンプルは以下になります。 See the Pen 住所自動入力 b...
Web開発 【CSS】スマホの時だけテキストの改行をする方法
概要ホームページを作成する時、パソコン画面だけではなく、スマホ画面のことも考えてレスポンシブ対応が必須になってきています。パソコン画面ではテキストを改行しなくて良くても、スマホ画面では改行したいという場合があると思います。CSSだけで簡単に...
WordPress 【WordPress】Contact Form 7でスパム対策にreCAPTCHAを設定する方法
概要ホームページやブログを開設して、お問い合わせフォームを作成したら、いろんなスパムなどがきて困っていたりしないでしょうか？WordPressでは、Contact Form 7というプラグインを使うことで、「reCAPTCHA（リキャプチャ...