HTMLを振り返る
私は小さな頃からホームページ作りに興味を持ち、なんとなくHTMLとCSSを習得、なんとなくホームページを作ってきた。
なんとなく習得した故に、当時は段落、ブロック要素、インライン要素なんて概念は持ち合わせていなかった。大学生となり真剣にwebデザインと向き合い高度なコーディングを目の当たりにし、やっと基礎からHTML・CSSを学び始めた。
このページはそんなHTMLとCSSとJavascriptの特徴を目に見える形で比べようという目的で作られた。このページの中にあるiMacの画面にカーソルを持っていくと、カーソルが変化したのにはお気づきだろうか。左上に装備メニューを用意したので、装備を変えてこのページが変化していく様子を楽しんでほしい。
このページを開いてすぐはまるでwikipediaのように白い画面にただの黒いテキストといったシンプルなページがあっただろう。これはただHTMLのみで記述された文書である。全てのwebサイトはこのプレーンな骨組みと内容に装飾していき、出来上がっている。
HTMlは主に文字、画像の配置、ボタンなどのアイテムの配置、段落、構造を記述する。文字や画像を配置するだけでなく、見出しをつけたり、階層を作ったりすることができる。HTMLで道標を作ることで、CSSやJavascriptで装飾する箇所を指定することができる。
たとえばこのページでは、「･･･Review HTML･･･」という文字が一番大きい見出し、「HTMLを振り返る」という文字が二番目に大きな見出しと記述されている他、「HTML」「CSS」「Javascript」はナビゲーションである、というタグを使用していて、本文は記事である、というタグを使用している。このように記述することで、自分がwebサイトを作りやすくなるだけではなく、ロボットが自動でwebサイトを読み込み、人の手で設定しなくてもページの構造が理解できるようになる。
このようにHTMLを構造を考えてコーディングすると、自分、ロボット、閲覧者それぞれのメリットになるのだ。
スタイルシートってなにができるの
ここでは装備メニューで装備できるデコペンキ、構造メガネの説明をしようと思う。
デコペンキを装備すると、色とフォントが変わり、構造メガネを装備すると、ページのレイアウトがガラっと変わる。これらは全てCSSによる変化だ。正確にはアニメーションするためにJavascriptでスタイルの指定を行っているのだが、最終的な形はCSSのみで装飾しても変わらない。
デコペンキは主に要素そのものを装飾するものを詰め込んだ。文字の色や背景色の他、書体や余白も変えることができる。デザイン性と同時に見やすさも向上する。見出しやメニューの書体を変えるだけでかなり見栄えがよくなるだろう。
構造メガネは主に要素の入れ物の位置や表示を変えるCSSを足すことで、ただ縦に並んでいた文章が収納される。タブメニューで切り替えられる仕組みはJavascriptを使っているのだが、レイアウトはCSSだけで指示している。
CSSはHTMLのタグ別に指定できる他、自分でHTMLで記述した要素に名前をつけ、その名前を指定して個別にスタイルを設定することができる。例えば小見出しが複数あった場合でも、まとめて設定することができるので、便利である。また、HTMLタグの中にスタイルを指定することもできる。
憧れの動くホームページ
HTMLとCSSを用いるだけで、美しいwebサイトを作ることは可能だが、さらにJavascriptを使うことで、インタラクティブな動くwebサイトや、効率的にスタイルを指定することができるようになる。
このページではマジカルフォースを装備することで、メニューのアンダーラインが動いたり、タブを切り替えたときに文字がぼわっとするエフェクトがかかるようになる。見た目に楽しいだけでなく、例えば、HTMLのアンダーバーが動いたきに、クリックをすればHTMLの記事が開くんだな、とカーソル以外で判断ができる。文字がふわっとなるエフェクトでは、初めて訪れたwebサイトで、ボタンをクリックしたが変化がわからない、という事態を防ぐことができる。
またJavascriptを用いることで、ウィンドウのサイズや、カーソルの位置などを動的に捉えることができるため、スタイルを数値を指定しなくてもプログラムで指定することができる。更にjQueryを導入することで、Javascript単体では手間がかかるプログラムを短縮して表記することができる。
