【オラ、試しにサイトつくってみただ! #02】ザックリとこうなっています | 乱歩酔歩--Random Walk official blog--

【オラ、試しにサイトつくってみただ! #02】ザックリとこうなっています

須々木です。

連日更新です(ドヤァ。

タイトルを見ての通り、昨日の日記の続きの内容になっているので、読んでいない人はそちらを先にどうぞ~。





さて、今月16日の日記の後半でもあっさり触れていたのですが、本日は、HTMLとかCSSとかJavaScriptとかjQueryって、実際どんなもんなんだよ? どんなことができるんだよ?みたいなことについて、改めて。。

全然知らない人は、言葉で説明されてもよくイメージできないと思うので、実際に昨日のサンプルページで説明していきましょう。

※以下、基本的に、全然知らない人向けの内容です。



まずは復習ですが、16日の日記の後半をすごく簡単にしてもう一度書くと……

■ HTML … 構造を指定する。
■ CSS … デザインを指定する。
■ JavaScript … ブラウザ(閲覧者のコンピューター)で実行する動作を指定する。
■ jQuery … JavaScriptを、よりシンプルな操作でよりリッチに動作させる。



今回のサンプルページでも、

 ① HTMLで構造を指定。
 ② CSSでデザインを指定。
 ③ jQueryでデザインの追加指定や演出の追加指定。


という流れでつくられています。

そうやってできたものが、昨日のサンプルページです。


では、せっかくなので、完成形だけでなく、途中段階もお見せしましょう。







① HTMLだけの状態

サンプルページ:その1(HTMLのみ)

乱歩酔歩-サンプルページ:その1_2_サムネ


ブラウザによって差はあるかもしれませんが、見出しタグ、著作権情報などを書いてあるあるアドレスタグ(IEであればおそらくイタリックになっている)、あとはリンクが張られている箇所をのぞいては、ただの普通サイズの黒い文字が並んでいることと思います。

あと、リストタグのところは、シンプルな「・」をつけられたリストの表示になっていると思います。

これらは、完成版から、CSSとjQueryの指定を削除しただけで、コンテンツ自体はまったくいじっていません。

完全にHTMLだけの状態であり、構造のみを指定した状態です。

※例えば、アドレスタグで指定されている箇所がイタリックになったりするのは、アドレスタグに対して制作者(僕)がデザインの指定をしていないので、ブラウザが定めたルール(ブラウザによる既定のCSS)により勝手にデザインされたということです。





② HTMLとCSSの状態

サンプルページ:その1(HTMLとCSS)

乱歩酔歩-サンプルページ:その1_3_サムネ

一番最初の見出しのところの背景色などが指定され(今回はグラデーションをかけています)、アニメ制作会社のリストがカラフルになっています。

※アニメ制作会社のリストの角が、丸くならずにただの直角になっている人は、うまく表示できていません。ブラウザの設定の「互換表示」を確認してください。

他にも、文章中のリンク部分に点線が表示され、ポインターをあてると色が反転したりされるようになっています。

そして、最下部が著作権情報になっていて、HTMLだけのときには表示されていた文章が消えています。

詳しい仕組みはとりあえず気にせずに、「HTMLだけの状態」と「HTMLとCSSの状態」を見比べてみましょう。

見比べて表示の異なるところは、すべてCSSにより指定したデザインが反映されています。





③ フルバージョン(HTMLとCSSとjQuery)
 ※昨日のサンプルページの状態(完成版)

サンプルページ:その1(フルバージョン)

乱歩酔歩-サンプルページ:その1_サムネ

ページを開いたときに水平線が現れて上下に広がる演出、リンクの円形の整列、「Right」「Left」ボタンを押したときの動作など、「HTMLとCSSの状態」と異なる部分は、すべてjQueryによって追加されたものです。

なんとなく、動きが増えました。








大きくザックリこの3段階でつくっていきますが、どの段階でもかなり劇的に変化します。

各要素や演出に関する説明はここでは省きますが、見比べてみると、なんとなく雰囲気はつかめるのではないでしょうか?

さて、最後にポイントをまとめればこんな感じかと。

 ・ HTMLはシンプルに構造のみ(デザインはしない)
 ・ デザインはできる限りCSS(特に静的な演出)
 ・ さらに高度なことはjQuery(特に動的な演出)



ちなみに、可能な限りCSSやjQueryでデザインをしていくことで、単純なデザイン性、機能性以外にも「メンテナンスのしやすさ」「ページサイズの軽量化」という利点があります。

今回のサンプルページ(HTML、CSS、jQuery)でも、関連するすべてのファイルのサイズは合計157KBです。

圧倒的軽さです。






sho