【画像でわかる】HTMLとCSSの役割

 

【画像でわかる】HTMLとCSSの役割

 

【画像でわかる】HTMLとCSSの役割

※クリックで拡大できます 

 

以前、WEBサイトのデザインはHTMLとCSSでできているという記事を書きました。

HTMLがサイトの骨組み、CSSは肉付けです。

 

今回はイメージつきでCSSがいかに大切か、ということをご紹介したいと思います。

 

↓HTMLとCSSの基本はこちら↓ 

www.blog.biz-thinking-k.com

  

【この記事を読むメリット 】

  • HTMLとCSSの担当範囲がわかる
  • CSSの重要性がわかる

 

HTMLとCSSの担当範囲がわかるとデザインのブラッシュアップがはかどります。

 

それでは今回のコンテンツです。

 

 

CSSがない世界でWEBサイトはこうなる

アイキャッチの画像で左にあった、HTMLのみの画像がこちらです。

 

先日テザリングの電波が悪いところで作業をしていたときに、CSSの読み込みができなかった画面です。

 【画像でわかる】HTMLとCSSの役割

 

そしてこちらが本来表示されるはずのHTML + CSSの画面です。

 

【画像でわかる】HTMLとCSSの役割

 

いかがでしょうか。

 

よく言えば斬新、悪く言うと何もない状態ですね。

これがCSSのない世界です。

 

これは逆に新しいかも。

 

 

CSSがないとできないこと

CSSがないとできないことを知るために、1枚目と2枚目の違いをみて行きましょう。

アイキャッチの画像を再掲します。

 

【画像でわかる】HTMLとCSSの役割

 

  • 背景の色がない
  • 文字の色がない
  • 配置が違う
  • 画像の大きさが違う
  • %のバーがない
  • チェックボックスの見た目が違う
  • 「DONE!!」の見た目が違う
  • more detailの前の「i」マーク有無が違う

 

このようなところかと思います。

これが、(サンプルのページでは)CSSがないとできないことです。

 

見た目に関する、

 

  • 配置
  • 大きさ
  • (画像ファイルを使わない)イメージの描画

 

CSSが情報を持っているため、CSSがなくなるとシンプルな骨組みだけになってしまうのです。

 

CSSはとても大事。

 

 

HTMLだけでできること

では、今度はHTMLだけになってしまったときにも、できることをみて行きます。

<>の中はHTMLのコードです。

 

  • 文章が読める
  • 段落がわかる・・・<p>または<li>など
  • リンクが使える・・・<a>
  • (画像ファイルがあれば)画像が読み込める・・・<img>
  • 部品(チェックボックス)は置ける・・・<input type="checkbox">

 

このように、文章本来の骨組みの部分はHTMLだけでもわかるようになっています。

CSSがなくても、サイトの機能・目的自体は達成できそうですね。

 

壁紙の貼っていない、家具のない部屋というイメージ。住むことはできるけど不便かな。

 

 

CSSは閲覧者への心配り

HTMLだけでもなんとかサイトは機能しそうですが、なかなか見づらくイメージも持ちずらそうです。

 

CSSで配置を整えたり、強調色をつけてあげることで、より閲覧者に見やすいサイトを作ることができます。

 

サイトの付加価値としてデザインをよくするため、CSSのアレンジに取り組まれてみてもよいかもしれませんね。

 

今回もご覧くださり、ありがとうございました。

 

このブログははてなブログで運営しています。
スター・ブックマーク・読者登録いただけると励みになります。
 

 

2019.6.24 公開