HTML/CSS 視覚効果が魅力的！jQueryとCSSを活用したズームインアニメーションスライドショーの実装方法
ウェブデザインにおいて、トップページのメインビジュアルは、訪問者に強い印象を与えるために重要な役割を果たします。特に、フェードインスライドショーはその効果的な表現方法として広く用いられています。今回の記事では、フェードインスライドショーにズ...
HTML/CSS
HTML/CSS 
HTML/CSS 斜めに伸びる要素を実現するCSSアニメーション
こんにちは！今回は、CSSアニメーションを駆使して、斜め方向に伸びるオブジェクトを作成する方法をご紹介します。このアニメーションは、ユーザーの注目を引くデザインや動的なインタラクションに活用できます。初学者の方でも簡単に取り組めるように、コ...
HTML/CSS CSSで片側だけ画面幅いっぱいに広げる方法
CSSで片側だけ画面幅いっぱいに広げる方法を紹介します。片側だけ画面いっぱいに広げることでアクセントを付けるデザインはよく見るので、覚えておくと便利かもしれません。サンプルサンプルページHTML<section class="content...
HTML/CSS CSSで作るスライドアニメーションで右横から出てくる追従お問い合わせボタン
CSSで作るスライドアニメーションで右横から出てくる追従お問い合わせボタンの作り方を紹介します。CSSのみでjsは未使用なので簡単・軽量です。サンプル<a href="/contact/" class="contact-btn slidei...
HTML/CSS 【CSS】背景色だけ透過させる方法 中に表示する画像やテキストはそのまま表示させたい
画像やテキストなどは通常表示で背景色だけを透過させる方法を紹介します。原因背景を透過させようとしたら画像やテキストなども全て透過されてしまいました。一体何が原因なのでしょうか。結論から言うとopacityを使用していたのが原因でした。背景だ...
HTML/CSS 【CSS】追従ヘッダーの作り方
CSSのみで簡単に実装可能な追従ヘッダーの作り方を紹介します。ヘッダーにメニューを載せてスクロール時も追従させることにより、サイト内の他のページにもアクセスしてもらいやすくします。サンプルサンプルページHTML<header class="...
HTML/CSS 【CSS】ボタンを作る
CSSで作るボタンを紹介します。リンクを目立たせたい場合などに使用すると便利です。サンプルボタンサンプルHTML<a href="#" class="button-1">ボタンサンプル</a>CSS.button-1 { display: ...
HTML/CSS 【CSS】吹き出しを作る
CSSで吹き出しを作る方法を紹介します。キャラクター等の画像と組み合わせることによって会話風にしたり、目立たせたい箇所に使用するとちょっとしたアクセントになります。サンプル 吹き出しのサンプルです。吹き出しのサンプルです。吹き出しのサンプル...
HTML/CSS 【CSS】文字にマーカー風のラインを引く
CSSで文字にマーカー風のラインを引く方法を紹介します。ブログ等の文章内の強調したい箇所に使用すると、アクセントになると思います。サンプルマーカーのサンプルです。.marker { background:linear-gradient(tr...
HTML/CSS 【CSS】文字を縦書きにする方法
CSSで文字を縦書きにする方法を紹介します。見やすさを考えると、基本的にWebサイトの文章は横書きで作ると思うので、あまり使用頻度は高くないかもしれませんが、見出し等にアクセントを付けたいときなどに使用することがあります。サンプルCSSで文...