LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@syonosuke743

CSSの基礎ついて学んだことの走り書き

Posted at

CSS

CSSとは

  • 文字の色やサイズ、レイアウトなどを指定できる。
  • HTMLで書かれた構造化された文書のスタイルを指定する言語

CSSとHTMLの役割分担

HTML

  • 文章構造

CSS

  • 見た目

CSSで最も重要な基本ルール

  • セレクター（どこの）｛
    　プロパティ（何を）：値（どうする）
    ｝

実例：
h1｛
　color : #ff0000;

}

CSSを書く

  • 要素の文字色を変える。
  • インライン…h1要素にスタイル要素を入れる。検証の時に一時的にスタイルを当てたいというときに使う以外にあまり使われない。
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>初めてのCSS</title>
</head>
<body>
  <h1 style="color:#aa0000;">初めてのCSS</h1>
</body>
</html>
  • 内部参照…htmlファイルの中にスタイル属性を用意してその中にCSSを書く方法。
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>初めてのCSS</title>
  <style>
    h2{
      color: #0a0;
    }
  </style>
</head>
<body>
  <h1 style="color:#aa0000;">初めてのCSS</h1>
  <h2>内部参照</h2>
</body>
</html>
  • 外部参照…実務上一番推奨されるCSSの組み込み方。CSSを書くだけのファイルを別途作り、そこにCSSを記載をして、そのCSSファイルをHTMLからリンクタグを使って読み込む方法。
    ＜HTML＞
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>初めてのCSS</title>
  <style>
    h2{
      color: #0a0;
    }
  </style>
  <link rel="stylesheet" href="css/base.css"> 
</head>
<body>
  <h1 style="color:#aa0000;">初めてのCSS</h1>
  <h2>内部参照</h2>
  <h3>外部参照</h3>
</body>
</html>

　＜CSS＞

h3 {
  color: #00a;
}

優先順位について

同じような内容のCSSを書いた場合どのような動きをするのか

  • インライン＞内部参照＞外部参照
  • 同一ファイル内では、上から下へと評価

コメントアウト

コメントの記述

  • 構文
    /* コメントしたいこと*/

CSSのプロパティcolorの使い方

色の指定を行う

  • 構文
    p{
    color: #aa0000;
    }
  • RGB値で指定する方法
    16進数で赤を表現すると：#ff(R赤)00(G緑)00(青)
    光の三原色を組み合わせて様々な色を付ける。
  • カラー名で指定する方法
    MDNを参照

背景を指定

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>背景の指定</title>
  <style>
    body {
      /*background-color: #ccc;*/
      background-image: url(images/dot.png);/*ここでイメージ画像のパス*/
      background-repeat: no-repeat; /*ここで画像をリピートするか決める*/
      background-position: center; /*画像をどこに持っていくかの指定*/
    }

    h1 {
      background-color: #6495ed;
    }
  </style>
</head>
<body>
  <h1>背景の指定</h1>
</body>
</html>

ボックスモデル

  • ボックスとは
    HTMLタグでマークアップされた要素（タグ+コンテンツ）
  • ボックスモデルとは
    要素のコンテンツを表示するためのコンテンツ領域の周辺にはパディング領域、ボーダー領域マージン領域という3つの領域が定義されている

boxmodel.png

  • ボックスモデルを調整できるプロパティ

マージン

  • 画面を右クリックして検証をクリックすると、ボックスモデルのマージンがどうなっているかわかる。
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=, initial-scale=1.0">
  <title>マージンの連詩集</title>
  <style>
    h1, p {
      background-color: aqua;
    }

    h1 {
      margin: 50px;
    }
  </style>
</head>
<body>
  <h1>ボックスモデルの練習</h1>
  <p>ボックスモデルの練習ボックスモデルの練習ボックスモデルの練習ボックスモデルの練習</p>
</body>
</html>

上下左右別々につけることもできる。

  • マージンの相殺について
    マージンの相殺とは…要素Aの下に100PX、要素Bの上に50PXのマージンを設定していても、合わせて150PXにはならず、Aの100PXになる。上下は相殺されるが左右は相殺されない。また、パディングやボーダー領域も相殺されない。

  • パディングの設定

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=, initial-scale=1.0">
  <title>パディングの練習</title>
  <style>
    h1, p {
      background-color: aqua;
    }

    h1 {
      padding: 50px;
    }
  </style>
