display: contentとは？
display: content は、CSSのdisplayプロパティの一つで、要素のコンテナとしての役割を無効化し、中身のコンテンツだけを表示するために使用します。このプロパティを適用すると、要素自体のボックスモデル（マージン、パディング、ボーダーなど）は無視され、画面上には要素の枠組みではなく、内部のコンテンツのみが表示されます。これにより、HTMLの構造を保ちながらも、不要な要素を削除して、ページのパフォーマンスやユーザビリティを向上させることが可能です。SEOの観点からも、DOMツリーには要素が残るため、検索エンジンは引き続きその要素の情報をクロールし、インデックス化できる点が利点です。
実装例
display: contentは、PCとスマートフォン（SP）で異なるレイアウトを実現する際に非常に便利です。従来は、SP用のHTMLを追加し、PC用ではCSSで非表示にするという手法で行ったりしていたのですがdisplay: contentを使うことで、特定の要素（例: card-content_wrap）のボックスモデルを無効にし、中身のコンテンツだけを表示できるため、h2要素をcard-content_wrapの外に移動させず、card-wrapの子要素のように扱うことが可能です。これにより、CSSのorderプロパティを使ってPCとSPで要素の表示順を変更し、下記レイアウトを再現可能です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>display:content;</title>
<style>
body {
display: grid;
place-content: center;
align-items: center;
height: 100vh;
}
.card-wrap {
display: flex;
align-items: center;
gap: 20px;
max-width: 800px;
padding: 10px 20px 10px 10px;
box-shadow: 0px 0px 15px -5px #777777;
border-radius: 10px;
text-decoration: none;
color: initial;
}
@media screen and (max-width: 768px) {
.card-wrap {
flex-direction: column;
padding: 10px;
}
}
img {
border-radius: 8px;
}
@media screen and (max-width: 768px) {
img {
width: 100%;
}
}
@media screen and (max-width: 768px) {
.card-content_wrap {
display: contents;
}
}
h2 {
order: -1;
}
</style>
</head>
<body>
<a href="#" class="card-wrap">
<img src="https://placehold.jp/300x200.png" alt="サムネイル">
<div class="card-content_wrap">
<h2>タイトル</h2>
<p>
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
</p>
</div>
</a>
</body>
</html>display: none;との違い
display: content;
display: content; は要素自体のボックスモデル（枠、マージン、パディング、ボーダーなど）を無効化し、中身のコンテンツのみを表示します。要素の枠は表示されませんが、その内部のテキストや子要素はそのまま表示します。重要な点として、要素はDOMツリーには残り、JavaScriptからも認識され、操作できるという点です。
display: none;
display: none; は要素とその中に含まれるコンテンツを完全に非表示にします。要素はDOMツリーに残るものの、画面には一切表示されず、JavaScriptからも認識できません。このため、イベントのトリガーやスタイルの操作も基本的には行えません。
まとめ
display: content; と display: none; は、要素の表示方法を制御するための異なるCSSプロパティです。display: content; は、要素自体を表示せずに中のコンテンツだけを表示するため、レイアウトを柔軟に変更したい場合や、不要なボックスモデルを排除してコンテンツだけを見せたいときに便利です。
参考文献
display – CSS: カスケーディングスタイルシート | MDN
HTML5&CSS3デザイン 現場の新標準ガイド【第2版】
