【家庭菜園】キャベツ栽培手順と質問回答の回転カード

2025-11-25

キャベツは、サラダに、炒め物に、スープになど、料理の定番食材として欠かせません。また、初心者でも育てやすく、プランターでも十分に大きな玉を作れることもあり、家庭菜園でも人気の高い葉物野菜です。この記事では、キャベツの栽培手順と育てるうえで重要なポイントについてまとめています。皆さまの家庭菜園ライフのお役立ち情報になれば幸いです。

ここで、まずは質問です。

作成： Calc Page（CodePen）

上記のWebアプリケーション（質問回答の回転カード）のプログラミングコード等もご紹介していますので、ご興味のある方のご参考になればと思います。

質問回答の解説

キャベツは成長が進むと中心が巻き始め、玉がぐっと大きくなります。この時期、土がカラカラの状態から急に大量の水を吸うと、内部が一気に肥大し、外側の葉と成長スピードの差が出て“割れてしまう”ことがあります。これが巻き割れと言われる現象です。

巻き割れを防ぐには、以下のように土の水分を“急に変化させない”ことが大切です。特に収穫間近は巻き割れのリスクが高まるため、こまめなチェックが必要です。

常に適度な水分を保つ
大雨の前後は水分量に注意する
乾燥状態を長く作らない

キャベツの栽培手順

STEP

苗の植え付け（春植え：3〜5月）

キャベツの根は浅く張るため、植え付けは深植えしないよう注意します。株間は40〜45cmほど確保し、風で傷まないよう活着するまで防虫ネットをかけておくと安心です。

STEP

生長期（植え付け後〜30日ほど）

外葉がどんどん広がっていく重要な時期です。この外葉がキャベツの玉（結球）を包み込む力となるため、葉がしっかり大きくなるよう追肥をスタートさせます。また、この時期からアオムシやヨトウムシなどの害虫が増えるので、葉裏のチェックも忘れずに行います。

STEP

結球開始〜玉が肥大する時期

中心部が巻き始め、キャベツらしい丸い形になっていきます。この頃に最も大事なのが水分管理です。土が乾きすぎると、急激に水を与えた際に巻き割れが起こります。土の表面が乾いてきたら、朝のうちにたっぷり水を与え、過度に乾かさないように保ちます。

STEP

仕上げ肥料と収穫前の管理

玉が握りこぶし大になったら、最後の追肥を施します。これにより巻きが締まり、大玉になりやすくなります。収穫直前は巻き割れが起こりやすいため、特に雨が続く時期は様子をこまめに確認しましょう。

収穫の目安と保管方法

キャベツは、春まきの場合5〜7月に収穫期がやってきます。玉を手で軽く押してみて“しっかり硬さを感じる”状態なら収穫適期です。根元を切って収穫します。

収穫後は、外側の葉を数枚残しておくと乾燥を防げます。風通しの良い涼しい場所で数日保存でき、ポリ袋に入れて冷蔵庫に入れるとさらに長く保存できます。

プログラミングコード

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表裏回転カード</title>
</head>
<body>

  <div class="card">
    <img src="question.jpg" alt="質問画像" class="front">
    <img src="answer.jpg" alt="回答画像" class="back">
    <button id="flipButton">回答へ</button>
  </div>

</body>
</html>

Sass（CSS）


$blue: #007acc;
$transition: 0.6s;

@mixin card-side {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  position: absolute;
  backface-visibility: hidden;
  transition: transform $transition;
}

.card {
  position: relative;
  width: 250px;
  height: 350px;
  margin: auto;
  perspective: 1000px;

  img {
    @include card-side;
  }

  .back {
    transform: rotateY(180deg);
  }

  &.flipped {
    .front {
      transform: rotateY(180deg);
    }

    .back {
      transform: rotateY(0);
    }
  }

  #flipButton {
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 20px;
    border: none;
    background-color: $blue;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;

    &:hover {
      background-color: darken($blue, 10%);
    }
  }
}

JavaScript


document.getElementById('flipButton').addEventListener('click', () => {
  const card = document.querySelector('.card');
  const button = document.getElementById('flipButton');
  card.classList.toggle('flipped');
  button.textContent = card.classList.contains('flipped') ? '問題へ' : '回答へ';
});

プログラミングコードの解説

HTML

htmlタグ内の解説

<!DOCTYPE html>: このタグは、htmlの書き始めに記載するプログラミングの宣言文です。ブラウザが正しくhtmlを解釈するために記載します。
<html lang=”ja”>: htmlの開始タグです。lang=”ja”は「日本語のページ」であることを示しています。
</html>: htmlの閉じタグです。<html>タグとセットで使います。

headタグ内の解説

<head>: headの開始タグです。<head>タグには、ページの見た目には表示されない情報（メタデータ）を記載します。
<meta charset=”UTF-8″>: 文字フォーマットを指定するタグです。UTF-8は、文字フォーマットの種類の一つで日本語にも対応しており、これをしていすることで文字化けを防ぎます。
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>: スマホやタブレットでも正しく表示するためのタグです。「画面幅に合わせて1倍の倍率で表示する」という意味になります。
<title>表裏回転カード</title>: タイトルを記載するタグです。ブラウザのタブに表示され、検索結果のタイトルとしても使われます。
</head>: headの閉じタグです。<head>タグとセットで使います。

