Web ページのコーダーは、ハイパーテキスト マークアップ言語を使用して、段落、見出し、リストなど、ページ上の各要素の機能上の目的を Web ブラウザーに伝えます。 HTML 4 以降、Cascading Style Sheets は、それらが何であるかを定義することとは別に、これらの各要素がどのように見えるべきかをブラウザーに伝える方法をコーダーに提供してきました。ページは、携帯電話やデスクトップ コンピューターなどのデバイスの種類ごとに異なる CSS スタイルを持つことができ、コーダーが HTML を変更しなくてもページの外観を変更できます。 CSS プロパティを使用して画像を中央に配置します。

ステップ 1

Web ページで画像を表示する HTML ファイル内の「img」タグを配置します。 「body」タグの間で「h1」タグの後にある必要があります。たとえば、

<本文>

これがテキストです。

幅 170 ピクセル、高さ 50 ピクセルの photo.jpg という名前のイメージを定義します。これは、ページの一番上の見出しの後の最初のものです。

ステップ 2

「margin」CSS 属性を使用して、画像などのページ要素の周囲のスペースを定義します。 margin 属性の "auto" 値は、Web ブラウザーにスペースの量を自動的に決定するように指示します。 は、画像の周囲のスペースがブラウザによって決定されることを定義します。

ステップ 3

ページ要素の表示方法を定義するには、「display」プロパティを使用します。 display プロパティの "block" 値は、要素を独自の行に表示し、その上下にスペースを空けるよう Web ブラウザに指示します。 同じ画像を定義していますが、「display:block;」が追加されています。

ステップ 4

いくつかの異なるブラウザーで Web ページを表示して、画像が適切に中央に配置されていることを確認します。

ヒント

「alt」タグ内に画像の説明を含めます。これにより、視覚障害のある読者がページにアクセスしやすくなり、コードが標準に準拠していることを確認できます。