Webサイトにアイコンを使いたいときに便利なのがFont Awesome（フォントオーサム）です。 矢印・電話・SNSロゴなど、豊富なアイコンを簡単に使える人気のライブラリです。この記事では、Font Awesomeの導入方法と基本的な使い方を初心者向けにわかりやすく解説します。 Font Awesomeとは？ Font Awesomeは、WebサイトにアイコンフォントやSVGアイコンを追加できる無料のライブラリです。 多くの開発者やデザイナーに利用されており、以下のようなアイコンを簡単に表示できます： ソーシャルメディア（Twitter, Instagram, Facebook など） UIアイコン（ハンバーガーメニュー、検索、ゴミ箱など） 視覚的な補助アイコン（チェック、注意、ハートなど） CDNでFont Awesomeを導入する 公式サイトから提供されているCDNを使えば、HTMLファイルに1行追加するだけでアイコンが使えるようになります。 コピー <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"> </head> ※最新版のURLはFont Awesome公式サイト（fontawesome.com）で確認しましょう。 基本的なアイコンの使い方 アイコンを表示するには、<i>タグまたは<span>にクラス名を追加します。 コピー <i class="fa-solid fa-heart"></i> <i class="fa-solid fa-phone"></i> <i class="fa-brands fa-twitter"></i> クラスの種類： fa-solid：実線アイコン fa-regular：線画スタイル fa-brands：ブランドロゴ（Twitter, YouTubeなど） アイコンサイズを変更する サイズを変更したいときは、クラスで指定することができます。 コピー <i class="fa-solid fa-star fa-2x"></i> <i class="fa-solid fa-star fa-3x"></i> <i class="fa-solid fa-star fa-5x"></i> サイズ指定クラス（例：fa-2x, fa-3x）は、通常サイズの2倍・3倍…を意味します。 アイコンに色をつける アイコンは通常のテキストと同じようにCSSで色を変えられます。 コピー .fa-heart { color: red; } .fa-twitter { color: #1da1f2; } よく使うアイコン一覧 fa-solid fa-magnifying-glass（検索） fa-solid fa-envelope（メール） fa-brands fa-facebook（Facebook） fa-brands fa-line（LINE） 詳しくは公式の「アイコン一覧」を参照してください。 おわりに Font Awesomeを使えば、サイトに視覚的なアクセントを加えたり、ナビゲーションをわかりやすくできます。 無料で手軽に導入できるので、ぜひ積極的に使ってみてください。 次回は「SVG版Font Awesomeの使い方」や「WordPressでの導入方法」も紹介していきます！
-
WordPressでオリジナルテーマを使うと、SEO対策も自分で自由に調整できます。 今回は、基本的かつ効果の高いSEO対策10項目と、それぞれの具体的な実装方法を紹介します。 SEO対策10項目とその実装例 ① タイトルタグの自動出力 functions.php に以下を追加することで、<title>が自動出力されるようになります。 コピー add_theme_support('title-tag'); ② メタディスクリプションの追加 header.php 内の <head> タグ内に、以下のように記述します。 コピー <meta name="description" content="このサイトは、初心者向けにHTMLとCSSを解説しています。"> ③ セマンティックなHTML構造 セクションやコンテンツの役割ごとに適切なHTML5タグを使用します。 コピー <main> <section> <h2>サービス紹介</h2> <p>...</p> </section> </main> ④ hタグの適切な使い分け <h1>はページに1つだけ。見出し階層は論理的に。 コピー <h1>サイトのタイトル</h1> <h2>サービス紹介</h2> <h3>トリミングについて</h3> ⑤ 画像にalt属性を追加 画像の内容を伝えるテキストをalt属性に記述します。 コピー <img src="dog.jpg" alt="元気な保護犬の写真"> ⑥ パンくずリストの設置 ナビゲーションの一部として以下のように記述。構造化データにも使えます。 コピー <nav class="breadcrumb"> <a href="/">ホーム</a> > <a href="/blog/">ブログ</a> > <span>この記事のタイトル</span> </nav> ⑦ JSON-LD構造化データの追加 header.php に以下を挿入して、検索結果に情報を渡します。 コピー <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Organization", "name": "HPBUILD", "url": "https://www.hpbuild.net" } </script> ⑧ 表示速度の改善（画像の遅延読み込み） functions.php に以下を追加して、画像のLazyLoadを有効にします。 コピー add_filter('wp_lazy_loading_enabled', '__return_true'); ⑨ モバイル対応 <head>内に以下のviewportタグを記述し、レスポンシブ対応をします。 コピー <meta name="viewport" content="width=device-width, initial-scale=1.0"> ⑩ SEOプラグインの導入 All in One SEOやYoast SEOをインストールすると、タイトル・メタ情報・構造化データなどをGUIで設定可能になります。 コピー プラグイン > 新規追加 > 「All in One SEO」または「Yoast SEO」で検索してインストール まとめ オリジナルテーマだからこそ、SEO対策も自分の手で柔軟に調整できます。まずは①〜⑤の基本対策から着手し、⑥〜⑩へと段階的に進めていくと無理なく実装できます。 次回は「SEOスコアを上げるLighthouse対策」や「検索結果に目立つ構造化データ活用法」について解説予定です。
-
JavaScriptで外部データを読み込んで、ページ内に表示したい──そんなときに使えるのがFetch APIです。この記事では、外部のJSONデータを取得し、記事リストをHTML上に動的に表示する基本の使い方を初心者向けにやさしく解説します。 Fetch APIとは？ fetch()は、ネットワーク越しにリソース（JSON、HTML、画像など）を非同期で取得できるJavaScriptの機能です。従来のXMLHttpRequestよりも記述がシンプルで、現在では主流の方法となっています。 このAPIを使うことで、例えば「記事一覧を読み込む」「フォームの入力を送信する」「検索結果を絞り込む」など、Webページをよりインタラクティブに動かせるようになります。 前提：JSONファイルの例 ここでは、以下のような記事一覧を含んだJSONファイルを用意したとします。 コピー [ { "title": "CSS Flexbox入門", "url": "https://example.com/flexbox" }, { "title": "HTMLフォームの基本", "url": "https://example.com/form" } ] HTML構造（表示する場所） 取得したデータを表示するため、HTMLにリストの受け皿となる<ul>要素を準備しておきます。 コピー <ul id="article-list"></ul> JavaScriptでデータ取得＆表示 JavaScriptでfetchを使ってJSONを取得し、リスト表示してみましょう。 コピー document.addEventListener("DOMContentLoaded", () => { const list = document.getElementById("article-list"); fetch("articles.json") .then(response => { if (!response.ok) throw new Error("読み込み失敗"); return response.json(); }) .then(data => { data.forEach(article => { const li = document.createElement("li"); const a = document.createElement("a"); a.href = article.url; a.textContent = article.title; li.appendChild(a); list.appendChild(li); }); }) .catch(error => { list.innerHTML = "<li>データの読み込みに失敗しました。</li>"; console.error("エラー:", error); }); }); 初心者が注意すべきポイント 初めてFetch APIを使う際には、以下の点に気をつけるとスムーズです： ファイルパスの確認： 相対パスやファイル名の誤りがよくある原因 CORSエラー： 別ドメインのデータを取得する場合、サーバー側の設定が必要 ローカル環境の制限： fetchはセキュリティ上、file://では動作しないことがあるため、ローカルサーバーで動かすのがおすすめ ポイントまとめ 非同期でデータを取得 → ページ読み込み後にリスト表示 エラーハンドリング → 通信エラー時のフォールバック表示も重要 ループでDOM生成 → 配列を使って複数の要素を自動で追加 応用例 今回紹介した基本を応用すれば、以下のような発展的な使い方も可能です。 WordPressのREST APIから最新記事を取得して表示 検索ワードによるフィルターや絞り込み機能の実装 「もっと見る」ボタンによるページネーション ローディング中のスピナーやアニメーションの表示 おわりに Fetch APIを活用すれば、静的なページでも動的なコンテンツ表示が簡単に実現できます。まずはJSONの読み込みから始めて、徐々に外部APIやCMSとの連携など、より実践的な応用にも挑戦してみてください。 エラー処理やDOM操作をしっかり理解することで、より柔軟でユーザーに優しいWebページが作れるようになりますよ！
-
Webサイトを操作していると、スクロールに応じてヘッダーが固定されたり、背景色が変わったりするUIをよく見かけますよね。この記事では、JavaScriptを使ってその仕組みを実装する方法を解説します。 実装イメージ ヘッダーが画面上部に固定される スクロールすると背景色が切り替わる ページトップでは透明、スクロール後は色付き背景に HTML構造 コピー <header id="site-header"> サイトのヘッダー </header> <main> <p>ここにメインコンテンツが入ります。</p> </main> CSSで基本の固定スタイルを指定 コピー #site-header { position: fixed; top: 0; width: 100%; padding: 1em; transition: background-color 0.3s; z-index: 1000; } #site-header.transparent { background-color: transparent; } #site-header.solid { background-color: #333; color: white; } JavaScriptで背景色を切り替える コピー document.addEventListener("DOMContentLoaded", () => { const header = document.getElementById("site-header"); const updateHeader = () => { if (window.scrollY > 50) { header.classList.remove("transparent"); header.classList.add("solid"); } else { header.classList.remove("solid"); header.classList.add("transparent"); } }; window.addEventListener("scroll", updateHeader); updateHeader(); // 初期状態を確認 }); 補足：ヘッダーの下に余白を作る 固定ヘッダーの分だけ、mainに余白を追加するのを忘れずに！ コピー main { margin-top: 80px; /* ヘッダーの高さに応じて調整 */ } おわりに この方法を使えば、ヘッダーの存在感をコントロールしてユーザー体験を高めることができます。アニメーションやスクロール量による変化も組み合わせれば、さらに高度な演出も可能です。 次回は「スクロール量に応じて要素をフェードインさせる方法」もご紹介予定です！
-
ライブラリなしでタブ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だけで作るタブ切り替え」もご紹介予定です！
Web制作やHTML/CSSの学習に役立つ情報を初心者向けに発信しています。
プロフィールはこちら