bodyタグ内の解説

<body>

bodyの開始タグです。<body>タグの中が、実際にブラウザに表示する内容となります。

<div class=”card”>

<div>タグの開始〜閉じタグ内を一体化した1つのブロック（箱）が出来上がります。class=”card”とすることで、CSSでこのブロック全体スタイルの設定や、JavaScriptでこのブロック内のタグを特定するなど、後処理の管理が容易になります。

<img src=”question.jpg” alt=”質問画像” class=”front”>

画像を読み込んで表示する<img>タグです。<img>タグは画像を表示するための要素です。

src=”question.jpg”：画像ファイルのパス
alt=”質問画像”：画像が表示されないときの代替テキスト
class=”front” ：ここでは、表面のカードと裏面のカードを区別するためのクラス名

<img src=”answer.jpg” alt=”回答画像” class=”back”>

画像を読み込んで表示する<img>タグです。<img>タグは画像を表示するための要素です。

src=”answer.jpg”：画像ファイルのパス
alt=”回答画像”：画像が表示されないときの代替テキスト
class=”back” ：ここでは、表面のカードと裏面のカードを区別するためのクラス名

この2枚の画像が、このあとJavaScriptやCSSを用いて「表裏回転カード」のアニメーションを作る素材になります。

<button id=”flipButton”>回答へ</button>

「表裏回転カード」のアニメーションを実行するボタンの要素です。ユーザーがこのボタンをクリックするとカードの表面と裏面が切り替わります。

id=”flipButton”をつけておくことで、JavaScriptでこのボタンを指定してカードの回転を制御できます。

</div>

divの閉じタグです。<div>タグとセットで使います。

</body>

bodyの閉じタグです。<body>タグとセットで使います。

Sass（CSS）

$変数名：変数の設定

Sassでは、$変数名で色や数値を登録できます。あとから何度でも使えるため、デザインが管理しやすくなります。ここでは、以下のように使い分けを行っています。

変数	内容
$blue	ボタンの色
$transition	アニメーションの時間（0.6秒）

@mixin card-side：共通スタイル

@mixin は「スタイルのひな型（共通パターン）」を定義する機能です。複数の要素で同じスタイルを使いたいときに便利です。

width, height：カードサイズに合わせた幅と高さの設定です。
border-radius: 10px：角を丸くして柔らかい印象にします。
position: absolute：カード内で重ねて配置（表と裏を重ねるため）します。
backface-visibility: hidden：裏側が透けて見えないようにする設定します。
transition：回転アニメーションをなめらかにするために設定します。

また、「@include card-side;」と書くことで、この設定を再利用できます。

.card：カード全体の枠

カードの外枠を以下のように定義しています。

プロパティ	内容
position: relative	子要素を基準に配置
width / height	カードのサイズ設定
margin: auto	ページ中央に配置
perspective: 1000px	立体感（視点距離）の設定

img要素：表と裏の画像設定

先ほどの@mixin card-sideを呼び出して、画像両面に共通のスタイルを適用しています。これにより、カードの表(.front)と裏(.back)がぴったり重なります。

.back：裏面の初期位置

rotateY(180deg)で、裏面の画像を横方向に180度回転させて裏向きにしておきます。これにより、最初は表面だけが見える状態になります。

&.flipped：クリック後の回転動作

この部分は、JavaScriptで .card に flipped クラスが追加されたときの動きを指定しています。これにより、クリック時に「表面と裏面が切り替わる」アニメーションが設定できます。

.front（表面） → 180度回転して裏向きになる
.back（裏面） → 正面を向いて表示される

#flipButton：ボタンのデザイン

プロパティ	説明
position: absolute	カードの下中央に固定配置
transform: translateX(-50%)	ボタンを正確に中央揃え
padding	内側の余白（クリックしやすく）
background-color: $blue	青を基調にしたテーマカラー
border-radius: 5px	角丸でやわらかい印象
cursor: pointer	マウスを重ねるとポインター表示
transition	ホバー時の色変化をなめらかに
&:hover	ホバー時に色を10％暗く（darken関数）

JavaScript

document.getElementById …

HTMLで作成したボタンをクリックすると「表裏回転カード」の表面と裏面が切り替わるアニメーションを作りたいので、この切り替えボタンを取得していきます。

document は「今表示されているHTML全体）」、getElementById(‘flipButton’) は「IDが flipButton の要素を取得する」という意味になります。

.addEventListener …

先ほど取得した切り替えボタンにイベントを与えます。具体的には、「クリックされたときに { … }内の処理を実行してください」という命令文を作成していきます。

addEventListener は「イベントを監視する」ための関数で、ここでは「クリック（click）」イベントを指定しています。

const card = document.querySelector(‘.card’);

「クリック（click）」イベントの命令文作成前の準備を行います。まずは、カードの状態を切り替えるための変数 cardを作成します。

