HTML/CSSサンプルコード集

コンテンツ
【コピペで使える】プレーンなJavascriptで作る開閉ボタン(よくある質問等)

ホームページのよくある質問などのページでこんなインターフェイスを見かけたことはありませんか? よくある質問のようなページでは、ユーザーは自分が知りたい情報に素早くアクセスしたいため、それ以外の内容のテキストボリュームが多 […]

続きを読む
コンテンツ
【コピペで使える】フォームへの生年月日入力でリアルタイムに年齢を表示するサンプルコード

今回はフォームで生年月日を入力した際にリアルタイムで年齢を計算して表示するスクリプトコードを紹介します。 サンプルコード <html> <head> <meta charset="utf-8 […]

続きを読む
WordPress
【コピペで使える】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 […]

続きを読む
コンテンツ
【コピペで使える】レスポンシブ対応のシンプルおしゃれなリンクカードデザインサンプル

今回はサイト内で使うシンプルでお洒落なリンクカードデザインのサンプルコードを紹介します。 ブログやウェブサイトのページ上で他ページへのリンクを掲載することはよくありますが、通常のテキストリンクだけではリンク先のページの概 […]

続きを読む