言語を学ぶ

HTML&CSSでつくる進捗ゲージ

HTML&CSSでつくる進捗ゲージ

チャプター:6

このブックでは、HTMLとCSSを使用して簡単な進捗ゲージを作成します。このようなゲージは汎用性が高く、例えばCODEPREPのマイページ等にも応用されています。

1.HTML構造をつくる

このチャプターでは、ゲージの基となるHTML構造を作成していきます。

30P

2.h1要素の装飾

このチャプターでは タイトル部分であるh1要素の装飾を行います。

30P

3.「bar」の装飾

このチャプターでは、進捗ゲージ全体を囲む要素につけられるクラス「bar」をCSSで装飾していきます。

30P

4.共通部分の装飾

このチャプターでは「進捗部分」「ゲージ部分」に共通する部分の装飾を行っていきます。

30P

5.ゲージ部分の装飾

このチャプターでは、進捗部分を表示するためのゲージ部分の装飾を行っていきます。

30P

6.進捗部分の装飾

このチャプターでは 進捗部分であるクラス名「bar_over」の要素の装飾を行っていきます。

34P