HTML/CSSサンプルコード集
【コピペで使える】レスポンシブ対応のシンプルおしゃれなリンクカードデザインサンプル
今回はサイト内で使うシンプルでお洒落なリンクカードデザインのサンプルコードを紹介します。 ブログやウェブサイトのページ上で他ページへのリンクを掲載することはよくありますが、通常のテキストリンクだけではリンク先のページの概 […]
【コピペで使える】チェックの有無でボタンが有効/無効に切り替わるJavaScriptコードサンプル(利用規約への同意等)
今回簡易的な利用規約の同意機能として、同意するにチェックを押したときだけ登録ボタンを押すことができる処理を実装したのでそのコードをシェアします。 本来であれば同意したかどうかは会員データベースに記録したり、メール本文に出 […]
【コピペで使える】PHPで作る検索フォーム実装サンプル
今回はPHPで検索ページを作るベースとなるサンプルコードをご紹介したいと思います。 検索ページとは ウェブアプリケーションにおいて検索ページ(検索フォーム)というのは必要不可欠なものです。 例えば賃貸物件を紹介するウェブ […]
【コピペで使える】レスポンシブ対応のYouTube動画スライダー実装サンプル
自身のウェブサイトで、YouTubeの埋め込み動画をかっこよくスライダーで表示させたいと考えたことはないでしょうか?今回はその実装サンプルをご紹介します。(最後にサンプルファイルのダウンロードリンクを記載しています) & […]
【コピペで使える】CSSの疑似要素(after)を使って縦中央揃えのアイコンを付加したリストを作る方法
今回のゴール 今回の実装のゴールは以下のように右端に矢印アイコンを付加したリストを作成することを目指します。 メニュー1 メニュー2 メニュー3 この際、改行などによってリスト内のコンテンツの高さが変わってもアイコンがリ […]
【コピペで使える】アフィリエイト広告をランダム表示するスクリプトサンプル
今回は複数のアフィリエイト広告タグをランダム表示するスクリプトサンプルをご紹介します。 Googleアドセンスではアフィリエイト広告表示の最適化はアドセンス側で自動化してくれるのですが、A8ネット等のアフィリエイトASP […]
【コピペで使える】アフィリエイトバナーをPCとスマホで表示分けする簡単な方法
アフィリエイトサイトを作って広告バナーを掲載する際、PCとスマートフォンで表示するバナー画像を分けたいと思ったことはないでしょうか? PCでは横長の画像を設置したいけどスマートフォン表示になると見切れてしまう・・・、でも […]
【コピペで使える】CSSでテキストにマーカー(テキストと重なる下線)を引く方法
記事中のテキストに以下のようなマーカーで線を引いたような下線をひきたいと思ったことはないでしょうか? 今ならポイント10倍 線がテキストの後ろに回りこむような形の表現がいいですよね。 下線と言えば、text-decara […]
【コピペで使える】スクロールでフェードインさせる使いまわし可能なJQuery実装サンプル
よくページをスクロールするとふわっとコンテンツ(文字や画像)が現れるお洒落な効果を見ると思います。 今回はこの効果を実現するためのJQueryの実装方法について紹介します。 こういった動きのある効果をアニメーション効果と […]
JQueryって一体何なの?JQueryのシンプルな理解の仕方
ウェブデザイナーやHTMLコーダーの中には、JQueryと聞くと何やら難しいプログラミングと考えて拒絶反応が出てしまう方も多いかと思います。 一方でプログラマーからすると、何を取り扱っているのかわからない何やら中途半端な […]