東京・大阪・名古屋・福岡・仙台・札幌で開催する初心者向けのHTML・CSSを使ったホームページ制作の1日集中講座(セミナー)です。 HTML・CSSの入門講座なら、神田ITスクール!

6.2 borderプロパティ

borderプロパティ

6.2 borderプロパティ

 borderプロパティはコンテンツの周囲に枠線を表示させるプロパティです。このプロパティには、ボーダーの太さを定義するborder-width、ボーダーの種類を定義するborder-style、ボーダーの色を定義するborder-colorがあります。

それぞれのプロパティに設定できる値には以下のものがあります。

プロパティ

設定できる値

border-width

thin、medium、thick、長さ など

border-style

none、solid、double、dotted、dashed など

border-color

RGBカラー、色名 など

表 6.2.1 : borderプロパティの種類と値

➢ borderの記述例

セレクタ{
border-width: 太さ ;
border-style: 種類 ;
border-color: 色 ;
}
        

HTML上に<style>タグを使用して、スタイルを記述して実際の表示を確認しましょう。

①ソースフォルダ    :webpage/ch06
②ファイル名      :border.html

➢ border.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>border プロパティ</title>
<style>
	.title {
		border-width: 5px;
		border-style: solid;
		border-color: orange;
	}
	.content {
		border-width: 10px;
		border-style: dotted;
		border-color: #20b392;
	}
</style>
</head>
<body>
<h1 class="title">border プロパティの確認</h1>
<div class="content">
<p>点線にしてみました</p>
</div>
</body>
</html>
        

ブラウザで表示させると、オレンジ色のボーダーと緑色の点線のボーダーが表示されます。

この記述方法では、ボーダースタイルを定義するために3行の宣言を記述しました。しかし、実際には、今回のような場合は簡略化して記述する方法が一般的になっています。これを ショートハンドプロパティ
といいます。ショートハンドプロパティでは値を半角スペースで区切ることで、一度の記述で複数の値が指定できます。先ほど記述したtitleクラスとcontentクラスに同様のスタイルをショートハンドプロパティで定義するには、下記のようにします。

.title {
border: 5px solid orange;
}
.content {
border: 10px dotted #20b932;
}
        

➢ borderプロパティの簡略記述(ショートハンドプロパティ)例

セレクタ {
border: 太さ 種類 色 ;
}
        

NEXT>> 6.3 paddingプロパティ

HTMLとCSSの入門 目次

ご不明点はお問い合わせフォームからご連絡ください。

HTMLとCSSの入門 目次

ホームページ制作・保守

ホームページ制作・保守

セミナー講師

セミナー講師

主席インストラクター
早稲田大学大学院 理工学部卒業
SanJose 州立大学、コンピューター工学部卒業
アメリカのシリコンバレーでは、プログラマー・SEとして活躍
講師の詳細はこちら

ワードプレスセミナーも人気!

ワードプレスセミナーも人気!

より手軽にホームページ制作をしてみたい方にはワードプレスセミナーもおすすめです。
ワードプレスセミナーはこちら

1日集中HTML・CSSセミナーは、プログラミング教育で8年間の実績のある神田ITスクールが運営しています。
初心者、未経験者へわかりやすく教えるのには自信がありますので、ぜひご参加ください。
神田ITスクールのサイトはこちら

ホームページ制作・保守

ホームページ制作・保守
PAGETOP
Copyright © 2015 FusionOne Co.,Ltd. All rights reserved.