css
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…
この記事では、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デザイ…
ドロップダウンメニュー ① <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…
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> アンダーラインを消…
グラデーションは、一定の方向に徐々に色が変わる効果を指します。今回は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…
HTMLでボタンを作る方法は概ね三つがあります。buttonタグ、aタグ、inputタグです。この記事では、CSSを使用してbuttonタグを綺麗にする方法を紹介します。 buttonタグとは <button>ボタンです。</button> ボタンです。 ボタンの見た目にはブラウザごとのデフォルトのスタイル…
結論 filter: grayscale(1) ページ全体に設定を適用したい場合はhtmlタグの中に書きます。 <style> html { filter: grayscale(1); } </style> 解説 CSSのfilterフィルタープロパティを使うと、画像にフィルターをかけることができます。 grayscaleグレースケールは画像をモ…