</head>
<body>
  <h1>ボックスモデルの練習</h1>
  <p>ボックスモデルの練習ボックスモデルの練習ボックスモデルの練習ボックスモデルの練習</p>
</body>
</html>

ボーダーの指定

  • マージンとボーダーの間の領域。罫線を引く領域
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=, initial-scale=1.0">
  <title>ボーダーの練習</title>
  <style>
    h1, p {
      background-color: aqua;
    }

    h1{
      border: solid 10px coral;
    }
  </style>
</head>
<body>
  <h1>ボックスモデルの練習</h1>
  <p>ボックスモデルの練習ボックスモデルの練習ボックスモデルの練習ボックスモデルの練習</p>
</body>
</html>
  • ボックスの横幅と高さ
    widthとhightプロパティを使って横幅と高さを指定できる。ちなみにマージン領域は指定できない。
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=, initial-scale=1.0">
  <title>ボックスモデルの横幅と高さ指定</title>
  <style>
    h1, p {
      background-color: aqua;
    }

    h1 {
      width: 400px;
      height: 240px;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>ボックスモデルの練習</h1>
  <p>ボックスモデルの練習ボックスモデルの練習ボックスモデルの練習ボックスモデルの練習</p>
</body>
</html>
  • マージンとパディングの違い

①余白のできる位置が違う

②マージンは負の値が使える

③マージンは値にautoが使える

セレクターを使う

  • エレメント（要素）セレクター
  • IDセレクター
  • クラスセレクター
!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>セレクターの練習</title>
  <style>
    body {
      background-color: #ccc;
    }
    #hello{
      color: blue; 
    }
    .completed{
      text-decoration: line-through;
    }
    .red{
      color: red;
    }
  </style>
</head>
<body>
  <h1>セレクターの練習</h1>
  <p id="hello">こんにちはまりるさん</p> <!--idは同じものを作れない-->
  <ul>
    <li><input type="checkbox">読書</li>
    <li class="completed"><input type="checkbox" checked>HTMLの学習</li> 
    <li class="completed red"><input type="checkbox" checked>JavaScriptの学習</li> <!--classは複数選択可-->
  </ul>
</body>
</html>
  • 結合子を使ったセレクタ

種類

selecta.png

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>結合子を使ったセレクタ</title>
  <style>
    /*ユニバーサルセレクタ*/
    /** {
      margin: ;
    }*/
    /* p strong{
      color: red;
    } */
    /* 子セレクタ */
    /* p > strong{
      color: red;
    } */
    /* 隣接セレクタ */
    /* h2 + p {
      color: red;
    } */
    /* 間接セレクタ */
    h1 ~ p{
      color: red;
    }
  </style>
</head>
<body>
  <h1>結合子を使ったセレクタ</h1>
  <h2>今日の<strong>注意事項</strong></h2>
  <p><strong>風邪</strong>の季節です。</p>
  <p>
    家に帰ったら<strong>手洗い</strong>をしましょう。
    <span>必要に応じて<strong>アルコール消毒</strong>もしましょう。</span>
  </p>
</body>
</html>
  • 複数のセレクタを指定する
    ・カンマ区切りで複数のセレクタを書くことができる。セレクタリストともいう
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>セレクタリスト</title>
  <style>
    h1, p{
      color: blue;
    }
  </style>
</head>
<body>
  <h1>セレクタリスト</h1>
  <p>カンマ区切りで複数のセレクタを書くことができる</p>
</body>
</html>

リンクで利用する疑似クラスを設定する

  • 疑似クラスとは…要素の状態に応じてCSSの設定を適用することができる。

主なリンクで使用する疑似クラス

  • a:link …未訪問のリンク
  • a:visited …訪問済みのリンク
  • a:hover…ホバー状態のリンク
  • a:active…クリック状態のリンク
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>疑似クラス</title>
  <style>
    a:link {
      color: black;
    }

    a:visited {
      color: red;
    }

    a:hover {
      color: green;
    }

    a:active {
      color: blue;
    }
  </style>
</head>
<body>
  <a href="#">リンク</a>
