今回は囲い枠作りの基本をまとめたいと思います。
基本の枠
１．直線の四角い枠
<div style="padding: 10px; border: 3px solid #e3acae; background: #fef9fb;">ここに文章</div>
このコードをHTML編集画面に貼り付けるとこうなります↓
ここに文章
- padding: 10px 余白
- border: 3px solid #e3acae 線の太さ、種類、色
- background: #f8f4e6 背景の色
◆線の種類
1本線 solid
2本線 double
破線 dashed
線なし none
２．角を丸くする
border-radius:を追加
<div style="padding: 10px; border-radius: 5px; border: 3px dashed #f0908d; background: #fdeff2;">ここに文章</div>
このコードをHTML編集画面に貼り付けるとこうなります↓
ここに文章
border-radius: 5px 数字が大きいほど角が丸くなる
３．文章の長さに枠を合わせる
display:inline-block;を追加
<div style="display:inline-block; padding: 10px; border-radius: 5px; border: 3px dashed #f0908d; background: #fdeff2;">ここに文章</div>
このコードをHTML編集画面に貼り付けるとこうなります↓
ここに文章
４．枠の一部だけ色を変える
- border-top 枠の上辺
- border-bottom 枠の下辺
- border-left 枠の左辺
- border-right 枠の右辺
<div style="display:inline-block; padding: 10px; border-left: 5px solid #f0908d; background: #fdeff2;">ここに文章</div>
このコードをHTML編集画面に貼り付けるとこうなります↓
ここに文章
要点まとめ
基本の枠<div style=""></div>
- 直線の四角い枠padding border backgroundの設定
- 角を丸くするborder-radius:
- 文章の長さに枠を合わせるdisplay:inline-block;
- 枠の一部だけ色を変えるborder-top,border-bottom,border-left,border-right
