今回は、HTMLとCSSについて、初心者編よりも詳しく紐解いていきます！HTMLとCSSの関係を理解しておくと、Web制作をするときに便利です。

ブラウザがコードを解読する仕組みを理解する

Webサイトを訪問したときに表示される画面は、Webサイトの基本的なコードをブラウザが読み取り、最適な表示を判断し決定した結果です。

ウェブサイトコードの検証

ほとんどのブラウザで、ソースコードの閲覧や一時的な編集が可能です。例として、ホームページを観閲し、一時的にタイトル変更をかけてみます。

‍
Chrome DevTools: を開いて操作する場合

  1. 右クリックしてポップアップメニューから「インスペクタ」を選択するか、Control + Shift + I（Windowsの場合）またはCommand + Option + I（Macの場合）を押します
  2. インスペクタでコードを編集して、ブラウザの内容を一時的に変更する

コードとレンダリングコンテンツの関係をテストするのは楽しいことです。ブラウザのローカルにしか変更を加えないので、ページをリフレッシュするとすぐに更新が消えます。

HTMLとCSSの理解

初心者編でも解説しましたが、HTMLはWebサイトのコンテンツの骨組みであり、CSSはコンテンツのデザインやスタイルを指定する指示書のような役割を持ちます。

HTML：ホームページの骨組み

HTMLは、「ページに何が書かれているか」をブラウザに伝えます（これには、見出し、段落、リンク、画像など、目に見えるものすべてが含まれます）。HTMLでは、以前はすべてのコンテンツを一行ごとにスタイル付けしていました。

フォントの書体やカラー、サイズを変更するような簡単なことでも、HTML内部で項目ごとに更新が必要だったのです。その中で基本的な段落要素の書体やフォントサイズなど、サイトの中の要素を1つだけ更新するのは困難でした。そこで、活躍するのがCSSです。

CSS：ホームページのスタイリング

CSS（カスケーディングスタイルシート）は、色、枠、サイズ、位置、タイポグラフィなど、これまでインラインで書かれていたスタイル情報を、指示書として別のシートに移動させたものです。HTML上のあらゆる要素にクラス名（識別するための名称ることで、指定した場所にCSSで指定したスタイルやデザインを反映させることができます。CSSファイルでそのクラスに変更を加えると、そのクラスを使っているすべての要素に影響が及びます。‍

今の時代の課題：コードの複雑化

Webの黎明期には、最も基本的なタグや属性を知るだけで対応可能でした。しかし、時が経ち、インターネットが本格的に発展し始めて技術やデバイスが変化し、よりコードの専門性が高くなりました。デザイナーやデベロッパーが構築できるシステムの可能性が広がるにつれ、舞台裏で管理しなければならないものすべてが複雑になっているのです。‍

‍今日、成功するウェブ開発者になるためには、HTML、CSS、JS、データベース、Sass、JavaScriptライブラリ、CSSライブラリ、ブラウザ特有の癖、ブラウザバージョン、レスポンシブデザイン、GitHub、jQuery、Java、画像圧縮、ロードスピード、最適化、SEOなど。さまざまな知識が必要です。この項目リストは増え続け、すぐウェブ開発への参入は不可能と感じられるでしょう。

ウェブフローがデザインの傍らコードを生成する

ウェブフローのおかげで、上記のような専門知識や、HTMLとCSSを手作業でコーディングする必要はもはやなくなりました。ウェブフローが提供するのは、ウェブサイトをより速く、より効率的に構築するための方法です。キャンバス上でコンテンツを視覚的に作成・操作することで、HTMLやCSSなど画面上のあらゆるものと直接動かすことができます。

ウェブフローでは、プロトタイプをスケッチして出力し、デザインから開発へのつらいハンドオフプロセスを経る代わりに、プロダクションレディのコードを出力することで、操作しているメディアとの直接的なつながりを得ることができます。そのため、コードを書くことなく、どんなに奇抜なデザインやアイデアも現実のものにすることができるのです。