勉強した項目： HTML/CSS概要
時間： 2:30
内容：
＊学習アウトプットです。なにぶん間違いなんかもあります。気をつけますがその際はご指摘いただけますと幸いです＊
【テキストとボタンの配置】
cssにおける＊は全ての要素において適用の意味
style.css
* {
box-sizing: border-box;
}
これで、paddingのした際に、外殻のサイズは変わらずに内部で余白を作れる。
・colorはフォントの色を指定するプロパティ
・text-alignは、テキストの横方向での位置を指定するためプロパティ centerで中央
・font-sizeは文字通りフォントサイズを指定します。remは標準のフォントサイズを基準
・letter-spacingは文字の間隔を調整するというプロパティ
・display: inline-blockという指定。
inline-blockを使うと、要素を横並びにした上で横幅と高さを指定する
・border-radiusは四角形の角を丸くするためのプロパティ
・text-decoration:none は、通常リンクには下線が引かれるが、不要時はnone
【画像の取り込み】
image folderを作成し、ファイルは一括管理
HTMLのフォルダ`の中に格納
css.styleの方で読み込み設定する
body要素で
style.css
background: url('images/bg.jpg') fixed;
background-size: cover;
を組み込む
背景画像をurlで設定、スクロールで動かないようにするので、fixedで固定
| 値 | 内容 |
|---|---|
| auto | サイズは自動的に決まる |
| contain | 縦横比を保ったまま、範囲内に全ての画像が入るように配置（縦か横に空白ができる） |
| cover | 縦横比を保ったまま、対象範囲を全て埋めるように配置（画像の縦かよこが切れる） |
| 長さ（例：980px） | 縦横を長さで指定 |
| パーセンテージ（例：60%） | 縦横を親要素に対する比率で指定 |
まとめ：html/cssの大まかな概略は理解できてきた。
文書構成や装飾、
コードの記載も１度、実施してみて引いた感じで全体を見直すと構成がみやすい。
ブラウザに落とし込んで、実際の間違いを見つけられるので、際格差が求められる。
事前学習の期間はあと、１週間ある。
まだまだ進めるし、理解できる、頑張ろう！