CSS3 の複数列プロパティ

CSS3 の新しい複数列レイアウトは、従来の HTML Web ページのブロックレイアウトモードを強力に拡張したものです。この新しい構文により、WEB 開発者は複数の列にテキストを簡単に表示できます。テキストの行が長すぎると、読者が読みにくくなり、間違った行を読んだり、人の目がテキストの一方の端からもう一方の端に移動したり、続けて読んだりする可能性があることがわかっています。次の行の先頭の場合眼球の動きが大きすぎると、注意力が低下し、簡単に読めなくなります。したがって、大画面ディスプレイを最大限に効率的に使用するには、新聞のニュースのレイアウトのように、文字の幅を制限し、複数の段に文字を表示できるページデザインが必要です。 Attributes。

column-fill 列の塗りつぶし方法を指定します column-gap 列間のギャップを指定します

column-rule すべての column-rule-* プロパティの略語

column-rule-color 2 つの列間の境界線を指定します
column-rule-style の色は 2 つの列間の境界線のスタイルを指定します

column-rule-width は 2 つの列間の境界線の太さを指定します

column-span は要素がまたがる列の数を指定します

列幅は列の幅を指定します

columns 列幅と列数を設定するための略語です

列レイアウトを備えたブラウザは完全に互換性があります

複数列レイアウト機能をサポートしていない一部のブラウザの場合、 IE9/IE8 と同様、これらの属性はすべて無視されるため、レイアウトは従来の単一ブロックレイアウトになります。

