れいぶろぐゲームをプレイしたり、作ったりしてる人、LABEのブログ『れいぶろぐ』。創作のこと、PCのこと、その他趣味のことを広く浅く。(6)前回の記事で、CSSのメディアクエリについて書きながら、「前にも同じようなこと書いたような......」と思って探してみると、やっぱり書いてたからとりあえずリンクしたものの、その以前の記事でも今度書くって言ってたCSSによるレイアウトについてまだ書けてなかったというね。話だけど、自分で説明できることは他所のサイトを紹介するんじゃなくて、自分で説明したいよねってこと。俺が編み出したノウハウとかオンリーワンな話のほうが世のため人のためになるってもんだけど、構わず今日もお付き合いください。要素からはみ出した部分を隠す要素を非表示に擬似クラスと擬似要素スタイルの継承と重ね合わせセレクターの優先度まとめブロック要素とインライン要素そもそも要素(エレメント)とは、HTML要素のことであるが、HTMLタグと、タグに囲まれた部分を合わせてそう呼ぶ。全体をdiv要素と呼ぶ。タグと要素は混同されることが多いので注意。書くことになっていたが、HTML5ではスラッシュを省略できる。要素はHTML文書において、構造や意味ごとに区別する(マークアップ)ために存在する。HTML要素にはブロック要素(ブロックレベル要素)とインライン要素がある。いや、厳密にいうとHTML5でこれらの概念は廃止されたが、実質的にはそれほど変わっていないので、あると思って差し支えない。ブロック要素とは、スペースいっぱいの幅を取るボックスのような要素のことで、一つの要素で一つの行を占め、前後の要素は上下に配置される。ブロック要素は必然的に長方形の領域を占め、幅と高さは自動計算されるが、指定することもできる。ブロック要素をレイアウト目的で使う場合、その四角い領域のことをボックスと呼んだりする。インライン要素とは、ブロック要素の中にあり、単なる文字や画像など、行の中に含まれる要素のことである。インライン要素の領域は内容に応じたものとなり、幅と高さは基本的に指定できない。インライン要素はかつて、テキストを装飾する目的で使われていたが、現在はそれら自体には装飾の機能はなく、CSSによって装飾することになっている。プロパティによってdiv要素をインラインにしたり、span要素をブロックにしたりすることもできる。}CSSを書く場所CSSをWebページで使うとき、記述する場所は以下の3通りある。外部CSSファイルHTML内のstyle要素HTMLタグ内のstyle属性1.と2.では、スタイル(装飾)を適用する対象となるHTML要素を「セレクター」を使って指定し、CSSを書く。3.では、スタイルを適用する対象となる要素の(開始)タグに直接、style属性の属性値としてCSSを書く。管理のしやすさから、1.の方法がよく使われる。一つのサイト内ではすべてのページでほぼ共通のCSSが用いられるので、独立した外部ファイルだとすべてのページに渡る変更も一括で修正できるためである。その場(タグ)限りでスタイルを適用したい場合、3.の書き方もよく使われる。#ff0000;">文字サイズ16px・文字色赤</span>spanタグにstyle属性を指定して、文字を装飾する例3.の書き方では、スタイルを適用する対象となるHTML要素に直接CSSを記述するため、セレクターが不要となる。1.や2.の記述とスタイルが競合した場合、3.の記述のほうが優先される。以後のCSSは1.と2.の記法を用いるが、セレクターの有無以外に違いはない。装飾対象を指定するCSSで要素にスタイルを適用するには、「どの要素にスタイルを適用するか」を指定する必要があり、「セレクター」という仕組みを使用する。セレクターには以下の指定方法がある(一部)。要素(コメントは含めない)。属性の属性値)をもつ要素。属性の属性値)をもつ要素。属性の属性値として“text”をもつ要素。クオーテーションマークはシングルクオーテーションでもいいセレクターは以下のようにいくつでも組み合わせることができる。一般的に、特定の要素を指定するためにクラス名やID名のセレクターを使い、それを見越してHTMLを書くことになる。ちなみにクラスとIDの違いだが、IDは一つの文書(ページ)中に重複があってはならない。クラスは一つの要素にいくつでも付けられるし、一つの文書中でいくら重複があってもいい。一つのタグにクラス名を複数付けるには、空白で区切って書く。funami">マージン、パディング、ボーダー、幅・高さこの節の内容は主にボックス要素が対象である。CSSの初心者だけでなく、上級者も時々つまずくポイントである。margin(マージン)とは要素の外側の余白のことである。padding(パディング)とは、要素の内側の余白のことである。マージンとパディングの違いは下図を見ればわかりやすいが、ボーダー(枠線)の外側に余白を付けるのがマージン、ボーダーの内側に余白を付けるのがパディングである。ボックスモデルかくして要素はマージン、パディング、ボーダーの分も含めてスペースを取るのだが、ここで要素の幅・高さとはどこのサイズかという問題が出てくる。実は、CSSで指定する要素の幅・高さはボーダーの外側のサイズではなく、ボーダー、パディングを含まない内容部分のみのサイズを指す。要素の実際のサイズは、CSSで指定した幅・高さに加え、パディング、ボーダーの領域を含めたものとなる(その外側にマージンが付く)。この仕様を「ボックスモデル」と呼ぶが、さすがに直観的じゃないとか、計算がめんどいとか、凝ったレイアウトが実現不可能になるとかいった種々の問題が現れた。すると、要素の実際の幅は50%+20pxとなり、二つで100%に収まらなくなってしまう。指定すると、幅・高さの指定がボーダーの端を基準としたものになる、すなわちボーダー、パディングを含めたサイズになる。人によってはCSSを初期化するとき、すべての要素にこれを指定することもあるくらい、便利なプロパティなので覚えて損はない。この節ではここまで、ブロック要素について説明してきたが、インライン要素の場合ここまでの説明とはいくらか異なる。インライン要素には幅と高さを指定することができない(一部の要素は指定可能)。インライン要素にもマージンとボーダーを指定することができるが、パディングを指定することはできない。指定すると、インライン要素でありながら幅・高さやパディングを指定できるようになり、その内側の要素に対してはブロック要素のように振る舞う。ここで少しマージンに関する興味深い仕様を紹介しよう。ネガティブマージンという負(マイナス)のマージン。マージンにのみ負の値を指定することができるが、その場合、マージンがマイナス→本来マージンが付くことによって領域が移動する方向と逆方向に領域が移動→位置をずらしたり、すでにある余白を減らしたり、隣の要素にかぶせたりできる......というテクニカルなことが起こる(下図)。ネガティブマージンマージンをマイナスに、と聞くと、パディングもマイナスにしたいと思うこともあるが、残念ながらパディングはマイナスにできない。上の要素Aと、その下に隣接する要素Bがあり、Aの下マージンが20px、Bの上マージンが10pxである場合、結果としてAとBの間隔は30px、ではなく20pxとなる(下図)。上からのマージンと下からのマージンは重なり合って相殺するのだ。マージンとは、「最低これだけ空ける」という指定であるといえる。マージンが相殺するのは上下方向だけであり、また他にもいくつかの条件があるが、ややこしいので省略。パディングは相殺しないので、余白にマージンを使うのかパディングを使うのか、場合によって使い分けよう。各プロパティを使えば、それぞれ幅・高さの最大値や最小値を指定することができる。すれば、画面の幅が500pxを下回るスマホで要素が横にはみ出すのを防ぐことができる。すれば、どんなに画面の幅を広げても要素の幅が500pxを上回ることはない。このように%による相対指定と数値による絶対指定を組み合わせて、モバイルに対応する際に便利だが、頭が混乱しないように注意(俺もたまにそうなる)。してしまうのは常套手段だ。それぞれ指定しなければならない。