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

CSSのgrid-template-columnsプロパティとは？使い方と実装サンプルを解説

grid-template-columnsプロパティは、CSS Gridレイアウトにおいて列（カラム）の数やそれぞれの幅を定義するために使用されるプロパティです。値をスペースで区切って並べることで、グリッドコンテナ内に複数の列を簡単に作成できます。

主な値の指定方法

  • auto：コンテンツの量に応じて列幅が自動的に決まります。
  • px・%など：固定値や割合で列幅を明示的に指定します。
  • fr：利用可能な空間に対する比率で列幅を分配します（例：1fr 2fr）。
  • repeat()：同じ設定の列を繰り返し定義でき、記述を簡潔にできます（例：repeat(3, 1fr)）。

実装例

以下のコードは、grid-template-columnsプロパティを使用して2列のグリッドレイアウトを実装した例です。auto autoと指定することで、各要素の内容に合わせた幅を持つ2つの列が自動的に生成され、6つの要素が2列×3行に配置されます。

<!DOCTYPE html>
<html>
   <head>
      <style>
         .container {
            display: grid;
            background-color: blue;
            grid-template-columns: auto auto;
            padding: 20px;
            grid-gap: 20px;
         }
         .container > div {
            background-color: orange;
            border: 2px solid gray;
            padding: 35px;
            font-size: 30px;
            text-align: center;
         }
      </style>
   </head>
   <body>
      <h1>Game Board</h1>
      <div class = "container">
         <div class = "ele1">1</div>
         <div class = "ele2">2</div>
         <div class = "ele3">3</div>
         <div class = "ele4">4</div>
         <div class = "ele5">5</div>
         <div class = "ele6">6</div>
      </div>
   </body>
</html>

  1. CSSのcursorプロパティ完全ガイド：マウスカーソルの種類を自由に指定する方法

    CSSの cursor プロパティを使用すると、要素にマウスを重ねたときに表示されるカーソル（ポインタ）の種類を指定できます。リンクやボタン、ドラッグ可能な領域など、要素の役割に応じて適切なカーソルを設定することで、ユーザーにとって直感的で分かりやすいインターフェースを実現できます。 基本的な使い方 cursorプロパティは、CSSの他のプロパティと同様に、セレクタに対して値を指定するだけで使用できます。インラインスタイルでも外部スタイルシートでも記述可能です。 <html> <head> </head> <body>

  2. CSSのword-breakプロパティとは？使い方とサンプルコードを解説

    word-breakプロパティは、CSSでテキストの改行（行の折り返し）ルールを制御するためのプロパティです。特に、単語の途中で改行するかどうか、ハイフンや句読点でのみ改行するかどうかなどを指定できます。 word-breakプロパティの主な値 normal：通常の改行ルールに従います（初期値）。日本語や中国語などのCJK文字では任意の位置で改行できますが、欧文の単語途中では改行されません。 break-all：すべての文字の間で改行が可能になります。単語の途中でも強制的に折り返されるため、幅の狭いコンテナに長い英単語を収めたい場合に便利です。 keep-all：CJK言語（日本語・中国語・