HTML／CSSサンプルコード集
【コピペで使える】WordPressで投稿テンプレートをカテゴリ別に変える方法（カスタムフィールド使用）
WordPressでウェブサイトを作るときに、カテゴリーによって投稿テンプレートを変えたいという場合があります。今回はその場合のサンプルコードを紹介します。 概要 複数のお店を紹介するサイトの制作を想定しま […]
【コピペで使える】検索フォームのチェックボックスのチェック状態を保持・反映するPHPサンプルコード
Webアプリケーションの検索フォームでチェックボックスの状態を保持する実装は意外と面倒なもの。今回はそんな検索フォームのチェックボックスの状態保持のサンプルコード（主に管理画面を想定）をご紹介します。 目指 […]
【コピペで使える】複数checkboxのうち指定のボックスがチェックされた瞬間に処理を行うJQueryサンプル
単体のチェックボックスがチェックされた瞬間に何らかの処理を行うJQueryの実装サンプル（changeイベント）はたくさん情報がありますが、複数のチェックボックスのうちどれか指定のチェックボックスにチェックされた場合のみ […]
並列要素の一方を固定幅に、もう一方を可変で画面幅いっぱいに広がるようにするCSSサンプル
レスポンシブデザインでWebページを作成しているとき、テーブル以外でも上記のように並列要素の一方を固定幅にして、もう一方を画面幅いっぱいに広がる可変にしたいといった場合が出てきます。 各要素の横幅をパーセント指定（30% […]
コピペで使える！CSSで複数行のテキストを縦中央に配置するサンプルコード
今回はCSSを使って指定のHTML要素を縦中央に配置するサンプルコードについてご紹介します。 Webページを制作する上で縦中央揃えというのはなかなか厄介なもので、サンプルコードを探して気づくとだいぶ時間を使っていた・・・ […]
【コピペで使える】最も簡単にハンバーガーメニューを実現するミニマルサンプルコード
皆さんはこんなメニューボタンを見たことはないでしょうか？ これは「ハンバーガーメニュー」といって、昨今のWebページのレスポンシブデザイン（スマホ対応）化でよく使われるようになった見開き式のメニューボタンです。 （たぶん […]
【コピペで使える】aタグでonclick属性を使う際にhrefのページ遷移を無効化する方法
今回はaタグにonclick属性を付加しJavascriptを動かす際に、hrefによるページ遷移をしないようにするための記述方法を紹介します。 これ、使う度に忘れてしまっていて毎回調べるんですよね…。 <a hr […]
【コピペで使える】レスポンシブ対応のシンプルおしゃれなリンクカードデザインサンプル
今回はサイト内で使うシンプルでお洒落なリンクカードデザインのサンプルコードを紹介します。 ブログやウェブサイトのページ上で他ページへのリンクを掲載することはよくありますが、通常のテキストリンクだけではリンク先のページの概 […]
【コピペで使える】チェックの有無でボタンが有効／無効に切り替わるJavaScriptコードサンプル（利用規約への同意等）
今回簡易的な利用規約の同意機能として、同意するにチェックを押したときだけ登録ボタンを押すことができる処理を実装したのでそのコードをシェアします。 本来であれば同意したかどうかは会員データベースに記録したり、メール本文に出 […]
【コピペで使える】PHPで作る検索フォーム実装サンプル
今回はPHPで検索ページを作るベースとなるサンプルコードをご紹介したいと思います。 検索ページとは ウェブアプリケーションにおいて検索ページ（検索フォーム）というのは必要不可欠なものです。 例えば賃貸物件を紹介するウェブ […]