・div
単体では意味を持たないが、囲った部分をグループ化して幅や余白や背景の色を変更したりできる
スタイリングするための識別子にはclassが使われるので、
div class=”container”
として、名前は自由につけられる
後はcssの方で
.container{
}
と紐付けして中身をいじっていける
・中央揃い
.container{
margin-left: auto;
margin-right: auto;
}
とすると、左右の余白を同じ幅で設定してくれるので中央揃いになる
・Flexbox
情報を横並びにしたいときに使う
親要素の中にプロパティを挿入する
display: flex;
・四角いアイコンを丸く表示する
.icon img{
border-radius: 20px;
}
とすることで角を丸くすることができる
・アイコンに枠を表示する
border-width: 4px; 枠の幅
border-style: solid; 枠の線の種類
border-color: white; 枠の色
このように指定して枠をつけることができる
・infoの中のh1にだけ指定したいとき
.info h1{
}
とすることで、その部分だけ指定して変更することができる
・font-weight: normal;
することで太字だったフォントを普通の太さにすることができる
・list-style-type: none;
とすれば箇条書きの黒丸を消すことができる
・margin: 0;
margin-bottom: 16px;
とすることで元々設定されてたマージンを無くした後にマージンを設定することができる(使うのか?)
・align-items: center;
flexを使ったところにこれを入れることで縦方向に中央揃いさせることができる
・.works > h1
とすることで、直下のh1に対してのみスタイルを適用するよという意味になる
.works > section > h1
こんな感じで使ったりもする
・line-height: 1.8;
これは元の行の高さより1.8倍で表示するという意味になる
◯これではじめてのCSSは終わりです。
ようはHTMLのある括りをCSSのシートに紐付けて、そこにここはこの幅、この色、などを指定するのがCSSなのだなと思いました。
仕組みはわかりやすかったです。
今月の目標はまとめサイトのトップページ風のものをHTMLとCSSを使って作ってみるまでだったのですが、一通り勉強しただけで終わってしまったので土日に少し触って作って仕組みを理解できたらなと思います。
KmagicのHTML 