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

SEOならSEOパック
ご利用実績9077件 (2017/05/28現在)
2016年04月18日 2016年09月05日

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

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

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

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

レスポンシブデザイン簡単導入法02 - よく使うcssまとめ編
レスポンシブデザインの導入のために、ビューポートとメディアクエリを設定した後は、スマホ用のcssを調整しながら各デバイスに対応していくわけですが、今回はその際によく使う、cssのポイントをご紹介したいと思います。レスポンシブデザインはcssで各デバイス用に...

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

SEO対策のすべてが揃うSEO Pack

display:none;

この記述にすると中身が非表示となります。

div {display:none;}

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

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

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

ここで、隠しテキストはスパムになるのでは?との意見も見かけますが、

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

と、Googleが公言していることから、レスポンシブデザインは、必要に応じてdisplay:none;を使用しても問題ないと言っていいでしょう。

display:inline;

インラインで表示するため、横並びになります。

div {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が効かなってしまうので、その時のデザインによって使い分けるようにしましょう。

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-cell;と一緒に使うことが多いかと思います。
table要素のような表示になります。

<ul>
<li>コンテンツA</li>
<li>コンテンツB</li>
<li>コンテンツC</li>
</ul>
ul {display:table;}
ul li {display:table-cell;}

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

display:table-cell;

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

div {display:table-cell;}

親要素にtable-layout:fixed;を指定してあげると横幅が均等に配置されます。
さらに、利点としては、テーブルセルとして扱えるので、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つの値から覚えていくのが良いかもしれません。

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

SEO内部対策 トップに戻る
コンテンツSEOの強い味方「ezorisu-seo」
順位が上がるページには必ず評価されるコンテンツがあります。
その評価されるコンテンツとは何か?本ツールが解析します!
上位表示を目指すキーワードを入力してください
ezorisu-seoについて
SEOツールseodoor(せおどあ)に無料版が登場しました