HTML／CSSサンプルコード集
【コピペで使える】レスポンシブ対応のYouTube動画スライダー実装サンプル
自身のウェブサイトで、YouTubeの埋め込み動画をかっこよくスライダーで表示させたいと考えたことはないでしょうか？今回はその実装サンプルをご紹介します。（最後にサンプルファイルのダウンロードリンクを記載しています） & […]
【コピペで使える】CSSの疑似要素（after）を使って縦中央揃えのアイコンを付加したリストを作る方法
今回のゴール 今回の実装のゴールは以下のように右端に矢印アイコンを付加したリストを作成することを目指します。 メニュー1 メニュー2 メニュー3 この際、改行などによってリスト内のコンテンツの高さが変わってもアイコンがリ […]
【コピペで使える】アフィリエイト広告をランダム表示するスクリプトサンプル
今回は複数のアフィリエイト広告タグをランダム表示するスクリプトサンプルをご紹介します。 Googleアドセンスではアフィリエイト広告表示の最適化はアドセンス側で自動化してくれるのですが、A8ネット等のアフィリエイトASP […]
【コピペで使える】アフィリエイトバナーをPCとスマホで表示分けする簡単な方法
アフィリエイトサイトを作って広告バナーを掲載する際、PCとスマートフォンで表示するバナー画像を分けたいと思ったことはないでしょうか？ PCでは横長の画像を設置したいけどスマートフォン表示になると見切れてしまう・・・、でも […]
【コピペで使える】CSSでテキストにマーカー（テキストと重なる下線）を引く方法
記事中のテキストに以下のようなマーカーで線を引いたような下線をひきたいと思ったことはないでしょうか？ 今ならポイント１０倍 線がテキストの後ろに回りこむような形の表現がいいですよね。 下線と言えば、text-decara […]
【コピペで使える】スクロールでフェードインさせる使いまわし可能なJQuery実装サンプル
よくページをスクロールするとふわっとコンテンツ（文字や画像）が現れるお洒落な効果を見ると思います。 今回はこの効果を実現するためのJQueryの実装方法について紹介します。 こういった動きのある効果をアニメーション効果と […]
JQueryって一体何なの？JQueryのシンプルな理解の仕方
ウェブデザイナーやHTMLコーダーの中には、JQueryと聞くと何やら難しいプログラミングと考えて拒絶反応が出てしまう方も多いかと思います。 一方でプログラマーからすると、何を取り扱っているのかわからない何やら中途半端な […]
【コピペで使える】JQueryのトップへ戻るボタン実装サンプル
ウェブサイトを見ているとよく右下の方に「トップへ戻る」や上矢印のようなボタンがあって、クリックするとページの一番上まで自動でスクロール（アニメーション）しながら戻るといった機能を見るかと思います。 今回はこの「トップへ戻 […]
【コピペで使える】CSSでHTMLのテキストを書き換える方法
今回は、HTMLのソースを変更することなくCSSだけでページ上のテキストを書き換える方法について紹介します。 これだけ聞くと「なんでそんな回りくどいことする必要があるの？」と思われるかもしれませんが、ワードプレス等のCM […]
Bootstrap（ブートストラップ）の有用性と基本的なコーディング方法
Bootstrap（ブートストラップ）とは Bootstrapと聞くと開発者の方は、OS起動時に実行されるプログラムを連想する方も少なくないかと思いますが、今回紹介するのはTwitter社が開発したCSSのフレームワーク […]