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

投稿日: 2022-07-15 2022-10-16
タグ: css, Development

序章

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

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

前提条件

カスケードと特異性を使用してCSSスタイルをHTMLに適用する方法を読むことで得られるCSSのカスケードと特異性の機能の理解。
タイプセレクター、コンビネーターセレクター、セレクターグループに関する知識。これらはCSSでスタイル設定するHTML要素を選択する方法にあります。
CSSチュートリアルでテキストをレイアウトする方法にあるCSSを使用したテキストのレイアウトの理解。
ローカルマシンに次のように保存された空のHTMLファイル index.html 選択したテキストエディタとWebブラウザからアクセスできます。開始するには、 HTMLプロジェクトの設定方法チュートリアルを確認し、HTML要素の使用方法と理解方法に従ってブラウザでHTMLを表示する方法を確認してください。 HTMLを初めて使用する場合は、HTMLシリーズを使用して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> elementは、テキストに使用する文字セットを定義します。このように、アクセント記号などのほとんどの特殊文字は、特別なHTMLコードなしでレンダリングされます。二番目 <meta> elementは、デバイスの幅をコンテンツの幅として扱うようにブラウザー（特にモバイルブラウザー）に指示します。それ以外の場合、ブラウザは960ピクセルのデスクトップ幅をシミュレートします。 The <title> elementは、ブラウザにページのタイトルを提供します。 The <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ブラウザで開きます。次の画像に示すように、コンテンツはブラウザのデフォルトスタイルを使用します。

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

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

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

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

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

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

見積もりコンテンツを作成するには、 index.html テキストエディタで。最初の後 <p> コンテンツブロック、追加 <blockquote> 開閉タグ。内部 <blockquote> タグ、新しいを追加します <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 要素セレクターを追加してから、 padding の 1rem、 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、次にリロード index.html Webブラウザで。次の画像に示すように、ブロッククォートのスタイルは、背景が暗く、テキストが明るい黄色の大きなテキストになります。

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

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

styles.css

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

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

styles.css

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

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

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

戻る styles.css テキストエディタで。次に、 blockquote 要素セレクターブロックと追加 margin の値を持つプロパティ 0 1rem 1rem 0. 次のコードブロックで強調表示されている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、次に戻る index.html Webブラウザで更新します。次の画像は、これがブラウザにどのように表示されるかを示しています。

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

を使用するには clear プロパティ、オープン styles.css テキストエディタで。を使用します <hr /> 適用する要素 clear プロパティなので、作成することから始めます hr 要素セレクター。次に、美的スタイルを追加するには、 border の値を持つプロパティ 0.125 rem solid hsl(300, 50%, 90%) 太い境界線を作成します。次に、 margin プロパティをに設定 3rem 0 そのため、境界線の上下に余分なスペースがあります。最後に、 clear プロパティと使用 both コンテンツがquote要素をラップするのを防ぐ値。次のコードブロックで強調表示されている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 フロート上で、大きいものではありません margin の値 <hr> エレメント：

このセクションでは、フロートをに適用しました <blockquote>、これにより、他の要素がラップアラウンドしました。また、 margin 引用符の周りに空白を入れて、折り返しの内容を読みやすくします。次のセクションでは、メディアクエリを使用して、画面サイズが特定の幅に達したときに画像をフロートさせます。

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

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

まず、ページに画像を読み込みます。開ける index.html テキストエディタで、を追加します <img /> 次の最初の2つの段落の間の要素 <h2>Jelly Beans Wafer Apple Pie Icing</h2>. 以下のような <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ピクセル未満の携帯電話にロードすると、画像が画面から消え、水平スクロールバーが発生します。含まれるスペースに合わせてサイズを変更するように画像を設定するには、次を使用できます。 width: 100% に img. ただし、このアプローチでは、画像が実際のサイズよりも大きくなり、ピクセル化と呼ばれる、成長するにつれて画像が歪む可能性があります。代わりに使用することをお勧めします max-width: 100%、これにより、画像はより制限されたスペースに縮小できますが、実際のサイズを超えて拡大することはありません。

これらのサイズ変更画像を作成するには、に戻ります。 styles.css テキストエディタで。後に body ドキュメントの上部にある要素セレクターに、 img 要素セレクター。セレクターブロック内に max-width の値を持つプロパティ 100%. 次のコードブロックで強調表示されている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 更新します index.html Webブラウザで。ブラウザウィンドウを取得し、幅を電話のサイズに近いサイズに減らします。ウィンドウの幅が画像の幅よりも小さくなると、画像は縮小します。次の画像は、これが狭い幅のウィンドウのブラウザでどのように表示されるかを示しています。

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

