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

CSSフロート

Webページをデザインするときに、特定の要素をページの特定の位置に表示するように決定する場合があります。たとえば、画像を含むボックスをページの右側に表示したい場合があります。

CSSでは、floatプロパティを使用して、要素の配置方法を指定します。フロートを使用して、要素をWebページの左または右に配置できます。

このチュートリアルでは、例を参照して、CSSのfloatプロパティを使用してWebページに要素を配置する方法について説明します。このチュートリアルを読み終えると、CSSを使用したWebページ上の要素のフローティングのエキスパートになります。

CSSフロートプロパティ

floatプロパティを使用して、要素をWebページの左または右に配置できます。たとえば、floatを使用して、Webページのボックス内のテキストの右側に画像を配置できます。

floatプロパティは、ボックスを生成する要素にのみ適用され、Webページに完全に配置されるわけではありません。絶対的に配置された要素は、静的以外の位置を持つ最初の親要素を基準にして配置されたWeb要素です。

floatプロパティで使用される最も一般的な4つの値は次のとおりです。

  • 左（コンテナの左側に要素をフロートさせます）
  • 右（コンテナの右側に要素をフロートさせます）
  • なし（要素にフロートが適用されていません）
  • 継承（要素は、親コンテナに適用されたfloatプロパティを使用してフロートされます）。

floatプロパティの最も一般的な使用法は、CSSで画像をテキストで囲むことです。

CSSフロートの例

地元のStargazer Blazersのウェブサイトをデザインしているとしましょう 星空社会。クラブは、組織の歴史を概説したWebページを作成したいと考えています。このウェブページには、クラブの簡単な説明と、ページの左側に配置された星の画像が含まれている必要があります。

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

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

floatプロパティを使用して、このWebページを作成できます。フロートを適用せずにウェブページに使用する基本的なコードは次のとおりです。

index.html

<div>
<p><img src="https://images.unsplash.com/photo-1465101162946-4377e57745c3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1357&q=80" height="200" width="200" /> The Stargazer Blazers society, founded in 2017, is dedicated to viewing the stars in San Francisco, CA. The society was created after a meeting of two passionate stargazers in the Bay Area, Jeff Holmes and Paula Ingleson, who were looking to find other people with whom to discuss their passion. Today, our organization has over 200 members in the Bay Area, and meets monthly to gaze at the stars and discuss our members' discoveries.
</p>
</div>

私たちのコードは次を返します：

CSSフロート

この例では、画像がテキストの前に表示されており、全体的にページは見た目がよくありません。ただし、floatプロパティを使用すると、画像をテキストの横に配置できます。

画像をテキストの右側に配置するために使用するコードは次のとおりです（これは、星空の社会が要求したものです）：

styles.css

img {
	float: right;
}

コードは次のようになります：

CSSフロート

コードを分解してみましょう。まず、Webページのコードが記述された

を定義しました。次に、

タグを使用して、StargazerBlazersクラブの歴史に関する説明を含むテキストの本文を作成しました。

タグの中には、200×200のサイズの星の画像も含まれています。

Webページのスタイルコードを含むstyles.cssファイルでは、floatを使用しました。画像をテキストの右側にフロートさせる属性。上記の例でわかるように、画像はテキストの右側に配置されています。デフォルトでは、画像はテキストの前に表示されます。

ここで、星空観察クラブから、画像をテキストの左側に配置するように依頼されたとします。このコードを使用してこれを行うことができます：

styles.css

img {
	float: left;
	margin-right: 20px;
}

コードは次のようになります：

CSSフロート

この例では、画像をテキストの左側にフロートさせました。また、margin-right：20px;を指定しました。プロパティ。画像の左側とテキストの間にスペースを作成します。

フロート付きボックスグリッド

floatプロパティを使用すると、並べて表示されるコンテンツのボックスを作成できます。

星空を眺める社会が、3つの画像を並べて表示したいとします。これは、人々が参加した場合に星を見ることができることを示しています。

このタスクを実行するには、次のコードを使用できます。

index.html

<div>
<img src="https://images.unsplash.com/photo-1492446190781-58ac4285911d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1294&q=80" height="200" width="200" class="image" />
<img src="https://images.unsplash.com/photo-1456154875099-97a3a56074d3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1189&q=80" height="200" width="200" class="image" />
<img src="https://images.unsplash.com/photo-1435224668334-0f82ec57b605?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" height="200" width="200" class="image" />
</div>
styles.css

* { box-sizing: border-box };

.image {
	float: left;
	width: 25%;
	padding: 25px;
}

コードは次のようになります：

CSSフロート

コードを分解してみましょう。 HTMLファイルには、3つの画像（タグで表される）を含む

タグがあります。各画像の寸法は200×200で、星の固有の画像にリンクしています。さらに、各画像にはクラスimageが割り当てられます 。

styles.cssファイルでは、次のようになります。

  • ボックスサイズを適用します：border-box;リスト内のすべてのアイテムにスタイルを設定するため、要素のパディングと境界線は、その合計の幅と高さに含まれます。これにより、デフォルトのスペースなしで要素を並べて配置できます。
  • float：left;を使用します。画像を並べて表示します。
  • 幅：25％を使用して、各画像がWebページの幅の25％を占めるようにします。
  • パディングを使用する：25px;各画像の間に25ピクセルのスペースを作成します。

結論

CSS floatプロパティは、コンテナの左側または右側に要素を配置するために使用されます。これにより、テキストやその他の要素をフローティング要素に折り返すことができます。

このチュートリアルでは、例を参照して、CSSのfloat属性を使用して要素をCSSのコンテナーの左右に配置する方法について説明しました。これで、CSSエキスパートのようにfloat属性の使用を開始する準備が整いました。


  1. CSSfloatプロパティを使用して要素を整列します

    CSSのfloatプロパティを使用して要素を整列させるには、次のコードを実行してみてください- 例 <!DOCTYPE html> <html>    <head>       <style>          .demo {             float: right;             width: 200px;

  2. CSSのClearプロパティを使用してFloatをオフにする

    CSS clearプロパティを使用して、フローコンテンツをクリアするfloat要素の側を指定できます。 例 CSSのクリアプロパティの例を見てみましょう- <!DOCTYPE html> <html> <head> <title>CSS Clear</title> <style type="text/css"> .clear {    clear: left; } .yellow{    background-color: #FF8A00; } .red{ &n