フロートと列を使用してCSSでコンテンツをレイアウトする方法

提供：Dev Guides
移動先:案内、検索

著者は、 Diversity in Tech Fund を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。

序章

Web上のレイアウトを操作する方法はたくさんあります。 最新のアプローチでは、 CSSグリッドおよびフレックスボックスプロパティを使用して、多くのWebレイアウトを作成する傾向があります。 ただし、GridとFlexboxが存在する前は、Web開発者はfloatとcolumnsのプロパティに大きく依存していました。 floatプロパティは、インライン要素がフローティング要素をラップできるようにするために使用され、columnは、テキストを列に配置するためのパラメーターを設定します。 これらのプロパティには、GridとFlexboxのどちらも複製できないプロパティもあるため、このレイアウト方法を学習すると、デザイナーの一連のスキルにオプションと柔軟性を追加できます。

このチュートリアルでは、floatおよびcolumnsプロパティを使用して、さまざまなレイアウトスタイルと効果を作成します。 floatプロパティを使用して、プルクォートと画像をフロートさせ、コンテンツをそれらの要素にラップさせます。 次に、columnsプロパティを使用して、垂直方向に長いコンテンツを調整し、水平軸全体に広げます。 さらに、さまざまなスタイルを適用するために作業するときに、レスポンシブWebデザインの概念と方法について説明します。

前提条件

初期HTMLとCSSの設定

このセクションでは、チュートリアル全体で使用されるベースHTMLとCSSを設定します。 CupcakeIpsumのデモテキストコンテンツとGoogleFontsのフォントComfortaaを使用します。

まず、テキストエディタでindex.htmlファイルを開きます。 次に、次のHTMLをファイルに追加します。

index.html 

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Cupcake Layouts</title>
    <link rel="preconnect" href="https://fonts.gstatic.com"> 
    <link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>

  </body>
</html>

<head>要素内で定義されている多くのページ設定があります。 最初の<meta>要素は、テキストに使用する文字セットを定義します。 このように、アクセント記号などのほとんどの特殊文字は、特別なHTMLコードなしでレンダリングされます。 2番目の<meta>要素は、デバイスの幅をコンテンツの幅として扱うようにブラウザー（特にモバイルブラウザー）に指示します。 それ以外の場合、ブラウザは960ピクセルのデスクトップ幅をシミュレートします。 <title>要素は、ブラウザにページのタイトルを提供します。 <link>要素はページスタイルで読み込まれます。最初の2つはGoogleFonts からのフォントComfortaaで読み込まれ、最後の2つはこのチュートリアルで作成するスタイルを読み込みます。

次に、ページのスタイルを設定するコンテンツが必要になります。 Cupcake Ipsum のサンプルコンテンツをフィラーコピーとして使用して、スタイルを操作します。 チュートリアル全体を通して、新しいコードが強調表示されます。

テキストエディタでindex.htmlに戻り、次のコードブロックから強調表示されたHTMLを追加します。

index.html 

