HTMLは習ったことがあるんだけど…
近年は、WORDPRESSをベースにしたホームページ制作サービスが増加しています。
そんな中、ご自分で会社のホームページやご自身のホームページを作ってみよう…そう考えている方、既に作成を進めている方も結構な割合で居るのではないでしょうか？
そういった時、大体の人が最初につまづくのは「CSS」です。
学生時代、情報系の学科に所属した経験のある方なら、「HTMLでホームページを作ろう！」という授業を受けたことがあると思います。あるいは中学・高校でやった、という人も今ではそれなりに居るでしょう。
でも、こういった学校内での授業内容は限られていて、なかなかCSSまで教えてくれるパターンはありません。また、それ以前の問題として教授や先生がきちんと教えられるほど熟知しているかどうか、という運もあり、ますます学習する機会が少ないのが実情です。
そもそもCSSとは何なのか？
CSSは略さずに表記をすると「カスケーディングスタイルシート」が正式な名称です。
ざっくりいうと、「記事の体裁を整えるためのファイル」という扱いです。
とはいっても、これだけだと何の話かわからないかと思います。
WEB文書の規格には、「W3C（World Wide Web Consortium）」という団体が大きく関わっています。実質、この団体が色々な追加要素であったり、タグであったりを策定してきたと言って良いでしょう。
W3Cは、HTML文書に対して大まかに言うと「HTML文書で記事の見た目を設定するのはよくない。『見た目』という要素は記事そのものの品質と関係がないので『見た目』については別の文書で定義すべきである」という見解を持っています。
そこで『見た目』を設定するために存在するのがCSSなのです。
CSSで具体的にはどんなことができる？
例えば、HTMLの<table>タグを使うと、表組が作れます。表組の背景色や文字の色をHTMLで設定すると、こんな感じになります。
<table width="600" border="0" cellspacing="1" cellpadding="3" bgcolor="#999999">
<tr>
<th width="100" bgcolor="#6699FF">業務内容</th>
<td width="485" bgcolor="#FFFFFF">111</td>
</tr>
<tr>
<th bgcolor="#6699FF">対応地域</th>
<td bgcolor="#FFFFFF">東京を中心に関東一円</td>
</tr>
<tr>
<th bgcolor="#6699FF">その他</th>
<td bgcolor="#FFFFFF">パンフレット等も制作します</td>
</tr>
</table>
＜実際の見た目＞
| 業務内容 | ホームページ制作 |
|---|---|
| 対応地域 | 東京を中心に関東一円 |
| その他 | パンフレット等も制作します |
どうでしょうか？いちいち１マスごとに色の設定が書かれています。
この例はたった３行だからあまり大したことがないように見えますが、例えば
「50行必要だし、今後ももっと増える！」とか
「一列ごとに色が交互に変わるようにしてほしい！」
といった要望を聞いたあげく
「色を交互になるよう変えてもらったけど、途中の行を増やしてほしい！」
なんてことも何度も言われた場合、どうでしょう。
結構気が遠くなると思います。
CSSを使うことで、こういった内容を大きく簡略化することができます。
＜CSSも併用した例＞
table.kougo{
background-color:#999;
border-collapse:separate;
border-spacing:1px;
}
table.kougo th{
background-color:#69F;
padding:3px;
}
table.kougo td{
background-color:#FFF;
padding:3px;
}
table.kougo tr:nth-child(even) th{
background-color:#8BF;
}
table.kougo tr:nth-child(even) td{
background-color:#F8F8F8;
}
<table width="600" border="0" class="kougo">
<tr>
<th width="100">業務内容</th>
<td width="485">ホームページ制作</td>
</tr>
<tr>
<th>対応地域</th>
<td>東京を中心に関東一円</td>
</tr>
<tr>
<th>その他</th>
<td>パンフレット等も制作します</td>
</tr>
</table>
| 業務内容 | ホームページ制作 |
|---|---|
| 対応地域 | 東京を中心に関東一円 |
| その他 | パンフレット等も制作します |
どうでしょうか。
CSSの記述が増えた分、書く内容が増えたように見えますが、HTMLのほうは大きく記述が減っています。そして、CSSの記述はちゃんと読み込むことでホームページ全体に適用されます。
つまり、tableが増えれば増えるほど書くべき内容の量は逆転しますし、CSSファイルに「マス目の色を交互に変える」と設定が書かれているため、行数が変動しても勝手に色を変更してくれます。手間がかかりません。
書いておかないと、どんどん運用コストが…
上記はほんの軽い例です。
ホームページを長く運用すればするほど、どんどん記述は増えていきますし、ページ数も際限なく増えていきます。そのたびに、HTMLだけで見た目を整えていたら、時間がいくらあっても足りません。
大手企業のホームページ制作時等では多いところで、数千ページを超えるような規模のものもあり、こういった時にしっかりCSSで下地を作っているかどうかという点は、想像以上に運用コストに大きな差を生みます。
もちろん当社では、本職ならではのノウハウで、スピーディーなサイト運用を可能にしております。規模の増加に伴い、ご自身での運用が難しくなった、根本的な改善を相談したいといった方はぜひご相談下さい！
ホームページ制作を行うなら、
------------------------------------------------
