CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの高さと幅

Webページをデザインするときは、Webページに表示される要素に特定のサイズを指定することをお勧めします。たとえば、ボックスの高さを特定したり、テキストの行を特定の幅に広げたりすることができます。

そこで、CSSのheightプロパティとwidthプロパティが役立ちます。heightプロパティとwidthプロパティを使用すると、CSSで要素の高さと幅を設定できます。

このチュートリアルでは、CSSの高さと幅のプロパティの基本と、最小および最大の高さと幅のプロパティを使用してレスポンシブ要素を設計する方法について、例を挙げて説明します。このチュートリアルを読み終えると、CSSのheightプロパティとwidthプロパティを使用してWebページ上の要素のサイズを設定するエキスパートになります。

CSSの高さと幅

Webページ上の要素の高さと幅を設定すると、その要素がWebページ上で占めるスペースを定義できます。これは、各要素がニーズに基づいて正しく表示されるように、Webページ上の要素の構造を開発するのに役立ちます。

要素を水平方向と垂直方向にどれだけ伸ばすことができるかを定義するには、それぞれwidthプロパティとheightプロパティを使用できます。

widthプロパティとheightプロパティを使用すると、ボックスのコンテンツ領域に特定の幅と高さを設定できます。これは、幅と高さのプロパティがボックスの内容が持つスペースを制御し、ボックスに設定されたマージンやパディングに影響を与えないことを意味します。

heightプロパティとwidthプロパティは、次の構文を使用します。

height: heightValue;
width: widthValue;

値heightValueおよびwidthValueは、次の値のいずれかを受け入れることができます。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

  • auto：ブラウザが自動的に高さと幅を計算します。
  • 長さ：ボックスの幅または高さ（px、em、remなど）
  • パーセンテージ：要素が表示されるブロックのサイズのパーセンテージとしてのボックスの幅または高さ。
  • 初期：ボックスに指定されたデフォルト値。
  • 継承：要素が表示されるボックスの幅または高さと同じ値。

高さと幅のプロパティの基本がわかったので、これらの各プロパティの実際の例を見てみましょう。

CSSの高さと幅のプロパティ

ThePickledAppleという地元のカフェのウェブサイトをデザインしているとします。このカフェから、ウェブサイトの「About」ページに、カフェの簡単な説明を保存するボックスを作成するように依頼されました。

このボックスは、幅200ピクセル、高さ200ピクセルで、背景が明るい灰色である必要があります。これらの寸法は、Webページに追加する他の要素が実装時に適合するように選択されています。

次のコードを使用してボックスを作成できます。

<html>

<p class="aboutBox">The Pickled Apple, based in Springfield, Illinois, has been proudly serving high-quality teas, specialty coffees, and delicious cakes since 2004.</p>

<style>

.aboutBox {
	height: 200px;
	width: 200px;
	background-color: lightgray;
}

CSSの高さと幅 上記のコードエディタのボタンをクリックして、HTML/CSSコードの出力を確認します。>

コードを分解してみましょう。 HTMLファイルでは、

タグを使用してテキストの段落を作成しました。この

タグのクラス名はaboutBox 、CSSファイルでテキストの段落のスタイルを設定するために使用します。

CSSファイルでは、クラス名がaboutBoxのすべての要素に適用されるスタイルルールを定義しています。 。このスタイルルールは、要素の高さを200ピクセルに設定し、要素の幅を200ピクセルに設定し、要素の背景色を明るい灰色に設定します。

要素の幅を100ピクセルにしたい場合は、widthプロパティを100ピクセルに変更できます。または、要素の高さを300ピクセルにしたい場合は、heightプロパティを300ピクセルに変更できます。

CSSの最小および最大の長さのプロパティ

幅と高さは固定値です。これは、指定した幅と高さが同じままであり、ウィンドウのサイズを変更したり、別のデバイスでWebページを表示したりしても変更されないことを意味します（親のサイズのパーセンテージなどの相対的な高さの値を使用しない限り）エレメント）。

