HTML／CSSサンプルコード集

レスポンシブデザインでWebページを作成しているとき、テーブル以外でも上記のように並列要素の一方を固定幅にして、もう一方を画面幅いっぱいに広がる可変にしたいといった場合が出てきます。各要素の横幅をパーセント指定（30% […]

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

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

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

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

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

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

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

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

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