HTML & CSS入門

ブラウザがコードをレンダリングする仕組み

ウェブサイトにアクセスすると、私たちは画面に表示された情報を見ることができます。これは、ブラウザがサイトのコードをレンダリング（組み立て）した結果です。ブラウザはコードの情報を使用して、ウェブサイトのコンテンツと構造を表示しています。

ウェブサイトのコードを検証する方法

ウェブサイトのコードが裏側でどのように動作しているかは、コードを検査することで調べることができます。ほとんどのブラウザで、ソースコードを検証、一時的に編集することができます。

Chrome では、2 つの方法でウェブサイトのコードを検証できます：

• 右クリックしてポップアップメニューから [検証] を選択します。
• Control + Shift + I（Windowsの場合）またはCommand + Option + I（Macの場合）を押します。

次に、検証でコードを編集して、ブラウザでレンダリングされるコンテンツを一時的に変更できます。変更を加えるのはローカル(自分の画面)だけなので、ページを更新すると同時に編集は消え、他のサイト訪問者は何も変わっていません。

HTMLとCSS

HTMLはウェブサイトのコンテンツと構造を決定し、CSSはコンテンツのスタイルを決定します。ウェブサイトを家だと想像してみてください。HTMLは家の壁と基盤で、CSSは家のペンキの色です。

HTML

HTMLはウェブサイトのコンテンツを制御し、ページに何があるかをブラウザに伝えます。これには、見出し、段落、リンク、画像などのコンテンツが含まれます。

以前は、ウェブデザイナーはHTMLコンテンツをインラインスタイルで行ごとにスタイル設定する必要がありました。これは面倒で、フォントファミリーやフォントサイズのようなサイト全体のスタイルを更新するのが困難でした。なぜなら、ウェブデザイナーは、オリジナルのフォントファミリーやフォントサイズを使用する各要素を個別に更新しなければならなかったからです。しかし現在では、CSSを使用しています。

CSS

CSSは、ウェブサイトのコンテンツのスタイル（色、枠線、サイズ、位置、タイポグラフィなど）を制御します。CSSは、これまで行ごとに記述されていたいましたが、現代ではスタイル情報をすべて取り込み、別のスタイル・ドキュメントに移動します。そこでは、クラスを使ってHTML要素をグループ化し、より効率的なスタイリングを行うことができます。同じクラスを持つHTML要素は、そのクラスに関連付けられたスタイルが適応されます。また、HTMLタグ（セレクタ）を使って、すべてのH1見出しやすべてのリンクのように、特定の要素グループにスタイルを設定することもできます。

これは検証で確認することができます。CSSファイル内のクラスやHTMLタグに変更を加えると、そのクラスを使っている要素や、そのHTMLタグに関連付けられている要素に影響が及ぶことがわかります。

大きな問題：コードの複雑化

ウェブの黎明期には、デザイナーは最も基本的なタグと属性を知ってるだけで大丈夫でした。しかし時代が流れるにつれ、インターネットは複雑になり、デバイスは変化し、ウェブとの関わり方はより直接的なものになりました。

このようかことが起こるにつれて、再調整が必要になり、構築やデザインの可能性が広がるにつれ、作成のすべてが複雑になっていきました。

ウェブ開発者はウェブサイトを構築するために多くの言語やツール（例：HTML、CSS、JS、Java、コードライブラリ、GitHubのようなバージョン管理など）を使用し、ブラウザ特有の癖、ブラウザのバージョン、デバイスサイズ、画像圧縮、読み込み速度、パフォーマンスの最適化、SEOなど、考慮すべき特定の考慮事項がたくさんあります。このようなリストは増え続け、時にはウェブ開発が達成不可能に感じられることもあります。しかし、そこでWebflowの出番です。

デザインしながら、Webflow が綺麗なコードを生成

HTMLとCSSの概念を理解することは、ウェブデザインの基礎となります。しかし、Webflow のおかげで、HTML と CSS を手作業でコーディングする必要がなくなり、デザイナーや開発者はより効率的にWebサイトを構築できるようになりました。Webflow のキャンバス上でコンテンツを作成、操作することで、ウェブサイトのHTMLやCSS を直接操作することができます。Webflow Designer でのデザインの詳細については、こちらをご覧ください。