<!doctype html>
<html>
  <head>
    ...
  </head>
  <body>
    <article>
      <h1>Carrot Cake Pie Toffee Cheesecake</h1>

      <p>Gummi bears powder tootsie roll biscuit. Icing jelly-o tootsie roll powder pie dessert biscuit tiramisu. Jelly beans pudding lemon drops sesame snaps jujubes sesame snaps gummi bears tiramisu. Apple pie danish soufflé soufflé cupcake cookie donut. Cookie gummies powder dragée powder chocolate bar muffin jelly marshmallow. Cheesecake dessert chocolate bar chocolate cake gingerbread chocolate bar gingerbread wafer brownie. Bear claw cake sugar plum muffin candy canes tart cheesecake croissant candy canes. Gummi bears carrot cake sweet chocolate. Carrot cake cake sweet bear claw. Gummi bears chocolate pie croissant chocolate cake bear claw dragée.</p>
  
      <p>Tootsie roll cotton candy cake tiramisu pastry. Croissant oat cake ice cream dragée sweet roll soufflé marshmallow powder marzipan. Lemon drops cake bear claw cake sweet lollipop. Lollipop toffee liquorice apple pie gingerbread pastry tiramisu.</p>
  
      <h2>Jelly Beans Wafer Apple Pie Icing</h2>
  
      <p>Jelly cotton candy cake pastry carrot cake. Topping icing danish. Lollipop sesame snaps muffin bonbon icing. Lollipop chocolate bar jelly-o sweet roll. Topping bear claw sweet. Apple pie bonbon sweet lemon drops caramels topping pastry. Biscuit jelly tootsie roll cookie tiramisu cotton candy. Icing chocolate cake liquorice ice cream sesame snaps cupcake chocolate bar pudding gingerbread. Donut toffee ice cream chocolate biscuit.</p>

      <p>Carrot cake pie halvah toffee cheesecake chocolate cake gingerbread liquorice. Marshmallow danish candy fruitcake chocolate dessert. Bear claw chocolate bar sugar plum pudding cake cheesecake sweet. Marzipan lemon drops croissant gummies. Dessert carrot cake carrot cake cookie candy canes toffee. Biscuit bear claw candy canes muffin. Lollipop gummies tart danish tart sugar plum biscuit. Lemon drops muffin sugar plum sweet. Cotton candy pastry topping caramels gummies carrot cake marzipan tiramisu sesame snaps.</p>

      <p>Ice cream donut cookie. Donut icing cookie sweet roll topping cookie. Jelly beans marzipan jujubes jelly beans ice cream marzipan apple pie cake. Sweet croissant sweet roll carrot cake oat cake tiramisu ice cream wafer wafer. Candy canes jelly beans toffee danish. Liquorice donut macaroon caramels. Donut pie cupcake gummies. Icing jujubes pudding apple pie pastry muffin sweet roll ice cream chocolate bar. Liquorice icing sugar plum marshmallow icing.</p>

      <h2>Jelly Sugar Plum Chocolate Danish</h2>

      <p>Topping marzipan sesame snaps soufflé chupa chups cookie wafer cupcake. Jelly beans lollipop jelly beans. Chocolate cake lemon drops chupa chups candy icing tootsie roll danish liquorice. Gummies danish dragée apple pie jelly pie topping icing tootsie roll. </p>
    
      <p>Apple pie bear claw muffin tiramisu gummi bears cake muffin. Candy canes oat cake croissant cake liquorice topping halvah dessert cheesecake. Candy fruitcake muffin. Cookie oat cake gummies brownie dessert candy canes icing. Soufflé chocolate cake pastry toffee cheesecake macaroon liquorice gummi bears. Halvah tiramisu jujubes. Bear claw candy danish. Macaroon chocolate wafer soufflé biscuit. Bear claw biscuit sesame snaps biscuit liquorice sweet roll lollipop. Marshmallow bear claw dragée icing liquorice candy donut chupa chups. Halvah dessert bonbon cupcake cupcake sugar plum cotton candy toffee muffin. Bonbon gummi bears jujubes chupa chups oat cake candy canes.</p>
    
      <p>Gummies bonbon marzipan icing pudding. Jujubes croissant carrot cake. Pastry halvah pudding toffee. Lemon drops gingerbread chocolate apple pie jelly cheesecake.</p>

      <p>Fruitcake dessert chocolate cupcake carrot cake dessert candy canes chocolate soufflé. Cookie cupcake marzipan sesame snaps biscuit tart pie jelly-o. Halvah tiramisu gummies biscuit powder donut. Chocolate cake bear claw macaroon.</p>

      <h2>Gingerbread Macaroon Fruitcake</h2>

      <p>Jelly chocolate gummies cupcake liquorice chocolate. Sugar plum donut tiramisu muffin chupa chups. Cake caramels fruitcake jelly beans pudding I love pie lollipop jelly beans. Gummi bears cheesecake dragée I love fruitcake sesame snaps I love. Apple pie muffin donut. Fruitcake donut chocolate bar cotton candy topping candy macaroon I love. Fruitcake sesame snaps jelly-o. Tart wafer sugar plum I love apple pie biscuit. Pastry sesame snaps tart. Apple pie gingerbread chocolate candy canes.</p>

      <p>I love cake sweet roll toffee lemon drops bonbon sweet. Oat cake lemon drops candy canes topping macaroon.</p>

      <p>Sweet cotton candy danish. Lollipop bear claw pudding carrot cake. Gummi bears candy canes chocolate cake chupa chups. Sugar plum jelly cake cookie cheesecake croissant muffin carrot cake. Pudding I love liquorice jelly-o caramels I love sweet roll bonbon oat cake. Caramels gummi bears gingerbread.</p>
    </article>
  <body>
</html>

これらの追加をindex.htmlファイルに保存してから、Webブラウザーで開きます。 次の画像に示すように、コンテンツはブラウザのデフォルトスタイルを使用します。

index.htmlと同じフォルダにstyles.cssというファイルを作成し、テキストエディタで開きます。 このファイルには、チュートリアル全体で使用されるすべてのスタイルが含まれます。 最初のスタイルのセットは、後で構築する一般的な美学を適用します。 次のコードブロックのCSSをstyles.cssファイルに適用します。

styles.css 

body {
  font: 100%/1.5 Comfortaa, sans-serif;
  color: hsl(300, 100%, 10%);
  background-color: hsl(300, 100%, 98%);
}

article {
  width: 90%;
  max-width: 75ch;
  margin: 2rem auto;
}

h1 {
  font-size: 1.75rem;
  color: hsl(204, 100%, 29%);
  margin: 1em 0  0.5em;
}

h2 {
  font-size: 1.5rem;
  color: hsl(204, 100%, 29%);
  margin: 1em 0 0.5em;
}

これらのスタイルは、bodyセレクターの省略形fontプロパティを使用して、テキストの行間の新しいデフォルトのフォントファミリと行の高さを設定する、最小限のスタイルのセットを追加します。 articleセレクターに設定されたスタイルにより、コンテナーの幅は全画面幅よりもわずかに小さくなりますが、そのコンテンツはmarginプロパティがautoに設定された状態で中央に配置されます。左と右の値。 articleにも、75chの最大値があります。これは、設定されたfont-size値のゼロ文字75文字までしか広くならないことを意味します。 最後に、h1およびh2セレクターは、それぞれに新しいfont-size、color、およびmarginを設定します。

変更内容をstyles.cssに保存し、Webブラウザでindex.htmlを更新します。 次の画像は、これらの新しい基本スタイルがブラウザにどのように表示されるかを示しています。

このセクションでは、floatおよびcolumnsコンテンツの追加を開始するために必要なベースHTMLとCSSを設定します。 次のセクションでは、浮かぶブロック引用符を作成して、コンテンツをラップアラウンドできるようにします。 また、コンテンツがフローティング要素をラップするのを防ぐ水平方向のルールラインを作成します。

フローティングコンテンツ

次に、<blockquote>要素を追加し、floatプロパティを適用して、コンテンツをフローティングコンテンツにラップアラウンドさせます。

