CSS3のレイアウトと組版についての説明

前提

レイアウトと組版を紹介する前に、まずサイズ単位を導入します。このサイズ単位はすべて rem を参照します。 定義されたフォント サイズはルート要素のテキストのサイズに相対します。em を使用する場合と比較して、この方法ではフォント サイズを手動で計算する面倒なプロセスから解放されます。

エフェクト1

demo01.png

CSS3によって提供される新しい属性を使用する限り、このようなエフェクトを簡単に作成できます。以下では、使用される主な属性のいくつかについて説明します。

• column-width: 列の幅を指定するために使用され、値が指定されると、ブラウザーは現在のブラウザーの幅に基づいてコンテンツを何列に分割するかを動的に決定します。

• column-rule: この属性は、実際には、column-rule-width、column-rule-width、という 3 つの異なる属性が含まれています。 column-rule-style、column-rule-color、いずれにせよ、これらが達成するのは、列間に分割線を追加することです。これは、border 属性の設定と同じです。

• column-gap: 列のギャップ属性を設定するために使用されます。この値は列の両側で均等に分割されます。

列を分離したい場合は、column-width または column-count を使用できます。 属性を使用しますが、通常はこれを行いません。これは、現在のブラウザの幅に関係なく、コンテンツを 3 つの列に分割する必要があり、非常に不親切な設計になるためです。

上記の属性を理解したら、図の効果をすぐに実感できると思います。ここにはソース コードを貼り付けません。ここをクリックしてダウンロードできます。 。ここで言及する必要があるのは、ページ上でいくつかの見栄えの良いフォントを引用していることです。それらを使用したい場合は、タグの下に次のコード行を貼り付けるだけです。

<link href=&#39;http://fonts.googleapis.com/css?family=Lobster|Terminal+Dosis&#39; rel=&#39;stylesheet&#39; type=&#39;text/css&#39;>

エフェクト2

demo02.png

以下では、このエフェクトを実現するためにFlexboxを使用します。

• display: Flexbox レイアウトを使用したい場合は、まずこのプロパティの値を flex に設定する必要があります。

• flex-flow: このプロパティは実際には 2 つのプロパティの略称で、そのうちの 1 つは flex-direction で、行に設定されている場合に主軸の方向を設定するために使用されます。 その場合は横方向が主軸となり、列の場合は縦方向が主軸となります。もう 1 つの属性は flex-wrap です。 要素の折り返しを設定するために使用されます。要素が親要素の幅を超える場合、画面に合わせて自動的に折り返されます。

• flex: この属性は通常、表示が flex に設定されている場合に設定されます 子要素には 3 つのパラメータが設定されています。説明するには言語が整理できないため、ここでは詳しく説明しません。この属性の使用方法は Baidu で確認できます。

以上がCSS3のレイアウトと組版についての説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。