HPBUILD

Webサイトで文章を表示する際、左右のバランスが気になることはありませんか？ そんなときに活躍するのが、text-align: justifyによる均等揃えです。 このプロパティを使えば、雑誌や新聞のようにテキストの両端をキレイに揃えることができます。 本記事では、その使い方と注意点、さらには応用テクニックまで、初心者向けにわかりやすく解説します。 text-align: justifyとは？ text-alignはテキストの揃え方を指定するCSSプロパティです。 通常は left（左揃え）、center（中央揃え）などを使いますが、justifyを指定すると、 各行の左右両端がピッタリ揃う 文字と文字の間隔を調整して揃える という特徴があります。 p { text-align: justify; } どんなときに使う？ 以下のような場面でjustifyがよく使われます： 長文の読み物ページ（ブログやコラム） PDF風のページや書類系サイト 新聞や書籍のレイアウトに近づけたいとき 注意点：「。」や短い行では効かない！ text-align: justifyはすべての行に適用されるわけではありません。 以下のようなケースでは均等揃えが適用されません： 段落の最終行 <br>で明示的に改行された行 1行の文字数が少ない場合 つまり、「。」で毎回改行してしまうと、均等揃えにならない行が増え、見た目が不揃いになってしまいます。 均等揃えのコツ 見栄えよく均等揃えを活かすために、以下のような工夫がおすすめです： 文末の「。」で毎回改行しない <br>は使わず、<p>タグで段落を区切る max-widthを設定して読みやすい行幅にする p { text-align: justify; max-width: 40em; line-height: 1.8; } 応用：text-align-lastで最終行を制御 均等揃えでは最終行だけ左揃えになってしまうのが一般的です。 これをカスタマイズするには、text-align-lastプロパティを使います。 p { text-align: justify; text-align-last: center; } これで、段落の最後の行だけ中央揃えなどにすることも可能です。 まとめ text-align: justifyで、文章を両端揃えにできる ただし、改行の仕方や行の長さによっては揃わないこともある text-align-lastで最終行の調整もできる 読みやすさと美しさのバランスを見ながら、ぜひ活用してみてください！

HTMLでページ内リンク（アンカーリンク）を設定したとき、ジャンプ先の見出しがヘッダーに隠れてしまうことはありませんか？ 特に固定ヘッダーを使っているサイトではよくある悩みです。この記事では、ページ内リンクのズレを防ぐ3つの方法を、初心者にも分かりやすく紹介します。 そもそもページ内リンクとは？ ページ内リンクとは、同じページ内の特定の要素にジャンプできるリンクのことです。<a href="#id名">でリンクし、ジャンプ先には対応するid属性を付けます。 コピー <a href="#section1">セクション1へ</a> ... <h2 id="section1">セクション1</h2> リンクをクリックすると、ページ内のid="section1"が付いた要素まで自動でスクロールします。 よくある問題：見出しがヘッダーに隠れる ページの上部に固定ヘッダー（position: fixed）を使用していると、ジャンプ先の要素がヘッダーに隠れてしまうことがあります。 ▼ こんな状態になっていませんか？ ジャンプしても見出しが表示されない スクロール後にいきなり本文が始まる 解決方法1：CSSのscroll-margin-topを使う（見出しごとに設定） 最もよく使われる方法は、ジャンプ先となる見出しにscroll-margin-topを指定する方法です。 コピー h2 { scroll-margin-top: 80px; /* 固定ヘッダーの高さに応じて調整 */ } これにより、スクロールした際に見出しの上に余白ができ、ヘッダーに重ならずに表示されます。 ページ全体のid付き要素すべてに適用したい場合 ジャンプ先がh2以外（例えば<div id="...">など）にも及ぶ場合は、以下のように指定すると便利です。 コピー [id] { scroll-margin-top: 80px; } 解決方法2：ダミー要素を使って調整する 古いブラウザ対応やより細かい調整が必要な場合は、ジャンプ先の直前に見えないダミー要素を挿入する方法があります。 コピー <div id="section1" class="anchor-adjust"></div> <h2>セクション1</h2> コピー .anchor-adjust { display: block; height: 80px; margin-top: -80px; visibility: hidden; } 見た目には何も表示されず、見出しの表示位置だけを調整できます。 解決方法3：htmlにscroll-padding-topを指定する（全体に一括適用） もっと手軽にページ全体のスクロール位置を補正したい場合は、htmlタグに対してscroll-padding-topを指定する方法があります。 コピー html { scroll-padding-top: 80px; scroll-behavior: smooth; } この方法では、すべての<a href="#id">に対して一括でスクロール位置を補正できます。サイト全体に反映されるため、最も手軽かつ強力な方法です。 補足：特定のidパターンにだけ適用したい場合 目次などの自動生成でid="toc-0"などが付与される場合、以下のように属性セレクタで限定的に指定できます。 コピー h2[id^="toc-"] { scroll-margin-top: 80px; } まとめ 個別に設定：scroll-margin-top（方法1） 細かく調整：ダミー要素による補正（方法2） 全体に一括：html { scroll-padding-top }（方法3・おすすめ） サイトの構成や使っているテーマによって最適な方法は異なりますが、scroll-padding-topはもっとも手軽でおすすめです。ぜひ試してみてください！

