OGPの`og:title`を極める：検索エンジン用タイトルとSNS用タイトルの「二刀流」戦略
フロントエンド開発の現場にいると、必ず一度は「OGPのタイトル、`
`タグと何が違うの？」という問いに直面するはずです。</p>
<p>正直なところ、HTMLの`<title>`タグさえ書いておけばブラウザは動きます。しかし、SNSでシェアされた瞬間に「URLだけがポツンと表示される」のか、「魅力的なタイトルと共にカードが表示される」のかで、そのページのクリック率（CTR）は天と地ほど変わります。</p>
<p>今回は、ただの「設定方法」に留まらず、SNSのクローラーが何を求めているのか、そして実務でトラブルを避けるためのベストプラクティスを深掘りしていきましょう。</p>
<p>—</p>
<h3><span id="toc2">1. なぜ `` と `og:title` を分ける必要があるのか？</span></h3>
<p>まず大前提として、<b>`<title>`タグはブラウザのタブや検索エンジンの検索結果用</b>であり、<b>`og:title`はSNSのタイムライン（OGP）用</b>です。</p>
<ul>
<li><b>`<title>`タグの制約:</b> SEOの観点から、検索キーワードを含める必要があり、かつ長すぎると省略されるリスクがあるため、どうしても「硬い」表現になりがちです。</li>
<li><b>`og:title`の役割:</b> SNSという「感情でクリックする場所」に最適化するためのものです。ここではSEOよりも、ユーザーの興味を惹きつける「引き」の強さが求められます。</li>
</ul>
<p>この2つを無理やり同一にせず、それぞれの役割に合わせて出し分けるのが、一流のエンジニアの作法です。</p>
<p>—</p>
<h3><span id="toc3">2. ブラウザとクローラーの裏側：何が起きているのか</span></h3>
<p>私たちがブラウザにURLを貼り付けると、裏側では何が起きているのでしょうか。</p>
<p>実は、ブラウザがページを表示する際、`og:title`は完全に無視されます。これを読み込んでいるのは、<b>SNS各社のクローラー（Facebookの「Facebot」やTwitterの「Twitterbot」など）</b>です。</p>
<p>彼らはページを巡回する際、HTMLの上から順にパース（解析）を行い、`<meta property="og:title" content="...">`という記述を探します。もしこの記述がなければ、彼らは苦肉の策として`<title>`タグを流用したり、ひどい場合はページのH1タグを拾ったりします。</p>
<p>ここで重要なのは、<b>クローラーは「JavaScriptが実行される前のHTML」を見ていることが多い</b>という点です。Next.jsやNuxtなどのSSR（サーバーサイドレンダリング）環境であれば問題ありませんが、クライアントサイドで動的にOGPを書き換えようとしてハマるエンジニアが後を絶ちません。OGPの設定は、必ず「サーバーから返されるHTML」に含めること。これが鉄則です。</p>
<p>—</p>
<h3><span id="toc4">3. 実践：そのまま使えるOGP実装サンプル</span></h3>
<p>実務では、動的にタイトルを生成することがほとんどでしょう。以下に、メンテナンス性を意識したクリーンな実装パターンを提示します。</p>
<p><!--
【ポイント】
1. property属性を使う（nameではない）
2. サイト名と個別タイトルを分けて管理し、結合する運用がベスト
--></p>
<p><!-- 検索用タイトル（SEO重視） --><br />
<title>【2024年版】フロントエンド開発のベストプラクティス｜テックブログ
—
4. 現場で生きる「ちょっとした工夫」
最後に、現場で評価されるプロのエンジニアがやっている「プラスアルファ」のTipsを共有します。
`og:title`はHTMLのメタタグとして書き出すものです。CSSで `text-overflow: ellipsis` をかけても意味がありません。必ずサーバーサイド（またはビルド時）のロジックで、文字数をトリミングするバリデーションを入れましょう。
実装したら必ず [Facebook Sharing Debugger](https://developers.facebook.com/tools/debug/) や [Twitter Card Validator](https://cards-dev.twitter.com/validator) を叩いてください。「直したはずなのに反映されない！」というトラブルの9割は、SNS側のキャッシュが原因です。デバッガーを使うことで、強制的にキャッシュをクリアできます。
特にタイトルに「&」や「”」などの記号が入る場合、HTMLエンティティ化を忘れるとメタタグが途中で切れるという悲劇が起きます。テンプレートエンジンやフレームワークの自動エスケープ機能を過信せず、出力時にチェックする癖をつけてください。
—
まとめ
`og:title`は、単なるメタタグではありません。あなたの書いたコードがSNSという大海原へ飛び出した時、ユーザーが最初に触れる「看板」です。
`
`でSEOを固め、`og:title`でユーザーの心を掴む。この二刀流こそが、実務で信頼を勝ち取るフロントエンドエンジニアの仕事です。ぜひ、次回のデプロイから意識してみてください。きっと、SNSでのシェアのされ方が変わるはずです。</p>
</div>
<footer class="article-footer entry-footer">
<div class="entry-categories-tags ctdt-one-row">
<div class="entry-categories"><a class="cat-link cat-link-2" href="https://frontend.intronational.com/category/html/"><span class="fa fa-folder cat-icon tax-icon" aria-hidden="true"></span>HTML</a><a class="cat-link cat-link-8" href="https://frontend.intronational.com/category/html/%e3%83%ab%e3%83%bc%e3%83%88%e3%81%a8%e3%83%a1%e3%82%bf%e3%83%87%e3%83%bc%e3%82%bf%ef%bc%88html-head-meta-ogp%ef%bc%89/"><span class="fa fa-folder cat-icon tax-icon" aria-hidden="true"></span>ルートとメタデータ（html, head, meta, OGP）</a></div>
</div>
<div class="ad-area no-icon ad-content-bottom ad-rectangle ad-label-visible cf" itemscope itemtype="https://schema.org/WPAdBlock">
<div class="ad-label" itemprop="name" data-nosnippet>スポンサーリンク</div>
<div class="ad-wrap">
<div class="ad-responsive ad-usual"><!-- レスポンシブコード -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-7214025567716564"
data-ad-slot="6558619545"
data-ad-format="rectangle"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
</div>
</div>
<div class="sns-share ss-col-3 bc-brand-color sbc-hide ss-bottom">
<div class="sns-share-message">シェアする</div>
<div class="sns-share-buttons sns-buttons">
<a href="https://x.com/intent/tweet?text=%E3%80%90%E5%AE%9F%E5%8B%99%E3%83%BB%E4%B8%AD%E7%B4%9A%E7%B7%A8%E3%80%91OGP%E3%81%AEog%3Atitle%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3+%E2%80%93+HTML%E5%AE%9F%E8%B7%B5%E3%82%AC%E3%82%A4%E3%83%89&url=https%3A%2F%2Ffrontend.intronational.com%2F2026%2F07%2F08%2F%25e3%2580%2590%25e5%25ae%259f%25e5%258b%2599%25e3%2583%25bb%25e4%25b8%25ad%25e7%25b4%259a%25e7%25b7%25a8%25e3%2580%2591ogp%25e3%2581%25aeogtitle%25e3%2583%2597%25e3%2583%25ad%25e3%2583%2591%25e3%2583%2586%25e3%2582%25a3-html%25e5%25ae%259f%25e8%25b7%25b5%25e3%2582%25ac%25e3%2582%25a4%25e3%2583%2589%2F" class="sns-button share-button twitter-button twitter-share-button-sq x-corp-button x-corp-share-button-sq" target="_blank" title="Xでシェア" rel="nofollow noopener noreferrer" aria-label="Xでシェア"><span class="social-icon icon-x-corp"></span><span class="button-caption">X</span><span class="share-count twitter-share-count x-share-count"></span></a>
<a href="//www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Ffrontend.intronational.com%2F2026%2F07%2F08%2F%25e3%2580%2590%25e5%25ae%259f%25e5%258b%2599%25e3%2583%25bb%25e4%25b8%25ad%25e7%25b4%259a%25e7%25b7%25a8%25e3%2580%2591ogp%25e3%2581%25aeogtitle%25e3%2583%2597%25e3%2583%25ad%25e3%2583%2591%25e3%2583%2586%25e3%2582%25a3-html%25e5%25ae%259f%25e8%25b7%25b5%25e3%2582%25ac%25e3%2582%25a4%25e3%2583%2589%2F&t=%E3%80%90%E5%AE%9F%E5%8B%99%E3%83%BB%E4%B8%AD%E7%B4%9A%E7%B7%A8%E3%80%91OGP%E3%81%AEog%3Atitle%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3+%E2%80%93+HTML%E5%AE%9F%E8%B7%B5%E3%82%AC%E3%82%A4%E3%83%89" class="sns-button share-button facebook-button facebook-share-button-sq" target="_blank" title="Facebookでシェア" rel="nofollow noopener noreferrer" aria-label="Facebookでシェア"><span class="social-icon icon-facebook"></span><span class="button-caption">Facebook</span><span class="share-count facebook-share-count"></span></a>
<a href="//b.hatena.ne.jp/entry/s/frontend.intronational.com/2026/07/08/%e3%80%90%e5%ae%9f%e5%8b%99%e3%83%bb%e4%b8%ad%e7%b4%9a%e7%b7%a8%e3%80%91ogp%e3%81%aeogtitle%e3%83%97%e3%83%ad%e3%83%91%e3%83%86%e3%82%a3-html%e5%ae%9f%e8%b7%b5%e3%82%ac%e3%82%a4%e3%83%89/" class="sns-button share-button hatebu-button hatena-bookmark-button hatebu-share-button-sq" data-hatena-bookmark-layout="simple" target="_blank" title="はてブでブックマーク" rel="nofollow noopener noreferrer" aria-label="はてブでブックマーク"><span class="social-icon icon-hatena"></span><span class="button-caption">はてブ</span><span class="share-count hatebu-share-count"></span></a>
<a href="//timeline.line.me/social-plugin/share?url=https%3A%2F%2Ffrontend.intronational.com%2F2026%2F07%2F08%2F%25e3%2580%2590%25e5%25ae%259f%25e5%258b%2599%25e3%2583%25bb%25e4%25b8%25ad%25e7%25b4%259a%25e7%25b7%25a8%25e3%2580%2591ogp%25e3%2581%25aeogtitle%25e3%2583%2597%25e3%2583%25ad%25e3%2583%2591%25e3%2583%2586%25e3%2582%25a3-html%25e5%25ae%259f%25e8%25b7%25b5%25e3%2582%25ac%25e3%2582%25a4%25e3%2583%2589%2F" class="sns-button share-button line-button line-share-button-sq" target="_blank" title="LINEでシェア" rel="nofollow noopener noreferrer" aria-label="LINEでシェア"><span class="social-icon icon-line"></span><span class="button-caption">LINE</span><span class="share-count line-share-count"></span></a>
<a href="//www.pinterest.com/pin/create/button/?url=https%3A%2F%2Ffrontend.intronational.com%2F2026%2F07%2F08%2F%25e3%2580%2590%25e5%25ae%259f%25e5%258b%2599%25e3%2583%25bb%25e4%25b8%25ad%25e7%25b4%259a%25e7%25b7%25a8%25e3%2580%2591ogp%25e3%2581%25aeogtitle%25e3%2583%2597%25e3%2583%25ad%25e3%2583%2591%25e3%2583%2586%25e3%2582%25a3-html%25e5%25ae%259f%25e8%25b7%25b5%25e3%2582%25ac%25e3%2582%25a4%25e3%2583%2589%2F" class="sns-button share-button pinterest-button pinterest-share-button-sq" target="_blank" title="Pinterestでシェア" rel="nofollow noopener noreferrer" data-pin-do="buttonBookmark" data-pin-custom="true" aria-label="Pinterestでシェア"><span class="social-icon icon-pinterest"></span><span class="button-caption">Pinterest</span><span class="share-count pinterest-share-count"></span></a>
<a role="button" tabindex="0" class="sns-button share-button copy-button copy-share-button-sq" data-clipboard-text="【実務・中級編】OGPのog:titleプロパティ – HTML実践ガイド https://frontend.intronational.com/2026/07/08/%e3%80%90%e5%ae%9f%e5%8b%99%e3%83%bb%e4%b8%ad%e7%b4%9a%e7%b7%a8%e3%80%91ogp%e3%81%aeogtitle%e3%83%97%e3%83%ad%e3%83%91%e3%83%86%e3%82%a3-html%e5%ae%9f%e8%b7%b5%e3%82%ac%e3%82%a4%e3%83%89/" title="タイトルとURLをコピーする" aria-label="タイトルとURLをコピーする"><span class="social-icon icon-copy"></span><span class="button-caption">コピー</span><span class="share-count copy-share-count"></span></a>
</div><!-- /.sns-share-buttons -->
</div><!-- /.sns-share -->
<!-- SNSページ -->
<div class="sns-follow bc-brand-color fbc-hide sf-bottom">
<div class="sns-follow-message">frontendintronationalをフォローする</div>
<div class="sns-follow-buttons sns-buttons">
<a href="//feedly.com/i/discover/sources/search/feed/https%3A%2F%2Ffrontend.intronational.com" class="sns-button follow-button feedly-button feedly-follow-button-sq" target="_blank" title="feedlyで更新情報を購読" rel="nofollow noopener noreferrer" aria-label="feedlyで更新情報を購読"><span class="icon-feedly-logo"></span><span class="follow-count feedly-follow-count"></span></a>
<a href="https://frontend.intronational.com/feed/" class="sns-button follow-button rss-button rss-follow-button-sq" target="_blank" title="RSSで更新情報を購読" rel="nofollow noopener noreferrer" aria-label="RSSで更新情報を購読"><span class="icon-rss-logo"></span></a>
</div><!-- /.sns-follow-buttons -->
</div><!-- /.sns-follow -->
<div class="footer-meta">
<div class="author-info">
<span class="fa fa-pencil" aria-hidden="true"></span> <a href="https://frontend.intronational.com/author/frontendintronational/" class="author-link">
<span class="post-author vcard author" itemprop="editor author creator copyrightHolder" itemscope itemtype="https://schema.org/Person">
<meta itemprop="url" content="https://frontend.intronational.com/author/frontendintronational/">
<span class="author-name fn" itemprop="name">frontendintronational</span>
</span>
</a>
</div>
</div>
</footer>
</article>
<div class="under-entry-content">
<aside id="related-entries" class="related-entries rect-entry-card">
<h2 class="related-entry-heading">
<span class="related-entry-main-heading main-caption">
関連記事 </span>
</h2>
<div class="related-list">
<a href="https://frontend.intronational.com/2026/08/30/%e3%80%90%e5%85%a5%e9%96%80%e7%b7%a8%e3%80%91text-emphasis%e3%81%ab%e3%82%88%e3%82%8b%e5%82%8d%e7%82%b9%e8%a3%85%e9%a3%be-html%e5%ae%9f%e8%b7%b5%e3%82%ac%e3%82%a4%e3%83%89/" class="related-entry-card-wrap a-wrap border-element cf" title="【入門編】text-emphasisによる傍点装飾 – HTML実践ガイド">
<article class="post-2959 related-entry-card e-card cf post type-post status-publish format-standard hentry category-html-post category-a-span-strong-em-code-time-post">
<figure class="related-entry-card-thumb card-thumb e-card-thumb">
<img src="https://frontend.intronational.com/wp-content/themes/cocoon-master/images/no-image-160.png" alt="" class="no-image related-entry-card-no-image" width="160" height="90" />
<span class="cat-label cat-label-2">HTML</span> </figure><!-- /.related-entry-thumb -->
<div class="related-entry-card-content card-content e-card-content">
<h3 class="related-entry-card-title card-title e-card-title">
【入門編】text-emphasisによる傍点装飾 – HTML実践ガイド </h3>
<div class="related-entry-card-snippet card-snippet e-card-snippet">
日本語の「ここを見て！」を美しく。CSSで傍点（ぼうてん）を操る技術Webサイトで文章を読んでいるとき、「ここは特に伝えたい！」という部分を強調したくなること、ありますよね。太字にするのもいいけれど、日本の出版物でよく見かける「傍点（ぼうて... </div>
</div><!-- /.related-entry-card-content -->
</article><!-- /.related-entry-card -->
</a><!-- /.related-entry-card-wrap -->
<a href="https://frontend.intronational.com/2026/07/10/%e3%80%90%e5%ae%9f%e5%8b%99%e3%83%bb%e4%b8%ad%e7%b4%9a%e7%b7%a8%e3%80%91nav%e8%a6%81%e7%b4%a0%e3%81%ae%e5%ae%9a%e7%be%a9%e3%81%a8%e4%bd%bf%e7%94%a8%e5%9f%ba%e6%ba%96-html%e5%ae%9f%e8%b7%b5%e3%82%ac/" class="related-entry-card-wrap a-wrap border-element cf" title="【実務・中級編】nav要素の定義と使用基準 – HTML実践ガイド">
<article class="post-1976 related-entry-card e-card cf post type-post status-publish format-standard hentry category-html-post category-header-nav-main-article-section-footer-post">
<figure class="related-entry-card-thumb card-thumb e-card-thumb">
<img src="https://frontend.intronational.com/wp-content/themes/cocoon-master/images/no-image-160.png" alt="" class="no-image related-entry-card-no-image" width="160" height="90" />
<span class="cat-label cat-label-2">HTML</span> </figure><!-- /.related-entry-thumb -->
<div class="related-entry-card-content card-content e-card-content">
<h3 class="related-entry-card-title card-title e-card-title">
【実務・中級編】nav要素の定義と使用基準 – HTML実践ガイド </h3>
<div class="related-entry-card-snippet card-snippet e-card-snippet">
``要素の「適材適所」――全リンクを囲むな、文脈を設計せよフロントエンド開発の現場で、HTMLのセマンティクスを意識することは、単なる「コードの綺麗さ」以上の意味を持ちます。特に``要素に関しては、多くのエンジニアが「リンク集＝とりあえず`... </div>
</div><!-- /.related-entry-card-content -->
</article><!-- /.related-entry-card -->
</a><!-- /.related-entry-card-wrap -->
<a href="https://frontend.intronational.com/2026/09/15/%e3%80%90%e3%83%86%e3%82%af%e3%83%8b%e3%82%ab%e3%83%ab%e3%83%bb%e4%b8%8a%e7%b4%9a%e7%b7%a8%e3%80%91css%e3%81%ab%e3%82%88%e3%82%8b%e3%83%aa%e3%82%b9%e3%83%88%e3%83%9e%e3%83%bc%e3%82%ab%e3%83%bc/" class="related-entry-card-wrap a-wrap border-element cf" title="【テクニカル・上級編】CSSによるリストマーカーの非表示とリセット – HTML実践ガイド">
<article class="post-3153 related-entry-card e-card cf post type-post status-publish format-standard hentry category-html-post category-ul-ol-li-dl-dt-dd-post">
<figure class="related-entry-card-thumb card-thumb e-card-thumb">
<img src="https://frontend.intronational.com/wp-content/themes/cocoon-master/images/no-image-160.png" alt="" class="no-image related-entry-card-no-image" width="160" height="90" />
<span class="cat-label cat-label-2">HTML</span> </figure><!-- /.related-entry-thumb -->
<div class="related-entry-card-content card-content e-card-content">
<h3 class="related-entry-card-title card-title e-card-title">
【テクニカル・上級編】CSSによるリストマーカーの非表示とリセット – HTML実践ガイド </h3>
<div class="related-entry-card-snippet card-snippet e-card-snippet">
リストスタイルの「無効化」という名の罠：ブラウザエンジンとアクセシビリティの深淵Webフロントエンドの世界において、`ul { list-style: none; }` は、CSSリセットの儀式としてあまりにも定着しすぎています。しかし、上... </div>
</div><!-- /.related-entry-card-content -->
</article><!-- /.related-entry-card -->
</a><!-- /.related-entry-card-wrap -->
<a href="https://frontend.intronational.com/2026/09/11/%e3%80%90%e5%85%a5%e9%96%80%e7%b7%a8%e3%80%91text-overflow%e3%81%ab%e3%82%88%e3%82%8b%e7%9c%81%e7%95%a5%e8%a8%98%e5%8f%b7%e3%81%ae%e8%a1%a8%e7%a4%ba-html%e5%ae%9f%e8%b7%b5%e3%82%ac%e3%82%a4%e3%83%89/" class="related-entry-card-wrap a-wrap border-element cf" title="【入門編】text-overflowによる省略記号の表示 – HTML実践ガイド">
<article class="post-3100 related-entry-card e-card cf post type-post status-publish format-standard hentry category-html-post category-a-span-strong-em-code-time-post">
<figure class="related-entry-card-thumb card-thumb e-card-thumb">
<img src="https://frontend.intronational.com/wp-content/themes/cocoon-master/images/no-image-160.png" alt="" class="no-image related-entry-card-no-image" width="160" height="90" />
<span class="cat-label cat-label-2">HTML</span> </figure><!-- /.related-entry-thumb -->
<div class="related-entry-card-content card-content e-card-content">
<h3 class="related-entry-card-title card-title e-card-title">
【入門編】text-overflowによる省略記号の表示 – HTML実践ガイド </h3>
<div class="related-entry-card-snippet card-snippet e-card-snippet">
はみ出した文字を「…」でスマートに隠す！CSSでテキストを省略する方法をマスターしようWebサイトを作っていると、一度はこんな悩みにぶつかりませんか？「ニュースのタイトル一覧を作りたいけれど、文字数がバラバラでレイアウトが崩れちゃう…」「ス... </div>
</div><!-- /.related-entry-card-content -->
</article><!-- /.related-entry-card -->
</a><!-- /.related-entry-card-wrap -->
<a href="https://frontend.intronational.com/2026/08/21/%e3%80%90%e3%83%86%e3%82%af%e3%83%8b%e3%82%ab%e3%83%ab%e3%83%bb%e4%b8%8a%e7%b4%9a%e7%b7%a8%e3%80%91aria-current%e5%b1%9e%e6%80%a7%e3%81%ab%e3%82%88%e3%82%8b%e7%8f%be%e5%9c%a8%e4%bd%8d%e7%bd%ae/" class="related-entry-card-wrap a-wrap border-element cf" title="【テクニカル・上級編】aria-current属性による現在位置の明示 – HTML実践ガイド">
<article class="post-2846 related-entry-card e-card cf post type-post status-publish format-standard hentry category-html-post category-a-span-strong-em-code-time-post">
<figure class="related-entry-card-thumb card-thumb e-card-thumb">
<img src="https://frontend.intronational.com/wp-content/themes/cocoon-master/images/no-image-160.png" alt="" class="no-image related-entry-card-no-image" width="160" height="90" />
<span class="cat-label cat-label-2">HTML</span> </figure><!-- /.related-entry-thumb -->
<div class="related-entry-card-content card-content e-card-content">
<h3 class="related-entry-card-title card-title e-card-title">
【テクニカル・上級編】aria-current属性による現在位置の明示 – HTML実践ガイド </h3>
<div class="related-entry-card-snippet card-snippet e-card-snippet">
「現在地」を正しく伝える：aria-current='page'で実装する堅牢なナビゲーションの深淵Webアプリケーションのナビゲーションにおいて、「今、ユーザーがどこにいるのか」を明示することは、単なるUXの向上という言葉では片付けられな... </div>
</div><!-- /.related-entry-card-content -->
</article><!-- /.related-entry-card -->
</a><!-- /.related-entry-card-wrap -->
<a href="https://frontend.intronational.com/2026/08/09/%e3%80%90%e3%83%86%e3%82%af%e3%83%8b%e3%82%ab%e3%83%ab%e3%83%bb%e4%b8%8a%e7%b4%9a%e7%b7%a8%e3%80%91line-height%e3%81%8c%e3%82%a4%e3%83%b3%e3%83%a9%e3%82%a4%e3%83%b3%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9/" class="related-entry-card-wrap a-wrap border-element cf" title="【テクニカル・上級編】line-heightがインラインボックスの高さに与える影響 – HTML実践ガイド">
<article class="post-2546 related-entry-card e-card cf post type-post status-publish format-standard hentry category-html-post category-a-span-strong-em-code-time-post">
<figure class="related-entry-card-thumb card-thumb e-card-thumb">
<img src="https://frontend.intronational.com/wp-content/themes/cocoon-master/images/no-image-160.png" alt="" class="no-image related-entry-card-no-image" width="160" height="90" />
<span class="cat-label cat-label-2">HTML</span> </figure><!-- /.related-entry-thumb -->
<div class="related-entry-card-content card-content e-card-content">
<h3 class="related-entry-card-title card-title e-card-title">
【テクニカル・上級編】line-heightがインラインボックスの高さに与える影響 – HTML実践ガイド </h3>
<div class="related-entry-card-snippet card-snippet e-card-snippet">
CSSの深淵：`line-height`がインラインボックスを歪ませるメカニズムとレンダリングの最適化フロントエンドのエンジニアとして数年、あるいはそれ以上のキャリアを積むと、ふと「なぜこの行間は微妙にズレるのか？」という、一見単純だが回答... </div>
</div><!-- /.related-entry-card-content -->
</article><!-- /.related-entry-card -->
</a><!-- /.related-entry-card-wrap -->
</div>
</aside>
<div class="ad-area no-icon ad-below-related-posts ad-rectangle ad-label-visible cf" itemscope itemtype="https://schema.org/WPAdBlock">
<div class="ad-label" itemprop="name" data-nosnippet>スポンサーリンク</div>
<div class="ad-wrap">
<div class="ad-responsive ad-usual"><!-- レスポンシブコード -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-7214025567716564"
data-ad-slot="6558619545"
data-ad-format="rectangle"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
</div>
</div>
<div id="pager-post-navi" class="pager-post-navi post-navi-default cf">
<a href="https://frontend.intronational.com/2026/07/08/%e3%80%90%e5%85%a5%e9%96%80%e7%b7%a8%e3%80%91ogp%e3%81%aeogtitle%e3%83%97%e3%83%ad%e3%83%91%e3%83%86%e3%82%a3-html%e5%ae%9f%e8%b7%b5%e3%82%ac%e3%82%a4%e3%83%89/" title="【入門編】OGPのog:titleプロパティ – HTML実践ガイド" class="prev-post a-wrap border-element cf">
<div class="fa fa-chevron-left iconfont" aria-hidden="true"></div>
<figure class="prev-post-thumb card-thumb"><img src="https://frontend.intronational.com/wp-content/themes/cocoon-master/images/no-image-160.png" alt="" class="no-image post-navi-no-image" width="120" height="68" /></figure>
<div class="prev-post-title">【入門編】OGPのog:titleプロパティ – HTML実践ガイド</div></a><a href="https://frontend.intronational.com/2026/07/08/%e3%80%90%e3%83%86%e3%82%af%e3%83%8b%e3%82%ab%e3%83%ab%e3%83%bb%e4%b8%8a%e7%b4%9a%e7%b7%a8%e3%80%91ogp%e3%81%aeogtitle%e3%83%97%e3%83%ad%e3%83%91%e3%83%86%e3%82%a3-html%e5%ae%9f%e8%b7%b5%e3%82%ac/" title="【テクニカル・上級編】OGPのog:titleプロパティ – HTML実践ガイド" class="next-post a-wrap cf">
<div class="fa fa-chevron-right iconfont" aria-hidden="true"></div>
<figure class="next-post-thumb card-thumb">
<img src="https://frontend.intronational.com/wp-content/themes/cocoon-master/images/no-image-160.png" alt="" class="no-image post-navi-no-image" width="120" height="68" /></figure>
<div class="next-post-title">【テクニカル・上級編】OGPのog:titleプロパティ – HTML実践ガイド</div></a> </div><!-- /.pager-post-navi -->
<!-- comment area -->
<div id="comment-area" class="comment-area">
<section class="comment-list">
<h2 id="comments" class="comment-title">
コメント </h2>
</section>
<aside class="comment-form-wrap"> <button type="button" id="comment-reply-btn" class="comment-btn key-btn">コメントを書き込む</button>
<div id="respond" class="comment-respond">
<h3 id="reply-title" class="comment-reply-title">コメントをどうぞ <small><a rel="nofollow" id="cancel-comment-reply-link" href="/2026/07/08/%e3%80%90%e5%ae%9f%e5%8b%99%e3%83%bb%e4%b8%ad%e7%b4%9a%e7%b7%a8%e3%80%91ogp%e3%81%aeogtitle%e3%83%97%e3%83%ad%e3%83%91%e3%83%86%e3%82%a3-html%e5%ae%9f%e8%b7%b5%e3%82%ac%e3%82%a4%e3%83%89/#respond" style="display:none;">コメントをキャンセル</a></small></h3><form action="https://frontend.intronational.com/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">メールアドレスが公開されることはありません。</span> <span class="required">※</span> が付いている欄は必須項目です</p><p class="comment-form-comment"><label for="comment">コメント <span class="required">※</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p><p class="comment-form-author"><label for="author">名前 <span class="required">※</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required="required" /></p>
<p class="comment-form-email"><label for="email">メール <span class="required">※</span></label> <input id="email" name="email" type="text" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required="required" /></p>
<p class="comment-form-url"><label for="url">サイト</label> <input id="url" name="url" type="text" value="" size="30" maxlength="200" autocomplete="url" /></p>
<p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。</label></p>
<p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="コメントを送信" /> <input type='hidden' name='comment_post_ID' value='1952' id='comment_post_ID' />
<input type='hidden' name='comment_parent' id='comment_parent' value='0' />
</p></form> </div><!-- #respond -->
</aside></div><!-- /.comment area -->
</div>
<div id="breadcrumb" class="breadcrumb breadcrumb-category sbp-main-bottom" itemscope itemtype="https://schema.org/BreadcrumbList"><div class="breadcrumb-home" itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span class="fa fa-home fa-fw" aria-hidden="true"></span><a href="https://frontend.intronational.com" itemprop="item"><span itemprop="name" class="breadcrumb-caption">ホーム</span></a><meta itemprop="position" content="1" /></div><div class="breadcrumb-item" itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span class="sp"><span class="fa fa-angle-right" aria-hidden="true"></span></span><span class="fa fa-folder fa-fw" aria-hidden="true"></span><a href="https://frontend.intronational.com/category/html/" itemprop="item"><span itemprop="name" class="breadcrumb-caption">HTML</span></a><meta itemprop="position" content="2" /></div></div>
</main>
<div id="sidebar" class="sidebar nwa cf" role="complementary">
<div class="ad-area no-icon ad-sidebar-top ad-auto ad-label-invisible cf" itemscope itemtype="https://schema.org/WPAdBlock">
<div class="ad-label" itemprop="name" data-nosnippet>スポンサーリンク</div>
<div class="ad-wrap">
<div class="ad-responsive ad-usual"><!-- レスポンシブコード -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-7214025567716564"
data-ad-slot="6558619545"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
</div>
</div>
<aside id="block-2" class="widget widget-sidebar widget-sidebar-standard widget_block widget_search"><form role="search" method="get" action="https://frontend.intronational.com/" class="wp-block-search__button-outside wp-block-search__text-button wp-block-search" ><label class="wp-block-search__label" for="wp-block-search__input-2" >検索</label><div class="wp-block-search__inside-wrapper" ><input class="wp-block-search__input" id="wp-block-search__input-2" placeholder="" value="" type="search" name="s" required /><button aria-label="検索" class="wp-block-search__button wp-element-button" type="submit" >検索</button></div></form></aside><aside id="block-3" class="widget widget-sidebar widget-sidebar-standard widget_block"><div class="wp-block-group is-layout-flow wp-block-group-is-layout-flow"><h2 class="wp-block-heading">最近の投稿</h2><ul class="wp-block-latest-posts__list wp-block-latest-posts is-layout-flow wp-block-latest-posts-is-layout-flow"><li><a class="wp-block-latest-posts__post-title" href="https://frontend.intronational.com/2026/09/30/%e3%80%90%e5%ae%9f%e5%8b%99%e3%83%bb%e4%b8%ad%e7%b4%9a%e7%b7%a8%e3%80%91-useeffect%e3%81%ae%e9%81%8e%e5%89%b0%e4%bd%bf%e7%94%a8%ef%bc%88over-using%ef%bc%89%e3%81%a8%e3%83%aa%e3%83%95%e3%82%a1%e3%82%af/">【実務・中級編】 useEffectの過剰使用（Over-using）とリファクタリング – React実践ガイド</a></li>
<li><a class="wp-block-latest-posts__post-title" href="https://frontend.intronational.com/2026/09/30/%e3%80%90%e5%ae%9f%e5%8b%99%e3%83%bb%e4%b8%ad%e7%b4%9a%e7%b7%a8%e3%80%91-keyof-typeof%e3%81%ae%e7%b5%84%e3%81%bf%e5%90%88%e3%82%8f%e3%81%9b%e3%83%91%e3%82%bf%e3%83%bc%e3%83%b3-typescript%e5%ae%9f/">【実務・中級編】 keyof typeofの組み合わせパターン – TypeScript実践ガイド</a></li>
<li><a class="wp-block-latest-posts__post-title" href="https://frontend.intronational.com/2026/09/30/%e3%80%90%e5%ae%9f%e5%8b%99%e3%83%bb%e4%b8%ad%e7%b4%9a%e7%b7%a8%e3%80%91-%e5%bc%b7%e5%88%b6%e5%90%8c%e6%9c%9f%e3%83%ac%e3%82%a4%e3%82%a2%e3%82%a6%e3%83%88%e3%81%ae%e6%a4%9c%e7%9f%a5%e3%81%a8%e5%9b%9e/">【実務・中級編】 強制同期レイアウトの検知と回避 – Webブラウザの仕組み実践ガイド</a></li>
<li><a class="wp-block-latest-posts__post-title" href="https://frontend.intronational.com/2026/09/30/%e3%80%90%e3%83%86%e3%82%af%e3%83%8b%e3%82%ab%e3%83%ab%e3%83%bb%e4%b8%8a%e7%b4%9a%e7%b7%a8%e3%80%91-string%e3%81%ae%e3%82%a4%e3%83%86%e3%83%ac%e3%83%bc%e3%82%bf-symbol-iterator-javascript%e5%ae%9f/">【テクニカル・上級編】 Stringのイテレータ [Symbol.iterator] – JavaScript実践ガイド</a></li>
<li><a class="wp-block-latest-posts__post-title" href="https://frontend.intronational.com/2026/09/30/%e3%80%90%e3%83%86%e3%82%af%e3%83%8b%e3%82%ab%e3%83%ab%e3%83%bb%e4%b8%8a%e7%b4%9a%e7%b7%a8%e3%80%91-modal-%e3%83%a2%e3%83%bc%e3%83%80%e3%83%ab%e7%96%91%e4%bc%bc%e3%82%af%e3%83%a9%e3%82%b9-css/">【テクニカル・上級編】 :modal モーダル疑似クラス – CSS実践ガイド</a></li>
</ul></div></aside><aside id="block-4" class="widget widget-sidebar widget-sidebar-standard widget_block"><div class="wp-block-group is-layout-flow wp-block-group-is-layout-flow"><h2 class="wp-block-heading">最近のコメント</h2><div class="no-comments wp-block-latest-comments">表示できるコメントはありません。</div></div></aside>
<div id="sidebar-scroll" class="sidebar-scroll">
<aside id="block-5" class="widget widget-sidebar widget-sidebar-scroll widget_block"><div class="wp-block-group is-layout-flow wp-block-group-is-layout-flow"><h2 class="wp-block-heading">アーカイブ</h2><ul class="wp-block-archives-list wp-block-archives"> <li><a href='https://frontend.intronational.com/2026/09/'><span class="list-item-caption">2026年9月</span></a></li>
<li><a href='https://frontend.intronational.com/2026/08/'><span class="list-item-caption">2026年8月</span></a></li>
<li><a href='https://frontend.intronational.com/2026/07/'><span class="list-item-caption">2026年7月</span></a></li>
<li><a href='https://frontend.intronational.com/2026/06/'><span class="list-item-caption">2026年6月</span></a></li>
<li><a href='https://frontend.intronational.com/2026/05/'><span class="list-item-caption">2026年5月</span></a></li>
<li><a href='https://frontend.intronational.com/2026/04/'><span class="list-item-caption">2026年4月</span></a></li>
</ul></div></aside><aside id="block-6" class="widget widget-sidebar widget-sidebar-scroll widget_block"><div class="wp-block-group is-layout-flow wp-block-group-is-layout-flow"><h2 class="wp-block-heading">カテゴリー</h2><ul class="wp-block-categories-list wp-block-categories-taxonomy-category wp-block-categories"> <li class="cat-item cat-item-3"><a href="https://frontend.intronational.com/category/css/"><span class="list-item-caption">CSS</span></a>
</li>
<li class="cat-item cat-item-30"><a href="https://frontend.intronational.com/category/css/css%e3%81%ae%e8%a8%98%e8%bf%b0%e5%a0%b4%e6%89%80%e3%81%a8%e8%aa%ad%e3%81%bf%e8%be%bc%e3%81%bf%e5%84%aa%e5%85%88%e9%a0%86%e4%bd%8d%ef%bc%88%e8%a9%b3%e7%b4%b0%e5%ba%a6-important%ef%bc%89/"><span class="list-item-caption">CSSの記述場所と読み込み優先順位（詳細度, !important）</span></a>
</li>
<li class="cat-item cat-item-2"><a href="https://frontend.intronational.com/category/html/"><span class="list-item-caption">HTML</span></a>
</li>
<li class="cat-item cat-item-4"><a href="https://frontend.intronational.com/category/javascript/"><span class="list-item-caption">JavaScript</span></a>
</li>
<li class="cat-item cat-item-117"><a href="https://frontend.intronational.com/category/react/props%e3%81%ab%e3%82%88%e3%82%8b%e3%83%87%e3%83%bc%e3%82%bf%e3%81%ae%e5%8f%97%e3%81%91%e6%b8%a1%e3%81%97%ef%bc%88%e3%83%81%e3%83%ab%e3%83%89%e3%83%ac%e3%83%b3%e5%b1%9e%e6%80%a7%e3%80%81%e3%82%b3/"><span class="list-item-caption">Propsによるデータの受け渡し（チルドレン属性、コンポーネントへの型付け）</span></a>
</li>
<li class="cat-item cat-item-7"><a href="https://frontend.intronational.com/category/react/"><span class="list-item-caption">React</span></a>
</li>
<li class="cat-item cat-item-116"><a href="https://frontend.intronational.com/category/react/react%e3%81%ae%e5%9f%ba%e6%9c%ac%e6%a6%82%e5%bf%b5%ef%bc%88%e4%bb%ae%e6%83%b3dom%e3%80%81jsx%e3%81%ae%e6%a7%8b%e6%96%87%e3%83%ab%e3%83%bc%e3%83%ab%e3%80%81%e3%82%b3%e3%83%b3%e3%83%9d%e3%83%bc%e3%83%8d/"><span class="list-item-caption">Reactの基本概念（仮想DOM、JSXの構文ルール、コンポーネントの分割設計）</span></a>
</li>
<li class="cat-item cat-item-6"><a href="https://frontend.intronational.com/category/typescript/"><span class="list-item-caption">TypeScript</span></a>
</li>
<li class="cat-item cat-item-101"><a href="https://frontend.intronational.com/category/typescript/typescript%e3%81%ae%e5%b0%8e%e5%85%a5%e3%81%a8%e7%92%b0%e5%a2%83%e6%a7%8b%e7%af%89%ef%bc%88tsconfig-json%e3%81%ae%e8%a8%ad%e5%ae%9a%ef%bc%89/"><span class="list-item-caption">TypeScriptの導入と環境構築（tsconfig.jsonの設定）</span></a>
</li>
<li class="cat-item cat-item-5"><a href="https://frontend.intronational.com/category/web%e3%83%96%e3%83%a9%e3%82%a6%e3%82%b6%e3%81%ae%e4%bb%95%e7%b5%84%e3%81%bf/"><span class="list-item-caption">Webブラウザの仕組み</span></a>
</li>
<li class="cat-item cat-item-11"><a href="https://frontend.intronational.com/category/html/%e3%82%a4%e3%83%b3%e3%83%a9%e3%82%a4%e3%83%b3%e8%a6%81%e7%b4%a0%e3%81%a8%e3%83%86%e3%82%ad%e3%82%b9%e3%83%88%e8%a3%85%e9%a3%be%ef%bc%88a-span-strong-em-code-time%ef%bc%89/"><span class="list-item-caption">インライン要素とテキスト装飾（a, span, strong, em, code, time）</span></a>
</li>
<li class="cat-item cat-item-9"><a href="https://frontend.intronational.com/category/html/%e3%82%bb%e3%82%af%e3%82%b7%e3%83%a7%e3%83%b3%e6%a7%8b%e6%88%90%e8%a6%81%e7%b4%a0%ef%bc%88header-nav-main-article-section-footer%ef%bc%89/"><span class="list-item-caption">セクション構成要素（header, nav, main, article, section, footer）</span></a>
</li>
<li class="cat-item cat-item-10"><a href="https://frontend.intronational.com/category/html/%e3%83%86%e3%82%ad%e3%82%b9%e3%83%88%e3%82%b3%e3%83%b3%e3%83%86%e3%83%b3%e3%83%84%e3%81%ae%e5%9f%ba%e6%9c%ac%ef%bc%88p-h1-h6-hr-pre%ef%bc%89/"><span class="list-item-caption">テキストコンテンツの基本（p, h1-h6, hr, pre）</span></a>
</li>
<li class="cat-item cat-item-57"><a href="https://frontend.intronational.com/category/javascript/%e3%83%87%e3%83%bc%e3%82%bf%e5%9e%8b%e3%81%a8%e5%9e%8b%e5%88%a4%e5%ae%9a%ef%bc%88%e3%83%97%e3%83%aa%e3%83%9f%e3%83%86%e3%82%a3%e3%83%96%e3%81%a8%e3%82%aa%e3%83%96%e3%82%b8%e3%82%a7%e3%82%af%e3%83%88/"><span class="list-item-caption">データ型と型判定（プリミティブとオブジェクト, typeof, 暗黙の型変換）</span></a>
</li>
<li class="cat-item cat-item-87"><a href="https://frontend.intronational.com/category/web%e3%83%96%e3%83%a9%e3%82%a6%e3%82%b6%e3%81%ae%e4%bb%95%e7%b5%84%e3%81%bf/%e3%83%96%e3%83%a9%e3%82%a6%e3%82%b6%e3%83%ac%e3%83%b3%e3%83%80%e3%83%aa%e3%83%b3%e3%82%b0%ef%bc%88%e6%8f%8f%e7%94%bb%ef%bc%9a%e3%83%aa%e3%83%95%e3%83%ad%e3%83%bc-%e3%83%aa%e3%83%9a%e3%82%a4%e3%83%b3/"><span class="list-item-caption">ブラウザレンダリング（描画：リフロー, リペイント, コンポジット合成）</span></a>
</li>
<li class="cat-item cat-item-86"><a href="https://frontend.intronational.com/category/web%e3%83%96%e3%83%a9%e3%82%a6%e3%82%b6%e3%81%ae%e4%bb%95%e7%b5%84%e3%81%bf/%e3%83%96%e3%83%a9%e3%82%a6%e3%82%b6%e3%83%ac%e3%83%b3%e3%83%80%e3%83%aa%e3%83%b3%e3%82%b0%ef%bc%88%e8%a7%a3%e6%9e%90%ef%bc%9ahtml%e3%83%91%e3%83%bc%e3%82%b9-dom-cssom%e3%83%84%e3%83%aa%e3%83%bc/"><span class="list-item-caption">ブラウザレンダリング（解析：HTMLパース, DOM/CSSOMツリー構築）</span></a>
</li>
<li class="cat-item cat-item-12"><a href="https://frontend.intronational.com/category/html/%e3%83%aa%e3%82%b9%e3%83%88%e3%81%a8%e8%a8%98%e8%bf%b0%e3%83%aa%e3%82%b9%e3%83%88%ef%bc%88ul-ol-li-dl-dt-dd%ef%bc%89/"><span class="list-item-caption">リストと記述リスト（ul, ol, li, dl, dt, dd）</span></a>
</li>
<li class="cat-item cat-item-8"><a href="https://frontend.intronational.com/category/html/%e3%83%ab%e3%83%bc%e3%83%88%e3%81%a8%e3%83%a1%e3%82%bf%e3%83%87%e3%83%bc%e3%82%bf%ef%bc%88html-head-meta-ogp%ef%bc%89/"><span class="list-item-caption">ルートとメタデータ（html, head, meta, OGP）</span></a>
</li>
<li class="cat-item cat-item-119"><a href="https://frontend.intronational.com/category/react/%e5%89%af%e4%bd%9c%e7%94%a8%e3%81%ae%e5%88%b6%e5%be%a1%ef%bc%88useeffect%e3%81%ae%e5%ae%9f%e8%a1%8c%e3%82%bf%e3%82%a4%e3%83%9f%e3%83%b3%e3%82%b0%e3%80%81%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%a2/"><span class="list-item-caption">副作用の制御（useEffectの実行タイミング、クリーンアップ関数、依存配列の制御）</span></a>
</li>
<li class="cat-item cat-item-102"><a href="https://frontend.intronational.com/category/typescript/%e5%9f%ba%e6%9c%ac%e3%81%ae%e5%9e%8b%e5%ae%9a%e7%be%a9%ef%bc%88boolean-number-string-array-tuple-any-unknown%ef%bc%89/"><span class="list-item-caption">基本の型定義（boolean, number, string, array, tuple, any, unknown）</span></a>
</li>
<li class="cat-item cat-item-31"><a href="https://frontend.intronational.com/category/css/%e5%9f%ba%e6%9c%ac%e3%82%bb%e3%83%ac%e3%82%af%e3%82%bf%e3%81%a8%e7%b5%84%e3%81%bf%e5%90%88%e3%82%8f%e3%81%9b%ef%bc%88%e3%82%bf%e3%82%b0-%e3%82%af%e3%83%a9%e3%82%b9-id-%e5%ad%90%e5%ad%ab%e3%83%bb/"><span class="list-item-caption">基本セレクタと組み合わせ（タグ, クラス, ID, 子孫・子・隣接）</span></a>
</li>
<li class="cat-item cat-item-56"><a href="https://frontend.intronational.com/category/javascript/%e5%a4%89%e6%95%b0%e3%81%a8%e3%82%b9%e3%82%b3%e3%83%bc%e3%83%97%ef%bc%88const-let-var-%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%82%b9%e3%82%b3%e3%83%bc%e3%83%97-%e5%b7%bb%e3%81%8d%e4%b8%8a%e3%81%92/"><span class="list-item-caption">変数とスコープ（const, let, var, ブロックスコープ, 巻き上げ）</span></a>
</li>
<li class="cat-item cat-item-32"><a href="https://frontend.intronational.com/category/css/%e5%b1%9e%e6%80%a7%e3%82%bb%e3%83%ac%e3%82%af%e3%82%bf%e3%81%a8%e7%96%91%e4%bc%bc%e3%82%af%e3%83%a9%e3%82%b9%ef%bc%88%e7%8a%b6%e6%85%8b%ef%bc%9ahover-focus-active-disabled%e7%ad%89%ef%bc%89/"><span class="list-item-caption">属性セレクタと疑似クラス（状態：hover, focus, active, disabled等）</span></a>
</li>
<li class="cat-item cat-item-58"><a href="https://frontend.intronational.com/category/javascript/%e6%96%87%e5%ad%97%e5%88%97%e6%93%8d%e4%bd%9c%ef%bc%88string%e3%83%a1%e3%82%bd%e3%83%83%e3%83%89%ef%bc%9aslice-replace-includes-%e3%83%86%e3%83%b3%e3%83%97%e3%83%ac%e3%83%bc%e3%83%88%e3%83%aa/"><span class="list-item-caption">文字列操作（Stringメソッド：slice, replace, includes, テンプレートリテラル）</span></a>
</li>
<li class="cat-item cat-item-1"><a href="https://frontend.intronational.com/category/uncategorized/"><span class="list-item-caption">未分類</span></a>
</li>
<li class="cat-item cat-item-118"><a href="https://frontend.intronational.com/category/react/%e7%8a%b6%e6%85%8b%e7%ae%a1%e7%90%86%e3%81%ae%e5%9f%ba%e6%9c%ac%ef%bc%88usestate%e3%81%ab%e3%82%88%e3%82%8b%e3%83%87%e3%83%bc%e3%82%bf%e4%bf%9d%e6%8c%81%e3%81%a8%e7%8a%b6%e6%85%8b%e6%9b%b4%e6%96%b0/"><span class="list-item-caption">状態管理の基本（useStateによるデータ保持と状態更新の非同期バグ対策）</span></a>
</li>
</ul></div></aside> </div>
</div>
</div>
</div>
<footer id="footer" class="footer footer-container nwa" itemscope itemtype="https://schema.org/WPFooter">
<div id="footer-in" class="footer-in wrap cf">
<div class="footer-bottom fdt-logo fnm-text-width cf">
<div class="footer-bottom-logo">
<div class="logo logo-footer logo-text"><a href="https://frontend.intronational.com/" class="site-name site-name-text-link" itemprop="url"><span class="site-name-text" itemprop="name about">HTML/CSS/JS専門の学習</span></a></div> </div>
<div class="footer-bottom-content">
<nav id="navi-footer" class="navi-footer">
<div id="navi-footer-in" class="navi-footer-in">
</div>
</nav>
<div class="source-org copyright">© 2026 HTML/CSS/JS専門の学習.</div>
</div>
</div>
</div>
</footer>
<div id="go-to-top" class="go-to-top">
<button class="go-to-top-button go-to-top-common go-to-top-hide go-to-top-button-icon-font" aria-label="トップへ戻る"><span class="fa fa-angle-double-up"></span></button>
</div>
<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/cocoon-child-master/*","/wp-content/themes/cocoon-master/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
<script id="wp-hooks-js" src="https://frontend.intronational.com/wp-includes/js/dist/hooks.min.js?ver=f0f188028580e8dc1255&fver=20260820095812"></script>
<script id="wp-i18n-js" src="https://frontend.intronational.com/wp-includes/js/dist/i18n.min.js?ver=1dfe7db3940c23ea9216&fver=20260820095827"></script>
<script id="wp-i18n-js-after">
wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } );
//# sourceURL=wp-i18n-js-after
</script>
<script id="swv-js" src="https://frontend.intronational.com/wp-content/plugins/contact-form-7/includes/swv/js/index.js?ver=6.1.5&fver=20260404072140"></script>
<script id="contact-form-7-js-translations">
( function( domain, translations ) {
var localeData = translations.locale_data[ domain ] || translations.locale_data.messages;
localeData[""].domain = domain;
wp.i18n.setLocaleData( localeData, domain );
} )( "contact-form-7", {"translation-revision-date":"2025-11-30 08:12:23+0000","generator":"GlotPress\/4.0.3","domain":"messages","locale_data":{"messages":{"":{"domain":"messages","plural-forms":"nplurals=1; plural=0;","lang":"ja_JP"},"This contact form is placed in the wrong place.":["\u3053\u306e\u30b3\u30f3\u30bf\u30af\u30c8\u30d5\u30a9\u30fc\u30e0\u306f\u9593\u9055\u3063\u305f\u4f4d\u7f6e\u306b\u7f6e\u304b\u308c\u3066\u3044\u307e\u3059\u3002"],"Error:":["\u30a8\u30e9\u30fc:"]}},"comment":{"reference":"includes\/js\/index.js"}} );
//# sourceURL=contact-form-7-js-translations
</script>
<script id="contact-form-7-js-before">
var wpcf7 = {
"api": {
"root": "https:\/\/frontend.intronational.com\/wp-json\/",
"namespace": "contact-form-7\/v1"
}
};
//# sourceURL=contact-form-7-js-before
</script>
<script id="contact-form-7-js" src="https://frontend.intronational.com/wp-content/plugins/contact-form-7/includes/js/index.js?ver=6.1.5&fver=20260404072140"></script>
<script id="cookie-notice-front-js-before">
var cnArgs = {"ajaxUrl":"https:\/\/frontend.intronational.com\/wp-admin\/admin-ajax.php","nonce":"4b956e4ffe","hideEffect":"fade","position":"bottom","onScroll":false,"onScrollOffset":100,"onClick":false,"cookieName":"cookie_notice_accepted","cookieTime":2592000,"cookieTimeRejected":2592000,"globalCookie":false,"redirection":false,"cache":false,"revokeCookies":false,"revokeCookiesOpt":"automatic"};
//# sourceURL=cookie-notice-front-js-before
</script>
<script id="cookie-notice-front-js" src="https://frontend.intronational.com/wp-content/plugins/cookie-notice/js/front.min.js?ver=2.5.16&fver=20260404072100"></script>
<script id="baguettebox-js-js" src="https://frontend.intronational.com/wp-content/themes/cocoon-master/plugins/baguettebox/dist/baguetteBox.min.js?ver=7.1.2&fver=20260403014114"></script>
<script id="baguettebox-js-js-after">
(function($){
baguetteBox.run(".entry-content");
})(jQuery);
//# sourceURL=baguettebox-js-js-after
</script>
<script id="slicknav-js-js" src="https://frontend.intronational.com/wp-content/themes/cocoon-master/plugins/slicknav/jquery.slicknav.min.js?ver=7.1.2&fver=20260403014114"></script>
<script id="slicknav-js-js-after">
(function($){
$(".menu-header").slicknav({
label: "MENU",
parentTag: "div",
allowParentLinks: true,
});
})(jQuery);
//# sourceURL=slicknav-js-js-after
</script>
<script async data-wp-strategy="async" fetchpriority="low" id="comment-reply-js" src="https://frontend.intronational.com/wp-includes/js/comment-reply.min.js?ver=7.1.2&fver=20260820095852"></script>
<script id="cocoon-js-js-extra">
var cocoon_localize_script_options = {"is_lazy_load_enable":null,"is_fixed_mobile_buttons_enable":"","is_google_font_lazy_load_enable":""};
//# sourceURL=cocoon-js-js-extra
</script>
<script id="cocoon-js-js" src="https://frontend.intronational.com/wp-content/themes/cocoon-master/javascript.js?ver=7.1.2&fver=20260403014113"></script>
<script id="cocoon-child-js-js" src="https://frontend.intronational.com/wp-content/themes/cocoon-child-master/javascript.js?ver=7.1.2&fver=20260403014118"></script>
<script id="googlesitekit-events-provider-contact-form-7-js" src="https://frontend.intronational.com/wp-content/plugins/google-site-kit/dist/assets/js/googlesitekit-events-provider-contact-form-7-fac2a8013ba5ba355cd0.js?fver=20260922014710" defer></script>
<script id="googlesitekit-events-provider-content-events-js-before">
window._googlesitekit = window._googlesitekit || {};
window._googlesitekit.contentEvents = {"postID":1952,"isSinglePost":true,"hasVimeoEmbed":false};
//# sourceURL=googlesitekit-events-provider-content-events-js-before
</script>
<script id="googlesitekit-events-provider-content-events-js" src="https://frontend.intronational.com/wp-content/plugins/google-site-kit/dist/assets/js/googlesitekit-events-provider-content-events-c7172f3fd0e4d5ad62ef.js?fver=20260922014710" defer></script>
<!-- Cookie Notice plugin v2.5.16 by Hu-manity.co https://hu-manity.co/ -->
<div id="cookie-notice" role="dialog" class="cookie-notice-hidden cookie-revoke-hidden cn-position-bottom" aria-label="Cookie Notice" style="background-color: rgba(50,50,58,1);"><div class="cookie-notice-container" style="color: #fff"><span id="cn-notice-text" class="cn-text-container">よりよいエクスペリエンスを提供するため、当ウェブサイトでは Cookie を使用しています。引き続き閲覧する場合、Cookie の使用を承諾したものとみなされます。</span><span id="cn-notice-buttons" class="cn-buttons-container"><button id="cn-accept-cookie" data-cookie-set="accept" class="cn-set-cookie cn-button" aria-label="OK" style="background-color: #00a99d">OK</button></span><button type="button" id="cn-close-notice" data-cookie-set="accept" class="cn-close-icon" aria-label="いいえ" tabindex="0"></button></div>
</div>
<!-- / Cookie Notice plugin -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7214025567716564" crossorigin="anonymous"></script>
<script>!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="//assets.pinterest.com/js/pinit_main.js";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pinterest-btn-js");</script>
<div class="copy-info">タイトルとURLをコピーしました</div>
<script>
(function($){
const selector = '.copy-button';//clipboardで使う要素を指定
$(selector).click(function(event){
//クリック動作をキャンセル
event.preventDefault();
//クリップボード動作
navigator.clipboard.writeText($(selector).attr('data-clipboard-text')).then(
() => {
$('.copy-info').fadeIn(500).delay(1000).fadeOut(500);
});
});
})(jQuery);
</script>
</div><!-- #container -->
</body>
</html>