引用コンテンツを作成するには、テキストエディタでindex.htmlを開きます。 最初の<p>コンテンツブロックの後に、<blockquote>の開始タグと終了タグを追加します。 <blockquote>タグ内に、CupcakeIpsumからの2つの文を含む新しい<p>コンテンツブロックを追加します。 次の<p>コンテンツブロックの後、<h2>見出しの前に、自動終了<hr />要素を使用して水平ルールを追加します。 次のコードブロックで強調表示されているHTMLは、ファイルに追加する場所と内容を示しています。

index.html 

<!doctype html>
<html>
  ...
  <body>
    <article>
      <h1>Carrot Cake Pie Toffee Cheesecake</h1>

      <p>Gummi bears powder tootsie roll biscuit. Icing jelly-o tootsie roll powder pie dessert biscuit tiramisu. Jelly beans pudding lemon drops sesame snaps jujubes sesame snaps gummi bears tiramisu. Apple pie danish soufflé soufflé cupcake cookie donut. Cookie gummies powder dragée powder chocolate bar muffin jelly marshmallow. Cheesecake dessert chocolate bar chocolate cake gingerbread chocolate bar gingerbread wafer brownie. Bear claw cake sugar plum muffin candy canes tart cheesecake croissant candy canes. Gummi bears carrot cake sweet chocolate. Carrot cake cake sweet bear claw. Gummi bears chocolate pie croissant chocolate cake bear claw dragée.</p>

      <blockquote>
        <p>Apple pie danish soufflé soufflé cupcake cookie donut. Cookie gummies powder dragée powder chocolate bar muffin jelly marshmallow.</p>
      </blockquote>
  
      <p>Tootsie roll cotton candy cake tiramisu pastry. Croissant oat cake ice cream dragée sweet roll soufflé marshmallow powder marzipan. Lemon drops cake bear claw cake sweet lollipop. Lollipop toffee liquorice apple pie gingerbread pastry tiramisu.</p>
  
      <hr />
  
      <h2>Jelly Beans Wafer Apple Pie Icing</h2>
      ...
    </article>
  </body>
</html>

これらの変更をindex.htmlファイルに保存してから、Webブラウザーに戻り、ページを更新してください。 引用は、作成したCSSの初期セットからいくつかのスタイルを継承しますが、それでもいくつかのブラウザーのデフォルトスタイルが適用されます。 次の画像は、引用符と水平方向のルールがブラウザにどのように表示されるかを示しています。

引用コンテンツへのスタイルの追加を開始するには、テキストエディタでstyles.cssを開きます。 最初にblockquote要素セレクターを作成し、次に1remのpaddingを追加します。background-colorプロパティはhsl(204, 100%, 15%)で濃紫に設定されます。最後に、colorプロパティをhsl(24, 100%, 85%) で明るい黄色に設定します。 次に、blockquote pコンビネーターセレクターを追加してコンテンツのfont-sizeを1.25remに増やし、marginプロパティに値を追加してデフォルトの間隔を削除します。 0。 次のコードブロックで強調表示されているCSSは、これがテキストエディタでどのようにフォーマットされるかを示しています。

styles.css 

...
h2 {
  font-size: 1.5rem;
  color: hsl(204, 100%, 29%);
  margin: 1em 0 0.5em;
}

blockquote {
  padding: 1rem;
  background-color: hsl(204, 100%, 15%);
  color: hsl(24, 100%, 85%);
}

blockquote p {
  font-size: 1.25rem;
  margin: 0;
}

変更内容をstyles.cssに保存し、Webブラウザでindex.htmlをリロードします。 次の画像に示すように、ブロッククォートのスタイルは、背景が暗く、テキストが明るい黄色の大きなテキストになります。

次に、floatプロパティをblockquoteに適用します。 floatプロパティには、left、right、およびnoneの3つの値オプションがあります。 これは、フローティングコンテンツがラッピングコンテンツの左側または右側に移動することを意味します。 コンテンツがすでにフローティングの場合は、noneを使用してフローティング機能を削除できます。 ブロッククォートの場合、左にフロートするように設定するため、その下の段落は右に折り返されます。

テキストエディタでstyles.cssに戻ります。 次のコードブロックで強調表示されているように、blockquote要素セレクターで、値をleftに設定してfloatプロパティを追加します。

styles.css 

...
blockquote {
  padding: 1rem;
  background-color: hsl(204, 100%, 15%);
  color: hsl(24, 100%, 85%);
  float: left;
}
...

この時点で、ブロッククォートはフローティングですが、コンテンツが内部でどのようにフローティング処理されるかという側面があるため、コンテンツがラップされることはありません。 フローティング要素は、コンテンツの自然な幅まで拡張されます。 これは、blockquote内のコンテンツが非常に長いため、フローティングではない場合と同じ量のスペースを占めることを意味します。 視覚的な変更を強制するには、次のコードブロックで強調表示されているように、40%の値に設定されたwidthプロパティをblockquoteセレクターに追加します。

styles.css 

...
blockquote {
  padding: 1rem;
  background-color: hsl(204, 100%, 15%);
  color: hsl(24, 100%, 85%);
  float: left;
  width: 40%;
}
...

これらの変更をstyles.cssに保存してから、Webブラウザーでindex.htmlを更新してください。 <blockquote>要素の幅は、親コンテナの幅の40 % oに制限されるようになりました。これにより、下の段落を引き上げて右側で折り返すことができます。 次の画像は、これがブラウザにどのように表示されるかを示しています。

