【家庭菜園】たまねぎ栽培手順と質問回答の回転カード

2025-11-112025-11-17

たまねぎは、いろいろな料理の材料として使われていることから一年を通して大活躍する野菜です。コツをつかめば初心者でも立派な玉を収穫できることから家庭菜園においても人気が高いです。この記事では、たまねぎ栽培のポイントや手順をご紹介します。ご覧いただいたみなさまの参考になれば幸いです。

ここで、まずは質問です

作成： Calc Page（CodePen）

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

質問回答の解説

たまねぎの苗を深く植えると球が小さくなる理由は、球が肥大する部分が土の中に埋まりすぎてしまうためです。たまねぎは地表付近で球が大きくなる性質があり、少し頭が見えるくらいの浅い位置で育つことで、球が広がりやすくなります。しかし深植えをすると、肥大する部分に土の圧力がかかり、日光や空気に触れる量も少なくなるため、球が十分に膨らむことができなくなります。

また、苗を深く植えた場合は、葉が地上に出るまでに余計なエネルギーを使うことになります。その結果、葉の枚数が増えにくく、生長が遅れることで球も大きく育ちません。たまねぎは葉の枚数と球の大きさが比例するため、この影響は大きくなります。

さらに、深い場所は湿りやすく、根が酸欠になりやすい環境です。たまねぎは湿気をあまり好まない植物であるため、深く植えることで根の張りが弱くなり、十分な栄養や水分を吸収しにくくなってしまいます。その結果、球の肥大がさらに妨げられてしまいます。

正しい植え付けの深さは、苗の首部分が土から1〜2センチほど出る浅植えです。植えた直後は苗が倒れやすいことがありますが、成長するにつれて自然に根が張るため問題はありません。浅植えにすることで、たまねぎは本来の位置で球を膨らませることができ、大きく育ちやすくなります。

そして、たまねぎは冬を越してから一気に成長します。特に春の気温上昇と日照時間の増加が、球の肥大を促す重要な要因です。この時期に適切な追肥と水やりを行うことで、葉が丈夫に育ち、結果として大きく甘いたまねぎになります。逆に、肥料が少なすぎると球が小さくなり、多すぎると葉ばかり茂ってしまうのでバランスが大切です。

たまねぎの栽培手順

STEP

種まき（09月中旬〜10月下旬）

玉ねぎの発芽は、通気性と水はけが重要です。固い土や水分を抱えすぎる土では根が弱くなります。

STEP

苗植え（11月頃）

秋に苗を植え付けます。植える深さは「根元が少し見える程度」です。深植えは生育不良の原因になるので注意してください。

STEP

冬越し（12月〜2月）

寒さで生長が止まる時期ですが、根をしっかり張る大事な期間となります。霜対策として敷きわらをしておくと安心です。

STEP

追肥と水やり（3月〜4月）

春になったら1〜2回追肥を行いましょう。葉が黄ばみ始めるまで、水分を切らさないようにします。

STEP

収穫前の乾燥（5月〜6月）

葉が倒れ始めたら、収穫の合図です。すぐ抜かずに、数日間そのまま乾かすと保存性が高まります。

収穫目安と保管方法

葉（茎）が全体の7〜8割ほど自然に倒れたら収穫OK！倒れるのは、球が十分に太り、根の生長が止まったサインです。早すぎると球が小さく、遅すぎると根が傷みやすくなります。

葉をつけたまま2〜3日ほど畑で乾燥させます。その後、風通しの良い日陰で1〜2週間さらに乾燥させます。完全に乾いたら葉と根を切り落とし、吊るして保存すると腐りにくくなります。

プログラミングコード

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をコピーしました！

【家庭菜園】たまねぎ栽培手順と質問回答の回転カード

質問回答の解説

質問回答の解説

たまねぎの栽培手順

収穫目安と保管方法

プログラミングコード

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

関連記事

コメント

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

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