document.querySelector(‘.card’) は「class属性が card の要素を選ぶ」という意味です。これを変数 card に格納します。

const button = document.getElementById(‘flipButton’);

次に、ボタンに記載されているテキストを変更するために、変数buttonを作成します。

document.getElementById(‘flipButton’)は先ほどと同じく「class属性が flipButton の要素を選ぶ」という意味です。これを変数 button に格納します。

card.classList.toggle(‘flipped’);

先ほど作成した変数cardのクラス名を操作していきます。「.classList 」は要素に付いているクラス名の一覧を操作するためのプロパティ、「.toggle(‘flipped’) 」は、「flippedクラスを持っていなければ追加、持っていれば削除」という動きをします。

つまり、クリックのたびにカードに flipped クラスが付いたり消えたりします。前述の通り、CSS側でこの flipped クラスに「回転アニメーション」を設定し、カードの表面と裏面を切り替えます。

button.textContent = …

ここではボタンの表示文字を切り替えています。「card.classList.contains(‘flipped’)」は、カードが現在「flipped」状態（裏面）かどうかを確認を示しています。「? ‘問題へ’ : ‘回答へ’」は、もし裏面なら「問題へ」、表面なら「回答へ」と表示を切り替える条件式です。

裏面を表示中 → 「問題へ」ボタンに変わる
表面を表示中 → 「回答へ」ボタンに変わる

Webアプリケーションの開発（Django/Python）

プロジェクトの制作

setting.py

プロジェクト全体に関する設定ファイルです。アプリを INSTALLED_APPS に追加し、テンプレートディレクトリ（例：BASE_DIR / ‘templates’）および静的ファイルディレクトリ（例：BASE_DIR / ‘static’）を登録します。


INSTALLED_APPS = [
  'django.contrib.admin',
  …,
  'myApp.apps.MyAppConfig',
]
TEMPLATES = [
  {
    …,
    'DIRS': [ BASE_DIR / 'templates' ],
    …,
  },
]
STATIC_URL = '/static/'
STATICFILES_DIRS = [ BASE_DIR / 'static' ]

urls.py

プロジェクト全体の URL ルーティング設定です。urlpatterns にアプリ側 URL を include() で紐づけます。


from django.urls import path, include
urlpatterns = [
  path('admin/', admin.site.urls),
  path('', include('myApp.urls')),
]

templates

HTML テンプレートを格納するディレクトリ（例：templates/）を作成し、共通レイアウト（base.html）を定義します。

各ページ（ホーム・登録・編集・削除）で {% extends ‘base.html’ %} を使い共通部分を継承します。

static/css

静的ファイル（CSS／JavaScript／画像など）を格納するディレクトリです。

メインの Sass／CSS ファイルをこの中に配置し、テンプレート内で {% static ‘css/style.css’ %} などで読み込みます。

アプリの制作

urls.py

アプリ固有の URL を設定します。CRUD 操作用の path() を定義します。

   
from django.urls import path
from . import views

urlpatterns = [
  path('', views.HomeView.as_view(), name='home'),
  path('create/', views.CreateView.as_view(), name='create'),
  path('/detail/', views.DetailView.as_view(), name='detail'),
  path('/update/', views.UpdateView.as_view(), name='update'),
  path('/delete/', views.DeleteView.as_view(), name='delete'),
]

views.py

各 URL に対応するビュー（画面表示・処理）を定義します。CreateView・ListView・DetailView・UpdateView・DeleteView といった Django の汎用クラスを使うことが多いです。

models.py

データベースのモデルを定義します。例えばタイトルと内容をもつメモ帳なら：

   
class Memo(models.Model):
  title = models.CharField(max_length=100)
  description = models.TextField()

  def __str__(self):
    return self.title

templates

アプリ側の HTML テンプレートを app/templates/ 以下に配置します。各テンプレートには、先に作成した base.html を継承し {% block content %} の中に個別内容を書きます。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

【初級編】３桁の数字当てクレーンゲームの遊び方と攻略ポイントを完全解説〜Webアプリケーション〜

【家庭菜園】キャベツ栽培手順と質問回答の回転カード

質問回答の解説

質問回答の解説

キャベツの栽培手順

収穫の目安と保管方法

プログラミングコード

HTML

Sass（CSS）

JavaScript

プログラミングコードの解説

HTML

htmlタグ内の解説

headタグ内の解説

bodyタグ内の解説

Sass（CSS）

$変数名：変数の設定

@mixin card-side：共通スタイル

.card：カード全体の枠

img要素：表と裏の画像設定

.back：裏面の初期位置

&.flipped：クリック後の回転動作

#flipButton：ボタンのデザイン

JavaScript

document.getElementById …

.addEventListener …

const card = document.querySelector(‘.card’);

const button = document.getElementById(‘flipButton’);

card.classList.toggle(‘flipped’);

button.textContent = …

Webアプリケーションの開発（Django/Python）

プロジェクトの制作

setting.py

urls.py

templates

static/css

アプリの制作

urls.py

views.py

models.py

templates

関連記事

コメント

コメントする コメントをキャンセル

コメントするコメントをキャンセル