CSSを使用してHTML要素を配置する

四月 27, 2024

CSSルールを使用すると、HTML要素を必要な場所に正確に配置できます。周囲にある他の要素に対する応答を調整したり、完全に非表示にすることもできます。 CSS配置プロパティの内訳は次のとおりです。

表示：このプロパティは、要素の表示方法を定義します。表示を「なし」に設定すると、要素が完全に非表示になりますが、他の値は、要素が他のプロパティや要素にどのように反応するかを変更できます。たとえば、divはデフォルトで「ブロック」として表示するように設定されています。つまり、長方形オブジェクトとして機能しますが、「display：inline」を使用して、divを強制的に段落のように機能させることができます。または、逆の操作を行い、「display：block」を使用して、段落をdivのように動作させることができます。

位置：要素が周囲の要素にどのように反応するかを定義します。要素はデフォルトで「position：static」を使用します。つまり、HTMLコードに表示される順序で表示されます。「位置：相対」は、要素の静的な位置が計算され、「top」および「left」プロパティで指定したものによってオフセットされることを意味します。他のページ要素は、相対要素がまだ静的な場所にあるかのように動作します。「位置：絶対」要素は静的な位置を無視し、上、左、右、下のプロパティの値のみに基づいて位置を決定します。さらに、他の要素はその要素を無視します（したがって、注意しないと、いくつかの乱雑なオーバーラップが発生する可能性があります）。「位置：固定」は、訪問者がページをスクロールしても要素がその位置を保持することを除いて、「位置：絶対」に似ています。

可視性：要素がページに表示されるかどうかを決定します。「display：none」と「visibility：hidden」の違いは、前者の場合、他のページ要素が不可視オブジェクトが存在しないかのように動作することです。後者では、他の要素が非表示要素の場所を保持します。明らかに、デフォルト設定は「可視」です。

Float：エレメントが他のエレメントの左または右にカスケードするかどうかを設定します（またはデフォルトではカスケードしません）。このプロパティは、相対要素を正しく配置するのに非常に役立ちます。フローティング要素の幅を設定しないと、正しく表示されません。また、1つの要素にfloatを使用する場合、おそらくその周囲のすべての要素にもプロパティを設定する必要があります。

クリア：このプロパティは、「float」プロパティと連動します。要素が他の要素をその周囲に浮かせる方法を決定します。「clear：left」は、他の要素がその左に浮かないことを意味します。「clear：right」は右側をブロックし、「clear：both」はいずれの要素もフロートできないことを意味します。デフォルト設定は「clear：none」です（他の要素がどちらかの側に浮くことができることを意味します）。