ブログ
この記事では２種類のプログレスバーを実装する方法について紹介します。 とりあえず下記のデモで動きを確認してください。 now loading...① スタート .progBar{ width:100%; height:50px; background-color:#ddd; position:relative; overflow: hidden; } .…
#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('…
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…
この記事では、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…
この記事では、JavaScriptを使用して特定の文章をクリックでコピーする方法を学びます。これにより、ユーザーエクスペリエンスを向上させ、情報の共有を容易にします。以下の手順に従って、簡単に実装できます。 クリックでコピーできる文章です。 次の入力…
CSSとFont Awesomeを使って、検索フォームを作成する方法について説明します。 以下の手順に従って、独自の検索フォームを作成しましょう。 Font Awesomeの導入 Font Awesomeを使用するには、まずFont AwesomeのCDNリンクをHTMLファイルの<head>内に追加します。 <html> <head></head></html></head>…
Font Awesomeは、多くのWebサイトで使用されている人気のあるアイコンセットとCSSツールキットです。簡単にベクターアイコンを埋め込んで、サイズ、色、ドロップシャドウなどをCSSでカスタマイズできます。 Font Awesome の導入 Font Awesomeをプロジェクト…
サイトのスタイルを変更したいとき、通常はclass名を探しますよね。たまにclass名がない場合があります。筆者はちょうど今週それに遭遇したので、class名のないタグにどのようにスタイルを書くか簡単に説明します。 タグ名で指定 すべての特定のタグを持つ要…
CSSを使ったリンクのカスタマイズに関するテクニックを紹介します。 リンクはウェブページの基本要素であり、ユーザーエクスペリエンスに大きく影響します。以下の方法を使って、リンクをより魅力的で使いやすくしましょう。 <a href="https://codinghaku.com/">codinghaku</a> アンダーラインを消…
ダークモードは、目に優しいデザインやバッテリーの節約に役立ち、スマホで使っている人も結構いると思います。 多くの海外製テーマはダークモード対応しています。対応できない場合はプラグインを使ってもいいです。僕は一応コーダーなので、できるだけ使い…
どちらもウェブページに図形や画像を描画するために使用されますが、それぞれ異なる特徴や用途があります。今回では、SVGとCanvasの違いについて解説します。 SVG SVGは、XMLベースのベクター画像フォーマットです。 ベクター画像は、数学的な形状や座標を使…
グラデーションは、一定の方向に徐々に色が変わる効果を指します。今回はCSSグラデーションの基本的な使い方を紹介します。 CSSグラデーションの基本 CSSグラデーションを使用するには、要素の背景にグラデーション関数を指定します。 主に三つの種類があり…
CSSで要素の高さや幅を指定する際はpxや%といった単位を使うのが一般的ですが、本文はビューポートの単位を紹介します。 ビューポート単位 まず、ビューポート単位とは、ビューポート（Viewport）というブラウザの表示領域のサイズに基づいた相対単位です。 …
CSS3では、フォントサイズの指定に「rem」と「em」という単位が使えます。 これらの単位は、どちらも相対的な値であり、親要素のフォントサイズに対する相対値で指定されます。以下、remとemの違いと使い分け方について解説します。 remとは？ remとは「root…
.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…
画像を大きくして表示したい時、画像をクリックしたら、大きな画像が表示されるシーンがよくあると思います。 javascriptを使わない方法 まず、一番簡単なやり方を紹介します。 <a href="image.jpg" target="_blank"><img src="image.jpg" width="200px"></a> 画像の横幅を200pxと指定することで、ページ上では、画像が小さく表示されます…
placeholder属性 placeholder属性は、HTMLのフォーム要素でよく使われる属性の1つです。 inputやtextareaに設定され、ユーザーが何を入力するべきかを示す簡単なテキストメッセージが表示されます。言い換えれば、薄い文字を表示することができます。 例えば…
HTMLやCSSなどのウェブページを作成する際に、ファイルの場所を指定する方法には、絶対パスと相対パスの2つがあります。 絶対パスと相対パスとは？ パスとは「Path」、「経路」という意味です。 絶対パスは、ウェブサイトのルートから直接ファイルにアクセス…
HTMLにおいて、buttonタグとaタグは両方ともユーザーがクリックできる要素ですが、使い分けには適切な場面があります。本文では、buttonタグとaタグの使い分けについて解説します。 buttonタグの使い方 buttonタグは、フォームを送信するためのボタンを作成…
HTMLでボタンを作る方法は概ね三つがあります。buttonタグ、aタグ、inputタグです。この記事では、CSSを使用してbuttonタグを綺麗にする方法を紹介します。 buttonタグとは <button>ボタンです。</button> ボタンです。 ボタンの見た目にはブラウザごとのデフォルトのスタイル…
結論 filter: grayscale(1) ページ全体に設定を適用したい場合はhtmlタグの中に書きます。 <style> html { filter: grayscale(1); } </style> 解説 CSSのfilterフィルタープロパティを使うと、画像にフィルターをかけることができます。 grayscaleグレースケールは画像をモ…