ブロッククォートに対して行う必要がある最後のフォーマット調整は、要素の周囲の間隔です。

テキストエディタでstyles.cssに戻ります。 次に、blockquote要素セレクターブロックに移動し、0 1rem 1rem 0の値でmarginプロパティを追加します。 次のコードブロックで強調表示されているCSSの行は、これがどのようにフォーマットされているかを示しています。

styles.css 

...
blockquote {
  padding: 1rem;
  background-color: hsl(204, 100%, 15%);
  color: hsl(24, 100%, 85%);
  float: left;
  width: 40%;
  margin: 0 1rem 1rem 0;
}
...

このmargin値は、左右のmargin値を1rem に設定し、上下の値を 0 に設定します。これにより、側面にスペースが確保されます。ここで、テキストは引用符を囲みます。

変更内容をstyles.cssに保存し、Webブラウザでindex.htmlに戻って更新してください。 次の画像は、これがブラウザにどのように表示されるかを示しています。

現在のように、フローティングプルクォートは十分に大きいため、次のセクションの見出しも折り返されます。 これは、clearプロパティがこの状況を防ぐのに役立つ場合です。 clearプロパティには、floatと同様に、floatプロパティを打ち消し、コンテンツの折り返しを防ぐための3つのプロパティ値があります。 clearの値は、left、right、およびbothとの2つの組み合わせです。 このプロパティが配置されている要素は、そのポイント以降のラッピングを停止します。

clearプロパティを使用するには、テキストエディタでstyles.cssを開きます。 <hr />要素を使用してclearプロパティを適用するので、hr要素セレクターを作成することから始めます。 次に、美的スタイルを追加するには、値が0.125 rem solid hsl(300, 50%, 90%)のborderプロパティを追加して、太い境界線を作成します。 次に、marginプロパティを3rem 0に設定して、境界線の上下に余分なスペースがあるようにします。 最後に、clearプロパティを追加し、both値を使用して、コンテンツが引用符要素をラップするのを防ぎます。 次のコードブロックで強調表示されているCSSは、これらのスタイルをフォーマットする方法を示しています。

styles.css 

...

blockquote p {
  font-size: 1.25rem;
  margin: 0;
}

hr {   
  border: 0.125rem solid hsl(300, 50%, 90%);
  margin: 3rem 0;
  clear: both;
}

変更内容をstyles.cssに保存し、ブラウザに戻ってindex.htmlを更新します。 次の画像に示すように、<hr>要素は引用符の右側で折り返されていません。 代わりに、ルールラインが下にあり、コンテンツの幅全体が拡張されています。 ただし、見積もりと<hr>の間の距離は、フロートのmarginを使用し、<hr>要素の大きい方のmargin値は使用しません。

このセクションでは、フロートを<blockquote>に適用しました。これにより、他の要素がその周りをラップしました。 また、marginを追加して、引用符の周囲に空白を付け、ラッピングコンテンツを読みやすくしました。 次のセクションでは、メディアクエリを使用して、画面サイズが特定の幅に達したときに画像をフロートさせます。

特定の画面幅でのフローティング画像

効果的なレスポンシブウェブデザインには、柔軟な幅、サイズ変更可能な画像、メディアクエリの3つの要件があります。 この手順では、これら3つすべてを使用して、特定の画面幅で画像を右にフロートさせ、より大きな画面サイズで画像を右側の余白に引き込みます。

まず、ページに画像を読み込みます。 テキストエディタでindex.htmlを開き、<h2>Jelly Beans Wafer Apple Pie Icing</h2>に続く最初の2つの段落の間に<img />要素を追加します。 前のセクションの<hr />要素と同様に、<img />は自己閉鎖要素です。 ただし、<img />には、ページに配置される画像ファイルの場所にsrc属性が必要です。 次のコードブロックで強調表示されているHTMLは、コードで<img />を設定する方法を示しています。

index.html 

<!doctype html>
<html>
  ...
  <body>
    <article>
      ...
      <hr />
  
      <h2>Jelly Beans Wafer Apple Pie Icing</h2>
  
      <p>Jelly cotton candy cake pastry carrot cake. Topping icing danish. Lollipop sesame snaps muffin bonbon icing. Lollipop chocolate bar jelly-o sweet roll. Topping bear claw sweet. Apple pie bonbon sweet lemon drops caramels topping pastry. Biscuit jelly tootsie roll cookie tiramisu cotton candy. Icing chocolate cake liquorice ice cream sesame snaps cupcake chocolate bar pudding gingerbread. Donut toffee ice cream chocolate biscuit.</p>

      <img src="https://source.unsplash.com/-hM0-PSO3FY/450x300" alt="Icing lemon drops danish tiramisu soufflé" />

      <p>Carrot cake pie halvah toffee cheesecake chocolate cake gingerbread liquorice. Marshmallow danish candy fruitcake chocolate dessert. Bear claw chocolate bar sugar plum pudding cake cheesecake sweet. Marzipan lemon drops croissant gummies. Dessert carrot cake carrot cake cookie candy canes toffee. Biscuit bear claw candy canes muffin. Lollipop gummies tart danish tart sugar plum biscuit. Lemon drops muffin sugar plum sweet. Cotton candy pastry topping caramels gummies carrot cake marzipan tiramisu sesame snaps.</p>
      ...
    </article>
  </body>
</html>

画像の場合、 Unsplash 画像サービスの画像を使用して、src値を提供しています。 <img />要素には、説明テキストを提供するためのalt属性も必要です。 この説明テキストはさまざまな方法で使用できますが、スクリーンリーダーのユーザーにコンテキスト情報を提供することが最も重要です。

