コワーキングスペース 代表 鶴田 賢太 スマホとPCで改行位置を最適化する方法を解説。wbrの活用と、pc時のみ改行を挿入する2つの実装（spanで包む方法とbrにクラスを付ける方法）を紹介。セマンティックなマークアップとHTMLの簡略化のトレードオフを比較し、SEO・アクセシビリティ・保守性を考慮して前者を推奨する。
- wbrを使い、改行位置を細かく指定できる点を解説
- 2つのpc専用改行実装（spanで包む方法とbr直接クラス付与）を紹介
- セマンティックマークアップ優先を推奨し、SEO・可読性・保守性を重視
こんにちは、Room8オーナーの鶴田です。
今回は、レスポンシブデザインを学ぶ中で、スマートフォンとパソコンで要素の改行位置を変更する方法について解説します。特に、(@room8jp) のようなユーザー名やURLを表示する場合、適切な位置で改行することでレイアウトを最適化できます。
また、セマンティックなマークアップの重要性と、HTMLの簡略化とのトレードオフについても触れますので、コーディングスキルの向上に役立つ情報が得られるはずです。
これから一緒に、実践的な例を通じて学んでいきましょう。
1. <wbr> タグを使用して改行位置を指定する
<wbr> タグを使用すると、単語の途中で改行可能な位置を指定できます。以下の例では、(@room8jp) の適切な位置に <wbr> タグを挿入しています。
<p>ユーザー名: <a>(@<wbr>room8jp)</a></p>この場合、(@room8jp) が画面からはみ出す場合、(@ の後で改行されます。
2. スマホとPCで改行位置を変更する2つの方法
メディアクエリを使用したCSSで、スマートフォンとパソコンの改行位置を制御できます。以下の例では、<span class="pc-only"><br></span> と <br class="pc-only"> の2つの方法を示します。
2.1 <span class="pc-only"><br></span> を使用する方法
<p>ユーザー名: <a>(@<wbr>room8jp)</a><span class="pc-only"><br></span>をフォローしてください。</p>
<style>
.pc-only {
display: none;
}
@media (min-width: 768px) {
.pc-only {
display: inline;
}
}
</style>この方法では、<br> 要素を <span> 要素で囲み、pc-only クラスを付与しています。CSSでは、デフォルトで .pc-only の display プロパティを none に設定し、メディアクエリを使用してパソコンの場合に inline に変更しています。
2.2 <br class="pc-only"> を使用する方法
<p>ユーザー名: <a>(@<wbr>room8jp)</a><br class="pc-only">をフォローしてください。</p>
<style>
.pc-only {
display: none;
}
@media (min-width: 768px) {
.pc-only {
display: inline;
}
}
</style>この方法では、<br> 要素に直接 pc-only クラスを付与しています。CSSの設定は、<span class="pc-only"><br></span> の場合と同じです。
両方の例で、CSSを使用してデフォルトで .pc-only の display プロパティを none に設定し、メディアクエリを使用してパソコンの場合に inline に変更しています。
3. <span class="pc-only"><br></span> と <br class="pc-only"> の特徴
上記の2つの方法には、それぞれ特徴があります。
3.1 <span class="pc-only"><br></span> の特徴
- セマンティックな観点から適切
<br>要素を<span>要素で囲むことで、改行の表示制御を目的としたマークアップであることを明確にしている- コードの意図が明確になる
3.2 <br class="pc-only"> の特徴
- HTMLの簡略化を優先
- セマンティックな観点からは、
<br>要素に直接クラスを付けることは要素の本来の意味から外れている - コードの記述量が少なくなる
<span class="pc-only"><br></span> の方法は、セマンティックな観点から適切であり、コードの意図が明確になります。一方、<br class="pc-only"> の方法は、HTMLの簡略化を優先しているため、コードの記述量が少なくなりますが、セマンティックな観点からは適切ではありません。
したがって、セマンティックなマークアップを優先する場合は <span class="pc-only"><br></span> を使用し、HTMLの簡略化を優先する場合は <br class="pc-only"> を使用することになります。
4. セマンティックとHTMLの簡略化どちらを優先すべきか？
何を優先するかで変わりますが、僕としてはセマンティックなマークアップを優先するのが良いと考えます。
セマンティックなマークアップを優先する理由は以下の通りです。
- SEOの改善
- アクセシビリティの向上
- コードの可読性と保守性の向上
- 将来の変更への適応性
一方、HTMLの簡略化を優先すると、コードの記述量は減りますが、セマンティックな意味が失われ、SEOやコードの可読性や保守性が低下する可能性があります。
したがって、セマンティックなマークアップを優先することをお勧めします。
まとめ
今回は、以下のことを学びました。
<wbr>タグを使用して改行位置を指定する方法- スマホとPCで改行位置を変更する方法
<span class="pc-only"><br></span>と<br class="pc-only">の特徴- セマンティックなマークアップを優先する理由
レスポンシブデザインを実装する際、適切な改行位置の指定はレイアウトの最適化に重要な役割を果たします。また、セマンティックなマークアップを優先することで、コードの可読性、保守性、アクセシビリティ、SEOが向上します。
HTMLの簡略化とセマンティックなマークアップのバランスを取ることが大切ですが、基本的にはセマンティックなマークアップを優先し、必要に応じてHTMLの簡略化を検討することをお勧めします。
これからも、これらの知識を活かして、より良いコーディングを心がけていきましょう。