HTMLタグの属性を条件にスタイルを指定できる「CSS属性セレクタ」。クラス名やIDだけでは実現しにくい柔軟な指定ができるため、実務でも非常に役立つテクニックです。この記事では、CSS属性セレクタの基本構文から、よく使うパターン、実践例までをやさしく解説します。 属性セレクタの基本構文 CSS属性セレクタは、HTMLの属性をもとにスタイルを適用するセレクタです。構文は以下のようになります。 コピー 要素[属性名="値"] { /* スタイル */ } たとえば、<a target="_blank"> のようなリンクだけにスタイルを当てたいときに便利です。 よく使う5つの属性セレクタ 属性セレクタには、目的に応じて5種類の指定方法があります。 [attr]：属性がある要素すべて [attr="value"]：値が完全一致する要素 [attr^="value"]：値が「指定の文字列で始まる」要素 [attr$="value"]：値が「指定の文字列で終わる」要素 [attr*="value"]：値が「指定の文字列を含む」要素 使用例と具体的な使い方 target属性を持つリンクにだけスタイルを適用 コピー a[target] { color: red; text-decoration: underline; } target属性を持つすべてのリンクに赤い文字色を適用します。 画像URLが特定のパスで始まる場合 コピー img[src^="https://example.com/uploads/"] { border-radius: 8px; } 特定フォルダ内の画像だけに丸みをつける例です。 .pdfで終わるリンクだけアイコン表示 コピー a[href$=".pdf"] { background: url("pdf-icon.png") no-repeat left center; padding-left: 20px; } PDFリンクだけにPDFアイコンを表示します。 Twitterを含むリンクに色をつける コピー a[href*="twitter.com"] { color: #1DA1F2; } リンク先に"twitter.com"を含む場合、青色のリンクにします。 応用：idが「toc-」で始まる見出しに余白を追加 WordPressの目次機能などで、idがtoc-0やtoc-1のように付与された見出しにスクロール時の余白を追加する例です。 コピー h2[id^="toc-"] { scroll-margin-top: 80px; } 固定ヘッダーに見出しが隠れないようにするためのテクニックです。 初心者が気をつけたいポイント 属性の綴りミスに注意：正しくても指定が効かないときは属性名や値を再確認 属性値の動的変化に注意：JavaScriptで動的に変わる属性には即時反映されないことも クラス・IDと併用可能：属性セレクタとクラス名の併用で、より限定的な指定が可能 おわりに CSS属性セレクタを活用すれば、要素の属性によって柔軟にスタイルを指定できます。IDやクラスだけに頼らない設計ができるので、コードもスッキリ保てます。Web制作に慣れてきたら、ぜひ活用してみてください。 次回は、フォーム要素への属性セレクタ活用術や、JavaScriptと連携したスタイル制御なども紹介予定です。

SEO対策を始めたけれど、検索順位の変化をどうやって追えばいいかわからない…。そんな初心者におすすめなのが、検索順位チェックツール「GRC」です。 GRCはWindows専用のソフトですが、無料版でも十分に実用的で、サイト改善に役立つヒントが得られます。 GRCとは？ GRCは、特定のキーワードで自分のサイトが何位に表示されているかをチェックし、推移を記録してくれる検索順位チェックツールです。毎日の順位変動を確認できるため、SEO施策の効果を測るのに最適です。 無料版でできること URL1件まで登録可能 キーワード20件まで登録可能 Google・Yahoo!・Bingの順位取得に対応 グラフ表示や推移チェックもOK GRCのインストール方法 まずは公式サイトからGRCをダウンロードしてインストールします。 コピー https://seopro.jp/grc/ インストール後は、起動して以下の手順で初期設定を行いましょう。 サイトとキーワードの登録手順 GRCでは、まず「URL（サイト）」と「チェックしたいキーワード」を登録します。 メニュー「編集」→「項目新規追加」を選択 チェック対象のURL（例：https://www.hpbuild.net/）を入力 調べたいキーワードを1件ずつ入力 「実行」ボタンで順位を取得 これで登録完了です。次回からGRCを起動するだけで、自動的に順位を取得してくれます。 順位データの見方と分析ポイント 順位列： 現在の掲載順位 前回比： 前回の順位との差 グラフアイコン： 順位の推移をグラフで表示 特定のキーワードで順位が上がった記事や、落ち込んだ記事を把握することで、リライトや強化すべきポイントが見えてきます。 SEO改善に活かすチェックのコツ 圏外→20位以内： 検索に引っかかり始めた記事はチャンス 1位〜10位付近： タイトルやディスクリプションを微調整してCTR向上を狙う 順位が落ちた記事： 検索意図の変化や競合記事の出現に注意 初心者が覚えておきたいSEOの基本 検索意図を満たす内容か： ユーザーが知りたいことに答えている？ 見出し構造が明確か： H2/H3で情報を整理しよう キーワードを適切に配置： タイトル・冒頭・見出し・本文に自然に入れる 内部リンクを活用： 関連記事を適切につなぐと評価アップ まとめ GRCは、無料でも非常に実用的な検索順位チェックツールです。毎日の順位変動を確認することで、記事ごとの成長や改善のヒントを得ることができます。 「順位を確認する → 改善点に気づく → リライトする」このサイクルを回すことが、SEOの本質でもあります。まずはGRCを導入して、検索順位チェックを習慣にしてみましょう。

Webサイトを運営していると、「同じ内容のページが複数のURLで存在している」ことがあります。これを放置すると、Googleに正しく評価されず、SEOに悪影響を及ぼすことも。そんなときに役立つのが、canonical（カノニカル）タグです。この記事では、canonicalタグの意味とSEO効果、WordPressでの設定方法まで初心者向けにわかりやすく解説します。 canonicalタグとは？ canonicalタグは、HTMLの<head>内に記述することで「このページが正規のURLです」と検索エンジンに伝えるタグです。 たとえば以下のようなURLが存在していても： https://example.com/page https://example.com/page?utm_source=twitter https://example.com/page?_ga=123456 すべてに共通のcanonicalを指定しておけば、SEO評価が一つのURLに集約されます。 コピー <link rel="canonical" href="https://example.com/page" /> このコードをページの<head>内に記述することで、Googleに正規URLを伝えることができます。 SEOにおけるcanonicalの重要性 canonicalタグは、重複ページによる「SEO評価の分散」を防ぐための基本対策です。 検索順位の安定化：GoogleがどのURLを優先すべきか判断できるようになる クローラビリティの改善：無駄なクロールを避けて重要なページに集中できる 検索結果の整理：意図しないURL（トラッキング付きなど）が表示されなくなる 特に広告やSNS経由でアクセスがあるサイトでは、URLパラメータ付きのページが増えやすいため、canonicalの設定が欠かせません。 WordPressでのcanonical設定方法 WordPressではテーマやプラグインを使って、canonicalタグを自動で設定することができます。 Yoast SEOを使う場合 WordPress管理画面で「プラグイン > 新規追加」から「Yoast SEO」を検索 インストール・有効化すると、自動的にcanonicalタグが各ページに出力されます 投稿編集画面下の「高度な設定」から、必要に応じて正規URLを個別指定できます All in One SEOを使う場合 同様に「All in One SEO」をインストール・有効化 「All in One SEO > 一般設定」でcanonicalの自動出力がONになっているか確認 個別投稿ページでもカスタマイズが可能です canonical設定時の注意点 異なる内容のページを正規化しない：誤った統合は逆効果 1ページに複数のcanonicalを記述しない：Googleが無視する原因に 正しい場所（<head>内）に設置する：body内だと無効化される可能性あり また、canonicalタグと併用してnoindexやリダイレクトを設定する場合は、挙動の競合に注意が必要です。 まとめ canonicalタグは、SEOを考えるうえで非常に重要な「正規URLの宣言手段」です。特にWordPressでトラッキングURLやSNSシェアが増えがちなサイトでは、canonicalの設定がSEO評価の安定化に直結します。 プラグインを使えば難しい操作は必要なく、簡単に自動出力できるため、まだ設定していない方は今すぐ導入してみましょう。 重複ページをなくし、検索順位の向上を目指す第一歩として、ぜひcanonicalタグを活用してみてください。

検索結果に「パンくずリスト」や「ナビゲーションリンク」が表示されているサイトを見たことはありませんか？ これは構造化データという仕組みを使って、Googleにサイトの構造を正しく伝えているからです。この記事では、自作テーマでも簡単に導入できる構造化データの設定方法を初心者向けに解説します。 構造化データとは？ 構造化データとは、「この部分はナビゲーションです」「これは記事です」といった情報を、Googleなどの検索エンジンに伝えるためのコードです。設定しておくと、検索結果がリッチになり、ユーザーにとってもわかりやすい表示になります。 ナビゲーションメニューに構造化データを設定 まずは、グローバルナビ（メインメニュー）に「これはナビゲーションです」と伝える構造化データを追加します。以下のように<nav>タグに属性を加え、各リンクにitempropを指定します。 コピー <nav itemscope itemtype="https://schema.org/SiteNavigationElement"> <ul> <li><a href="/" itemprop="url"><span itemprop="name">ホーム</span></a></li> <li><a href="/category/html" itemprop="url"><span itemprop="name">HTML</span></a></li> <li><a href="/category/css" itemprop="url"><span itemprop="name">CSS</span></a></li> </ul> </nav> この設定により、モバイル検索でナビゲーションリンクがボタンのように表示されることがあります。 パンくずリストを構造化する 次に、サイト内の階層を示すパンくずリストに構造化データを追加します。Googleがページの位置づけを理解しやすくなります。 コピー <ol itemscope itemtype="https://schema.org/BreadcrumbList"> <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"> <a itemprop="item" href="/"> <span itemprop="name">ホーム</span> </a> <meta itemprop="position" content="1"> </li> <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"> <a itemprop="item" href="/category/css"> <span itemprop="name">CSS</span> </a> <meta itemprop="position" content="2"> </li> </ol> positionを指定することで、Googleに階層の順番まで伝えることができます。 記事ページに構造化データ（Article）を追加 ブログ記事や解説記事にはArticle型の構造化データを設定すると、著者情報や公開日などが検索結果に反映されることがあります。JSON-LD形式で記述します。 コピー <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "headline": "構造化データの設定方法を初心者向けに解説", "author": { "@type": "Person", "name": "Yowashi" }, "datePublished": "2025-07-02", "publisher": { "@type": "Organization", "name": "HPBUILD", "logo": { "@type": "ImageObject", "url": "https://www.hpbuild.net/public/img/logo.png" } } } </script> このコードは、記事ページの<head>内に挿入するのがおすすめです。 初心者が気をつけたいポイント 順位が上がるわけではない：構造化データは「検索結果の見た目」に効く技術です 正確に書く：誤った記述があると、逆に無視されたり警告が出ることも Search Consoleで確認：構造化データが認識されているかチェックできます おわりに 構造化データは、サイトの「裏側の設計」をGoogleに正しく伝えるための重要な技術です。難しそうに見えて、実はほんの少しのタグやJSONを書くだけで実装できます。 今後も、WordPress自作テーマでできるSEO対策を紹介していきますので、ぜひブックマークしておいてくださいね。

