【家庭菜園】じゃがいも栽培手順と質問回答の回転カード

2025-11-20

じゃがいもは家庭菜園でも特に人気の高い野菜で、比較的育てやすく収穫量も多いのが魅力です。プランターでも栽培できるため、庭がなくても挑戦できます。この記事では、じゃがいもの栽培手順や育てるコツをご紹介します。ご覧いただいた皆さまの参考になれば幸いです。

ここで、まずは質問です

作成： Calc Page（CodePen）

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

質問回答の解説

じゃがいもは、地表に近い部分に芋がつく性質があります。芽が伸びても土寄せをしないと芋が地表に出やすく、日光に当たって緑化し、ソラニン（有害成分）が増えてしまいます。

また、土寄せは“保温”効果や“倒伏防止”にも役立ち、健康な生育環境をつくるうえで非常に重要です。土寄せの基本は「芽が10〜15cm伸びる → 2〜3回に分けて土を寄せること」です。

こまめに土寄せを行うことで、じゃがいもが肥大するスペースが広がり、結果として収穫量も増える傾向があります。じゃがいもの出来は「土寄せ」「日当たり」「排水の良い土」で大きく変わります。なかでも土寄せは成功の必須ポイントです。

じゃがいもの栽培手順

STEP

種いもの植え付け（2〜3月：春植え）

暖かくなる直前の時期に植え付けます。切り口が乾いている種いもを使用しましょう。植え付け後は軽く土をかぶせ、しっかり日が当たる場所で管理します。

STEP

芽が伸びる時期（4〜5月）

芽が10〜15cmに育ったら、一番元気な芽を2〜3本残す「芽かき」を行います。その後、茎の周りに土を寄せる1回目の土寄せを実施します。このタイミングで1回目の追肥も行いましょう。

STEP

つぼみ〜開花（5〜6月）

生育が旺盛になる時期です。再び株元にしっかり土を寄せて2回目の土寄せを行います。じゃがいもは過湿に弱いため、長雨時期は排水に注意し、土がべたつく状態を避けるのがポイントです。

STEP

肥大期（6〜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をコピーしました！

【家庭菜園】じゃがいも栽培手順と質問回答の回転カード

質問回答の解説

質問回答の解説

じゃがいもの栽培手順

収穫の目安と保管方法

プログラミングコード

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

関連記事