2013年11月3日日曜日

HTML5・CSS3・Javascriptの表現力は凄いです。どこまでチューニングできるかが問題になります。

あっという間に3連休の中日になってしまいました。私はというと飽きもせずにパソコンの前にへばりついて3つのサイトの基盤となる構造の定義を試行錯誤を繰り返しながら続けているのであります。
今のところ背景画像などは一切使用しないで、どこまでCSS3を使用して表現できるのかを徹底して研究しているのであります。HTML5とCSS3になってからは、その表現力が以前とは比較にならないぐらいに豊かになったと感じます。
その一つがグラデーションが使えるようになったこと、またDIVタグに角丸が定義できること、それに影が簡単につけられることです。嗚呼それから忘れてならないのが、WEBフォントを使えることですね。WEBフォントは残念ながら英語のものしかまだ存在しないということであります。日本語のWEBフォントが登場してくるのも時間の問題のように思われます。
元々IE8以下のバージョンは切り捨てるつもりでいたのですが、世の中には賢い人がごちゃまんといて、それらのバージョンにもきっちりとJavaScriptを使用して対応できるようにしてくれているんですね。信じられないぐらいに素晴らしいことだと思います。
DreamWeaverを使い始めた時に一番最初に???が合計362個ぐらいが浮かんだのがグリッドの定義でありました。デフォルトではスマホ用は4本、タブレットは8本、ディスクトップは12本なのです。これは初期設定で変更できます。これは何のためにあるのか最初まったくわかりませんでした。
でも横に長いメニューをリストタグを使って作成してわかったのです。数字からいえばメニューが4個あるのが一番理解しやすいでしょう。まずはスマホの画面では縦に並ぶだけですから、長さを調整しません。タブレットの場合は8本のグリッドがありますから、一つのメニューの幅を2グリッドに設定します。すると、上に1個移動の矢印をクリックするだけで見事に横一列に4個のメニューが並ぶわけであります。ディスクトップの場合は均等な幅にするために一つのメニューを3グリッドに指定しますと。3✖4=12グリッドに見事に並んでしまうのであります。これを応用しますと、段組がかなり楽に設定できるわけであります。ディスクトップの場合は画面が広いので横に3段にし、タブレットの場合は横に2段組スマホの場合は1つということになります。ひとつの段組の幅はスマホに表示できる4グリッドに設定しておかなければいけませんけれども。

昨日は一つのサイトの基本定義がかなりの完成度を持つまでに仕上がりました。本日は退屈でありますけれども、他の2つのサイトにコピーなど一切しないで、最初からコツコツと作業を続けて同じレベルまで引き上げていこうと考えています。たぶんそれは何もアクシデントがなければ午前中で終わるはずであります。
コメントを投稿