HPBUILD

ライブラリなしでタブUIを実装したいときは、JavaScriptの標準APIだけで十分対応可能です。この記事では、HTML・CSS・JavaScriptを使って、シンプルで拡張性の高い「タブ切り替えUI」の作り方を解説します。 実装イメージ ボタンをクリックすると該当タブの内容が表示 非アクティブなパネルは非表示に クラス切り替えでスタイル変更 HTML構造 コピー <div class="tabs"> <button class="tab active" data-target="#panel1">タブ1</button> <button class="tab" data-target="#panel2">タブ2</button> </div> <div class="tab-content active" id="panel1">タブ1の内容</div> <div class="tab-content" id="panel2">タブ2の内容</div> CSSで切り替えのスタイルを定義 コピー .tab-content { display: none; padding: 1em; border: 1px solid #ccc; } .tab-content.active { display: block; } .tab.active { background-color: #333; color: #fff; } JavaScriptでタブ切り替え処理 コピー document.addEventListener("DOMContentLoaded", () => { const tabs = document.querySelectorAll(".tab"); const contents = document.querySelectorAll(".tab-content"); tabs.forEach(tab => { tab.addEventListener("click", () => { const target = document.querySelector(tab.dataset.target); // すべてのタブとコンテンツのactiveを解除 tabs.forEach(t => t.classList.remove("active")); contents.forEach(c => c.classList.remove("active")); // 対象にactiveを追加 tab.classList.add("active"); target.classList.add("active"); }); }); }); ポイントまとめ data-target 属性で対象を明示 classList.add/removeでスタイルを切り替え querySelectorAllで複数の要素を効率的に制御 おわりに ブラウザ標準のAPIだけで、軽量でカスタマイズ性の高いタブUIを実装できます。より複雑なナビゲーションやアニメーションへの応用も可能ですので、ぜひ活用してみてください。 次回は「アコーディオンメニューとの併用パターン」などもご紹介予定です！

クリックするとポップアップのように表示されるモーダルウィンドウ。通知やフォーム、画像拡大など、さまざまな用途に使われるUIです。この記事ではHTML・CSS・JavaScriptを使った基本的な実装方法を紹介します。 完成イメージ ボタンを押すと中央にモーダルが表示 背景が暗くなり、モーダル以外を操作不可に 閉じるボタンや背景クリックで非表示 HTML構造 コピー <button id="openModal">モーダルを開く</button> <div id="modal" class="modal"> <div class="modal-content"> <span class="close-button">×</span> <p>ここがモーダルの内容です。</p> </div> </div> CSSでスタイルを整える コピー .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); justify-content: center; align-items: center; } .modal-content { background: white; padding: 20px; max-width: 400px; border-radius: 8px; position: relative; } .close-button { position: absolute; right: 10px; top: 10px; cursor: pointer; font-size: 24px; } JavaScriptで開閉処理を制御 コピー document.addEventListener("DOMContentLoaded", () => { const modal = document.getElementById("modal"); const openBtn = document.getElementById("openModal"); const closeBtn = document.querySelector(".close-button"); openBtn.addEventListener("click", () => { modal.style.display = "flex"; }); closeBtn.addEventListener("click", () => { modal.style.display = "none"; }); window.addEventListener("click", (e) => { if (e.target === modal) { modal.style.display = "none"; } }); }); おわりに モーダルウィンドウは、ユーザーの注意を引きたいときや、重要な情報を表示する場面にとても便利なUIです。今回の方法をベースに、フォームや画像ギャラリーなどにも応用できます。 次回は「スクロール禁止処理」や「フェードアニメーション付きのモーダル」もご紹介予定です！

