ブログを見てると、枠をうまく使ってるのを見かけますよね
例えば、こんなのとかです
ここは枠の中です2行目
これらは タグを使って作成します
具体的に どうやってるのか 試してみました
枠の指定の仕方です
機能をどんどん追加していく形で、いくつか例を挙げます
< とりあえずシンプルバージョンです >
ここに文字を入れます2行目
<div style=”border: 1px solid;”>ここに文字を入れます1行目
ここに文字を入れます2行目</div>
< 文字の周りに余白を持たせます >
ここに文字を入れます2行目
<div style=”border: 1px solid; padding: 10px;”>ここに文字を入れます1行目
ここに文字を入れます2行目</div>
< 枠線の色を変えます >
ここに文字を入れます2行目
<div style=”border: 1px solid #20a020; padding: 10px;”>ここに文字を入れます1行目
ここに文字を入れます2行目</div>
< 線を太くします >
ここに文字を入れます2行目
<div style=”border: 3px solid #20a020; padding: 10px;”>ここに文字を入れます1行目
ここに文字を入れます2行目</div>
< 角を丸くします(IE8では表示されません) >
ここに文字を入れます2行目
<div style=”border: 3px solid #20a020; padding: 10px; border-radius: 10px;”>ここに文字を入れます1行目
ここに文字を入れます2行目</div>
< 枠線を点線にします >
ここに文字を入れます2行目
<div style=”border: 3px dotted #20a020; padding: 10px; border-radius: 10px;”>ここに文字を入れます1行目
ここに文字を入れます2行目</div>
< 枠内の塗りつぶしをします >
ここに文字を入れます2行目
<div style=”border: 3px dotted #20a020; padding: 10px; border-radius: 10px; background-color: #90c090;”>ここに文字を入れます1行目
ここに文字を入れます2行目</div>
< 横幅を固定します >
ここに文字を入れます2行目
<div style=”border: 3px dotted #20a020; padding: 10px; border-radius: 10px; background-color: #90c090; width: 200px;”>ここに文字を入れます1行目
ここに文字を入れます2行目</div>
< 影を付けます(IE8では表示されません) >
ここに文字を入れます2行目
<div style=”border: 3px dotted #20a020; padding: 10px; border-radius: 10px; background-color: #90c090; width: 200px; box-shadow: 10px 10px 10px #808080;”>ここに文字を入れます1行目
ここに文字を入れます2行目</div>
上記の例をまとめると
・線の太さ 線の種類 線の色
例)border: 1px solid #20a020;
solid:実線
dotted:点線
dashed:破線
double:二重線
none:無し
・文字の周りに余白
例)padding: 10px;
上下左右 10pxの余白です
例)padding: 10px 20px 30px 40px;
上、右、下、左の順に余白を指定します
・枠内の塗りつぶし
例)background-color: #90c090;
・横幅の固定
例)width: 200px;
・枠の角を丸く(IE8は表示しません)
例)border-radius: 10px;
・影を付ける(IE8は表示しません)
例)box-shadow: 10px 10px 10px #808080;
コメント