あした思い出すよう

あさってもその次も

枠を試すだけのページ CSSデザインとHTML編集

 

[box1]

囲いためし01

.box_ka01 {
padding: 20px;
background: #fff;
border: 1px #dbdcdd solid;
}

 

[box2]

・1より太くborder: 20px

囲いためし02

.box_ka02 {
padding: 1px;
background: #fff;
border: 20px #dbdcdd solid;
}

 

padding変更と改行

囲いためし03
ああ

.box_ka03 {
padding: 20px;
background: #fff;
border: 20px #dbdcdd solid;
}

 

↓「編集見たまま」の状態で改行すると「HTML編集」内では、

f:id:dokosuke:20170416113321p:plain

この用になりboxが重なる。

そのため<br>を含む文章を予め作成しておきHTML編集で貼り付けた方がやりやすい。

囲いためし03
ああ

 

以下うまくいかないメモ

・枠を少し右に

(このままだと右側部分が本文枠外に50px分はみ出す)

 →全体が右に50pxズレる

{
padding: 20px;
background: #fff;
border: 20px #dbdcdd solid;
position: relative; left: 50px;
}