HTML／CSSサンプルコード集

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

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

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

記事中のテキストに以下のようなマーカーで線を引いたような下線をひきたいと思ったことはないでしょうか？今ならポイント１０倍線がテキストの後ろに回りこむような形の表現がいいですよね。下線と言えば、text-decara […]

よくページをスクロールするとふわっとコンテンツ（文字や画像）が現れるお洒落な効果を見ると思います。今回はこの効果を実現するためのJQueryの実装方法について紹介します。こういった動きのある効果をアニメーション効果と […]

ウェブデザイナーやHTMLコーダーの中には、JQueryと聞くと何やら難しいプログラミングと考えて拒絶反応が出てしまう方も多いかと思います。一方でプログラマーからすると、何を取り扱っているのかわからない何やら中途半端な […]

ウェブサイトを見ているとよく右下の方に「トップへ戻る」や上矢印のようなボタンがあって、クリックするとページの一番上まで自動でスクロール（アニメーション）しながら戻るといった機能を見るかと思います。今回はこの「トップへ戻 […]

今回は、HTMLのソースを変更することなくCSSだけでページ上のテキストを書き換える方法について紹介します。これだけ聞くと「なんでそんな回りくどいことする必要があるの？」と思われるかもしれませんが、ワードプレス等のCM […]

Bootstrap（ブートストラップ）とは Bootstrapと聞くと開発者の方は、OS起動時に実行されるプログラムを連想する方も少なくないかと思いますが、今回紹介するのはTwitter社が開発したCSSのフレームワーク […]

スマートフォン対応をしているレスポンシブデザインのウェブサイトにおいて、YouTube動画を綺麗に埋め込むというのは実はなかなか難しかったりします。通常のYouTube動画の埋め込みタグでは、iframeのwidth・ […]