HTML/CSSサンプルコード集

コンテンツ
【コピペで使える】YouTube動画埋め込み時にアスペクト比(縦横比)を固定する方法

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

続きを読む
コンテンツ
WPテーマTwenty Seventeenでヘッダー画像に重ねてキャプションを設置する方法

今回はワードプレステーマ「Twenty Seventeen」でヘッダー画像上に重ねてキャプションを設置する方法について解説したいと思います。 「Twenty Seventeen」は1ページ構成のサイトを作成するのに大変重 […]

続きを読む
コンテンツ
【コピペで使える】CSSで大きさが変わるアニメーションボタンサンプル

概要 タイトルの通り、今回はHTML・CSSだけで大きさが変わるアニメーションボタンを作成してみたいと思います。 まずは以下サンプルの動作をご確認ください。   お申し込みはこちら   ランディングペ […]

続きを読む
HTML/CSSサンプルコード集
【コピペで使える】レスポンシブデザインでいい感じにテキストの改行位置を調整する方法

概要 今回は、レスポンシブデザインでテキストの改行位置を調整する実装方法について紹介したいと思います。 横幅が固定されているPC専用デザインの場合は、指定のフォントサイズであれば改行位置というのも概ね決まってくるため、& […]

続きを読む
HTML/CSSサンプルコード集
【コピペで使える】WPテーマ「Twenty Seventeen」のCSSおすすめカスタマイズ

今回はWordPress(ワードプレス)の公式テーマである「Twenty Seventeen」でおすすめのCSSカスタマイズをご紹介します。   「Twenty Seventeen」の問題点 「Twenty S […]

続きを読む
コンテンツ
【コピペで使える】超シンプルなJavascript画像切り替えスクリプトサンプル

はじめに 大きな画像の下に、小さなサムネイル画像のリストがあり、サムネイル画像のマウスを乗せると大きな画像がそのサムネイル画像に切り替わる。 ショッピングサイトなんかでよく見る仕様です。 省スペースで多くの商品画像を見せ […]

続きを読む
SEO対策・ホームページ集客
【コピペで使える】Googleアナリティクスのイベントトラッキング設定方法

  イベントトラッキングとは Googleアナリティクスのイベントトラッキング機能は、主にリンクやボタンをクリックした回数を計測できる機能です。 Googleアナリティクスは、アナリティクスコードが設置された同 […]

続きを読む
HTML/CSSサンプルコード集
【コピペで使える】Contact Form 7のデザインカスタマイズ

Contact Form 7とは 「Contact Form 7」とは、Takayuki Miyoshi氏が作成・提供している、Wordpress(ワードプレス)の問い合わせフォームプラグインです。 Ajax によるフォ […]

続きを読む
コンテンツ
【コピペで使える】スマホ対応のCSSリストデザイン

格好良く見せようとすると意外と難しいCSSリストデザイン。今回は、「シンプル」「機能的」「オシャレ」の3条件を満たすCSSリストデザインに挑戦してみたいと思います。 ul liのタグを使ったデザインは、結構素っ気ない感じ […]

続きを読む
その他
【コピペで使える】画像アップロード付きAjax(JQuery)フォームサンプル/メール送信パターンもあり

はじめに 今回は、Ajaxを利用した画像アップロード機能付きフォームのサンプルを作成します。 画像ファイルをアップロードするだけのサンプルは複数見つかったのですが、画像ファイル以外のテキスト情報も一緒に取り扱っているサン […]

続きを読む