HTMLとCSSで構成される一般的なwebページの仕組みを学習します。

webページはどのように作成されるのでしょうか。webページは、インターネットブラウザーが一連の特殊な命令を読み出し、変換することで、表示されています。そのような命令は主に2つの言語、HTMLとCSSで記述されます。

これらの言語の仕様つまりweb標準規格は、World Wide Web Consortium(W3C)で定義されます。ページをどのwebブラウザーでも正しく表示するには、web標準の理解が重要となります。Dreamweaverには最新のweb標準にもとづきwebページを構築できる機能搭載されています。HTMLとCSSの組み合わせでwebページが構築される仕組みを説明します。

anatomy-website_1408x792

HTMLとは何か

webページには、HTMLで定義された構造を基にしてコンテンツが表示されます。コンテンツにはテキスト、画像、リンクのほか、オーディオやビデオも含まれます。ほとんどのHTML要素は、ブラウザーに表示するコンテンツの種類を指定するための、開始タグ<要素名>と終了タグ</要素名>で記述されます。タグはページの構造を定義するため特定の順序で記述されます。以下は、よく用いられる3つのHTMLタグの例です。

  • <h1> - 見出しのテキストを指定し、ページのタイトルによく使用される
  • <p> - 段落テキストを指定し、本文によく使用される
  • <img> - src(ソースファイル)で指定した画像を表示するのに使用される

注意:例として示した図のHTMLでは、タグを明確に示すため、すべて大文字で表記していますが、実際にページを作成する際は、小文字でHTMLタグを記述することをお勧めします。

HTMLとは何か

CSSとは何か

HTMLでwebページの基本構造を定義しましたが、スタイルやレイアウトは細かく設定されていません。最終的には、色やテキストの書式、画像を指定し、ページ内の各要素の配置を整えたいでしょう。そのような場合にHTMLと組み合わせて使用し、webページにスタイルやフォーマットを適用するための言語が CSSです。CSSを使用して、1つまたは複数のHTML要素に対して追加の命令(色の変更、中央揃えなど)を記述します。

CSSを使って3つのHTML要素の外観を変更する例を次に示します。

  • h1 - 見出しのテキストを中央揃えにする
  • p - 段落のテキストを赤、太字、中央揃えにする
  • img - 画像を150x100ピクセルにサイズ変更する
CSSとは何か
11/25/2019

提供元:Jonathan Petersen

このページは役に立ちましたか。