最近のWebサイトではよく見かけるダークモード。実はJavaScriptを使えば、簡単に「ライトモード／ダークモードの切り替え」を実装できます。今回は、ボタン1つでテーマを切り替え、設定を保存する基本の作り方を解説します。 実装の流れ CSSでライト＆ダークのテーマを用意 ボタンを設置し、クリックでテーマを切り替える ユーザー設定を localStorage に保存して保持 HTMLの基本構造 コピー <button id="toggle-theme">テーマ切替</button> <main> ページの内容がここに入ります。 </main> CSSでテーマを定義 コピー body { background: white; color: #222; transition: background 0.3s, color 0.3s; } body.dark-mode { background: #121212; color: #f0f0f0; } JavaScriptで切り替え処理 ボタンのクリックでクラスを切り替え、設定を保存します。 コピー document.addEventListener("DOMContentLoaded", () => { const button = document.getElementById("toggle-theme"); const body = document.body; // ローカルストレージから設定を読み込み if (localStorage.getItem("theme") === "dark") { body.classList.add("dark-mode"); } button.addEventListener("click", () => { body.classList.toggle("dark-mode"); // 設定を保存 if (body.classList.contains("dark-mode")) { localStorage.setItem("theme", "dark"); } else { localStorage.setItem("theme", "light"); } }); }); ポイント解説 classList.toggle()で簡単にテーマ切り替え localStorageでユーザー設定を保持し、次回アクセス時も同じテーマに ページ読み込み時にDOMContentLoadedで設定を反映 おわりに 今回のように、JavaScriptを使えば手軽にダークモードを導入できます。UI改善にもなり、ユーザー満足度向上にもつながるので、ぜひ取り入れてみてください！ 次回は「OS設定を自動判定するダークモード対応」について紹介します！

JavaScriptを使わずに、CSSだけでアコーディオンメニューを実装できるって知っていましたか？この記事では、チェックボックス（input）を使ったシンプルで軽量なアコーディオンの作り方をご紹介します。 アコーディオンメニューとは？ クリックするとメニューの中身が表示・非表示に切り替わるUIのことです。FAQやサイドメニュー、スマホナビゲーションなどによく使われます。 HTML構造 コピー <div class="accordion"> <input type="checkbox" id="toggle1"> <label for="toggle1">項目1</label> <div class="content"> 内容がここに入ります。 </div> </div> CSSで開閉の制御を実装 :checked疑似クラスと兄弟セレクタ（+）を使って表示を切り替えます。 コピー .accordion .content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .accordion input:checked + label + .content { max-height: 200px; /* 必要に応じて調整 */ } スタイル調整例 コピー .accordion label { display: block; background: #f0f0f0; padding: 10px; cursor: pointer; font-weight: bold; } .accordion .content { padding: 10px; background: #fff; border: 1px solid #ccc; } チェックボックスの非表示化 チェックボックスそのものは非表示にして、ラベルだけをクリック可能にします。 コピー .accordion input[type="checkbox"] { display: none; } おわりに JavaScript不要でアコーディオンを実装できるこの方法は、表示速度や保守性の面でも有利です。シンプルなUIを作りたいときにぜひ活用してみてください。 次回は「CSSだけで作るタブ切り替え」もご紹介予定です！

「ページ内リンクをクリックしたとき、ふわっと目的地までスクロールさせたい」──そんなときに便利なのがスムーススクロールです。jQueryを使わなくても、JavaScriptだけで簡単に実装できます。 スムーススクロールとは？ スムーススクロールとは、ページ内リンクをクリックした際に、瞬間的に移動するのではなく、ゆっくりと滑らかにスクロールするアニメーションを指します。 HTMLの基本構造 まずはページ内リンクの例を確認しましょう。 コピー <a href="#section2">セクション2へ移動</a> <div id="section2"> ここが目的地！ </div> JavaScriptでスムーススクロールを実装 scrollIntoView()を使うと、スムースに目的地へ移動できます。 コピー document.addEventListener("DOMContentLoaded", () => { const links = document.querySelectorAll('a[href^="#"]'); links.forEach(link => { link.addEventListener("click", e => { e.preventDefault(); const targetId = link.getAttribute("href").substring(1); const targetElement = document.getElementById(targetId); if (targetElement) { targetElement.scrollIntoView({ behavior: "smooth" }); } }); }); }); ポイント解説 e.preventDefault()：通常のジャンプ挙動を止める scrollIntoView({ behavior: "smooth" })：スムーススクロールを実行 古いブラウザに対応するには？ 古いブラウザ（IEなど）では scrollIntoView の behavior: "smooth" が効かないことがあります。その場合は polyfill や requestAnimationFrame を使った自作スクロール関数を使う方法もありますが、近年はモダンブラウザ中心なので基本は不要です。 おわりに スムーススクロールは、ユーザーにとって自然で心地よい体験を提供できます。jQueryを使わず、軽量な実装を目指すなら、今回の方法がおすすめです。 次回は「ページ上部に戻るボタンのスムーススクロール実装」など、応用テクニックも紹介します！

Webサイトを高速表示させるために効果的な方法のひとつが、画像の軽量化と遅延読み込み（Lazy Loading）です。この記事では、その基本的な考え方と実装方法をわかりやすく解説します。 画像の軽量化とは？ 画像の軽量化とは、見た目の品質を保ちつつ、ファイルサイズをできるだけ小さくすることです。表示速度の向上やデータ通信量の削減につながります。 主な方法 画像フォーマットを見直す（例：JPEG → WebP） 画像サイズを適切にリサイズ 圧縮ツールを使う（TinyPNG, Squoosh など） Lazy Loading（遅延読み込み）とは？ Lazy Loadingは、ページを開いた直後には見えない画像を、スクロールして見えるタイミングで読み込む手法です。 HTMLだけで実装する例 コピー <img src="example.jpg" loading="lazy" alt="サンプル画像"> loading="lazy"属性を追加するだけで、対応ブラウザでは自動的に遅延読み込みされます。 JavaScriptで実装する方法（より細かく制御したい場合） Intersection Observer APIを使うと、画像がビューポートに入ったタイミングで読み込むことができます。 コピー document.addEventListener("DOMContentLoaded", () => { const images = document.querySelectorAll("img[data-src]"); const observer = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; observer.unobserve(img); } }); }); images.forEach(img => observer.observe(img)); }); HTML例（data-srcを使う） コピー <img data-src="image.jpg" alt="遅延画像"> 注意点 loading="lazy"は一部の古いブラウザで非対応 重要な画像（ファーストビューにあるロゴなど）は即時読み込みのままでOK SEOへの影響が出ないよう、alt属性は適切に記述 おわりに 画像の軽量化とLazy Loadingを組み合わせることで、サイトのパフォーマンスを大きく改善できます。ぜひ一度、ご自身のサイトでも導入してみてください。 次回は「動画やiframeの遅延読み込み」や「画像CDN活用による最適化」についてご紹介します！

