今さら聞けない!?CSSの基本

基本は「ブロックレベル要素」と「インライン要素」にあり!


ホームページを自分で作るために、CSSを覚えようって思ってる人は意外と多いのでは?でもCSSって何から覚えたら良いのか、ちょっと難しそうですよね。 とりあえずテキストの色を変えたりホームページの背景を変えたりはすぐできますが、本格的にレイアウトやデザインをしようとするときに絶対に理解しておきたいのが「ブロックレベル要素」と「インライン要素」という概念です。 「ブロックレベル要素」とは一つの「ブロック」として扱われる要素のことで、<P>タグや<DIV>タグといった段落や、<h1>などの見出し、<table>や<ul>の表・リストなどがそれにあたります。 「インライン要素」は、ブロックレベル要素の中のコンテンツ(内容物)として取り扱われる要素で、「文章の一部」としてみなされるものです。インライン要素には<FONT>、<A>などのテキストに関するタグや、<IMG>などの画像、<BR>、<SPAN>などのタグがあります。CSSのレイアウトは、基本的にこのブロックレベル要素とインライン要素の組み合わせを考えることで行うといってもよいでしょう。




それぞれの配置ルールの違いに気をつけて!


ブロックレベル要素とインライン要素は配置ルールが細かく設定されていて、それぞれルールが違います。 基本的にブロックレベル要素は前後に改行が入るため、「タテ」に積み重ねられます。また、インライン要素は文章の一部として扱われるため「ヨコ」につなげられて配置されるというのが一番大きな違いであり、ポイントといえるでしょう。 ブロックレベル要素では、要素の「高さ」と「幅」を指定することができますが、インライン要素では基本的にどちらも指定することができません。また、インライン要素の中にブロックレベル要素を配置することはできないといったルールがあります。 またCSSでは「プロパティ」と呼ばれる値をつかって具体的な高さや幅、表示の仕方などをさまざまに指定します。このプロパティの指定にも、ブロックレベル要素には効くけどインライン要素には効かないプロパティ、またその逆の場合などいろいろなケースがありますので使用する際には注意が必要です。 「レイアウトが思い通りにならない?」という場合は、たいていこの配置ルールやプロパティの指定を間違っていることが多いので、それぞれのルールをよく理解しておきましょう。