こんばんは、こずえです。
プログラミング学習記録9日目です。
今日で「はじめてのCSS入門講座」を一通りみたことになりますね。
所感：スタイルの継承を使おうとしたら親子関係の理解があいまいなことに気が付きました。
目次
合計学習時間
前回までの時間：13.25[h]
今回の時間：3.50[h]
合計時間：16.75[h]
学習内容
はじめてのCSS入門講座
メモ
borderプロパティ
ボックスにひかれている外側の線。(パディングとマージンの間)
border-style
- none：なし
- hidden：表示させない
- solid：実践
- double：二重線
- groove：立体的でくぼんだ線
- ridge：立体的で隆起(りゅうき)した線
- inset：上と左が暗く、下と右が明るく表示され、立体的にくぼんで見える線
- outset：上と左が明るく、下と右が暗く表示され、立体的に隆起して見える線
- dashed：破線(四角い点線)
- dotted：点線(丸い点線)
上下左右に異なるスタイルを適用したい場合はスペースで区切り指定する。
- 2つ：[上] [下]
- 3つ：[上] [左右] [下]
- 4つ：[上] [右] [下] [左]
上下左右に分けて記述することもできる(上であればborder-topというように)。
border-width
太さの指定
- 数値
- キーワード( thin / medium / thick )
border-color
色の指定
角丸を扱う
border-radius
左上・右上・右下・左下の順番でスペース区切りで指定する(左上から時計回り)。
省略された場合点対称の位置と同じ指定(1つのみの場合はすべて)となる。
方向に分けて記述することもできる。
(上であればborder-top-radius、右下であればborder-bottom-right-radius)
また、半径を左右方向と上下方向に分けて指定することができる。
(左右方向の各方向の半径 / 上下方向の各方向の半径)
左右方向と上下方向に分けて指定する場合はborder-xxxx-radiusの記述方法は使用できない点に注意。
影をつける
box-shadow
- 水平方向の影のオフセット値(移動値)
- 垂直方向の影のオフセット値(移動値)
- ぼかしの距離0～
- 広がりの距離 出来上がった影をどれくらい広げるか
- 色
- inset：内側の影にすることができる
書いたコードと表示結果
HTMLソースコード
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSSの練習</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="box"> <div class="rounded_circle"></div> <div class="rounded_circle_half1"></div> <div class="rounded_circle_half2"></div> </div> </body> </html>
CSSソースコード
body {
margin: 0;
}
.box {
width: 600px;
height: 600px;
background-color: yellow;
margin: auto;
position: relative;
}
.rounded_circle {
width: 100%;
height: 100%;
background-color: blue;
z-index: 0;
}
.rounded_circle_half1 {
width: 50%;
height: 50%;
background-color: green;
left: 25%;
top: 25%;
z-index: 1;
}
.rounded_circle_half2 {
width: 25%;
height: 25%;
background-color: red;
left: 37.5%;
top: 37.5%;
z-index: 2;
}
.rounded_circle,
.rounded_circle_half1,
.rounded_circle_half2 {
border-radius: 100% / 100%;
position: absolute;
margin: auto;
box-shadow: 10px 10px 30px 0 rgba(0, 20, 127, .8);
}