1．はじめに

タイトルとして超入門とつけたがここではHTML&CSSについて全くと言っていいほど網羅しておらず、私としてややこしいがwebサイトを作り上げていこうとする際に必須になるであろう知識についてまとめた。申し訳ないが網羅的に学ぼうと訪れた方にはこのページは向いてないので他のサイトを参考にしてほしい。しかしHTML&CSSの基礎をある程度学んだうえで納得できないもしくは理解できない部分がある際にはこのサイトが役に立つと信じている。ここでは大きく3つの重要事項についてまとめた。

2.HTML&CSS

１．margin: 0 auto;とtext-align: center;の違い

この2つは要素を中央寄せにしたいときに使う。2つの大きな違いはインライン要素に使うかブロック要素に使うかということである。margin: 0 auto;の場合は初期値としてコンテンツエリア親要素の100%目いっぱいに広がるので同時にwidthも指定しないと中央寄せが適用されているのかわからない。

２．rgba、opacityの違い

要素を透過させるにはrgbaもしくはopacityを用いる。しかし両方とも同一の働きをするのではなく、それぞれ違いがある。opacityには要素のすべてを透過してしまうという性質があるのに対し、rgbaには背景色のみを透過する性質がある。この2つは場面場面で使い分けなければならない。

３．positionプロパティの使い方

positionプロパティは要素の位置を決定するときに用いる。値の種類にはstatic,relative,absolute,fixedがある。staticは初期値で、absoluteはサイト全体の右上を基準にして、要素を移動させることができるプロパティ、relativeはその要素の親要素に指定することで親要素の右上を基準にして、要素を移動させることができるである。fixedを用いることで常に要素を画面上の指定した位置に固定させておくことができる。これらのプロパティはtop,left,right,bottomを用いて指定する。positionを使用することで要素同士が重なり合うということが発生する。この重なりはz-indexプロパティを使用することでコントロールすることができる。このプロパティの値に数字を指定することでその数字の大きい順に要素が上から配置されていく。position: relative;は子要素の位置を決定する際に基準となる親要素の位置を決定するものであったが、要素の位置の変更に用いることもできる。position: relative;topやleftと同時に指定することでもともとその要素があった位置から指定した分だけずらすことができる。

3．参考

サルワカ https://saruwakakun.com/html-css/basic/relative-absolute-fixed

Webpark http://weboook.blog22.fc2.com/blog-entry-282.html

progate https://prog-8.com/