ハイパーテキスト マークアップ言語とカスケーディング スタイル シートの紹介

ウェブ開発においては、ハイパーテキストマークアップ言語（HTML）とカスケーディングスタイルシート（CSS）の関係を理解することが不可欠です。HTMLはウェブサイトのフレームワークと内容を形成しますが、CSSは 変換する コンテンツ。Webflow は、デザイナー キャンバスで作成/構築するときにこのコードを作成します。

このセッションでは、次の内容について説明します。

1. ブラウザでのコードレンダリングのプロセス
2. ウェブサイトのコードを調べる方法
3. HTMLとCSS
4. Webflowが整然としたコードを生成しながらデザインを作成する

ブラウザでのレンダリングプロセス

ウェブサイトを閲覧する際、ブラウザはコードを解釈して、ウェブサイトのコンテンツと構造を画面に表示します。

ウェブサイトのコードを調べる

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

Chrome でウェブサイトのコードを検査するには、次の 2 つのオプションがあります。

• 右クリックして選択 検査する コンテキストメニューから
• プレス コントロール + シフト + 私 (Windowsの場合) または 指示 + オプション + 私 (Macの場合)

インスペクタでコードを変更して、ブラウザに表示されるコンテンツを一時的に変更することができます。これらの変更はローカル（つまり、 あなたの ブラウザでのみ表示され、ページを更新すると消えて他のサイト訪問者には見えなくなります。

HTMLとCSS

HTML は Web サイトのコンテンツと構造を定義し、CSS はコンテンツの外観を決定します。Web サイトを住宅としてイメージすると、HTML は構造と基盤を表し、CSS は配色を表します。

ハイパーテキスト マークアップ言語 (HTML)

HTML は Web サイトのコンテンツを管理し、見出し、段落、リンク、画像などのページ要素についてブラウザに通知します。

以前は、Web デザイナーは HTML コンテンツをインライン スタイルで 1 行ずつスタイル設定する必要があり、フォント ファミリやサイズなどのサイト全体のスタイルを更新するのが困難でした。しかし、現在は CSS が活用されています。

カスケード スタイル シート (CSS)

CSS は、Web サイトのコンテンツの外観 (色、境界線、サイズ、配置、タイポグラフィなど) を管理します。CSS は、以前にインラインで適用されたスタイル情報を別のスタイルに統合し、クラスによるグループ スタイルを可能にします。CSS ファイル内のクラスまたは HTML タグに加えられた変更は、関連するすべての要素に反映されます。

課題: コードの複雑さの増大

初期の Web 時代では、デザイナーは基本的なタグと属性に重点を置いていました。テクノロジーが進歩するにつれて、Web の複雑さが増し、オンライン エクスペリエンスもパーソナライズされるようになりました。

こうした変化に適応するには、継続的な教育が必要でした。Web デザインと開発の可能性が広がるにつれ、舞台裏の状況はより複雑になっていきました。

今日、Web 開発者は、ブラウザーの不一致、デバイスのバリエーション、パフォーマンスの向上、SEO などのさまざまな考慮事項に対処しながら、複数の言語とツール (HTML、CSS、JS、Java、コード ライブラリ、GitHub などのバージョン管理など) を使用しています。このリストは増え続けるため、Web 開発が困難になることもありますが、そこで Webflow が登場します。

Webflow がきちんとしたコーディングを自動化しながらコンセプトを設計する

HTML と CSS の原則を理解することは、Web デザインのコア フレームワークを形成するため非常に重要です。しかし、Webflow のおかげで、手動での HTML と CSS のコーディングは過去のものになりました。

Webflow を使用すると、Web デザイナーや開発者は、Webflow キャンバス上のコンテンツを操作して、Web サイトの運用可能なコード (HTML と CSS) に直接影響を与えることで、より効率的に Web サイトを作成できます。Webflow デザイナーでの設計について詳しくは、こちらをご覧ください。