前ページの余白を付けた情報を枠線で囲んでみましょう。
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; }