navigation>年末年始休業につきまして【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。TOPモバイルファーストマーケティングラボモバイルファーストマーケティングラボhtmlのdivタグにcssを反映させて使いこなそう2019.05.282019.08.26WEBデザインHOMEWEBデザイン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を反映させた際に大きな違いが現れます。red;}図1ではdivタグとspanタグ両方に、cssのbackground-colorを指定したものです。divタグには変化がありますが、spanタグには変化がありません。いうと、divタグとspanタグにはcssプロパティに対して得意不得意があるからです。そこで、divタグとspanタグがどのcssプロパティを得意とし、不得意とするのかを表にしてみました。それぞれ一長一短ですが、divタグはボックス全体を装飾する際に活躍し、spanタグは文字装飾の際に活躍すると言えるでしょう。表中に出てきたinline要素、block要素の違いに関しては、displayプロパティに関するページに詳しく書かれています。divタグとcssのfloatプロパティを使ってマルチデバイスに適応させるdivタグはボックスを装飾する際に活躍することを述べてきましたが、ここからは具体的にdivタグとcssの活用例について述べていきます。divタグをいくつか並べて表示させる際、特にcssを使ってなければ縦に並列します。ヘッダーナビなどのように横に並べたい時があると思います。その時には、cssのfloatプロパティを使います。floatで横並びにしておけば、画面の横幅に応じて変形してくれます。マルチデバイスに効果を発揮することができるので、非常に便利です。以下の例のように記載し、PC画面とスマホ画面を比べてみるとよく分かります。PC画面とスマホ画面の両方で確認してみましょう。blue;}divタグの無駄使いには注意divタグは汎用性が高いので、無駄使いしてしまうケースが多いです。複雑なレイアウトになればなるほど、多用されがちです。目的があって使うのはいいのですが、それだけコードが読みにくくなります。それを防ぐには、それぞれのclassやid属性を差別化することが必要です。SEO対策という点でもh1タグやarticleタグは適材適所で使用し、他人が見ても十分理解できるようなコードを記述しましょう。まとめここまでのことをまとめると、divタグについては・spanタグとどっちが適切か考える・ボックスを区切れば、細かなcssの設定ができる・無駄に使いすぎている場合は、classやh1タグなどをもう一度検討してみるdivタグを使いこなせれば、cssをさらに活用できるようになるので、ぜひ理解しておきましょう。”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。・レスポンシブECサイトがなぜ今選ばれるのか・これまでのECサイトの課題とは何なのか・どのようにすれば解決できるのかといったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。無料パンフレットを請求するABOUTモバイルファーストマーケティングラボとは、スマートフォン/タブレット/PCに対応したレスポンシブECサイトの構築や成功事例の最新情報を発信するブログです。2013.07.04ランディングページなどの縦に長いページでは、スマートフォンの小さな画面で表示するとページ上部のメニューまで戻りにくくなってしまいがちです。自社ECサイト運営でASPをオススメする理由モバイルファーストラボ。