回答編集履歴

2

文法の修正

2017/03/21 01:24

投稿

iss
iss

スコア506

test CHANGED
@@ -18,7 +18,9 @@
18
18
 
19
19
 
20
20
 
21
+ この方法だと装飾用に余計なタグ要素を追加する必要が無く、シンプル&スマートに実装できるかとおもいます。
22
+
21
- 親要素の幅にかかわらず可変するのでレスポンシブにも対応しているかと思います。
23
+ また、親要素の幅にかかわらず可変するのでレスポンシブにも対応しています。
22
24
 
23
25
 
24
26
 

1

文法修正

2017/03/21 01:23

投稿

iss
iss

スコア506

test CHANGED
@@ -2,13 +2,15 @@
2
2
 
3
3
 
4
4
 
5
- 背景画像が敷かれたBOXを`div.bgImg`とした場合に、
5
+ まず、背景画像が敷かれたBOXを`div.bgImg`とした場合に、
6
6
 
7
- `.bgImg`自体を`position:relative`でポジションの起点としたうえで、
7
+ `.bgImg`自体を`position:relative`でポジションの起点とします。
8
8
 
9
- `.bgImg:before`の疑似要素に`border`をを付けたうえで、
10
9
 
10
+
11
+ 次に、`.bgImg:before`の疑似要素に`border`で枠線をつけて、
12
+
11
- `position:absolute`で浮かせて、`top` `right` `bottom` `left`を使って`.bgImg`が持つ最外枠からのピクセル数を指定することで、画像の内側に枠をつけます。
13
+ `position:absolute`、`top` `right` `bottom` `left`を使って`.bgImg`が持つ最外枠からのピクセル数を指定することで、画像の内側に枠をつけます。
12
14
 
13
15
 
14
16