文字に線をつけたり、色を変えたり──こうした装飾をするのに使えるのが CSS の text-decoration プロパティです。この記事では、基本的な使い方から応用、注意点までを初心者にもわかりやすく解説します。 text-decorationって何？ text-decorationは、文字に「下線（underline）」「上線（overline）」「取り消し線（line-through）」などを付けたり、その色やスタイル（実線・点線など）を設定できるCSSのプロパティです。リンクや強調を視覚的にわかりやすく表示するのに使われます。 基本の使い方 コピー /* 下線をつける */ a { text-decoration: underline; } /* 取り消し線 */ del { text-decoration: line-through; } /* 複数指定もOK */ p { text-decoration: overline underline; } 色やスタイルも変えられる！ 下線の色や見た目も指定可能です： コピー a { text-decoration-line: underline; text-decoration-color: #ff0000; /* 赤い線 */ text-decoration-style: dotted; /* 点線 */ } まとめて短く書く方法もある CSS3からはショートハンドでまとめて指定ができます： コピー a { text-decoration: underline red dotted; } 初心者が注意すべきポイント リンクに装飾を付けすぎると、読みづらくなることがある アクセシビリティ対応では「色だけでなく線の種類も区別できるように」するのが望ましい 古いブラウザではショートハンドに対応していない場合もあるので、必要に応じて分けて書くと安心 応用テクニック ホバー時に線の色やスタイルを変えて動きをつける リスト項目に装飾線を追加してデザイン性を高める SVG や Webフォントと組み合わせてオリジナル装飾を作る HTMLでの使い方例（ホバー時） コピー a:hover { text-decoration: underline solid #0000ff; } おわりに text-decorationはシンプルに見えてデザインに役立つ便利プロパティです。初めはリンクや強調だけに使い、慣れてきたら色や線のスタイルにも挑戦してみましょう。 次回は「text-decoration-skip-ink」や「text-underline-offset」を紹介して、よりおしゃれで読みやすいテキストデザインに深掘りしていきますので、お楽しみに！

Webサイトに画像を載せるだけだと、ちょっと物足りなく感じることってありませんか？ そんなときに役立つのが、CSSによる画像の装飾テクニックです。ほんの少し手を加えるだけで、ぐっと見た目が洗練され、プロっぽく仕上がります。 画像を丸く切り抜く プロフィール画像やスタッフ紹介などでは、丸い写真がよく使われます。border-radius: 50%で簡単に丸くできます。 コピー .circle-img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; } object-fit: coverを加えることで、画像の比率を保ちつつ、はみ出さないようトリミングされます。 画像に影をつける 写真に影を加えると、立体感が出て「浮き上がった」ような印象を作れます。 コピー .shadow-img { box-shadow: 0 4px 8px rgba(0,0,0,0.3); } 影の濃さや角度を調整すれば、やわらかい印象やしっかりした強調など自由に演出できます。 画像に枠線をつける 画像に境界をつけると、全体のデザインにメリハリが出ます。特に背景が白や淡い色のときに効果的です。 コピー .border-img { border: 3px solid #3498db; padding: 4px; background-color: #fff; } paddingとbackground-colorを組み合わせることで、額縁のような見た目にもできます。 応用：丸くて影付きの画像 複数の装飾を組み合わせれば、より印象的な見せ方ができます。たとえば、丸く切り抜いた上で影を加えた例はこちら。 コピー .circle-shadow-img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; box-shadow: 0 4px 8px rgba(0,0,0,0.3); } 初心者が気をつけたいポイント 装飾しすぎない：影・枠・丸形をすべて使うと逆にゴチャつく可能性も 画像サイズを明示：ブラウザのレイアウト崩れ防止のためwidthとheightは明示するのが安心 スマホ表示に対応：レスポンシブ対応としてmax-width: 100%;などの工夫も必要 おわりに CSSを使えば、画像にほんの少し手を加えるだけで、デザイン性をぐっと高めることができます。とくにプロフィール写真や製品写真など「見た目の印象が重要」な場面では、これらの装飾が大きな効果を発揮します。 次回は、filterを使った色調補正や、ホバー時のアニメーションといった、さらに発展的なテクニックも紹介していきますのでお楽しみに！