変更内容をindex.htmlに保存し、ブラウザでページを更新します。 次の画像に示すように、2つの段落の間のページに画像が読み込まれます。

デフォルトでは、Webページ上の画像は指定されたピクセルサイズで表示されます。 以前にHTMLに追加された画像の場合、サイズは幅450ピクセル、高さ300ピクセルです。 画面サイズが450ピクセル未満の携帯電話にロードすると、画像が画面から消え、水平スクロールバーが発生します。 含まれるスペースに合わせて画像のサイズを変更するには、imgでwidth: 100%を使用できます。 ただし、このアプローチでは、画像が実際のサイズよりも大きくなり、ピクセル化と呼ばれる、成長するにつれて画像が歪む可能性があります。 代わりに、max-width: 100%を使用することをお勧めします。これにより、画像をより制限されたスペースに縮小できますが、実際のサイズを超えて拡大することはありません。

これらのサイズ変更画像を作成するには、テキストエディタでstyles.cssに戻ります。 ドキュメントの上部にあるbody要素セレクターの後に、img要素セレクターを追加します。 セレクターブロック内に、100%の値でmax-widthプロパティを追加します。 次のコードブロックで強調表示されているCSSは、imgセレクターの設定方法を示しています。

styles.css 

body {
  font: 100%/1.5 Comfortaa, sans-serif;
  color: hsl(300, 100%, 10%);
  background-color: hsl(300, 100%, 98%);
}

img {
  max-width: 100%;
}

article {
  width: 90%;
  max-width: 75ch;
  margin: 2rem auto;
}
...

これらの変更をstyles.cssに保存し、Webブラウザーでindex.htmlを更新します。 ブラウザウィンドウを取得し、幅を電話のサイズに近いサイズに減らします。 ウィンドウの幅が画像の幅よりも小さくなると、画像は縮小します。 次の画像は、これが狭い幅のウィンドウのブラウザでどのように表示されるかを示しています。

それに応じてスケーリングする画像ができたので、次に、十分なスペースがあるときに画像を右にフロートするように移動します。 特定のウィンドウまたは画面幅でのスタイルの変更は、メディアクエリと呼ばれる特別なルール条件で実行されます。 メディアクエリは、@mediaルールと、それに続くスタイルを適用するメディア条件を使用して定義されます。 この場合、ウィンドウサイズは少なくとも640pxにする必要があります。 エンドユーザーはピクセルの意味に影響を与える可能性があるため、640を16で割って、remの単位値40を取得します。 クエリが定義されると、独自の中括弧のセットが作成されます。その中には、指定された画面幅で変更する必要のあるセレクターがあります。

テキストエディタでstyles.cssファイルを開きます。 次に、40remのmin-widthに設定されたメディアクエリを作成します。 クエリブロック内に、floatプロパティがrightに設定されたimg要素セレクターを追加します。 このビューでは画像があまりスペースをとらないように、max-widthの値を50%に設定します。 最後に、marginプロパティを使用して、画像の左右の位置にマージンを追加します。 次のコードブロックで強調表示されているCSSは、メディアクエリと関連するスタイルを追加する方法を示しています。

styles.css 

...
blockquote p {
  font-size: 1.25rem;
  margin: 0;
}

@media (min-width: 40rem) {
  img {
    float: right;
    max-width: 50%;
    margin: 0 0 1rem 1rem;
  }
}
...

変更内容をstyles.cssに保存し、ブラウザに戻ってページを更新してください。 ブラウザのサイズを小さい画面サイズからより一般的なデスクトップブラウザのウィンドウサイズに変更してください。 次の画像に示すように、画像は右に浮き、テキストコンテンツが左に折り返されます。

テキストがレイアウトを定義するようになり、デスクトップ画面のサイズが大きくなると、左右に多くの余分なスペースが残ります。 この場合、画像をその余分なスペースに引き込むことは、美的および機能的に役立つ可能性があります。 これは、フローティング要素の負のマージン値を使用して実行できます。

この効果を作成するには、テキストエディタでstyles.cssを開き、80remのmin-widthに対する別のメディアクエリを追加します。これは1280ピクセルに相当します。 クエリブロック内に、img要素セレクターを追加し、max-widthプロパティを100%の値に返します。 次に、marginプロパティを追加し、上下の位置を1remに設定し、左の位置を2remに設定します。 正しい位置を-40%に設定します。 この値は、imgの幅ではなく、親要素の幅の40% ofだけコンテンツの右側の空白に画像をプルします。 次のコードブロックで強調表示されているCSSは、これを設定する方法を示しています。

styles.css 

...
@media (min-width: 40rem) {
  img {
    float: right;
    max-width: 50%;
    margin: 0 0 1rem 1rem;
  }
}

@media (min-width: 80rem) {
  img {
    max-width: 100%;
    margin: 1rem -40% 1rem 2rem;
  }
}
...

これらの変更をstyles.cssに保存してから、ブラウザでindex.htmlを更新してください。 ウィンドウの幅を拡大する必要があるかもしれませんが、ウィンドウの幅が約1280ピクセルに達すると、画像は右に引っ張られ、コンテンツは引き続き左に折り返されます。 次の画像は、これがブラウザにどのように表示されるかを示しています。

このセクションでは、メディアクエリ、パーセンテージ幅、および負のマージン値を使用して、画像をフロートさせ、レイアウトの空白にプルしました。 次のセクションでは、columnsプロパティを使用して、特定のメディアクエリ画面幅で一部のコンテンツを1列から2列に変更します。

