【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

cssのdisplayプロパティを活用してhtmlの引き出しを増やす

cssのdisplayプロパティを活用してhtmlの引き出しを増やす

今回はcssのdisplayプロパティについて解説していきます。

htmlタグの表示のされ方や高さ・幅の設定は予めhtmlタグごとに決まってます。しかし、これらの設定を変更し、htmlタグの使う範囲を拡張したい時があると思います。

このような場合に、htmlタグのinline要素やblock要素を変更し、適用範囲を変更できるcssがdisplayプロパティです。

displayのinline要素とblock要素

displayプロパティの活用方法を紹介する前に、まずinline要素とblock要素の違いを明確にする必要があります。inline要素とblock要素の主な違いを表1にまとめてみました。表1を見てください。
表1
inline要素とblock要素の違い
表1のように、blockとinlineには明確な違いがあります。次に、主なhtmlタグが予めどの要素なのかを書き出してみました。

inline・・・a,span,strongなど

block・・・div,h1,ul,pなど

この分類から分かる通り、inline要素のhtmlタグは文字に適用されます。逆に、block要素のhtmlタグは1ブロックごとに適用されます。

つまり、displayプロパティを活用すれば、それぞれのhtmlタグの使用用途を増やすことができるのです。ここからは実際に活用方法を紹介して行きます。

displayプロパティの活用方法

displayプロパティのinline要素とblock要素を変更する

inline要素のhtmlタグとblock要素のhtmlタグを変更してみました。例1を見てください。
例1 inline要素とblock要素を変更してみる

<div class="sample1">
divで囲まれてます
</div>
<span class="sample1">spanで囲まれてます</span>
<div class="sample1" id="change">
divで囲まれてます
</div>
<span class="sample1" id="change">spanで囲まれてます</span>
div.sample1 { background-color:#CD5C5C;  }
span.sample1 { background-color:#8FBC8F; }
div.sample1#change { display: inline;  }
span.sample1#change { display: block; }

適用範囲が逆になっていることが分かります。この場合だと、あまり用途がないかもしれません。しかし、inline要素であるaタグをblock要素にしてみるとどうでしょうか?例2を見てください。

例2 aタグをblock要素にしてみる

<a>aタグで囲まれており、block要素になってない</a>
<a style="display:block;">aタグで囲まれており、block要素になってます</a>
a { padding:10px; }
a:hover { text-decoration: underline;
             background-color:gray; 
              }

aタグの適用範囲を広げることができました。このように活用することによって、よりサイト訪問者にリンクを押してもらいやすくなります。

inline-block要素を使って簡単なグローバルメニューを作ってみる

次にdisplayプロパティの一つであるinline-block要素の活用方法を紹介していきます。

inline-block要素の特徴はblock要素のようにhtmlタグで囲んだ箇所を1かたまりで扱うことができ、要素を横並びにできることです。この特徴を使うことで、サイトでよく見られるグローバルメニューを簡単に作ることができます。例3を見てください。

例3 inline-block要素を使ってみる

<ul>
<li class="inline-blocksample" style="background-color: yellow;">boxその1</li>
<li class="inline-blocksample" style="background-color: aqua;">boxその2</li>
<li class="inline-blocksample" style="background-color: lime;">boxその3</li>
</ul>
ul {
background-color:#C0C0C0;	
}
.inline-blocksample {
    display: inline-block;
    font-size: 20px;
    width: 20%;
    height: 40px;
    border: 1px solid #666; 
}

このように、inline要素とblock要素を上手く折衷した動きができるのがinline-block要素です。

displayを使ってレスポンシブさせる

最後に紹介するのはdisplayプロパティのnone要素についてです。この要素はデバイスごとにhtmlタグの表示非表示を切り替える際に活躍します。

例えば、あるhtmlタグをスマホ版で表示させたいがPC版で表示させたくない場合、PC版の時に「display:none;」を適用すればPC版のみ非表示にできます。例4のページを開いて、PC版とスマホ版の両方で表示させてみてください。

例4 マルチデバイスで表示非表示切り替え

<div class="PConly">PC上に表示されます</div>
<div class="SPonly">スマホに表示されます</div>
.PConly { display: block !important;
        background-color: #33FF00; }
.SPonly { display: none !important;
          background-color: #FFFF99; }
@media only screen and (max-width: 640px) {
.PConly { display: none !important; }
.SPonly { display: block !important; }
}

このようにnone要素を使えば、デバイスごとに表示非表示の切り替えができるので非常に便利です。

まとめ

ここまでのことをまとめると、
・diplayプロパティを使えば、htmlタグの適用範囲を変更できる

・inline-blockはinlineとblockを上手く折衷した動きができる

・noneを使うことで、デバイスごとにhtmlタグの表示非表示を切り替えることができ、サイトをマルチデバイスに対応させることができる

displayプロパティはサイトレイアウトのバリエーションをかなり増やしてくれるので、ぜひ活用してみてください。

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+