CSSを使用してWebページの外観を指定します。
Webページコーダーは、ハイパーテキストマークアップ言語を使用して、段落、見出し、リストなど、ページ上の各要素の機能目的をWebブラウザーに通知します。 HTML 4以降、カスケードスタイルシートは、それらが何であるかを定義することとは別に、これらの各要素がどのように見えるかをブラウザーに指示する方法をコーダーに提供してきました。 ページには、携帯電話やデスクトップコンピューターなど、デバイスの種類ごとに異なるCSSスタイルを設定できるため、コーダーがHTMLを変更しなくてもページの外観を変更できます。 CSSプロパティを使用して、画像を中央に配置します。
ステップ1
Webページで画像を表示するHTMLファイルに「img」タグを配置します。 「body」タグの間と「h1」タグの後にある必要があります。 例えば、
今日のビデオ
これはあなたのテキストです。
幅170ピクセル、高さ50ピクセルのphoto.jpgという名前の画像を定義します。 これは、ページの一番上の見出しの後の最初のものです。
ステップ2
「マージン」CSS属性を使用して、画像などのページ要素の周囲のスペースを定義します。 margin属性の「auto」値は、スペースの量を自動的に決定するようにWebブラウザーに指示します。 そう、 画像の周囲のスペースがブラウザによって決定されることを定義します。
ステップ3
「display」プロパティを使用して、ページ要素の表示方法を定義します。 displayプロパティの "block"値は、Webブラウザーに、要素をその上下にスペースを入れて独自の行に表示するように指示します。 そう、 同じ画像を定義しますが、「display：block;」を追加します。 今それを独自の行に配置します。
ステップ4
いくつかの異なるブラウザでWebページを表示して、画像が適切に中央に配置されていることを確認します。
ヒント
「alt」タグ内に画像の説明を含めます。 これにより、視覚障害のある読者がページにアクセスしやすくなり、コードが標準に準拠していることが保証されます。
