- ホーム
- HTML
HTML
-
Contact Form 7のフォームを整えるスタイルシート
新しいホームページを作る機会があると、必ずと言って良いほど必要になるのが問い合わせフォームです。今までなぜか毎回、手作業でスタイルシートを作って来たのですが、さ…
-
画像にマウスオーバーで写真を切り替えるCSSの作り方
ここでは画像にマウスオーバーしたときに、画像が切り替わるスタイルシートの書き方について見ていきます。画像の切り替えは、いろいろやり方があるみたいですが、難しいこ…
-
CSSでフローチャート（タテ）を作成する方法
サービスの流れなどをページでデザインするときに、タテのフローチャートをCSSだけで作ってみたいなと思ったので、完成したものをここでシェアさせていただきます。ご自…
-
dlタグを使ってQ&Aを作ってみる
ホームページを作成していると「よくある質問」的なページを作ることがあります。これまで、何度か作って来たのですが、いい加減テンプレート化しておこうと思いましたので…
-
CSS｜背景画像の上に背景色を重ねる方法
スタイルシートで背景色の上に文字を入れたい。でも、そのままだとテキストが見にくくなってしまうから、画像の上に色を重ねたい、そんなときにCSSで解決させる方法につ…
-
ECサイト｜不揃いな商品サムネイルをCSSで同じ比率・サイズに統一させる方法
ECサイトなどで商品をリスト表示させたときに、画像の比率がバラバラなためにきれいに揃わないことってありますよね。そんなときに、画像を一つ一つ編集しなくても、CS…
-
商品サムネイルにCSSでラキングの王冠画像を重ねて表示させる方法
ここでは、ネット通販サイトなどで使えるランキングの王冠画像をスタイルシートを使ってサムネイルに重ねて表示させる方法について見ていきます。王冠画像をサムネ…
-
CSS｜dlリストのdtタグ・ddタグをヨコに並べる方法
下記の記事でもご紹介したように、dtリストというのは「キーワード」とその「意味・説明」などを記載したいときに使うタグです。でも、dtは初期設定で…
-
【プラグインなし】WordPressのページごとに個別のCSSを追加する方法
特定の記事の一部だけにスタイルシートを効かせたいときってありますよね。でも、「投稿の編集」のテキストエディタに直接スタイルシートを記入してしまうと、コー…
-
flexboxを使って画像とテキストを横に並べてレスポンシブにしたい
ここではタイトルの通り、flexboxを使って画像とテキストを２列に横並びに表示させて、かつスマホで表示させたときは画像とテキストを１列にする方法について見てい…