Prism.jsは軽量で使いやすいシンタックスハイライトライブラリですが、最初に読み込んだときに含まれていない言語をあとから追加したい場面もあります。 この記事では、途中から言語を追加する2つの方法と、ファイル差し替え時の注意点について初心者向けにわかりやすく解説します。 1. Prism.jsは「必要な言語だけ」を読み込む設計 Prism.jsは読み込みを高速にするため、初期状態ではHTMLやCSSなど一部の言語しか含まれていません。 追加で使用したい言語（例：PHP、Pythonなど）がある場合は、自分でファイルを追加する必要があります。 2. CDNであとから言語を追加する方法 Prism公式CDNでは、各言語用の `.js` ファイルが用意されています。 📌 例：PHPをあとから追加する コピー <script src="https://cdn.jsdelivr.net/npm/prismjs/components/prism-php.min.js"></script> <script>Prism.highlightAll();</script> 注意： Prism本体（prism.js）より後に読み込む必要があります。 3. Downloadページからファイルを差し替える方法 複数の言語をまとめて管理したい場合は、Prism.js公式ダウンロードページから必要な言語を選び直してファイルを再生成します。 ✅ 再ダウンロード時の注意点 今まで使っていた言語も必ず選び直す必要があります。 選び忘れると、以前ハイライトされていた言語が無効になることがあります。 CSS・JSともに古いファイルは差し替え（上書き）します。 📥 ダウンロード手順 公式ダウンロードページを開く 必要な言語（今まで使っていた＋今回追加したいもの）をチェック Download JSとDownload CSSをクリック ダウンロードしたファイルを自作テーマ内の `js/` や `css/` に配置 既存のファイル（prism.js, prism.css）は上書き コピー <link rel="stylesheet" href="css/prism.css"> <script src="js/prism.js"></script> <script>Prism.highlightAll();</script> 4. 動的に追加された要素に対応させる Ajaxなどで後から挿入されたコードブロックは、自動でハイライトされません。 その場合は次のように明示的に適用します。 コピー const newCode = document.querySelector('pre code.language-php'); Prism.highlightElement(newCode); 5. よくある注意点 読み込み順： 本体 → 言語 → highlightAll() の順に CSSを編集している場合： 上書き前にバックアップ 同じ言語を複数回読み込まない： 動作不安定の原因になります おわりに Prism.jsで途中から言語を追加したい場合は、CDNで読み込む方法と再ビルドして差し替える方法があります。 特に後者の場合は「使っていた言語を忘れずに再選択する」ことと「ファイルの差し替え」に注意しましょう。 プロジェクトの規模や管理のしやすさに応じて、どちらかを使い分けてください。

