読者です 読者をやめる 読者になる 読者になる

Webサイト専門プログラマの言いたい放題

元システムエンジニアがサイト制作とプログラミングについて好き放題しゃべります。

【CSSとHTMLで文法よりも大事なこと】

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

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

↓↓↓「自分で作れる力」を身につけたいあなたへ↓↓↓

【1】CODEMYマンツーマンレッスン

codemy-lesson.office-ing.net
⇒30分無料相談あり
⇒知りたいことだけ学べる個人レッスン

▼レッスンの記録をご覧いただけます。
https://www.facebook.com/codemy.lesson/
 

【2】プログラミング講座CODEMY

office-ing.hatenablog.com
⇒動画と個別添削で学べるオンラインレッスン

自分でホームページやプログラムの制作やカスタマイズをできるようなりたい方が
業種・経験・地域を問わず参加されています。

講師実績

業界大手リクルート社が運営する総合学習サイト「おしえるまなべる」
2015年、パソコンジャンルで1位評価
2016年9月「ホームページ作成のツボとコツがゼッタイにわかる本」出版

講師が執筆した本が発売されました!

『ホームページ作成のツボとコツがゼッタイにわかる本』
定価: 2,400円(税別)出版社:秀和システム
 
▼Amazon購入ページはこちら!