CSSの基本的な書き方 ⇒ セレクタ{プロパティ:値;}
※セレクタとはスタイルを適用する対象のこと
①下記を張り付けると、ピンクの囲み枠ができる。
<div style=“padding:20px;width:80%;background:#FEDFE1;border-radius:8px;color:#724938”>
おはヨーグルト。</div>
おはヨーグルト。
② 下記のHTMLを貼り付けても、「おぼっちゃまくん用語一覧」の青とグレーの囲み枠になりません！
なぜ？ ((+_+))
③動画で解説してるよ。
おぼっちゃまくん用語一覧
こんにチワワ。
おはヨーグルト。
HTML
<div style=”margin: 2em 0; background: #f1f1f1; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22); “> <div style=” font-size: 1.2em; background: #5fc2f5; padding: 4px; text-align: center; color: #FFF; font-weight: bold; letter-spacing: 0.05em; “>タイトル入れる</div> <p “padding: 15px 20px; margin: 0;” >文章入れる</p> </div>
|
1 2 3 4 |
<div class="box30"> <div class="box-title">タイトル入れる</div> <p>文章入れる</p> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.box30 { margin: 2em 0; background: #f1f1f1; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22); } .box30 .box-title { font-size: 1.2em; background: #5fc2f5; padding: 4px; text-align: center; color: #FFF; font-weight: bold; letter-spacing: 0.05em; } .box30 p { padding: 15px 20px; margin: 0; } |
ABOUT ME