</body>
</html>

補足

  • link, visited, hover,activeの順番で記述する。
  • スマホ、タブレットではホバー状態が発生しない。

フォントの指定

  • 構文
    セレクタ{
    font-family:フォント名 or フォントファミリー
    }

例）
html {
font-family : serif;
}

  • フォント名とフォントファミリー
    ・フォント名…メイリオ、Hiragino Kuku Gothic ProN
    ・フォントの種類を示すキーワードで指定
    serif → 明朝体
    sans-serif →ゴシック体

font-familyプロパティの設定事例）
html{
font-family:,”メイリオ”,”Hiragino Kuku Gothic ProN”,sans-serif ;
}

フォントファミリープロパティの値には複数の値を設定できる。左側から優先。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>フォントの設定</title>
  <style>
    html {
      /* font-family: serif; */
      /* font-family: sans-serif; */
      font-family:"Hiragino Kaku Gothic ProN","メイリオ",sans-serif;
    }
  </style>
</head>
<body>
  <p>私わたくしはその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。これは世間を憚はばかる遠慮というよりも、その方が私にとって自然だからである。私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。筆を執とっても心持は同じ事である。よそよそしい頭文字かしらもじなどはとても使う気にならない。</p>
</body>
</html>

どうやって指定を決めるのか？

  • フォントファミリーの設定方法は1つの正解があるわけではない。
  • 大手のウェブサイトを研究する。

フォント指定の課題

  • エンジニアやデザイナーが意図しないフォントが表示される可能性がある。
  • パソコンやスマートフォンといった、システムにインストールされているフォントが、それぞれのデバイスで異なるため

ウェブフォントを利用することでどのユーザー環境でも、同一のフォントが表示されるので、製作者の思い通りの印象をユーザーに与えることができる。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=, initial-scale=1.0">
  <title>ウェブフォント</title>
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Potta+One&display=swap" rel="stylesheet">
  <style>
    html {
      font-family: 'Potta One', cursive;
    }
  </style>
</head>
<body>
  <p>私はその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない</p>
</body>
</html>

メリット

  • システムに依存しないで、意図したフォントをユーザーに表示できる。

デメリット

  • ダウンロードに時間がかかる
  • 有料の場合もある

