diff --git a/docs/1-trial-session/03-css/_samples/foo/index.html b/docs/1-trial-session/03-css/_samples/foo/index.html deleted file mode 100644 index 7b0a95807..000000000 --- a/docs/1-trial-session/03-css/_samples/foo/index.html +++ /dev/null @@ -1,20 +0,0 @@ - - - - - Title - - -
- Foo -
- - diff --git a/docs/1-trial-session/03-css/index.mdx b/docs/1-trial-session/03-css/index.mdx index 6ec61b5f0..99557f5bb 100644 --- a/docs/1-trial-session/03-css/index.mdx +++ b/docs/1-trial-session/03-css/index.mdx @@ -142,47 +142,3 @@ HTMLファイルとCSSファイルを分けて作成する場合、`style`属性 2. `.bar button` - -## 演習問題3(発展) - -画像のようなシンプルなボックスを作ってみましょう。 - -![シンプルなボックス](./rounded-box-with-shadow.png) - -シンプルで、よく見かけるデザインですが、様々な指定が必要であることが分かります。次のような点に注意してデザインしてみてください。 - -- グレーの枠線が付いています (border) -- 枠線は角丸になっています (border-radius) -- 枠線の外側に余白があります (margin) -- 枠線の内側にも余白があります (padding) -- ボックスに影がついています (box-shadow) - - - -```html title="index.html" - - - - - - Title - - -
Foo
- - -``` - -```css title="style.css" -#foo { - border: 1px solid #aaa; - border-radius: 10px; - margin: 30px; - padding: 30px; - box-shadow: 0px 0px 2px 1px #aaa; -} -``` - - - -
diff --git a/docs/1-trial-session/03-css/rounded-box-with-shadow.png b/docs/1-trial-session/03-css/rounded-box-with-shadow.png deleted file mode 100644 index 6e4e99460..000000000 Binary files a/docs/1-trial-session/03-css/rounded-box-with-shadow.png and /dev/null differ