HTML

  1. Contact Form 7|input type=”file”のボタンデザ…

    ここでは、WordPressのプラグイン「Contact Form 7」で作成した問い合わせフォームのファイル添付ボタンのデザインをカスタマイズする方法、さらに…

  2. CSS|ジグザグ・ギザギザな境界線の作り方

    面白いサイトデザインを見かけると、それをスタイルシートだけで表現できないものか試してみたくなる病にかかっています。今日も、そんな衝動にかられてジグザグな境界線を…

  3. CSS|境目のところが下向きの三角形みたいになっているWEBページを作ってみた

    よくランディングページなどで見かける、こういうページをスタイルシートで作ってみたので共有します。画像は使っていません。 See the P…

  4. Contact Form 7のフォームを整えるスタイルシート

    新しいホームページを作る機会があると、必ずと言って良いほど必要になるのが問い合わせフォームです。今までなぜか毎回、手作業でスタイルシートを作って来たのですが、さ…

  5. 画像にマウスオーバーで写真を切り替えるCSSの作り方

    ここでは画像にマウスオーバーしたときに、画像が切り替わるスタイルシートの書き方について見ていきます。画像の切り替えは、いろいろやり方があるみたいですが、難しいこ…

  6. CSSでフローチャート(タテ)を作成する方法

    サービスの流れなどをページでデザインするときに、タテのフローチャートをCSSだけで作ってみたいなと思ったので、完成したものをここでシェアさせていただきます。ご自…

  7. dlタグを使ってQ&Aを作ってみる

    ホームページを作成していると「よくある質問」的なページを作ることがあります。これまで、何度か作って来たのですが、いい加減テンプレート化しておこうと思いましたので…

  8. CSS|背景画像の上に背景色を重ねる方法

    スタイルシートで背景色の上に文字を入れたい。でも、そのままだとテキストが見にくくなってしまうから、画像の上に色を重ねたい、そんなときにCSSで解決させる方法につ…

  9. ECサイト|不揃いな商品サムネイルをCSSで同じ比率・サイズに統一させる方法

    ECサイトなどで商品をリスト表示させたときに、画像の比率がバラバラなためにきれいに揃わないことってありますよね。そんなときに、画像を一つ一つ編集しなくても、CS…

  10. 商品サムネイルにCSSでラキングの王冠画像を重ねて表示させる方法

    ここでは、ネット通販サイトなどで使えるランキングの王冠画像をスタイルシートを使ってサムネイルに重ねて表示させる方法について見ていきます。王冠画像をサムネ…

最近の記事

  1. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
  2. CSS

    CSS|中央寄せが効かないときは・・・
  3. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
  4. CSS

    要素の配置が簡単に決まるFlexboxの使い方
  5. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
PAGE TOP