HTML/CSS 基本の復習

ポイントポイント自分に必要なとこだけをただただ書き出し。

ブロックレベル要素とインライン要素

ブロックレベル要素は並べると、改行される。
インライン要素は並べると、改行されない。
しょっちゅう出てくる<div>はブロックレベル要素

曖昧なイメージで、ブロックライン要素はhtml作成に必ず必要な分。
インライン要素は必ずしも必要でないが、見た目を整えるのに寄与している。

セレクタとプロパティと値

cssの書き方

セレクタ {
   プロパティ : 値 ;
}

class

class1.html

<p class="class1">class1</p>

class1.css

.class1{
  color: red;
}

id

id.html

<p id=id1>id1</p>

id1.css

# id1{
  color: red
}

classの方が一般的なので、とりあえずclass使っておけばOK

リセットCSS

ブラウザ毎の変化を抑えるために必要。

float

要素を指定位置表示。

clearfix

floatの副作用を解決。

clearfix.html

<div class="aaa clearfix"></div>

clearfix.css

.clearfix::after {
  content: "";
  clear: both;
  display: block;
}

リスト

ul 順序なしリスト
ol 順序ありリスト
li リスト中のブロック
list-style: none; 先頭の記号消し

表

table 一番外
th 見出し
tr 横定義
td ブロック

GUI

form 操作フォーム
input 入力フォーム
textarea 広い入力フォーム
placeholder 仮表示文字列
label 見出し

Flexbox(floatと同じ)

justify-content: **; 横並びのしかた
align-items: **; 縦並びのしかた

ブロック配置位置 position 図解があって分かり易いページ

position: absolute; 要素の絶体位置指定(親要素基準)
　※absoluteを使う時は、必ず親要素にはrelativeもしくはfixedを指定しておかねばならないらしい。
position: relative; 要素の相対位置指定(自身の本来の位置基準)
position: fixed; 画面固定(ウィンドウ全体基準)