コピペで使える!CSSで複数行のテキストを縦中央に配置するサンプルコード

今回はCSSを使って指定のHTML要素を縦中央に配置するサンプルコードについてご紹介します。 Webページを制作する上で縦中央揃えというのはなかなか厄介なもので、サンプルコードを探して気づくとだいぶ時間を使っていた・・・ …

【コピペで使える】最も簡単にハンバーガーメニューを実現するサンプルコード

皆さんはこんなメニューボタンを見たことはないでしょうか? これは「ハンバーガーメニュー」といって、昨今のWebページのレスポンシブデザイン(スマホ対応)化でよく使われるようになった見開き式のメニューボタンです。 (たぶん …

【コピペで使える】aタグでonclick属性を使う際にhrefのページ遷移を無効化する方法

今回はaタグにonclick属性を付加しJavascriptを動かす際に、hrefによるページ遷移をしないようにするための記述方法を紹介します。 これ、使う度に忘れてしまっていて毎回調べるんですよね…。 <a hr …

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

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

【コピペで使える】チェックの有無でボタンが有効/無効に切り替わるJavaScriptコードサンプル(利用規約への同意等)

今回簡易的な利用規約の同意機能として、同意するにチェックを押したときだけ登録ボタンを押すことができる処理を実装したのでそのコードをシェアします。 本来であれば同意したかどうかは会員データベースに記録したり、メール本文に出 …

【コピペで使える】PHPで作る検索フォーム実装サンプル

今回はPHPで検索ページを作るベースとなるサンプルコードをご紹介したいと思います。   検索ページとは ウェブアプリケーションにおいて検索ページ(検索フォーム)というのは必要不可欠なものです。 例えば賃貸物件を …

【コピペで使える】レスポンシブ対応のYouTube動画スライダー実装サンプル

自身のウェブサイトで、YouTubeの埋め込み動画をかっこよくスライダーで表示させたいと考えたことはないでしょうか?今回はその実装サンプルをご紹介します。(最後にサンプルファイルのダウンロードリンクを記載しています) & …

【コピペで使える】CSSの疑似要素(after)を使って縦中央揃えのアイコンを付加したリストを作る方法

今回のゴール 今回の実装のゴールは以下のように右端に矢印アイコンを付加したリストを作成することを目指します。 メニュー1 メニュー2 メニュー3 この際、改行などによってリスト内のコンテンツの高さが変わってもアイコンがリ …

【コピペで使える】アフィリエイト広告をランダム表示するスクリプトサンプル

今回は複数のアフィリエイト広告タグをランダム表示するスクリプトサンプルをご紹介します。 Googleアドセンスではアフィリエイト広告表示の最適化はアドセンス側で自動化してくれるのですが、A8ネット等のアフィリエイトASP …

【コピペで使える】アフィリエイトバナーをPCとスマホで表示分けする簡単な方法

アフィリエイトサイトを作って広告バナーを掲載する際、PCとスマートフォンで表示するバナー画像を分けたいと思ったことはないでしょうか? PCでは横長の画像を設置したいけどスマートフォン表示になると見切れてしまう・・・、でも …