カテゴリー: おぼえがき

最近苦し紛れ、現実逃避でProgateで過去独学でかじっていたHTMLやら何やらを復習しています。
40超えたおっさんだけどマジで転職したい。
今の仕事は精神的にきつ過ぎる。
なので現実逃避。
わかっているようでわかっていなかった部分を覚え書き。

そもそもこれまでの自分はブロック要素とかインライン要素とか知らずにレイアウト組んでいたど素人ということがわかりました…。
感覚派。

ブロック要素を中央揃えするときはwidthとmargin autoを使う。
インライン要素を中央揃えするときはtext-align:center;を使う

.box {
width:300px;
margin:0 auto;
}

横文字の間隔調整は
letter-spacing:10px;

インライン要素はwidth,height,margin,paddingでサイズ調整できない。
margin,paddingは左右のみ指定できる。
ブロック要素、インラインブロック要素は上記の項目で縦横ともに指定できる。
ブロック要素は縦に並び、インラインブロック要素は横に並ぶ。

インライン要素を他要素として扱うには、
display:inline-block;
のようにCSSを設定する。
aやspanなどのインライン要素をブロック要素的に扱う場合に使用する。

今まで知らなかった超初歩的な事。

1つのタグにclassは複数指定できる。
<div class=”btn blue”></div>のように。

opacityは要素の中身すべてを透明にする。
背景色のみを透明にするにはrgbで色指定する。
background-color:rgba(255,255,255,0);

行の高さを指定できる。 line-height:10px;
高さの中心に文字が配置されるため、要素の高さとline-heightの高さを同じにすると、ちょうど中央の高さに配置される。

position:absolute;
画面の左上を起点して要素の位置を指定できる。
top:
left:
などで指定する。
親要素に
position:relative;を設定すると親要素を起点として子要素の位置を設定できる。

ほぼ殴り書き。
後で修正しよう。