【css】displayの値オススメ5つ！レスポンシブデザインにも便利

webのコーディング作業で使用頻度の高いcssプロパティのうちのひとつ「displayプロパティ」は指定できる値が色々とあります。
displayプロパティを使用すると要素のブロックレベルやインラインの表示方法を設定する事ができます。例を挙げると、spanのようなインライン要素をブロックレベル要素として扱うことができたり、コンテンツの中身を非表示にしたりと、「display」はレスポンシブデザインにも大変便利なcssです。

そして、SEO対策を行うには、htmlの知識も多少必要となります。
本記事ではcssプロパティの「display」の中から特におすすめの値を5つ紹介するので、ぜひコーディングの参考にしてください。

CSSのブロックレベル要素とインライン要素の違いを理解する

はじめに、ブロックレベル要素とインライン要素とは何か。それぞれの特徴や違いを理解しましょう。

よく使われるHTML要素のdisplayの初期値

displayの初期値は要素の表示形式を決定するものですが、通常、displayプロパティの初期値は「inline」となります。

しかし、仮にpタグの初期値はblockですが、「display: inline」を指定することでインライン要素として表示することができます。

以下にHTML要素のdisplayの初期値を紹介します。
※初期値はブラウザでの初期設定に基づいています。

display:none;

「display:none;」を記述すると中身が非表示となります。

div {display:none;}

レスポンシブデザインを導入する際、どうしてもcssだけでは対応しきれなく、PC用のコンテンツを部分的に非表示にしたい時などに便利です。

visibility:hidden;と同じように見えますが、「visibility:hidden;」は、見えなくなるだけで要素は詰まりません。
「display:none;」の方だとそこに無いものとして要素は詰まります。

ただし、display:none;でも、タグは読み込んでいるため、PC/スマホでアドセンスを振り分けたい場合は、3つしか表示させていないつもりでも、1ページに3箇所以上貼っていると判断され、3つ目以降は表示されません。

ここで、隠しテキストはスパムになるのでは？との意見も見かけますが、
次のようにGoogleが公言していることから、レスポンシブデザインは、必要に応じてdisplay:none;を使用しても問題ないと言っていいでしょう。

ただし、隠しテキストがすべて偽装行為と見なされるわけではありません。たとえば、サイトで JavaScript、画像、Flash ファイルといった検索エンジンにとってアクセスしにくい技術が使用されている場合、そのようなアイテムについて説明テキストを使用するとサイトのアクセシ ビリティが向上することがあります。また、スクリーン リーダー、モバイル ブラウザ、プラグインなしのブラウザ、低速接続環境でアクセスする多くの人間のユーザーもそのようなコンテンツを表示できないため、その場合も説明テキス トがあれば役立ちます。

display:inline;

「display:inline;」はインラインで表示するため、横並びの表示になります。

div {display:inline;}

「display:inline;」は、width（幅）とheight（高さ）は指定できません、marginとpaddingの上下も指定できません。
※paddingの上下は指定できますが、上下の要素とのマージン（余白）は変わらないので、重なってしまいます。

<span style="width:200px; height:200px; padding:20px 0; border:solid 2px #999;">spanはインライン要素です</span>

よく使うインライン要素がこちらです。

欠点は、要素との間に余白ができることです。
これに対応するには、

などありますが、少し面倒なので、多少の余白なら気にならないような時に使える値です。
これで、表現できない場合は、floatを使った方が管理しやすい場合もありますが、今度はvertical-alignが効かなってしまうので、その時のデザインによって使い分けるようにしましょう。

display:block;

「display:block;」は、ボックス要素として表示するため、横幅に関係なく縦並びとなります。

div {display:block;}

widthとheight、marginとpadding全て指定できます。
aタグに設定するとクリック可能なエリアを大きくできたり、spanなどのインライン要素に設定するとブロック要素扱いとなるため、上下のmarginを設定できたりします。便利ですが、vertical-alignは指定できません。

<div style="width:200px; height:80px; margin:0 0 20px; padding:10px 0; color:#fff; text-align:center; vertical-align:middle; background:#333;">margin-bottom:20px;</div>
<div style="width:200px; height:80px; margin:30px 0 0; padding:10px 0; color:#fff; text-align:center; background:#666;">margin-top:30px;</div>

レスポンシブデザインを導入する際、floatして2カラムで組んでいるPCサイトの場合だと、floatを解除するだけで縦に並びますよね？これは<div>がブロック要素だからです。
よく使うブロック要素がこちらです。

こちらを多少覚えていると、marginとpaddingの扱いが理解できるのでコーディングする際に便利です。

display:table;

「display:table;」は「display:table-cell;」と一緒に使うことが多いかと思います。
table要素のような表示になります。

<ul>
<li>コンテンツA</li>
<li>コンテンツB</li>
<li>コンテンツC</li>
</ul>