列の内容

テキストコンテンツを操作するときは、コンテンツが並んでいるようにレイアウトを調整したり、ある列から次の列に折り返したりすることが役立つ場合があります。 CSSを使用して列を作成する方法はたくさんありますが、columnsプロパティのみが、1つの要素のコンテンツを異なる列に分割します。 このセクションでは、columnsプロパティを使用して、折り返すコンテンツの2列のレイアウトを作成します。 次に、追加のcolumnsプロパティを使用して列の間に分割線を作成し、要素に列を操作して列を強制的に分割する方法を指示します。

まず、index.htmlを開き、<h2>Jelly Sugar Plum Chocolate Danish</h2>の後の2つの段落をcolumnのクラスプロパティを持つ<div>要素でラップします。 次のコードブロックで強調表示されているHTMLは、これがファイルでどのように表示されるかを示しています。

index.html 

<!doctype html>
<html>
  ...
  <body>
    <article>
      ...
      <h2>Jelly Sugar Plum Chocolate Danish</h2>

      <div class="column">
      <p>Topping marzipan sesame snaps soufflé chupa chups cookie wafer cupcake. Jelly beans lollipop jelly beans. Chocolate cake lemon drops chupa chups candy icing tootsie roll danish liquorice. Gummies danish dragée apple pie jelly pie topping icing tootsie roll. </p>

      <p>Apple pie bear claw muffin tiramisu gummi bears cake muffin. Candy canes oat cake croissant cake liquorice topping halvah dessert cheesecake. Candy fruitcake muffin. Cookie oat cake gummies brownie dessert candy canes icing. Soufflé chocolate cake pastry toffee cheesecake macaroon liquorice gummi bears. Halvah tiramisu jujubes. Bear claw candy danish. Macaroon chocolate wafer soufflé biscuit. Bear claw biscuit sesame snaps biscuit liquorice sweet roll lollipop. Marshmallow bear claw dragée icing liquorice candy donut chupa chups. Halvah dessert bonbon cupcake cupcake sugar plum cotton candy toffee muffin. Bonbon gummi bears jujubes chupa chups oat cake candy canes.</p>

      <p>Gummies bonbon marzipan icing pudding. Jujubes croissant carrot cake. Pastry halvah pudding toffee. Lemon drops gingerbread chocolate apple pie jelly cheesecake.</p>

      <p>Fruitcake dessert chocolate cupcake carrot cake dessert candy canes chocolate soufflé. Cookie cupcake marzipan sesame snaps biscuit tart pie jelly-o. Halvah tiramisu gummies biscuit powder donut. Chocolate cake bear claw macaroon.</p>
      </div>

      <h2>Gingerbread Macaroon Fruitcake</h2>
      ...
    </article>
  </body>
</html>

変更内容をindex.htmlに保存し、テキストエディタでstyles.cssに戻ります。 コンテンツの幅が狭い場合は、小さすぎて列に分割できません。 代わりに、min-width: 40remメディアクエリ内に.columnクラスセレクターを追加してください。 次に、次のコードブロックで強調表示されているように、.columnセレクターに2の値を持つcolumnsプロパティを指定します。

styles.css 

...
@media (min-width: 40rem) {
  img {
    float: right;
    max-width: 50%;
    margin: 0 0 1rem 1rem;
  }

  .column {
    columns: 2;
  }
}

@media (min-width: 80rem) {
  ...
}

変更内容をstyles.cssに保存し、Webブラウザでindex.htmlを更新します。 次の画像に示すように、これら2つの段落の内容は、2つの列に分割され、最初の列の下部にある2番目の文の最初の行が2番目の列に折り返されます。

columnsのプロパティはいくつかあります。 columnsプロパティ自体は、column-countとcolumn-widthの省略形の組み合わせです。 列の指定された幅を定義する必要がある場合は、列のサイズが常に等しいことを知っておくことが重要です。 列の視覚的表示に役立つ2つのコンパニオンプロパティもあります。 1つ目はcolumn-gapで、各列の間隔を指定できます。 2番目のプロパティはcolumn-ruleと呼ばれ、borderと同様に機能しますが、列の間に垂直線を描画するだけです。

カスタムギャップとルールを追加するには、テキストエディタでstyles.cssを開きます。 .columnsセレクターブロックで、column-gapプロパティに2remの値を追加します。 次に、column-ruleプロパティに2px solid hsl(300, 50%, 90%)の値を追加します。これにより、前の<hr />要素と同じ色を使用して列間に垂直のルールラインが作成されます。 次のコードブロックで強調表示されているHTMLは、これがファイルでどのように表示されるかを示しています。

styles.css 

...
@media (min-width: 40rem) {
  img {
    float: right;
    max-width: 50%;
    margin: 0 0 1rem 1rem;
  }

  .column {
    columns: 2;
    column-gap: 2rem;
    column-rule: 2px solid hsl(300, 50%, 90%);
  }
}

@media (min-width: 80rem) {
  ...
}

変更内容をstyles.cssに保存し、Webブラウザでindex.htmlを更新します。 次の画像に示すように、列間のスペースが増え、ギャップの中央に実線の垂直ルールラインが表示されます。

最後に、列内の要素にプロパティを適用して、それらがレイアウトとどのように相互作用するかに影響を与えることができます。 最初の列の段落には、2番目の列のテキストよりも多くのスペースがあります。 これは、列がmarginプロパティと、<p>要素のデフォルトのmargin値とどのように相互作用するかによるものです。 :first-child疑似クラスを使用して、列内の最初の<p>要素のmargin-topを変更できます。 次に、列要素が列フローとどのように相互作用するかを制御するためのいくつかのプロパティがあります：break-inside、break-after、およびbreak-before。 break-insideプロパティを値avoidで使用します。これは、<p>要素の内容が壊れないようにブラウザーに指示します。

