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

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

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

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

htmlのdivタグにcssを反映させて使いこなそう

htmlのdivタグにcssを反映させて使いこなそう

吉永です。もう暑くなってきましたね。

今回はhtmlのタグの中でも汎用性の高いdivタグについて取り上げます。このdivタグはcssとも相性がよく、たいていclassやidを付与して使います。

ただ、あまりの汎用性の高さにどう使えばいいのかわからない人が多くいると思います。また逆に、無駄に使いすぎている人もいるのではないでしょうか?

そこで、この記事ではdivタグの効果的な使い方を再確認しつつ、cssとの関わりについて述べていこうと思います。

divタグとは

divタグはh1タグやarticleタグのように単体では意味を持ちません。ですが、divタグは囲んだところをグループ化することができます。そして、グループ化した部分にcssを反映させることができます。

divタグは意味を持たないゆえに、様々な部分に挿入できます。ですので、グループに意味を持たせずcssを反映させたい時には非常に便利です。

divタグを使って、cssを使いやすくする

divタグとspanタグの違い

divタグと似た要素にspanタグがあります。どちらも意味を持たないタグではありますが、cssを反映させた際に大きな違いが現れます。

参考URL:http://yoshinaga-test.aispr.jp/spantest

<span class="yellow">
spanタグです</span>
<div class="red">
divタグです</div>
.yellow {
background-color: yellow;
}
.red{
background-color: red;
}

図1ではdivタグとspanタグ両方に、cssのbackground-colorを指定したものです。divタグには変化がありますが、spanタグには変化がありません。

なぜかというと、divタグとspanタグにはcssプロパティに対して得意不得意があるからです。そこで、divタグとspanタグがどのcssプロパティを得意とし、不得意とするのかを表にしてみました。

divとspanの違い

それぞれ一長一短ですが、divタグはボックス全体を装飾する際に活躍し、spanタグは文字装飾の際に活躍すると言えるでしょう。
表中に出てきたinline要素、block要素の違いに関しては、displayプロパティに関するページに詳しく書かれています。

divタグとcssのfloatプロパティを使ってマルチデバイスに適応させる

divタグはボックスを装飾する際に活躍することを述べてきましたが、ここからは具体的にdivタグとcssの活用例について述べていきます。

divタグをいくつか並べて表示させる際、特にcssを使ってなければ縦に並列します。しかし、ヘッダーナビなどのように横に並べたい時があると思います。

その時には、cssのfloatプロパティを使います。特にfloatで横並びにしておけば、画面の横幅に応じて変形してくれます。ですから、マルチデバイスに効果を発揮することができるので、非常に便利です。

以下の例のように記載し、PC画面とスマホ画面を比べてみるとよく分かります。PC画面とスマホ画面の両方で確認してみましょう。

参考URL:http://yoshinaga-test.aispr.jp/floattest

<div class=boxa>
BOXその1
</div>

<div class=boxb>
BOXその2
</div>

<div class=boxc>
BOXその3
</div>

<div class=boxd>
BOXその4</div>
div{
float:left;
padding:50px;
}
.boxa{background-color: red;
}
.boxb{background-color: yellow;
}
.boxc{background-color: green;
}
.boxd{background-color: blue;
}

divタグの無駄使いには注意

divタグは汎用性が高いので、無駄使いしてしまうケースが多いです。

特に、複雑なレイアウトになればなるほど、多用されがちです。目的があって使うのはいいのですが、それだけコードが読みにくくなります。
divは便利だが使い過ぎに注意

それを防ぐには、それぞれのclassやid属性を差別化することが必要です。また、SEO対策という点でもh1タグやarticleタグは適材適所で使用し、他人が見ても十分理解できるようなコードを記述しましょう。

まとめ

ここまでのことをまとめると、divタグについては

・spanタグとどっちが適切か考える

・ボックスを区切れば、細かなcssの設定ができる

・無駄に使いすぎている場合は、classやh1タグなどをもう一度検討してみる

divタグを使いこなせれば、cssをさらに活用できるようになるので、ぜひ理解しておきましょう。

”スマホで売れる”ためには必須の「レスポンシブ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
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+