Homepage Zero ガイド
logo

ゼロから始めよう!わかりやすい!ホームページ作成ガイド

初めての方へ|総合案内|お問い合わせ|当サイトについて

ホームページ初心者ガイド| HTML| CSS| ホームページお役立ち情報| ホームページレベルアップ情報| その他

ホームHTMLリファレンス(アルファベット検索)>border-top-styleプロパティ

CSSプロパティ辞典
タグ一覧(ABC順) 目的別タグ一覧 スタイルシート一覧(ABC順) 目的別スタイルシート一覧

border-top-style プロパティ …上側の枠線のスタイルを指定する

使用プロパティ

CSSプロパティ

border-top-style: 値;

対象となる
要素

すべて

継承

しない

次項(値と働きと、枠線の表示例)を参照してください

対応ブラウザ IE6 WinFireFox WinSafariFireFox MacIE5 macOpera

解説

border-top-style プロパティを使えば、要素の上側の枠線のスタイルを指定することができます。
上下左右の枠線のスタイルをまとめて指定するには、border-style プロパティを使用します。また、上下左右の枠線の太さやスタイル、色をまとめて指定するには border プロパティを使用します。

枠線にスタイルを指定しなければ枠線は表示されません。理由は、枠線のスタイルを指定しない場合、「none」(枠線なし)と見なされるからです。枠線を表示するには必ず枠線のスタイルを指定しましょう。また、逆に枠線のスタイル以外を指定しない場合は、太さは「medium」、色は「文字の色」となります。枠線にスタイルを指定するには「CSS一覧プロパティ辞典-枠線のスタイル-」を参照してください。

枠線のスタイルに関するプロパティ一覧は「CSS一覧プロパティ辞典-枠線のスタイル-」を参照してください。

値と働きと、枠線の表示例

働き 表示例 働き 表示例
none 枠線の非表示 表示例 dotted 点線の表示 表示例
dashed 破線の表示 表示例 solid 実線の表示 表示例
double 二重線の表示 表示例 groove 枠線がへこんだように表示 表示例
ridge 枠線が飛びしているように表示 表示例 inset 枠線の中の要素がへこんだように表示 表示例
outset 枠線の中の要素が飛び出したように表示 表示例

使用例

記述例
<html>
<head>
<title>HOME PAGE ZERO ガイド</title>

<!--スタイルシート-->
<style type="text/css">

p {
border-top-style: solid;
}

</style>
</head>

<!--ページの本文-->
<body>

<p>上側の枠線のスタイルを「solid」にしています。</p>

</body>
</html>
↓
[ブラウザでの表示例]
HOME PAGE ZERO ガイド

上側の枠線のスタイルを「solid」にしています。

関連情報ページ

ページトップへ

ホームページ初心者ガイド| HTML| CSS| ホームページお役立ち情報| ホームページレベルアップ情報| その他

<TOP>

logo
ゼロから始めよう!わかりやすい!ホームページ作成ガイド

|初めての方へ|総合案内|お問い合わせ|当サイトについて|

copyright (C) TOMIY All Right Reserved
inserted by FC2 system