Pocket
LINEで送る

<body>タグを区画分けしてCSSで効率的にスタイリング

div-tag

コンテンツ

<div> tag makes CSS web design easier

When you design a website,
I recommend these 2 effective ways.

1. Compartmentalize <body> tag with <div> tag
2. Use CSS in <div> tag.

<div> tag has no specific meaning.
So we can design the enclosed content simply with CSS.

When you create a website from scratch,
I’m sure that <div> tag is a reliable weapon.
Thank you for reading!

<div>タグの存在意義を考えてみた

<body>タグ内のHTMLタグは、大きく
ブロック(レベル)要素インライン要素に分ける事ができます。
前者のブロック要素には

<h>タグ (Heading) 見出し
<p>タグ (Paragraph) 段落・本文
<ul>タグ (Unordered List) リスト 等がありますが

同じブロック要素でも
<div>タグ (Division)については
あまり突き詰めてその存在意義を考えてみる事もなく
Webサイト制作に使用していました。

そこで今回レスポンシブデザインで
サイトのリニューアルを実施した事を機に
<div>タグについてまとめる事にしました。

<div>タグ自体に意味は無い

それ自体では意味を持たないとされている<div>タグ。
本当にそうなのかを確認する為に簡単な実験をしてみます。

実験ルール

前々回の記事
[徹底実験!] <ul><li>とfloat:left;で横並び
5.一郎と二郎にfloat: left;をあてている状態で実験。

一郎 → float: left; ○
二郎 → float: left; ○
三郎 → float: left; ×

基本ソースコード

1
2
3
4
5
6
7
<ul style="list-style: none;">
    <li style="float: left;"><img src=""></li>
 
    <li style="float: left;"><img src=""></li>
 
    <li><img src=""></li>
</ul>

1.初期状態

      • ichirou
      • jirou
      • saburou

通常の状態です。

[Case #1]
一郎 → float: left; ○
二郎 → float: left; ○
三郎 → float: left; ×

2.<ul>タグを<div>タグで囲んだ状態

  • ichirou
  • jirou
  • saburou

変化なし。
やはり<div>タグ自体は意味を持たない事がわかります。

[Case #2]
<ul> → <div>で囲む
一郎 → float: left; ○
二郎 → float: left; ○
三郎 → float: left; ×

<div>タグで囲んでも余分な情報が入らない → CSSとの相性◎

<div>タグ自体は意味を持たない。
その事自体が<div>タグの強みとなります。

transparent and not

意味を持たないからこそ
<div>タグで囲んだコンテンツに余分な情報を与えずに
識別子であるid属性・class属性と組み合わせて、
囲んだコンテンツをCSSでスタイリングする事が可能になります。

Nothing is particularly hard if you divide it into small jobs!

そして<div>タグの語源のDivisionが指し示す通り
<body>タグを
1.ヘッダー
2.メニュー
3.メイン
4.サブ
5.フッターといった具合に区画分け
作業範囲の目安を作る事で、
HTML・CSSでのマークアップ作業がスムーズになります。

New Axe

見出しの格言:自動車王ヘンリー・フォード(Henry Ford)
Divisionの他の意味:部門・割り算

記事まとめ [Webサイトのレイアウトに<div>タグは必須]

便利だからといって使い過ぎるのも問題ですが (div病)
エリアの広い<body>タグを小分けにして
マークアップしやすくしてくれる<div>タグは
Webサイトをスピーディーに制作する時の力強い武器となってくれるはずです!

画像の引用元 (Flickr・イラストAC)

ワニイラスト
作品名 わに
OOtsuki。 様

一郎イラスト
作品名 アビシニアン(猫)
OOtsuki。 様

二郎イラスト
作品名 マンクス(猫)
OOtsuki。 様

三郎イラスト
作品名 エキゾチック(猫)
OOtsuki。 様

トマトとガラス瓶写真
作品名 transparent and not
Muffet 様

斧写真
作品名 New Axe
Martin Cathrae 様

ブログ次回更新日のお知らせ

3/22(土)前後にUP予定です。
次回はWordPressの運用中に
書き留めておきたいと思った事をアップできればと
考えています。(変更あり)

ライフハックお悩み解決製品・サービスの情報をまとめました↓

製品・サービスの公式ページを見る こんな製品・サービスです
ウェブキャンプ :Webスキルのパーソナルジム・いつでも質問 & 豊富な回答・オーダーメイドカリキュラムがおすすめポイント。自分でWebサイトを作れるようになりたいがプログラミング・デザインをどうやって学んでいったらよいか悩んでいる方におすすめです。
コードキャンプ :実務で通用するスキル全般を短期間で習得・上場企業や有力ベンチャーのエンジニアが講師を担当・受講生が本気でエンジニア就職・転職を実現できるよう より現場評価いただける教育がおすすめポイント。現役エンジニアによるプログラミングの個別指導サービスを探していて悩んでいる方におすすめです。
東京での就業と住まいを同時提供のTokyoDive
:東京での新生活をスムーズに始める・住居探しと仕事探しをする手間が省ける・何かとお金がかかる東京の生活で初期費用を抑えるがおすすめポイント。東京で新生活を始めたい・シェアハウスに興味がある・東京に飛び出したいが不安で一歩が踏み出せないと悩んでいる方におすすめです。
リツアンSTCは、エンジニアに特化した人材紹介会社(派遣・業務委託・正社員紹介)です!
:漫画も面白い(同じ大学の研究室で学び、派遣エンジニアという職についた2人が10年ぶりに再開するところからスタートするストーリー)・社員の平均年収585万円!業界トップクラスの給与水準・自信があるからこそマージン率を公開がおすすめポイント。現在の勤め先に悩んでいて転職を考えている方におすすめです。
こんなに簡単!店舗向けホームページがすぐ始められる「グーペ」
:飲食店、美容院、ネイルサロンなどのお店だけではなく 塾、事務所、個人事業主、クリエイター、アイドルまで、 様々な業種のホームページが簡単に作れる・4,000通りものデザインパターン・初心者だけでなく、中・上級者の方も満足がおすすめポイント。ブログ感覚で手軽にお店のホームページを作成したいと考えているが、その方法が分からない!と悩んでいる方におすすめです。
Pocket
LINEで送る

比較表:説明

はみ出し情報

コメント欄

この記事はこんな人が書いています!

  • サイト管理人紹介
  • 管理人が現在気になっている青汁が
  • サンスター 粉末青汁 やわたのおいしい青汁 です。
  • 記事に間違いがありましたら、是非お知らせ下さい。
  • 確認の上、直ちに修正します。
  • またコメントも募集中です。

サイトご利用にあたって

  • 当サイトで公開している記事に掲載されている情報は
  • 自己責任でご活用下さい。
  • 特に医療・健康に関する情報は、ある人には最適(今現在)でも
  • あなたに最適とは限りません。
  • 必ずご自身の状態と照らし合わせて
  • 自分に最適だと判断してから掲載情報をご活用下さい。

スポンサーリンク

  • 「これは使ってみてあまり良くなかった」という
  • 製品・サービスがありましたら、是非お知らせ下さい。
  • 確認の上、お悩み解決製品・サービス一覧表への
  • 今後の掲載の継続を再度検討します。
  • また「これは使ってみてとても良かった」という
  • 製品・サービスがありましたら、こちらも是非お知らせ下さい。
サイトご利用にあたって

関連記事を見る