Dressを始める第一歩、CSSの正体とメリットを知ろう

新しくなったDress。UIが一新されて使いやすくなりました。スタイルシート（CSS)の設定がよりわかりやすくできるようになったので、デザインの幅が一段と広がります。これまで使っていた方も、使ってみたいけれどなんとなく手をつけていなかったという方にも、ぜひDreesの機能を活用してもらいたいので、今回から3回の連載で「デザイナーが使うDress機能について」お伝えしていきたいと思います。

そもそも、Dressで設定するCSSって何？

CSSとは、(Cascading Style Sheets カスケーディングスタイルシート）の略で、Webページのスタイル（装飾）を指定する言語です。普段何気なくみているインターネットのホームページなどに使われていて、HTMLやXHTMLと組み合わせて使用します。HTMLで要素の意味や構造を作り、一般的にはCSSでそれらを飾り付けするというのが一般的な使い方です。

BiNDのユーザーの方はHTMLタグを目にする機会が少ないので、既にCSSが使用されていることにも気がついていなかったかもしれませんね。でも、CSSが適用されないWebページって実は上記のような本当にシンプルな見た目なのです。

もちろん、タグで色やサイズなどの指定をすることもできますし、Webサイトが出始めたばかりの頃はむしろそれが普通でした。 こんな感じのタグでコメントなど囲んだりテーブルタグでレイアウトを作ったりと、長～いタグを手打ちしていた方もいらっしゃるのでは？

これは「HTMLは構造を定義するもの」として考えた場合、構造以外の余計なタグが多く入ることになります。また、tableタグだけでブラウザのレイアウトを作っていたやり方は、ブラウザの種類が多くあったり、スマホやタブレットで見る機会が増えた現在はそれぞれに調整してあげることができません。作った側が思ったように相手に見せることができないのです。

現在では、タグはスッキリ綺麗に整理して文章構造のみにして、スタイリングが必要な箇所は別にスタイルシート(CSS)を読み込んで装飾をすることがSEO面からみてもスタンダードです。

CSSを使うメリット

HTML（XHTML）をスッキリと簡潔に記述し、視覚に頼るスタイリングの表現をCSSで指定することでどのような効果があるのでしょうか？

制作も管理も効率がよくなる

CSSを使うことでの大きなメリットは作業効率が上がることですね。Webサイトの多くは複数ページ存在すると思います。1ページ1ページHTMLを書き換えて・・・となると時間も手間も要します。装飾にルールを決めてあげてHTMLを記述し、CSSだけを書き換えれば、全てのページに反映してコントロールできると制作時はもちろん、管理も楽ですよね。

レスポンシブデザインやブラウザへの対応が可能

昨今は不可避となりつつある、スマホやタブレットへの対応をさせるレスポンシブデザイン。Webサイトへのアクセスも、スマホからの割合が半分を超えてきています。BiNDでは、このPCとスマホへの見え方の調整も簡単にできていると思います。そこもCSSが大きくかかわっているのです。様々なブラウザサイズへ対応させるレイアウト調整もいくつものパターンをCSSで設定できます。制作側としては、見た目も思い通りに伝えたいですよね。

ページが軽くなりSEOにも有利とされる

複雑に長く記述されているHTML（XHTML）よりもスッキリと簡潔に記述されていて、適切にCSSが使われていることを検索エンジンが好むと言われています。適切な構造になっているものや簡潔に記述されているファイルは、シンプルなので読み込みも速くなります。Googleはサイトの読み込みスピードも検索エンジンの評価の1つにしています。

デザインも効果的にできる

HTML（XHTML）のタグでは表現できなかったデザインも、CSSで設定することが可能です。使っている画像も、PCで見た時とスマホで見た時でサイズの調整ができます。背景に画像を入れることなくデザインもできるので、画像を多用しなくても表現の幅が広がります。画像が減れば、読み込みも早くなりますので前述したメリットでもあります。

最後に

CSSを用いることによって、Web制作に大きなメリットがあることがわかりました。BiNDユーザーさんは実はあまりそこを意識せず、知らないうちにこうした技術を使っている方もいらっしゃいますね。

Webの世界は技術革新のスピードが早いので、いかにいいデザインのものをその時のWeb標準に合わせて制作していけるかということ、また、検索システムに対応させるということも作り手としては頭が痛い部分ではあります。もちろん、Webを作ることはこうした技術だけのことではなく、人の想いも大切です。こうした技術を用いつつ、みなさんの個性や想いもきちんと伝わるサイトを作ってみてくださいね。

次回は、BiNDの新しくなったDressを使って、どんなことができるのか？実際にDressの活用と設定をご紹介していきたいと思います。
Dressを使ってサイトを作ってみる