前ページの余白を付けた情報を枠線で囲んでみましょう。
borderで情報を囲む
前ページの余白を付けた情報を枠線で囲んでみましょう。
竹取物語は、平安初期に著されたとされる、仮名による日本最古の物語。作者及び成立年は未詳。竹取の翁によって竹の中から見つけられた「かぐや姫」が、貴公子たちの求婚を次々と退け、帝の招聘も拒絶し、最後は月に帰ってしまう話。
太さ1pxの枠線で囲みました。
竹取物語は、平安初期に著されたとされる、仮名による日本最古の物語。作者及び成立年は未詳。竹取の翁によって竹の中から見つけられた「かぐや姫」が、貴公子たちの求婚を次々と退け、帝の招聘も拒絶し、最後は月に帰ってしまう話。
htmlソースは前ページと同じです。
htmlソース
<!--====参考====-->
<body>
<div id="container">
<div class="sample_1">
<p>竹取物語は、平安初期に著されたとされる、仮名による日本最古の物語。作者及び成立年は未詳。竹取の翁によって竹の中から見つけられた「かぐや姫」が、貴公子たの求婚を次々と退け、帝の招聘も拒絶し、最後は月に帰ってしまう話。</p>
</div>
</div><!--container-->
</body>
枠線で囲んだスタイルソース
cssソース
/*====参考====*/
.sample_1 {
width: 50%;
background: #fecfd8;
text-align: left;
border: solid 1px #000; /*この1行を追加しました。*/
padding: 20px;
margin: 0 auto;
}
枠の角を丸くすることができます。
竹取物語は、平安初期に著されたとされる、仮名による日本最古の物語。作者及び成立年は未詳。竹取の翁によって竹の中から見つけられた「かぐや姫」が、貴公子たちの求婚を次々と退け、帝の招聘も拒絶し、最後は月に帰ってしまう話。
cssソース
/*====参考====*/
.sample_1 {
width: 50%;
background: #fecfd8;
text-align: left;
border: solid 1px #000;
border-radius: 7px; /*この1行を追加しました。*/
padding: 20px;
margin: 0 auto;
}
borderの位置
borderの太さ1pxと10pxを並べてみます。
borderの位置に注目します。
竹取物語は、平安初期に著されたとされる、仮名による日本最古の物語。作者及び成立年は未詳。竹取の翁によって竹の中から見つけられた「かぐや姫」が、貴公子たちの求婚を次々と退け、帝の招聘も拒絶し、最後は月に帰ってしまう話。
竹取物語は、平安初期に著されたとされる、仮名による日本最古の物語。作者及び成立年は未詳。竹取の翁によって竹の中から見つけられた「かぐや姫」が、貴公子たちの求婚を次々と退け、帝の招聘も拒絶し、最後は月に帰ってしまう話。
width、heightの内側にborderを表示するbox-sizingプロパティ
width、heightの外回り、paddingの外回りではなく、width、heightの内回りにborderを表示できます。
余白の外回りにborderを表示
竹取物語は、平安初期に著されたとされる、仮名による日本最古の物語。作者及び成立年は未詳。竹取の翁によって竹の中から見つけられた「かぐや姫」が、貴公子たちの求婚を次々と退け、帝の招聘も拒絶し、最後は月に帰ってしまう話。
竹取物語は、平安初期に著されたとされる、仮名による日本最古の物語。作者及び成立年は未詳。竹取の翁によって竹の中から見つけられた「かぐや姫」が、貴公子たちの求婚を次々と退け、帝の招聘も拒絶し、最後は月に帰ってしまう話。
box-sizingプロパティで
width, heightの内側にborderを表示
cssソース
/*====参考====*/
.sample_1 {
width: 50%;
background: #fecfd8;
text-align: left;
border: solid 1px #000;
box-sizing: border-box; /*この1行を追加*/
padding: 20px;
margin: 0 auto;
}
上は、width幅のコンテンツ+余白の外回りにborderを表示。
下は、width幅の内側にborder+余白+コンテンツ。
borderの書き方
border: 線の種類 線の太さ 線の色;
borderプロパティの値は線の種類、線の太さ、線の色を半角スペースを空けて指定します。
値を書く順は決まっていません。
- 線の種類
- 線の太さ
- 線の色
順に見ていきましょう。
線の種類
borderで使われる線の種類は何通りかあります。
見やすくするため線の太さを6pxにしています。
doubleは線が2本と間隔が必要なので、2px以下では実線になります。
線の太さ、色
太さの指定はpxが無難であろうと思います。
色については、直接カラー名、あるいは16進数表示がよろしいと思います。
プラス1本のボーダー
borderの外にもう1本borderを入れることができます。
htmlソース
<!--====参考====-->
<div class="sample_2">
<p>上の要素</p>
</div>
<div class="sample_3">
<p>borderの外にborder</p>
</div>
スタイルソース
/*====参考====*/
.sample_2 {
width: 100%;
height: 50px;
background: yellow;
margin-bottom: 20px;
}
.sample_3 {
display: block;
padding: 10px;
border: solid 2px pink;
margin-top: 20px;
/*下の2行で外ボーダーを追加できます。*/
outline: solid 3px yellowgreen;
outline-offset: 3px;
}
.sample_3 p {
text-align: left;
}