文字が背景に埋もれて読みにくいとき、便利なのがテキストの縁取り（アウトライン）です。CSSだけで簡単に文字のまわりに縁をつけることができます。今回は基本から応用まで、初心者向けにわかりやすく解説します。 基本：text-shadowを使った縁取り もっとも簡単な方法は、text-shadowを4方向に重ねて、文字のまわりに影をつける方法です。 コピー .outlined-text { color: white; text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black; } 応用：太めの縁取りをしたい場合 縁取りをより目立たせたいときは、さらに多方向に text-shadow を重ねます。 コピー .outlined-bold { color: yellow; text-shadow: -2px -2px 0 black, 2px -2px 0 black, -2px 2px 0 black, 2px 2px 0 black, 0px -2px 0 black, 0px 2px 0 black, -2px 0px 0 black, 2px 0px 0 black; } 別の方法：-webkit-text-stroke + text-shadow を併用 Webkit系ブラウザ（Chrome、Safari）で使える -webkit-text-stroke を使うと、より滑らかで太い縁が作れます。 ただし、Firefoxなどでは非対応のため、フォールバックとして text-shadow を一緒に使うのがおすすめです。 コピー .stroke-combo { color: white; -webkit-text-stroke: 2px black; text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black; } このように書くと、Chromeでは -webkit-text-stroke が使われ、Firefoxでは text-shadow が働いて、両方のブラウザで美しい縁取りが表示されます。 実用例：背景画像の上の見出しに 背景に写真や色があると、テキストが読みにくくなることがあります。 そんなときにこの縁取りを使えば、テキストがくっきり目立つようになります。 初心者が気をつけたいポイント 縁の色と文字色のコントラストをしっかりつける 小さい文字には向かない：縁がつぶれて読みにくくなることがあります スマホ表示では太すぎる縁取りは避ける（メディアクエリで調整してもOK） おわりに CSSでテキストに縁取りを加えることで、視認性を高めたり、見た目のインパクトを出すことができます。 さまざまなサイトやデザインのアクセントとして、ぜひ活用してみてください！ 次回は、グラデーション文字やアニメーション文字など、さらにデザイン性を高めるテクニックを紹介予定です！