ul {display:table;}
ul li {display:table-cell;}

とした場合、テーブルを使ったようなレイアウトの段組が表現できます。

display:table-cell;

「display:table-cell;」は先ほども述べたように、floatを使わずに横並びにすることができます。
td要素のような表示になります。

div {display:table-cell;}

親要素にtable-layout:fixed;を指定してあげると横幅が均等に配置されます。
さらに、「display:table-cell;」の利点としては、テーブルセルとして扱える為「vertical-align」を使えるので、コンテンツを上下中央に表示することも可能です。

<ul style="display:table;">
<li style="width:100px; padding:10px; background:#333; color:#fff; text-align:center; display:table-cell; vertical-align:middle;">コンテンツA</li>
<li style="width:100px; padding:10px; background:#666; color:#fff; text-align:center; display:table-cell; vertical-align:middle;">コンテンツB</li>
<li style="width:100px; padding:10px; background:#333; color:#fff; text-align:center; display:table-cell; vertical-align:middle;">コンテンツC</li>
</ul>

<ul style="display:table; border-collapse:separate; border-spacing:5px 0;">
<li style="width:100px; padding:10px; background:#333; color:#fff; text-align:center; display:table-cell; vertical-align:middle;">コンテンツA</li>
<li style="width:100px; padding:10px; background:#666; color:#fff; text-align:center; display:table-cell; vertical-align:middle;">コンテンツB</li>
<li style="width:100px; padding:10px; background:#333; color:#fff; text-align:center; display:table-cell; vertical-align:middle;">コンテンツC</li>
</ul>

<ul style="display:table;">
<li style="padding:0 20px; border-left:solid 2px #999; border-right:solid 2px #999; text-align:center; display:table-cell;">コンテンツA</li>
<li style="padding:0 20px; border-right:solid 2px #999; text-align:center; display:table-cell;">コンテンツB</li>
<li style="padding:0 20px; border-right:solid 2px #999; text-align:center; display:table-cell;">コンテンツC</li>
</ul>

displayプロパティの2値構文がサポートされている

displayプロパティでは、指定する値を２つ設定できるように特定のブラウザでサポートされています。
現状ではSafariとFirefox、Chrome（2023年７月予定）ですが、2値構文はブロックレベルかインラインレベルなのかが明確化されるようになります。
2値構文は「display: 外側の値 内側の値;」というように設定できますが、使用例は以下です。

display: block flow;

上記は「block」で外側の値を指定し「flow」で内側の値を指定しています。
ちょっとわかりにくいので、いくつか従来の単一での値と2値構文の値を表にしました。

便利なdisplayの値5つまとめ

いかがでしたでしょうか。
たった5種類の値だけで色々な組み方に対応できるdisplayプロパティは、本記事でご紹介した値の他にも「flex」「grid」など便利なものがありますが、個人的には今回紹介したものだけで充分な気がします。
これからcssのdisplayを学ぶ方は、まず、この5つの値から覚えていくのが良いかもしれません。

レスポンシブデザインの作り方については下記の記事もご参考ください。

seopack.jp/internal-seo

 

11 shares 10 users 46 pockets

簡単！レスポンシブデザインの作り方のすべて

https://seopack.jp/internal-seo/smartphone/responsive-web-design-method.php

ウェブサイトにレスポンシブデザイン導入されていますか？2016年5月からモバイルフレンドリーアルゴリズムが強化される事をGoogleが発表しました。詳細な日付はアナウンスされていませんが、徐々に更新されるとのことです。これによって、よりスマホでのSEO対策にはレスポンシブデザインが必須となります。念のため、スマホで上位表示させたい重要なページがモバイルフレンドリーに対応しているかどうかモバイル フレンドリー テストで確認しておきましょう。この記事ではモバイルフレンドリーに対応するためのレスポンシブデザインの...

レスポンシブデザインによく使うcssは下記の記事も参考にしてみてください。

seopack.jp/internal-seo

 

5 shares 3 users 7 pockets

レスポンシブデザイン簡単導入法02 - よく使うcssまとめ編

https://seopack.jp/internal-seo/smartphone/responsive-web-design-handy-set-up.php

レスポンシブデザイン簡単導入法として全3回に分けレスポンシブ対応方法をご紹介していますが、前回の記事「レスポンシブデザイン簡単導入法01 – ビューポート・メディアクエリ編」を参考に、レスポンシブデザインの導入のためにビューポートとメディアクエリを設定した後は、スマホ用のcssを調整しながら各デバイスに対応していきます。本記事ではレスポンシブ対応によく使うcssのポイントをご紹介したいと思います。レスポンシブデザインに対応するには各デバイス用のcssを設定し表示します。対応に必要なcssは、本記事でご説明するc...