CSS：borderプロパティ「CSS実践編：CSSでのレイアウトstep3」

CSS実践編：CSSでのレイアウトstep3

前回は、ボックスレイアウトについて、マージン、パディングを含め記載いたしました。

マージンとパディングにつきましては、比較的簡単にご理解いただけたことと思います。
またボックス概念が非常に重要で、この概念は忘れないようしっかりと理解を深めて頂きたい事と思います...。

個人的には、バナーレイアウトでボックスレイアウトの概念を使用する際、たびたびボーダーを記載したことを忘れ、
「アレレ～ッ、なんで？」
となる事が、チョイチョイございます。

いろいろな記事を読んでおりますと、1ピクセルにこだわる！！なる記載を良くみかけますが、
ボックス概念には、パディング・ボーダー・マージンが含まれることを
しっかりと理解し、1ピクセルにこだわったデザインを心がけたいですねッ...。

それでは今回はッ、

上記について記載していこうと思います...。

borderプロパティ

border（ボーダー）は、ボックスの外枠となる境界線です。
外枠の太さや線の種類、色を個別に指定できるほか、4方向一括で指定することも可能になります。

太さ・スタイル・色を指定する値を任意の順序でスペースで区切って記述する。

太さ・スタイル・色を個別に指定することも可能です。

borderの装飾

borderの設定例をcodepenで表示します。
ボックスの境界線としてだけでなく、見出しや工夫次第でさまざまな装飾に使うことが可能になります。

See the Pen BayggQY by masakado (@kadokado354) on CodePen.

• 
  【フルオーダー】最高峰の制作プラン

  徹底的にこだわるプレミアムプランの詳細を見る

• 
  失敗しないWeb制作の進め方

  お問い合わせから納品まで 制作の流れを解説

ボックスの高さをheightで指定

heightプロパティは、領域の高さを指定する際に使用します。
指定方法は、pxなど単位を付けて使用する方法と、親ボックスに対する割合で％を指定する方法と、状況に応じて大きさが設定されるautoを指定する方法がございます。

またheightプロパティには負の値を指定することは出来ません。

min-heightとmax-height

min-heightプロパティは、領域の高さの最小値を指定する際使用。
max-heightプロパティは、領域の高さの最大値を指定する際使用になります。

See the Pen vYEqqXx by masakado (@kadokado354) on CodePen.

min-heightを指定すると、この上の場合、最低の高さ150pxが指定されているので、下に余白が出来ます。max-heightの場合は、高さ50pxが指定されているのでテキストがはみ出てしまいます。

実際のウェブ制作の現場では、サイトのフッターなどに複数のボックスがあり、高さをそろえたい時などに使用します。
ボックスの高さを揃えることで、フッターに記載されたコンテンツの固まりが分かり易くなり、また、読みやすくのなるので、デザイン性に優れているといえるかと思います。

overflowについて

overflowは、指定した領域内に収まりきらない場合に、その内容をどのように処理するかのプロパティになります。
overflowプロティで指定できる値は下記になります。

See the Pen qBEzzjZ by masakado (@kadokado354) on CodePen.

今回記載いたしました、borderおよびheight・overflowの重要なポイントは、ボックスレイアウトに付随するという事になります。

実際の現場では、borderは見出しの装飾etc、heightは高さをそろえたい、inner_boxなど、また、overflowは、はみ出してほしくない時および、意図的にはみ出させたい時など、どれも結構な頻度で使用します。

なので今回ご紹介した内容も、サイト制作の上でしっかりと理解しておきたい内容になります。

とりあえず、今回はここまで...。

お仕事のご依頼は下記より...、それではまた次回...。

• 
  売上UPに直結！ECサイト運用

  売上を伸ばすECサイト運営代行サービス

• 
  プロの撮影でサイトの質UP

  プロ仕様の品質ホームページ用撮影サービス