#carousel-demo { position: relative; width: 300px; height: 200px; overflow: hidden; } .slide-demo { position: absolute; width: 300px; height: 200px; transition: opacity 1s; } let currentIndex = 0; const slides = document.querySelectorAll('…

円はサイトのUIやグラフィックに多く使われる基本的な形状です。 今回は、CSSだけで円を描く方法と、その中でも重要な役割を果たすborder-radiusプロパティの解説をします。 CSSで円を描く方法 まず、円を描くためには、HTMLを用意します。 <div class="circle"></div> 背景色を指定す…

方法①三角形を入れる <div class="hexagon"></div> .hexagon { position: relative; width: 100px; height: 57.74px; background-color: #333; margin: 28.87px 0; } .hexagon::before, .hexagon::after { content: ""; position: absolute; width: 0; border-left: 50px solid transpar…

この記事では、CSSを使用して美しい検索バーを作成する方法を解説します。サンプルコードを参考にして、あなたのウェブサイトにおしゃれな検索バーを実装しましょう。 基本的なのHTML構造 まず、基本的なHTMLを作成します。 <div class="topnav"> <a class="active" href="#home">HOME</a> <a href="#about">ABOUT</a> <a href="#contact">CONTACT</a> <input type="text" placeholder="検索"> </div> CSSデザイ…

この記事では、JavaScriptを使用してリストをリアルタイムでフィルタリングする方法を解説します。これにより、ユーザーがリスト内のアイテムを瞬時に検索・絞り込むことができます。サンプルコードも用意していますので、あなたのウェブサイトに簡単に実装…

JavaScriptを使用してHTMLテーブルをリアルタイムでフィルタリングする方法を解説します。これにより、ユーザーがテーブル内のデータを瞬時に検索・絞り込むことができます。サンプルコードも用意していますので、あなたのサイトに簡単に実装することができ…

ドロップダウンメニュー ① <ul class="dropdown"> <li>ホームページ</li> <li> <div>チュートリアル</div> <ul> <li>HTML</li> <li>CSS</li> <li> <div>JavaScript</div> <ul> <li>基本</li> <li>上級</li> </ul> </li> </ul> </li> <li>お問合わせ</li> <li>その他</li> </ul> ul { margin: 0; padding: 0; list-style-type: none; } .dropdown { display: flex…

ダークモードは、目に優しいデザインやバッテリーの節約に役立ち、スマホで使っている人も結構いると思います。 多くの海外製テーマはダークモード対応しています。対応できない場合はプラグインを使ってもいいです。僕は一応コーダーなので、できるだけ使い…

.haku-20230306{ display: flex; justify-content: space-around; align-items: center; height: 100%; } .haku-20230306 div{ display: inline-block; color: transparent; } .haku-20230306 span{ font-size: 40px; animation: twinkle 4.6s linear infini…