- 投稿日:2021-03-25T19:58:12+09:00
CSS学習の備忘録(ドットインストール「はじめてのCSS」#4〜#9)
文字フォントを設定する際は「プロパティ」の部分を変更すれば良い。
また背景の色を設定したい場合はプロパティを『background-color』とし、その後に変更したい色のコードを書く。ボックスモデルとは?‥HTMLで書いたそれぞれの要素がブラウザで表示される際の四角い領域のこと。
ボックスモデルはデベロッパーツール内の「computed」ページ内から参照できる。コンテンツの周りの余白を消したい場合は「margin-(消したい場所): 0(px=ピクセル)」と書く。
なお消したい場所を書かなかったら、全ての部分で余白が消えることになる。<div>とは?‥<div>内に入っているコンテンツの幅や余白を自由に設定できるタブである。
後で別の<div>を追加して違うスタイルで設定したい場合もあるので、わかりやすく識別子(特定の内容を別の内容と区別するための名前)をつけることが必要である。
この場合class属性が使われるので、<div class="好きな名前">にする。
CSSのセレクター(どこを編集するかの部分)はclass属性の要素を「.好きな名前」のみで表せる。変更したい領域を中央寄せにしたい場合には、左右のmarginをautoにするという技法が良く使われる。
セレクター内に「margin-right: auto; margin-left auto;」とそれぞれ書くことで自動的に中央寄せにすることができる。Flexboxは自動でレイアウトを作成してくれる仕組みである。
Flexboxの書き方はとても簡単で、レイアウトを調整したコンテンツの親要素内のCSSに「display: flex;」と指定するだけである。