HTML/CSS3-2 CSSの基本　枠線装飾、余白、ボックス

Posted on

枠線の表示

要素を罫線（border）で囲んだり、枠線の種類を変えたりするときに、border-styleプロパティを使います。

枠線の種類には

  • solid　（実線）
  • dashed（破線）
  • dotted（点線）
  • double（二重線）

があります。

h1{
  border: dotted;
}

 

上下左右を指定して個別に罫線を使うこともできます。

  • border-top-style （上）
  • border-right-style （右）
  • border-bottom-style（下）
  • border-left-style（左）

線の太さの指定は　border-width　で指定します。太さはpx、%、emなどで指定します。

上下左右個別に枠線の太さを個別に指定するには

  • border-top-width （上）
  • border-right-width （右）
  • border-bottom-width（下）
  • border-left-width（左）

各プロパティで指定できる値は　border-width　プロパティと同じです。

枠線の色も変えることができます。boder-color で指定します。指定できる値は、カラーコードか、16進数のカラーコードです。

上下左右個別に枠線の太さを個別に指定するには

  • border-top-color （上）
  • border-right-color （右）
  • border-bottom-color（下）
  • border-left-color（左）

各プロパティで指定できる値は、boder-color　と同じです。

style.cssのh1要素に　1pxのgrayの点線でコーディングしてください。

sample11

 

はじめましての下に灰色の線ができれば完成です。

borderプロパティはまとめて指定されることが多いです。先ほど指定したCSSをまとめると以下のようになります。

h1{
  border: dotted 1px gray;
}

3つの順番はどのように書いても大丈夫です。borderプロパティを使うとCSSコードが簡潔になるので、まとめた書き方を覚えるようにしましょう。上下左右に対して個別の線種を使うこともできます。

  • border-top （上）
  • border-right（右）
  • border-bottom（下）
  • border-left（左）

とborderに場所を指定したプロパティでまとめることもできます。

余白の設定

これまでのCSSでは、h1要素の枠線とテキストがとても近づいています。この枠線とテキストの間隔をあけることができます。枠線の内側にどのくらい余白を作るか調整するには、paddingプロパティを使います。また、要素と要素の間を空けたり狭めたりするのに、marginプロパティを使います。

padding要素とmargin要素の関係は図のようになっています。

sample13

枠線を指定しない場合も、それぞれの要素には0pxの枠線が存在しています。そのため、枠線を基準にpaddingとmarginが設定されます。

では、sample.htmlのli要素のul要素のマージンを30pxにpaddingを20pxにしてみましょう。style.cssに下記の記述をします。

ul{
   margin: 30px;
}

li{
  padding: 20px;
}

sample14

上記のようにリスト要素に空間ができています。paddingとmarginを同時に指定しましたが、一度CSSファイルのpaddingのみ削除、marginのみ削除して表示の違いを確認しておいてください。

※marginの相殺

たとえば、上下の要素それぞれにmarginが設定されていた場合、marginが合計されて幅広くなってしまうように思われます。しかし、上下の要素のmarginの値は合計されず、大きい値だけが適用されます。これは、margin は２つの領域間の「空間の最低値」を指定するものだからです。上下のmarginだけではなく、親要素と子要素の入れ子の状態でも相殺が発生します。

子要素のマージンは親要素にpaddingもborderもないとき親要素のマージンを含めて他の要素と相殺します。別の言い方をすれば、中身のない要素同士は中身のある要素を見つけるまでどこまででもマージンを相殺します。

sample16

親の要素に特定のCSSを適用することで、子の相殺が発生しません。

  • border (marginが指定されている方向)
  • padding (marginが指定されている方向)
  • overflow:hidden, scroll (auto, visibleは適用されない)
  • position:absolute, fixed (relative, staticは適用されない)
  • 上記以外にも、floatによって相殺が発生しない場合があります。

横幅を指定した状態で、margin-left, margin-right にautoを指定した場合。
左右等分のmarginが算出され、ボックスは中央に配置されます。
ただしfloatが指定されると、marginのautoは、必ず数値が0になります。

padding、marginは一括で上下左右を指定できます。その場合　上、右、下、左の順で記載します。各配置位置の間は半角スペースで区切ります。

ul{
   padding: 10px 5px 5px 20px;
}

上記のような記載となります。

ボックスの基礎知識

要素の内用、padding、枠線、marginを合わせてボックスといいます。HTMLの要素はそれぞれ自分のボックスを持っています。Webページのデザイン作業の多くは、ボックスのプロパティを指定し、思い通りの見た目にすることともいえます。