テキストエディタのstyles.cssに戻り、これらの新しいスタイルを列のコンテンツに適用し始めます。 メディアクエリ内に、.column p:first-childで構成されるコンビネーターセレクターを追加して、<div class="columns">要素内の最初の<p>要素にスタイルをスコープします。 次に、margin-topプロパティセットを0の値に追加します。 .column pの新しいコンビネーターセレクターを作成して、これらのスタイルを<div class="columns">要素内のすべての<p>要素に適用します。 最後に、break-insideプロパティにavoidの値を追加して、列がコンテンツを分割しないようにします。 次のコードブロックで強調表示されているCSSは、これを設定する方法を示しています。

styles.css 

...
@media (min-width: 40rem) {
  ...

  .column {
    columns: 2;
    column-gap: 2rem;
    column-rule: 2px solid hsl(300, 50%, 90%);
  }

  .column p:first-child {
    margin-top: 0;
  }

  .column p {
    break-inside: avoid;
  }
}
...

注： break-inside、break-after、およびbreak-beforeプロパティの使用に関しては、注意すべき点がいくつかあります。 これらのプロパティはブラウザで適切にサポートされていますが、avoidの値が最もよくサポートされており、他の値はさまざまにサポートされています。 さらに、avoid値をサポートするブラウザーは、列を分割するタイミングを異なる方法で解釈するため、ブラウザー間でレイアウトが異なります。 ブラウザ間で視覚的な同等性が必要な場合は、プロパティを使用する際に注意してください。


変更内容をstyles.cssに保存し、Webブラウザーでページを更新します。 これで、2番目の段落が最初の列に完全に挿入されました。 これにより、最初の列が2番目の列よりも大きくなる可能性がありますが、垂直方向のルールは変更に対応します。 これで、最初の段落も上部が2番目の列に揃えられます。 次の画像は、これがほとんどのブラウザでどのように表示されるかを示しています。

このセクションでは、columnsプロパティを使用して、流れるコンテンツの2つの列を作成しました。 column-gapプロパティを使用してスペースを増やし、column-ruleを使用して列間に分割線を作成しました。 最後に、break-insideプロパティを使用して、要素が列フローとどのように相互作用するかを強制しました。 最後のセクションでは、columnsプロパティを順序付きリストに適用し、メディアクエリを使用してその表示を調整します。

列リスト

この最後のセクションでは、列、メディアクエリ、および負のマージン値で学習した内容を適用して、順序付きリストのスタイルを設定します。 columnsプロパティの利点の1つは、長いリストを2列または3列に分割することで、リストの高さを大幅に短くできることです。

まず、HTMLに順序付きリストを追加する必要があります。 テキストエディタでindex.htmlを開き、ファイルの最後の段落の直前にある次のコードブロックで強調表示されたHTMLを追加します。

index.html 

<!doctype html>
<html>
  ...
  <body>
    <article>
      ...
      <h2>Gingerbread Macaroon Fruitcake</h2>
      <p>Jelly chocolate gummies cupcake liquorice chocolate. Sugar plum donut tiramisu muffin chupa chups. Cake caramels fruitcake jelly beans pudding I love pie lollipop jelly beans. Gummi bears cheesecake dragée I love fruitcake sesame snaps I love. Apple pie muffin donut. Fruitcake donut chocolate bar cotton candy topping candy macaroon I love. Fruitcake sesame snaps jelly-o. Tart wafer sugar plum I love apple pie biscuit. Pastry sesame snaps tart. Apple pie gingerbread chocolate candy canes.</p>

      <p>I love cake sweet roll toffee lemon drops bonbon sweet. Oat cake lemon drops candy canes topping macaroon.</p>

      <ol class="column-list">
        <li>Cookie I love gingerbread topping</li>
        <li>Carrot cake toffee I love croissant pudding</li>
        <li>Sesame snaps pastry jelly-o</li>
        <li>Fruitcake pastry dessert</li>
        <li>Lollipop gingerbread I love caramels</li>
        <li>Toffee</li>
        <li>Croissant pudding I love muffin</li>
        <li>Dessert jelly beans</li>
        <li>jelly beans</li>
        <li>Liquorice</li>
        <li>I love cotton candy</li>
        <li>Apple pie</li>
        <li>Lemon raspberry cheesecake</li>
        <li>muffin donut</li>
      </ol>

      <p>Sweet cotton candy danish. Lollipop bear claw pudding carrot cake. Gummi bears candy canes chocolate cake chupa chups. Sugar plum jelly cake cookie cheesecake croissant muffin carrot cake. Pudding I love liquorice jelly-o caramels I love sweet roll bonbon oat cake. Caramels gummi bears gingerbread.</p>
      ...
    </article>
  </body>
</html>

変更内容をindex.htmlに保存し、Webブラウザでページをリロードします。 次の画像に示すように、順序付きリストには、コンテンツの1つの列で1〜14の番号が付けられています。

次に、テキストエディタでstyles.cssを開き、最初のメディアクエリの直前にol要素セレクタを作成します。 次に、padding、background-color、最後にborderを使用して、リストを視覚的に目立たせるためのスタイルを追加します。 次のコードブロックで強調表示されているCSSは、これを設定する方法と、プロパティに使用する値を示しています。