アクセシブルなエクスペリエンスを設計する場合、要素に特定の高さと幅を設定することは現実的ではない可能性があるため、これを理解することが重要です。たとえば、画像の幅を500pxに指定した場合、ユーザーが画面サイズが小さいモバイルデバイスでサイトを表示すると、画像が正しくレンダリングされない可能性があります。

そこで、最小長と最大長の値が出てきます。

要素をさまざまな画面およびビューポートのサイズに適応させるには、min-width、max-width、min-height、およびmax-heightプロパティを使用できます。これらのプロパティを指定すると、幅と高さに指定された値が上書きされます。

min-heightプロパティは、プロパティの最小の高さを定義します。 min-heightが指定されている場合、要素の高さをmin-heightの値より低くすることはできません。 min-widthプロパティは、プロパティの最小幅を定義し、同じように機能します。

同様に、プロパティの最大の高さまたは幅を定義する場合は、それぞれmax-heightおよびmax-widthを使用できます。

以前のカフェの例に戻りましょう。ユーザーの画面のサイズに応じてボックスの幅を変更したいとします。ボックスの最大幅は500pxである必要があり、ボックスは100pxより狭くすることはできません。次のコードを使用して、この目標を達成できます。

<html>

<p class="aboutBox">The Pickled Apple, based in Springfield, Illinois, has been proudly serving high-quality teas, specialty coffees, and delicious cakes since 2004.</p>

<style>

.aboutBox {
	max-width: 500px;
	min-width: 100px;
	background-color: lightgray;
}

CSSの高さと幅 上記のコードエディタのボタンをクリックして、HTML/CSSコードの出力を確認します。>

コードを分解して、どのように機能するかを説明しましょう。 HTMLファイルでは、最初の例と同じテキストを含む

タグの間にテキストの段落を指定しました。このテキストの段落に関連付けられているクラス名はaboutBoxです。 。

CSSファイルでは、aboutBoxに関連付けられた3つのプロパティを指定しています。 クラス。

max-widthプロパティは500pxに設定されています。これは、ボックスの最大幅が500pxであることを意味します。 min-widthプロパティは100pxに設定されています。これは、ユーザーがサイトを表示しているデバイスに関係なく、ボックスが100pxより狭く表示されることはないことを意味します。 background-colorプロパティはlightgrayに設定されています。これにより、ボックスの背景色がライトグレーに設定されます。

このボックスのサイズは、ブラウザのサイズに応じて変わります。したがって、ブラウザウィンドウを小さくすると、それに応じてボックスのサイズが変わります。ただし、ブラウザウィンドウがいくら表示されても、

タグの幅が500pxを超えることはありません。

結論

CSSのheightプロパティとwidthプロパティを使用すると、Webページ上の要素の高さと幅を定義できます。

ただし、これらのプロパティは、要素の高さと幅に固定値を設定します。ブラウザウィンドウのサイズに応じてボックスのサイズを変更する場合は、min-height、min-width、max-height、およびmax-widthプロパティを使用できます。

このチュートリアルでは、例を参照して、CSSでの高さと幅の基本、高さと幅のプロパティの使用方法、および対応する最大と最小の高さと幅のプロパティを使用してWeb上の要素のサイズを設定する方法について説明しました。ページ。これで、エキスパートのように高さと幅のプロパティを使い始める準備が整いました。


  1. CSSのマージンとパディング

    マージンについては、CSSマージンプロパティを使用します。 marginプロパティは、HTML要素の周囲のスペースを定義します。 パディングの場合、パディングプロパティを使用すると、要素のコンテンツとその境界線の間に表示するスペースの量を指定できます。 以下は、CSSでマージンとパディングを表示するコードです- 例 <!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Tahoma, Geneva, Verdan

  2. HTMLで高さと幅の属性を使用するにはどうすればよいですか？

    HTMLのheightandwidth属性は、要素の高さと幅を指定するために使用されます。値はpx、つまりピクセルで設定されます。 heightおよびwidth属性は、次のHTML要素で使用されます。 S。いいえ 要素 属性 属性 1 要素 高さ 幅 2 要素 高さ 幅 3 要素 高さ 幅 4 要素 高さ 幅 5 要素 高さ 幅 6 要素 高さ 幅 7 要素 高さ 幅 HTMLページに画像を追加するには、タグを