利用頻度の高いプロパティ

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>テキストのスタイル</title>
  <style>
    h1 {
      color: blue;
      font-size: 64px;
      text-align: center;
    }
    p {
      font-weight: bold;
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <h1>テキストのスタイル</h1>
  <p>私はその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。</p>
</body>
</html>

Flexbox

Flexboxとは…複雑なレイアウトでも簡単に組めるCSSのレイアウトモジュール

Flexboxの基本的な書き方

  • FlexコンテナーとFlexアイテム

flex-container.png

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox入門</title>
  <style>
    .container{
      display: flex;
    }
    .item{
      background-color: #ffa61c;
      margin: 10px;
      padding: 20px;
    }
  </style>
</head>
<body>
  <dev class="container">
  <div class="item">item01</div>
  <div class="item">item02</div>
  <div class="item">item03</div>
  <div class="item">item04</div>
  </dev>
</body>
</html>
  • Flex-directionプロパティで子要素の並ぶ向きを指定できる
    ・row（初期値）
    ・row-revers
    ・colomn
    ・column-reverse

flexdirection.png

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox入門</title>
  <style>
    .container{
      display: flex;
      flex-direction: column-reverse;
    }
    .item{
      background-color: #ffa61c;
      margin: 10px;
      padding: 20px;
    }
  </style>
</head>
<body>
  <dev class="container">
  <div class="item">item01</div>
  <div class="item">item02</div>
  <div class="item">item03</div>
  <div class="item">item04</div>
  </dev>
</body>
</html>
  • flex-wrapプロパティで、子要素の折り返しを指定
    ・nowrap
    ・wrap
    ・wrap-reverse

flexwrap.png

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox入門</title>
  <style>
    .container{
      display: flex;
      flex-wrap: wrap;
    }
    .item{
      background-color: #ffa61c;
      margin: 10px;
      padding: 20px;
    }
  </style>
</head>
<body>
  <dev class="container">
  <div class="item">item01</div>
  <div class="item">item02</div>
  <div class="item">item03</div>
  <div class="item">item04</div>
  <div class="item">item05</div>
  <div class="item">item06</div>
  <div class="item">item07</div>
  <div class="item">item08</div>
  <div class="item">item09</div>
  <div class="item">item10</div>
  </dev>
</body>
</html>
  • justify-contentプロパティで子要素の水平方向の揃えを指定
    ・frex-start
    ・flex-end
    ・center
    ・space-between
    ・space-around
    ・soase-evenly

justifycontent.png

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox入門</title>
  <style>
    .container{
      display: flex;
      justify-content: space-evenly;
    }
    .item{
      background-color: #ffa61c;
      margin: 10px;
      padding: 20px;
    }
  </style>
</head>
<body>
  <dev class="container">
  <div class="item">item01</div>
  <div class="item">item02</div>
  <div class="item">item03</div>
  </dev>
</body>
</html>
  • align-itemsプロパティで子要素の垂直の水平方向の揃えを指定できる
    ・stretch
    ・flex-start
    ・flex-end
    ・center
    ・baceline

aline-items.png

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox入門</title>
  <style>
    .container{
      display: flex;
      height: 100vh;
      align-items: baseline;
    }
    .item{
      background-color: #ffa61c;
      margin: 10px;
      padding: 20px;
    }
    .lg{
      font-size: xx-large;
    }
  </style>
</head>
<body>
  <dev class="container">
  <div class="item">item01</div>
  <div class="item lg">item02</div>
  <div class="item">item03</div>
  </dev>
</body>
</html>
  • align-contentプロパティで子要素を複数行にしたときの揃えを指定
    ・stretch
    ・flex-start
    ・flex-end
    ・center
    ・space-between

aline-conent.png

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox入門</title>
  <style>
    .container{
      display: flex;
      height: 100vh;
      flex-wrap: wrap;
      align-content: center;
    }
    .item{
      background-color: #ffa61c;
      margin: 10px;
      padding: 20px;
    }

  </style>
</head>
<body>
  <dev class="container">
  <div class="item">item01</div>
  <div class="item">item02</div>
  <div class="item">item03</div>
  <div class="item">item04</div>
  <div class="item">item05</div>
  <div class="item">item06</div>
  <div class="item">item07</div>
  <div class="item">item08</div>
  <div class="item">item09</div>
  <div class="item">item10</div>
  <div class="item">item11</div>
  <div class="item">item12</div>
  <div class="item">item13</div>
  <div class="item">item14</div>
  <div class="item">item15</div>
  <div class="item">item16</div>
  <div class="item">item17</div>
  <div class="item">item18</div>
  </dev>
</body>
</html>
  • flex-frowプロパティでflex-directionとflex-wrapをまとめて指定する。
    ・flex-frow: row nowrap; ←flex-wrap
    ↑
    　　　 flex-direction
<meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox入門</title>
  <style>
    .container{
      display: flex;
      flex-flow: row-reverse wrap;
    }
    .item{
      background-color: #ffa61c;
      margin: 10px;
      padding: 20px;
    }

  </style>
</head>
<body>
  <dev class="container">
  <div class="item">item01</div>
  <div class="item">item02</div>
  <div class="item">item03</div>
  <div class="item">item04</div>
  <div class="item">item05</div>
  <div class="item">item06</div>
  <div class="item">item07</div>
  <div class="item">item08</div>
  <div class="item">item09</div>
  <div class="item">item10</div>
  <div class="item">item11</div>
  <div class="item">item12</div>
  <div class="item">item13</div>
  <div class="item">item14</div>
  <div class="item">item15</div>
  <div class="item">item16</div>
  <div class="item">item17</div>
  <div class="item">item18</div>
  </dev>
</body>
</html>

CSSグリッドレイアウト

CSSグリッドレイアウトとは格子状の升目をベースとしてCSSでWEBサイトのレイアウトを組む手法。

grid.png

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSSグリッドレイアウト入門</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: 200px 200px 200px;
      gap: 16px;
    }
    .item {
      background-color: #ffa61c;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">item01</div>
    <div class="item">item02</div>
    <div class="item">item03</div>
    <div class="item">item04</div>
    <div class="item">item05</div>
    <div class="item">item06</div>
    </div>
</body>
</html>
  • grid-template-colomnsプロパティで横並びの指定

grid-tanplate.png

単位frとは…gridレイアウトを使うにあたって誕生した新しいサイズの単位

fr＝fraction（分数）2fr　1fr　1fr　2：1：1で分割される

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSSグリッドレイアウト入門</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      gap: 16px;
    }
    .item {
      background-color: #ffa61c;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">item01</div>
    <div class="item">item02</div>
    <div class="item">item03</div>
    <div class="item">item04</div>
    <div class="item">item05</div>
    <div class="item">item06</div>
    </div>
</body>
</html>
  • grid-template-rowsプロパティ
    ・縦の並びの指定ができる。
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSSグリッドレイアウト入門</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr;
      gap: 16px;
      height: 100vh;
    }
    .item {
      background-color: #ffa61c;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">item01</div>
    <div class="item">item02</div>
    <div class="item">item03</div>
    <div class="item">item04</div>
    <div class="item">item05</div>
    <div class="item">item06</div>
    </div>
</body>
</html>
  • gapプロパティで余白を設定

gridmargin.png

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSSグリッドレイアウト入門</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 200px 200px;
      column-gap: 16px;
      row-gap: 30px;
      border: 1px solid;
    }
    .item {
      background-color: #ffa61c;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">item01</div>
    <div class="item">item02</div>
    <div class="item">item03</div>
    <div class="item">item04</div>
    <div class="item">item05</div>
    <div class="item">item06</div>
    </div>
</body>
</html>
  • repeat関数で繰り返しの指定
    構文
    repeat(繰り返す数　要素の幅)

grid-template-columns: 1fr 1fr 1fr;→ grid-template-columns: repeat(3,1fr);

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSSグリッドレイアウト入門</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(4,1fr);
      grid-template-rows: 200px 200px;
      gap: 16px;
    }
    .item {
      background-color: #ffa61c;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">item01</div>
    <div class="item">item02</div>
    <div class="item">item03</div>
    <div class="item">item04</div>
    <div class="item">item05</div>
    <div class="item">item06</div>
    </div>
</body>
</html>
  • minmax関数で最小値、最大値の指定
    構文
    minmax(最大値、最小値)
    grid-template-columns: repeat(3,minmax(240px,1fr));
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSSグリッドレイアウト入門</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(3,minmax(240px,1fr));
      grid-template-rows: 200px 200px;
      gap: 16px;
    }
    .item {
      background-color: #ffa61c;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">item01</div>
    <div class="item">item02</div>
    <div class="item">item03</div>
    <div class="item">item04</div>
    <div class="item">item05</div>
    <div class="item">item06</div>
    </div>
</body>
</html>
  • auto-fill/auto-fitで繰り返しの数値を指定

autofill.png

  • auto-fillの場合
    ・repeat(auto-fill,値)
    ・グリッドコンテナー（親要素）の大きさに合わせて繰り返す。
    ・グリッドコンテナーにスぺースが余る場合、空のグリッドが作られる。
  • auto-fitの場合
    ・repeat(auto-fit,値)
    ・グリッドコンテナー（親要素）の大きさに合わせて繰り返す。
    ・グリッドコンテナーにスぺースが余る場合、余白として扱われる。
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSSグリッドレイアウト入門</title>
  <style>
    .container {
      display: grid;
      gap: 16px;
    }
    .fill{
      grid-template-columns: repeat(auto-fill,minmax(130px,1fr));
    }
    .fit{
      grid-template-columns: repeat(auto-fit,minmax(130px,1fr));
      margin-top: 50px;
    }
    .item {
      background-color: #ffa61c;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="container fill">
    <div class="item">item01</div>
    <div class="item">item02</div>
    <div class="item">item03</div>
    <div class="item">item04</div>
    <div class="item">item05</div>
    <div class="item">item06</div>
    </div>
    <div class="container fit">
      <div class="item">item01</div>
      <div class="item">item02</div>
      <div class="item">item03</div>
      <div class="item">item04</div>
      <div class="item">item05</div>
      <div class="item">item06</div>
      </div>
</body>
</html>
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?