sample17

HTMLの要素が構成するボックスは、ブロックボックス、インラインボックス、リストボックスがあります。

ブロック要素とインライン要素

要素の多くは、「ブロックレベル要素」と「インライン要素」に分類されます。

ブロックレベル要素（Block-Level Elements）

ブロックレベル要素は、見出し・段落・表など、文書を構成する基本となる要素で、一つのブロック（かたまり）として認識されます。 ブラウザでの表示も一つのかたまりとして扱われることが多く、一般的なブラウザでは前後に改行が入ります。この場合の改行とはブロック要素を配置したとき、前後に１行分のスペースがあることを指しています。ブロックレベル要素は以下のものがあります。

ブロックレベル要素にはほとんどの場合、デフォルトでmargin,paddingの値が割り振られています。

<address>、<blockquote>、<center>、<div>、<dl>、<fieldset>、<form>、<h1>-<h6>、
<hr>、<noframes>、<noscript>、<ol>、<p>、<pre>、<table>、<ul>

 

インライン要素（Inline Elements）

インライン要素は、主にブロックレベル要素の内容として用いられる要素で、文章の一部として扱われます。 例えば、<p>要素の中の<strong>要素のように、段落のなかの一部を強調するような使われ方をする要素です。 一般的なブラウザでは前後に改行が入らず、文章の一部として表示されます。インラインレベル要素は以下のものがあります。インライン要素には上下のマージンは効きません。

<a>、<abbr>、<acronym>、<b>、<basefont>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、
<em>、<font>、<i>、<img>、<input>、<kbd>、<label>、<q>、<s>、<samp>、<select>、
<small>、<span>、<strike>、<strong>、<sub>、<sup>、<textarea>、<tt>、<u>、<var>

 

ブロックレベル要素の中には、他のブロックレベル要素やインライン要素を配置することができます。 一方、インライン要素の中には、文字データや他のインライン要素を配置することができますが、 インライン要素の中にブロックレベル要素を配置することはできません。

正）<h1><a href="#">これは h2 見出しです</a></h1>
誤）<a href="#"><h1>これは h2 見出しです！</h1></a>

sample.htmlのp要素のあとに、p要素で「CSSは面白いです。」と追加します。CSSでp要素に　solid　1px　#000066のボーダーを追加します。htmlファイルとCSSファイルを保存してブラウザで確認します。

sample20

ブロックボックスは縦に重なるイメージなので、p要素が二つ重なっていることが確認できます。いったんボーダーのCSSの記述は削除します。

また、インラインボックスのイメージは下記の通りです。

sample21

<p>はじめまして、〇〇と申します。<em>HTML</em>を学習しはじめました。</p>
<p><em>CSS</em>は面白いです。</p>


em{
  border:  solid 1px #000066;
}

上記は、p要素のHTMLとCSSを強調するようにem要素をp要素内に記述した結果です。わかりやすいようにem要素にボーダーをつけています。p要素のブロックボックス内にem要素のインラインボックスがあります。わかりづらい場合は、CSSでp要素にもう一度ボーダーを入れて表示させると理解できるかと思います。

幅と高さの指定

ブロックボックスは箱のイメージですので、要素の内容に幅と高さを指定することができます。現在のh1要素は画面幅いっぱいに広がっています。ここに幅を指定してみましょう。幅はwidthを使って指定します。

h1{
	font-size : 24px;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	text-align : center;
	color: gray;
	border-bottom: dotted 1px gray;
   background-color: #000066;
   width: 300px;
}

CSSに追記したら、保存してブラウザで確認してください。

sample22

イメージ写真よりh1の幅が小さくなります。高さを指定する場合は、height　で指定します。いずれもpx、em、%での指定ができます。

width　や　heightを指定する場合、気を付けなければならないのは、要素の内容の幅、高さを指定するということです。

sample17paddingが上下左右10pxずつで、枠線が1pxの場合、内容の幅を300pxにすると枠線とパディングを含んだ見た目の幅は322pxになります。枠線とパディングを含んだ見た目の幅や高さを先に決める場合は、要素全体の大きさから逆算してwidthとheightの値を決めることができます。

ボックスの種類の変更

ブロックボックスやインラインボックスはCSSで要素の構成する種類を変更することができます。ボックスの種類を変えるには、displayプロバティを使います。使い方は、display　プロパティの値に、ボックスの種類を指定するだけです。

指定できるボックスの種類は「block」「inline」「list-box」「inline-block」、があります。

たとえば、sample.htmlの　li要素のリストボックスをインライン要素に変更するには下記のように記述します。

