HTMLとCSSで何が作れるのか！具体例を詳しく紹介します。
まず、下記の基本をおさえたうえで、実践例を学んでいきましょう。
前章で学んだように、HTMLはWebサイト上で文字を表示するなど文章構造を決定する役割があります。また、CSSは色をつけ加えたり、図形を描くなど文書のレイアウトや装飾といった見た目を指定するための言語です。
この基礎を抑えたうえで、これら２言語を用いてどんなWebシステムが作ることができるのか見ていきましょう。
まずは基本的なテキストと図形のデザインです。まずはHTMLのタグにidまたはclass属性を設定しましょう。下記のようにCSSでcolorやfont-sizeなどを指定すれば完成です。図形は要素に高さと色を設定すれば作成できます。
続いて、登録ページなどに用いられるパーツです。上の３つはHTMLのデフォルトのUI，下の２つはCSSを用いて作ったボタンです。特に下２つはCSSで#id:focus{}内のデザインを指定し、クリックされたときにデザインを変更させています。
３つ目はデザインは２の延長線上とも言えます。要素をクリックすると動かしたり、形を変形させることができます。
最後に紹介するのは、ボタンに関係なく常に動作し続けるアニメーションです。