忍者ブログ

World of granshe.

HTMLやCSS、JavaScriptに関する話題を中心に、Web制作について知ったこと、覚えておきたいことをメモしておく個人的スペースです。
[100] [99] [98] [97] [96] [95] [94] [93] [92] [91] [90

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

CSSにできること―レイアウト概念編

CSSにできること第六弾。
今回は、これからWebサイトをレイアウトしていくにあたって必要になってくる概念や考え方を書いていきます。
前作:CSSにできること―レイアウト基礎の基礎編


CSSを使ってレイアウトをするにあたって、知っておいてほしい概念が2つほどあります。

まずは、divタグの紹介です。
divというのは、HTMLで用いるタグなのですが、h1(見出し1)やp(段落)のように、明確に文章の構造を指し示すものではありません。
div=division=区別する、つまり、コンテンツ同士を区分けするためのタグです。

たとえばこのブログを例に説明すると、

一番上のタイトル画像がある部分がひとつのdiv、
左のプロフィールなどが表示されている部分がdiv、
真ん中のこの文章が表示されている部分がdiv、
右のカレンダーなどが表示されている部分がdiv、
一番下のコピーライトが表示されている部分がdiv。

というふうに、コンテンツを5つのdivで区切って作られています。


どうして区切るのかというと、通常、CSSがない状態のHTMLはこのサイトのように、横に段組を組むことができません。
これを、CSSによってdivに幅や高さ、配置などを指定することによって、横の3段組レイアウトを実現しているのです。
この段組を実現するため、この3つの部分をそれぞれ違うボックスとして囲む必要があります。
この囲むためのタグがdivなのです。


Webサイトをレイアウトしていくにあたって、このdivタグはとっても重要な要素になってきます。

この「Web制作の基礎」関連の記事では、ではこれからレイアウトについて書く際に、「ボックス」という言葉を使いますが、ボックスとは、このdivタグを用いて囲んだ部分を指すと思ってください。


そして、もうひとつ大事なのはブロック要素インライン要素という概念です。

HTMLには、ブロック要素とインライン要素という二つの要素があります。
ブロック要素の中には、ブロック要素、インライン要素、データ(文字)の3つが入りますが、
インライン要素にはインライン要素、データ(文字)のみ入れることができます。

これ、説明が非常に難しいんですが、ブロック要素はダンボール箱、インライン要素はビニール袋、データはおもちゃという感じで考えてみてください。

ダンボールボール箱には、小さいダンボール箱を入れることができますし、ビニール袋に入ったおもちゃも入ります。大きい人形だったら袋に入れずそのままダンボールに入れることもあるかもしれません。

ビニール袋にはおもちゃや人形を入れるかもしれませんが、ダンボール箱は入りませんし、いれませんよね。

と、こんなぐあいです。


この概念を使用することが多いのは、ボタンを作るときです。

aタグはインライン要素なので、幅と高さを指定しても、文字の部分しかリンクの範囲になりません。
ここがリンクです。

しかし、これをCSSでブロック要素として表示することが可能なので、
ここがリンクです。
このようにボタンっぽくすることができます。


以上、レイアウト概念編でした。
次回は、フロートレイアウト編です。

PR
この記事にコメントする
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
この記事へのトラックバック
この記事にトラックバックする:
プロフィール
名前: ゆーり
職業: コーダー(模索中
趣味: Web制作
自己紹介: 某Web製作会社の入社5年目のマークアップエンジニア。専門はHTMLとCSSとMT(自称)。
カレンダー
11« 2017/12 »01
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
ブログ内検索
忍者ブログ [PR]