自主学習2-5「プロゲートHTML/CSS中級編」

2020年8月22日 2020年9月14日

前回「自主学習2-4」にてプロゲートHTML/CSS初級編を終え、今回は中級編に挑戦します。

contents

プロゲート「HTML/CSS中級編」について

中級編では初級編で作成したwebページよりも、さらにモダンなwebページを作成していきます。

WEBページのレイアウト方法

ホームページ全体のレイアウトを構成する際に、divタグを用いてブロック要素を作っていく方法もあるが、HTML5では<header>と<footer>というタグが予め用意されているので、こちらを使用する。

<body>タグ内に

をそれぞれ記述し、全体のレイアウトを作成する。

ブロック要素、インライン要素、インラインブロック要素

HTMLで定義される要素のうち、bodyタグ内で使用される要素はブロック要素かインライン要素に分類される。この要素の分類をCSSプロパティを用いて「インラインブロック要素」へ変更することができる。

ブロック要素見出し、段落、表など文書を構成する要素で、一つのかたまりとして扱われる。
ブロック要素主にブロックレベル要素の内容部分として用いられる要素で、文章の一部として扱われる。
インラインブロック要素ブロック要素とインライン要素の両方の特徴を持つ。

使用例）<a>タグはインライン要素なので高さや幅の指定が出来ない。これをブロック要素とインライン要素の両方の特徴を持つ「インラインブロック要素」に変更することで、高さや幅の指定が可能になる。これにより、リンクとしてクリックできる範囲がブロック要素まで拡大される。

中級編では要素に動きをつけて表示させたり、背景画像と文字を重ねて表示させ、背景のみ透過させるなど、装飾に関するプロパティを学習することができます。

CSS中級編で学習できるプロパティ一覧

文字の装飾

要素全体の装飾

要素に対する変化

要素の分類

要素の配置

text-alignプロパティを用いて要素の配置を指定する。（インライン要素、インラインブロック要素の配置に用いるプロパティ）※ブロック要素の配置はmarginを用いる。
positionプロパティのposition: absolute;を用いて2つの要素を重ねて表示する。サイト全体の左上部分を基準とし、そこからの位置をtopとleftを用いて指定する。基準位置は変更可能で、position: relative;と指定すると要素の左上部分が基準位置となる。
positionプロパティのposition: fixed;を用いて、常に要素を画面上の指定した位置に固定させておくことができる。（ヘッダーの固定などに利用できる）
z-indexプロパティを用いて要素の重なりの順列を指定。z-indexプロパティはpositionプロパティと併用して用いる。

要素全体の装飾（動きをつける）

transitionプロパティを用いてアニメーションをつける。このプロパティはhoverプロパティと組み合わせて使用する。（カーソルをのせた状態とのせていない状態の両方を指定することで、要素の見た目に変化をつけることができる。）
セレクタ:hoverを用いてカーソルがのった時のCSSを指定する。
セレクタにactiveを指定することで、要素がクリックされている間だけCSSを適用することができる。