Plain Experience – 面白い商品・サービスを紹介するブログです 
こんにちは。CSSで勉強したことを日々まとめています。
今回の記事では、CSSのborder styleをhiddenにすると、
どのような見た目になるのかについて試してみます。
※本記事の内容
- border style hiddenの使い方
- hidden以外のstyleの紹介
ではさっそくみていきましょう！
border styleをhiddenにします。
まずボタン1つのHTMLファイルを作成します。
■HTMLファイル(index.html)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="main.css"> <title>Test</title> </head> <body> <button id="button">ボタン</button> </body> </html> |
この時点では、以下のような見た目になっています。
次に、CSSファイルを作成します。
■CSSファイル(main.css)
|
1 2 3 |
#button { border-style: hidden; } |
borderがなくなります。
補足ですが、以下のCSSも足してみてください。背景色を無くしたり、フォント変えたりしています。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#button { border-style: hidden; /* その他の設定 コピペしてください*/ align-items: center; background-color: white; color: rgb(0, 196, 204); font-family: Open Sans, sans-serif; font-size: 24px; font-weight: 400; } |
border styleはhidden以外も指定することができます。
以下の記事を参考にしてみてください。
おわりに
以上で、border style hiddenのまとめを終わります。
本ブログでは他にもiOSやCSSなどの入門記事を書いているので、
ぜひ参考にしてみてください！