li{
   padding: 20px;
   display: inline;
}

sample23

リストが横並びになります。この際、リストマークが消えました。リストのブロック要素がインラインブロック要素に変更されたため、リストマークが表示されないようになるのです。

このリストマークですが、displayでボックスの種類を変更しなくても、list-style-typeプロパティで指定することができます。

u30eau30b9u30c8u30deu30fcu30abu30fcu5024u8868u793au4f8b
u306au3057none
u9ed2u4e38discu25cf
u767du4e38circleu25cb
u56dbu89d2squareu25a0
u7b97u7528u6570u5b57decimaluff11u3001uff12u3001uff13
u5927u6587u5b57u30a2u30ebu30d5u30a1u30d9u30c3u30c8upper-alphaAu3001Bu3001C
u5c0fu6587u5b57u30a2u30ebu30d5u30a1u30d9u30c3u30c8Lower-alphaau3001bu3001c
u5927u6587u5b57u30edu30fcu30deu6570u5b57upper-romanu2160u3001u2161u3001u2162
u5c0fu6587u5b57u30edu30fcu30deu6570u5b57lower-romanu2170u3001u2171u3001u2172
u4e8cu3051u305fu306eu6570u5b57decimal-leading-zero01u300102u300103
u6f22u6570u5b57cjk-ideographicu4e00u3001u4e8cu3001u4e09
u3072u3089u304cu306ahiraganau3042u3001u3044u3001u3046
u30abu30bfu30abu30cakatakanau30a2u3001u30a4u3001u30a6

罫線の表示方法の変更

現在のsample.htmlのtable要素は罫線がありません。罫線を表示させるには、boderプロパティやborder-styleプロパティを使います。直線、1px、#000066　の罫線を表示させてみましょう。

table,td{
    border: solid 1px #000066;
}

sample24枠が表示されましたが、隙間があいています。この隙間をなくすには、

boder-collapseプロパティを使います。boder-collapseプロパティはcollapse（隙間をなくす）か、separate（隙間をあける）のいずれかを使います。

CSSファイルに下記を追記して保存します。

 

 

table,td{
    border: solid 1px #000066;
　　 border-collapse: collapse;
}

sample25

隙間がなくなりました。試しにseparateでの表示も確認してみてください。

回り込みの配置

ブロックボックスは通常、上から下の順番に縦に並んで配置されます。しかし、Webページのレイアウトでは、要素同士を横に並べたいことがあります。要素を左右に並べて表示したいときに使われるのが、floatプロパティです。floatプロパティの値はleft（左）かright（右）を指定します。

floatというのは浮かべるという英語です。指定したボックスを浮かせることで、背後の要素をそのあと見せる方法です。

sample26

ここで回り込むのは、要素の内容です。要素のボックスは影に隠れている状態となります。floatボックスは他のボックスの順序からは浮いているため、ボックスの順序としては、存在しないものとして扱われます。

ただし、完全に無視されるわけではなく、他のボックスの内容は、フローティングボックスに重ならないように避けて配置するというルールのため、図のようなフロートボックスで　float:left；　を指定すると継続の要素の内容が見えるようになります。

これは、要素２と３のボックスが要素１のフローティングボックスに重なっている状態です。ただし、要素２、３の内容はフローティングボックスに重ならないような配置となっています。要素３の内容の途中からは、要素１の下に配置されています。

style.cssのimage要素に左の回り込みを指定してみましょう。

img{
	float: left;
}

sample27

左図のように、画像の右に文章が回り込んでいます。

文章が多ければ、文章とテーブルが画像の下に移動します。

 

 

sample28

 

回り込み解除

フローティングボックスの左右へ回り込ませたくない後続要素には、clearプロパティを使います。値には、left、right、bothを指定できます。右側への回り込み（float：leftの後）は、clear：leftを指定します。左側への回り込み解除はclear:rightを指定します。左または右側の回り込みをまとめて解除したい場合は、clear：bothを指定します。

要素のレイアウト

要素をレイアウトするには、floatプロパティの他にpositionプロパティを使う方法があります。positionプロパティは、要素の表示位置を表すプロパティです。値にはstatic、absolute、relative、fixedを使用します。

u4f4du7f6eu30b3u30fcu30c9
u914du7f6eu6307u5b9au306au3057static
absoluteu7d76u5bfeu4f4du7f6e
relativeu76f8u5bfeu4f4du7f6e
fixedu30a6u30a4u30f3u30c9u30a6u306bu56fau5b9a

Scroll Up