ブラウザーの互換性を最大限に高めるために、複数列のレイアウト属性を使用する場合、最も基本的なブラウザーエンジンのプレフィックスは、Google Chrome の場合は -webkit-、Firefox の場合は - です。 ms- は IE ブラウザで、最後にプレフィックスなしで記述することを忘れないでください。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
       <style>
          body{font:14px/1.5 georgia,serif,sans-serif;}
              p{margin:0;padding:5px 10px;background:#eee;}
              h1{margin:10px 0;font-size:16px;}
              .test{
                     width:628px;
                     border:10px solid #000;
                     -moz-columns:200px 3;
                     -webkit-columns:200px 3;
                     columns:200px 3;
              }
              .test2{
                     border:10px solid #000;
                     -moz-columns:200px;
                     -webkit-columns:200px;
                     columns:200px;
              }
      
       </style>
  </head>
  <body>
    <h1>列数及列宽固定:</h1>
       <div>
              <p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns. </p>
              <p>On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.</p>
       </div>
       <h1>列宽固定，根据容器宽度液态分布列数:</h1>
       <div>
              <p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns. </p>
              <p>On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.</p>
       </div>
  </body> 
</html>

column-count:

<integer> auto オブジェクトの列番号を設定または取得します

例: -webkit-column-count:3;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
       <style>
           .columns{width:300px;}
           .columns .title{margin-bottom:5px; line-height:25px; background:#f0f3f9; text-indent:3px; font-weight:bold; font-size:14px;}
          .columns .column_count{
             -webkit-column-count:3;
             -moz-column-count:3;
          }
      </style>
  </head>
  <body>
    <div>columns-count</div>
    <div>
      据俄罗斯《消息报》19日报道称，俄罗斯空军的2架苏-35战斗机近日抵达位于莫斯科近郊的葛罗莫夫试飞院。
      根据消息，这2架苏-35将用于中国飞行员在俄进行的苏-35飞行培训。俄方曾表示，首批4架苏-35将于年底前交付中国，
      预计届时在俄罗斯完成培训的中国飞行员将直接驾机回国，而且很可能回国就能形成战斗力。   
    </div>
     </body> 
</html>

column-gap:

<length> オブジェクトの列間のギャップを設定または取得します

例: column-gap:normal;column-gap:40px;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
       <style>
           .columns{width:300px;}
              .columns .title{margin-bottom:5px; line-height:25px; background:#f0f3f9; text-indent:3px; font-weight:bold; font-size:14px;}
              .columns .column_gap{
                 -webkit-column-count:2;
                 -moz-column-count:2;
                 -webkit-column-gap:40px;
                 -moz-column-gap:40px;
              }
      </style>
  </head>
  <body>
    <div>columns-gap</div>
    <div>
      据俄罗斯《消息报》19日报道称，俄罗斯空军的2架苏-35战斗机近日抵达位于莫斯科近郊的葛罗莫夫试飞院。根据消息，这2架苏-35将用于中国飞行员在俄进行的苏-35飞行培训。俄方曾表示，首批4架苏-35将于年底前交付中国，预计届时在俄罗斯完成培训的中国飞行员将直接驾机回国，而且很可能回国就能形成战斗力。   
    </div>
</body> 
</html>

列ルール:

[ カラムルール幅 ] || [ カラムルールスタイル ] || [ カラムルールカラー ] オブジェクトの列間の境界線を設定または取得します。複合プロパティ。 border 属性と同等です
例: column-rule:10px Solid #090;

column-rule-width 属性は 2 つの列の境界線の太さを指定します:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
     <style>
         .newspaper
         {
              column-count:3;
              column-gap:40px;
              column-rule-style:outset;
              column-rule-width:10px;
 
              /* Firefox */
              -moz-column-count:3;
              -moz-column-gap:40px;
              -moz-column-rule-style:outset;
              -moz-column-rule-width:10px;
 
              /* Safari and Chrome */
              -webkit-column-count:3;
              -webkit-column-gap:40px;
              -webkit-column-rule-style:outset;
              -webkit-column-rule-width:3px;
         }
    </style>
  </head>
  <body>
    <div class="newspaper">
      据俄罗斯《消息报》19日报道称，俄罗斯空军的2架苏-35战斗机近日抵达位于莫斯科近郊的葛罗莫夫试飞院。
      根据消息，这2架苏-35将用于中国飞行员在俄进行的苏-35飞行培训。俄方曾表示，首批4架苏-35将于年底前交付中国，
      预计届时在俄罗斯完成培训的中国飞行员将直接驾机回国，而且很可能回国就能形成战斗力。    
    </div>
  </body> 
</html>

column-rule-style 属性は 2 つの列の間の太さを指定しますcolumns 境界線のスタイル:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
     <style>
         .newspaper
         {
              column-count:3;
              column-gap:40px;
              column-rule-style:dashed;
 
              /* Firefox */
              -moz-column-count:3;
              -moz-column-gap:40px;
              -moz-column-rule-style:dashed;
 
              /* Safari and Chrome */
              -webkit-column-count:3;
              -webkit-column-gap:40px;
              -webkit-column-rule-style:dashed;
         }
    
     </style>
  </head>
  <body>
    <div class="newspaper">
      据俄罗斯《消息报》19日报道称，俄罗斯空军的2架苏-35战斗机近日抵达位于莫斯科近郊的葛罗莫夫试飞院。根据消息，这2架苏-35将用于中国飞行员在俄进行的苏-35飞行培训。俄方曾表示，首批4架苏-35将于年底前交付中国，预计届时在俄罗斯完成培训的中国飞行员将直接驾机回国，而且很可能回国就能形成战斗力。    
    </div>

  </body> 
 
</html>

column-rule-color 属性は、2 つの列の境界線の色を指定します:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
<style>
   .newspaper
        {
            column-count:3;
            column-gap:40px;
            column-rule-style:outset;
            column-rule-color:blue;
            /* Firefox */
            -moz-column-count:3;
            -moz-column-gap:40px;
            -moz-column-rule-style:outset;
            -moz-column-rule-color:blue;
            /* Safari and Chrome */
            -webkit-column-count:3;
            -webkit-column-gap:40px;
            -webkit-column-rule-style:outset;
            -webkit-column-rule-color:blue;
        }
</style>
  </head> 
  <body>
    <div class="newspaper">
      据俄罗斯《消息报》19日报道称，俄罗斯空军的2架苏-35战斗机近日抵达位于莫斯科近郊的葛罗莫夫试飞院。根据消息，这2架苏-35将用于中国飞行员在俄进行的苏-35飞行培训。俄方曾表示，首批4架苏-35将于年底前交付中国，预计届时在俄罗斯完成培训的中国飞行员将直接驾机回国，而且很可能回国就能形成战斗力。
    </div>
  </body>  
</html>

要素がまたがる列の数を指定します

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
<style>
   .newspaper
        {
        column-count:4;
        -moz-column-count:4; /* Firefox */
        -webkit-column-count:4; /* Safari and Chrome */
        }
      h3
        {
        column-span:all;
        -webkit-column-span:all; /* Safari and Chrome */
        }
</style>
  </head> 
  <body>
    <h3>最新军事消息</h3>
    <div class="newspaper">
      据俄罗斯《消息报》19日报道称，俄罗斯空军的2架苏-35战斗机近日抵达位于莫斯科近郊的葛罗莫夫试飞院。根据消息，这2架苏-35将用于中国飞行员在俄进行的苏-35飞行培训。俄方曾表示，首批4架苏-35将于年底前交付中国，预计届时在俄罗斯完成培训的中国飞行员将直接驾机回国，而且很可能回国就能形成战斗力。
    </div>
  </body>  
</html>

列の幅を指定します

column-width 属性は、要素の幅を指定しますコラム。

りー

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> body{font:14px/1.5 georgia,serif,sans-serif;} p{margin:0;padding:5px 10px;background:#eee;} h1{margin:10px 0;font-size:16px;} .test{ width:628px; border:10px solid #000; -moz-column-width:200px; -moz-column-count:3; -webkit-column-width:200px; -webkit-column-count:3; column-width:200px; column-count:3; } .test2{ border:10px solid #000; -moz-column-width:200px; -webkit-column-width:200px; column-width:200px; } .test3{ border:10px solid #000; -moz-column-count:5; -webkit-column-count:5; column-count:5; } </style> </head> <body> <h1>列数及列宽固定:</h1> <div class="test"> <p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns. </p> <p>On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.</p> </div> <h1>列宽固定，根据容器宽度液态分布列数:</h1> <div class="test2"> <p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns. </p> <p>On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.</p> </div> <h1>列数固定，根据容器宽度液态分布列宽:</h1> <div class="test3"> <p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns. </p> <p>On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.</p> </div> </body> </html>

提出するリセットコード

自動運転