CSSを使って、ウェブページ上のマウスカーソルのスタイルを自由にカスタマイズすることが可能です。 以下は、各種のマウスカーソルスタイルを一覧にしたものです。 マウスを各項目の上に置くと、そのマウスカーソルのスタイルが反映されるのを確認できます。…

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

タイトル通りです。 <div></div> まず、共通のスタイルを定義します。 div { position: relative; width: 150px; height: 60px; background: #ddd; } 方法1（Border使用） おそらくこれが一番考えやすいと思います。 div { border-left: 5px solid green; } 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…

今回は、jQueryでよく使われるon()メソッドについて解説します。 jQueryのon()メソッドとは？ jQueryのon()メソッドは、選択されたHTML要素に一つまたは複数のイベントハンドラーを添付するための強力なメソッドです。 基本的な構文は次の通りです。 $(selec…