グラデーション Gradation

• Category column

久々にCSSの最新技術を勉強していて、Webの世界はコンピューター言語によるページ作成がどんどん進化していっているのを実感した。

以前は画像加工に頼っていたグラデーションやぼかしなどもCSSで実現可能になってきており、貼り絵的な旧来の非コンピューター的な作り方はページを表示される上での余計なトランフィクをともなっていたものが、CSSにデザインを集約することで、トランフィクを軽減し、映像などの配信をスムースにさせるネット技術にも繋がるのだろうと思った。

押し付けのデザインではなく、利用者がその閲覧環境にあった見せ方を提示することで、情報格差をなくすとするユニバーサルデザインはそれゆえ固定のイメージにこだわると成り立たなくなるものであり、それこそがコンピューター世界が最も得意とする分野にもなるのだろう。

CSS技術の他、ページの特定の箇所を表示してみせたり、並べ替えが可能になったりというユーザーインターフェイスの技術は覚えるには難易度が高いけど、その技術を知ることが、ページに書かれていることを「知ること」「理解出来ること」「操作出来ること」「永続的に使えること」のウェブアクセシビリティにもなってくるのだろう。

暗くて字が読めない、騒音で音が聞こえない、手がふさがり操作出来ない、急いでいて画像や動画の表示を待っていられない。これらは人間の生活の上であり得ることであり、なおかつ、障がいを持つ者たちと共用出来る不便さなのだから。

CSSのグラデーション設定のサンプルのひとつをとりあえずご紹介しておきます。

/* For WebKit (Safari, Google Chrome etc) */ background: -webkit-gradient(linear, left top, right top, from(#fff), to(#060));
/* For Mozilla/Gecko (Firefox etc) */
background: -moz-linear-gradient(left, #fff, #060);
/* For Internet Explorer 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#FFFFFFFF, endColorstr=#FF006600);
/* For Internet Explorer 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#FFFFFFFF, endColorstr=#FF006600)";

グラデーションのテストです。