styles.css 

...
blockquote p {
  font-size: 1.25rem;
  margin: 0;
}

ol {
  padding: 2rem;
  background-color: hsl(300, 60%, 95%);
  border: 0.25rem solid hsl(300, 50%, 90%);
}

@media (min-width: 40rem) {
  ...
}
...

styles.cssに変更を保存してから、Webブラウザーに戻り、ページを更新します。 次の画像に示すように、リストの境界線と背景色は暗くなります。

次に、テキストエディタのstyles.cssに戻り、列スタイルを追加します。 前のセクションの段落と同様に、これらの列は大きな画面サイズに最も効果的であり、小さな画面では単一の列としてより効果的です。 min-width: 40remメディアクエリにol要素セレクターを追加します。 セレクターブロックに、2の値を持つcolumnsプロパティを追加します。 次に、順序付きリストの番号がコンテナの外にあるため、列の間に余分なスペースが必要です。 この余分なコンテンツに対応するには、column-gapプロパティを3remに設定して追加します。 最後に、画面サイズが大きい場合は、要素間の垂直方向のスペースを増やすと便利です。 marginプロパティを追加し、上下の位置を2remに設定し、左右の位置を0に設定します。 次のコードブロックで強調表示されているCSSは、これを設定する方法を示しています。

styles.css 

...
ol {
  padding: 2rem;
  background-color: hsl(300, 60%, 95%);
  border: 0.25rem solid hsl(300, 50%, 90%);
}

@media (min-width: 40rem) {
  ...
  ol {
    columns: 2;
    column-gap: 3rem;
    margin: 2rem 0;
  }
}
...

変更内容をstyles.cssに保存し、ブラウザに戻ってindex.htmlを更新します。 ブラウザウィンドウの幅が640ピクセル以上であることを確認してください。 次の画像に示すように、リストは同じ長さの2つの列に分割されます。

次に、順序付きリストのアイテムは、それぞれの間にさらに多くのスペースを使用できます。 テキストエディタでstyles.cssに戻ります。 (min-width: 40rem)メディアクエリのolセレクターの後に、ol liコンビネーターセレクターを追加します。 セレクターブロックで、margin-bottomプロパティセットを1emに追加します。これにより、li要素のfont-sizeと等しくなるように設定されます。 次のコードブロックで強調表示されているCSSは、これらのスタイルを追加する場所と方法を示しています。

styles.css 

...
@media (min-width: 40rem) {
  ...
  ol {
    columns: 2;
    column-gap: 3rem;
    margin: 2rem 0;
  }
  
  ol li {
    margin-bottom: 1em;
  }
}
...

index.htmlファイルへの変更を保存してから、Webブラウザーに戻り、ページを更新します。 各リストアイテム間の間隔がはるかに大きくなり、リーダーがリストをより簡単にスキャンできるようになりました。 次の画像は、ブラウザでリストの間隔がどのように表示されるかを示しています。

最後に、テキストエディタのstyles.cssに戻り、十分な画面スペースがあるときに3番目の列を適用します。 (min-width: 80rem)メディアクエリにol要素セレクターを追加することから始め、次に3に設定されたcolumnsプロパティを追加します。 min-widthクエリを使用しているため、列間のギャップは前のメディアクエリから継承され、再定義する必要はありません。 ただし、列が狭すぎないように、3つの列には余分なスペースが必要です。 リストに余分なスペースを与えるために、marginプロパティを追加して、上下の位置を2remに設定したまま、左右の位置を負の値[に変更します。 X190X]。 次のコードブロックで強調表示されているCSSは、これを設定する方法を示しています。

styles.css 

...
@media (min-width: 40rem) {
  ...
}

...

@media (min-width: 80rem) {
  img {
    float: right;
    width: 80%;
    margin: 1rem -40% 1rem 2rem;
  }
  
  ol {
    columns: 3;
    margin: 2rem -5rem;
  }
}
...

変更内容をstyles.cssに保存し、Webブラウザでindex.htmlをリロードします。 前のフローティング画像のように、この負の値はリストの側面をページの余分な側面スペースに引き込みます。 これにより、リストに注目を集める視覚的な目立ちが生まれます。 次の画像は、これがブラウザでどのように表示されるかを示しています。

この最後のセクションでは、前のセクションで学んだことをすべて組み合わせました。 メディアクエリ、列、および負の余白を使用して、リストがより興味深いプレゼンテーションを行うのに役立つ印象的な順序付きリストスタイルを作成しました。

結論

CSSを使用してコンテンツをレイアウトする方法は多数あり、各プロパティには独自の強みがあります。 このチュートリアルでは、floatプロパティを使用して、他のコンテンツをラップアラウンドさせる要素を作成しました。 また、columnsプロパティを使用して、ある列から次の列に流れるコンテンツを作成しました。 さらに、メディアクエリと柔軟な幅を使用して、効果的なレスポンシブデザインの原則のいくつかを実践します。 Webプロジェクトでレイアウトソリューションに取り組むときは、タスクを実行するためのさまざまな方法を認識することが重要です。 floatプロパティとcolumnsプロパティはどちらも、ユニークなものを作成する方法を提供し、優れたビジュアルデザインを提供するのに役立ちます。

CSSチュートリアルをもっと読みたい場合は、CSSシリーズでHTMLのスタイルを設定する方法の他のチュートリアルを試してください。

「https://www.finddevguides.com/index.php?title=フロートと列を使用してCSSでコンテンツをレイアウトする方法&oldid=104375」から取得
Powered by MediaWiki