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

SEOならSEOパック
2016年04月18日 2022年10月14日

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

只今タイムセールを実施中です。

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

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

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

display:none;

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

div {display:none;}

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

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

display:noneとvisibility:hiddenの違い

ただし、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の上下は指定できますが、上下の要素とのマージン(余白)は変わらないので、重なってしまいます。

インライン要素でpaddingの上下を指定すると、このように上下の要素と重なってしまいます。
spanはインライン要素です
widthとheightも効いていないことがわかります。

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

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

  • a
  • br
  • button
  • iframe
  • img
  • input
  • label
  • select
  • textarea

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

  • html側で該当の箇所では改行しない
  • 要素と要素の間をコメントアウトする


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

\無料診断の活用で課題を明確に/

外部リンク、内部状況、コンテンツ状況からSEO対策の課題が見えてくる無料調査です。
「対策ページの弱点は何か...」などお悩みをお持ちの方は、一度「SEOパーソナル診断」をご利用ください。

display:block;

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

div {display:block;}

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

ブロック要素でmarginを指定すると、上下のmarginで相殺される場合があります。
このように、上にある要素のmargin-bottomと、下にある要素のmargin-topでは、相殺され、大きい方だけが採用されて表示されます。
vertical-alignが効いてないのもわかります。

margin-bottom:20px;
margin-top:30px;
<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>がブロック要素だからです。
よく使うブロック要素がこちらです。

  • div
  • form
  • h1~h6
  • p
  • table
  • ul

こちらを多少覚えていると、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;}

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

\無料診断の活用で課題を明確に/

外部リンク、内部状況、コンテンツ状況からSEO対策の課題が見えてくる無料調査です。
「対策ページの弱点は何か...」などお悩みをお持ちの方は、一度「SEOパーソナル診断」をご利用ください。

display:table-cell;

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

div {display:table-cell;}

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

floatを使わずに横並びにできて、しかも上下の指定もできるので、便利な値ですが、marginが効かないというデメリットがあります。

  • コンテンツA
  • コンテンツB
  • コンテンツC
<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>

そんな時は、display:table;を指定した要素に、border-collapse:separate;と、border-spacingを追記すると余白を確保することができます。
border-spacing:5px 0;の数字は、(横の余白)(縦の余白)の順番です。

  • コンテンツA
  • コンテンツB
  • コンテンツC
<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>

また、下記のようなデザインの場合、paddingで余白を確保することができます。

  • コンテンツA
  • コンテンツB
  • コンテンツC
<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の値5つまとめ

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

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

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

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

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

SEOパーソナル診断
SEO内部対策 トップに戻る

SEOツール無料トライアル

プロも個人も、高機能なSEOツールを体験ください。

コンテンツ分析や内部SEO対策、競合分析ができるSEOツールが7日間体験可能!

seodoor by SEO Pack

登録申し込み後自動でログインされます。アカウント情報はご登録のメールアドレスへ自動送信されておりますのでご確認ください。

SEO Packキャンペーン
内部修正サービス

公式SNS

Twitter

facebook