【CSSとHTMLで文法よりも大事なこと】 - Webサイト専門プログラマの言いたい放題

f:id:wp-lesson:20170108153145p:plain

今日もレスポンシブウェブデザインについてレッスンをさせていただきました。
　
ワンソースでレスポンシブなページを作成する一番のメリットは、
どんなデバイスで見ても同じHTMLを表示するのでURLが一本化できることにあります。
　
検索エンジンから見ても、PC用のページとモバイル用のページが同じアドレスなので、
全てのデバイスからのアクセスがページの評価に寄与することになります。
　
モバイルユーザーにも見てもらいたいページは
ワンソースで作るに越したことはありません。
　
さて、その場合に技術的に問題となるのが、
同じHTMLを使っているのにどうやってデバイスごとに異なる見た目にするのか？
ということです。
　
多くの場合、CSS（スタイルシート）を使って解決することができるのですが、
文法だけに注目していると、もっと本質的で大事なことを見失ってしまいます。
　
その結果、
　
とりあえずレスポンシブなページはできるけど制作効率が悪すぎる・・・
　
ということになりかねません。
しかも一度ついた「クセ」というのは、なかなか抜けません。
　
最初にきちんと全体的な概念イメージをとらえて、
その上で「どうやって書くか」という各論を学ぶのが上策です。
　
CSSで大事なのは、文書構造とデザインを徹底的に分離することを忘れないこと。
　
HTMLはそもそも見栄えを整えるためではなく
ページ内のコンテンツの構造を定義するのが目的です。
　
そこに、レイアウトや装飾を担当するCSSをお互いに役割分担をしてリンクさせるから、
保守性が高く、変更に強く拡張しやすいページになるのです。
　
文書構造とデザインを徹底的に分離すれば、
1度作ったページをテンプレートとして
使いまわすことができます。
　
そして、制作経験を重ねる中で得た新しい知識を
テンプレートに追加していくと、
どんどん制作効率は上がっていきます。