を開きます styles.css テキストエディタでファイルします。次に、に設定されたメディアクエリを作成します min-width の 40rem. クエリブロック内に、 img 要素セレクター float プロパティをに設定 right. したがって、このビューでは画像があまりスペースをとらないように、 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 次に、テキストエディタで、別のメディアクエリを追加します。 min-width の 80rem、1280ピクセルに相当します。クエリブロック内に、 img 要素セレクターを返し、 max-width の値へのプロパティ 100%. 次に、 margin 上部と下部の位置がに設定されているプロパティ 1rem 左の位置を 2rem. 正しい位置をに設定します -40%. この値は、コンテンツの右側の空白に、親要素の幅ではなく、親要素の幅の40% ofだけ画像を引き込みます。 img 幅。次のコードブロックで強調表示されている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 後に2つの段落を折り返します <h2>Jelly Sugar Plum Chocolate Danish</h2> で <div> クラスプロパティが column. 次のコードブロックで強調表示されている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 テキストエディタで。コンテンツの幅が狭い場合は、小さすぎて列に分割できません。代わりに、 .column 内のクラスセレクター min-width: 40rem メディアクエリ。次に、 .column セレクター columns の値を持つプロパティ 2、次のコードブロックで強調表示されているように：

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 その後、更新します index.html Webブラウザで。次の画像に示すように、これら2つの段落の内容は、2つの列に分割され、最初の列の下部にある2番目の文の最初の行が2番目の列に折り返されます。

一握りがあります columns プロパティ。 The columns プロパティ自体は、の省略形の組み合わせです column-count と column-width. 列の指定された幅を定義する必要がある場合は、列のサイズが常に等しいことを知っておくことが重要です。列の視覚的表示に役立つ2つのコンパニオンプロパティもあります。最初は 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 更新します index.html Webブラウザで。次の画像に示すように、列間のスペースが増え、ギャップの中央に実線の垂直ルールラインが表示されます。

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

戻る styles.css テキストエディタで、これらの新しいスタイルを列のコンテンツに適用し始めます。メディアクエリ内に、で構成されるコンビネータセレクタを追加します。 .column p:first-child スタイルを最初にスコープする <p> 内部の要素 <div class="columns"> エレメント。次に、 margin-top の値に設定されたプロパティ 0. の新しいコンビネータセレクタを作成します .column p これらのスタイルをすべてに適用するには <p> 内部の要素 <div class="columns"> エレメント。最後に、 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 valueは最もよくサポートされており、他の値は混合サポートされています。さらに、をサポートするブラウザは avoid valueは、列を分割するタイミングを異なる方法で解釈し、ブラウザー間でレイアウトを変化させます。ブラウザ間で視覚的な同等性が必要な場合は、プロパティを使用する際に注意してください。

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

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

列リスト

この最後のセクションでは、列、メディアクエリ、および負のマージン値で学習した内容を適用して、順序付きリストのスタイルを設定します。の利点の1つ columns プロパティは、長いリストを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 テキストエディタで列スタイルを追加します。前のセクションの段落と同様に、これらの列は大きな画面サイズに最も効果的であり、小さな画面では単一の列としてより効果的です。追加します ol の要素セレクター min-width: 40rem メディアクエリ。セレクターブロックに columns の値を持つプロパティ 2. 次に、順序付きリストの番号がコンテナの外にあるため、列の間に余分なスペースが必要です。この追加コンテンツに対応するには、 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 テキストエディタで。後に ol のセレクター (min-width: 40rem) メディアクエリ、追加 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番目の列を適用します。を追加することから始めます ol の要素セレクター (min-width: 80rem) メディアクエリ、次に追加 columns プロパティをに設定 3. を使用しているため、列間のギャップは前のメディアクエリから継承されます min-width クエリなので、再定義する必要はありません。ただし、列が狭すぎないように、3つの列には余分なスペースが必要です。リストに余分なスペースを与えるために、 margin 上部と下部の位置をに設定したままにするプロパティ 2rem、ただし、左右の位置を負の値に変更します -5rem. 次のコードブロックで強調表示されている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、次にリロード index.html Webブラウザで。前のフローティング画像のように、この負の値はリストの側面をページの余分な側面スペースに引き込みます。これにより、リストに注目を集める視覚的な目立ちが生まれます。次の画像は、これがブラウザでどのように表示されるかを示しています。

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

結論

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

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

getdocs

13036