TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLのinputタグ内に記載された内容のみ右寄せに表示する方法を現役デザイナーが解説【初心者向け】
icon
icon
HTML

HTMLのinputタグ内に記載された内容のみ右寄せに表示する方法を現役デザイナーが解説【初心者向け】

初心者向けにHTMLのinputタグ内に記載された内容のみ右寄せに表示する方法について解説しています。入力フォームに表示されている内容を右寄せにするにはtext-align: right;を記述します。テキストボックスをより見やすくするための工夫も含めて学習しましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

HTMLのinputタグ内に記載された内容のみ右寄せに表示する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

inputタグ内に記載された内容のみ右寄せに表示する方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

今回は、テキストボックス内の文字を右寄せ表示する方法をご紹介します。金額などの数値を入力する場合は右寄せ表示の方が自然なので、実際に使う機会も多いでしょう。

 

inputタグに入力された内容の見え方について

input type=”text” でテキストボックスを画面に表示することができますが、基本的にテキストボックス内に入力した文字列は左寄せで表示されます。

 

入力フォームの中身のみ右寄せにする方法

入力フォームの項目によっては、右寄せに表示したい場合もあります。その場合は、以下のようなスタイルを適用すると右寄せで表示できます。

text-align: right;

 

[PR] Webデザインで副業する学習方法を動画で公開中

入力フォームの中身のみ右寄せに表示してみよう

実際に、右寄せ表示のテキストボックスを実装してみましょう。

HTML

<input type="text" value="こんにちは" style="text-align:right">

ブラウザ上には、以下のように表示されます。入力された文字列が右に寄っていることが確認できますね。

見栄えを良くするためのコーディング

先ほどのコードだけでは見た目が今一つです。見栄えを良くするために、次のようなポイントを考えます。

  1. キストボックスの枠と、文字の間に余白がほしい
  2. 文字を太字にして強調したい

このような要件を満たしたCSSのクラスを定義して、先ほどのテキストボックスに適用してみましょう。

HTML

<input type="text" value="こんにちは" class="tbox-style">

CSS

.tbox-style {
  padding-top   : 4px;
  padding-right : 4px;
  padding-bottom: 2px;
  text-align    : right;
  font-weight   : bold;
}

画面イメージ

テキストボックス内の文字がきれいに表示できましたね。paddingの値は、実際の画面表示を見ながらお好みで調整しましょう。

 

まとめ

input要素の中身を右寄せにするには、text-align: right を使いましょう。

 

監修してくれたメンター

寺谷文宏

WEBアプリケーションエンジニアとして数多くのプロジェクトを経験し、フロントエンドからサーバーサイドまで総合的な開発を得意としています。

TechAchademyではフロントエンド、Javaコースを担当。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

HTMLの特殊文字で摂氏温度記号を表示する方法を現役エンジニアが解説【初心者向け】

HTMLの特殊文字で摂氏温度記号を表示する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

HTMLの特殊文字で表示できる星を現役デザイナーが解説【初心者向け】

HTMLの特殊文字で表示できる星について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、H...
HTML

HTMLで上付き下付き文字を使って数式や化学式を書く方法を現役デザイナーが解説【初心者向け】

HTMLで上付き下付き文字を使って数式や化学式を書く方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説しま...
HTML

HTMLでSEO対策としてのディレクトリ構成を現役デザイナーが解説【初心者向け】

HTMLでSEO対策としてのディレクトリ構成について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

HTMLでimageタグを使って画像を表示する方法【初心者向け】

HTMLでimageタグを使って画像を表示する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

HTML5でcanvas要素を使ってグラフを描画する方法を現役エンジニアが解説【初心者向け】

HTML5でcanvas要素を使ってグラフを描画する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説しま...
HTML

あわせてよく読まれている記事

HTMLで右寄せ・中央寄せ・左寄せをする方法【初心者向け】現役エンジニアが解説

この記事ではWebページ制作の際に、要素の右寄せ・中央寄せ・左寄せを実現するHTML/CSSの記述方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 以下のような悩みや疑問を持っている方は、記事を読むことで解決できるでしょう。 要素の位置をどのようにコントロールするのかわからない 中央寄せしてみたつもりが、うまくいかない 目次inputタグに入力された内容の見え方について入力フォームの中身のみ右寄せにする方法入力フォームの中身のみ右寄せに表示してみようまとめ監修してくれたメンター そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 右寄せ・中央寄せ・左寄せをする方法について詳しく説明していくね！ 大石ゆかり お願いします！   ブロック要素・インライン要素 HTMLの要素には、ブロック要素とインライン要素の2種類があります。 ブロック要素は見出しなど、文章の区切りを表すものです。 divタグ pタグ h1タグ インライン要素は、以下のように文章要素を表すものです。 aタグ imgタグ spanタグ 対して、CSSではインライン要素とブロック要素を付け替えたり、両方の特徴を持ったインラインブロック要素にすることもできます。 HTMLとCSSでは、右寄せ・中央寄せ・左寄せの手法や、ブロック要素とインライン要素の手法が異なる点を把握する必要があります。 設定する際は要素がブロック要素なのか、インライン要素なのか把握しましょう。   インライン要素の表示位置 text-align インライン要素の右寄せ・中央寄せ・左寄せの指定する場合、text-alignを使います。 使い方はインライン要素を囲っている親要素に対して、インライン要素を左右中央のどの位置に表示するか指定しましょう。   この例では、インライン要素であるimgタグを親要素divの中で左右中央に配置しています。 See the Pen aligns by TAKAYOSHI (@lspuwbkv) on CodePen. 背景が水色になっている箇所が親のdiv要素の領域です。   親要素の領域の中で、インライン要素を左右中央どこに表示するかを、親要素にtext-alignというCSSを付与し指定します。 div.left { text-align: left; } div.center { text-align: center; } div.right { text-align: right; } leftは左寄せ、centerは中央、rightは右寄せです。 例えば、中央揃えをしたい場合はどの領域において中央にしたいのか、というのを意識しましょう。   [PR] Webデザインで副業する学習方法を動画で公開中ブロック要素の表示位置は左右マージンを使用する ブロック要素の右寄せ・中央寄せ・左寄せの指定をするには、左右のマージンを使います。 注意点としてtext-alignは使用しないことを把握しておきましょう。 ブロック要素に幅を指定して、左右の余白を設定していくイメージです。   以下のHTMLを具体例として見ていきましょう。 <div class="background left"> <div class="inner">LEFT</div> </div> <div class="background center"> <div class="inner">CENTER</div> </div> <div class="background right"> <div class="inner">RIGHT</div> </div>   以下では、クラスbackgroundの中でクラスinnnerの表示位置を指定しています。 しかし、うまく動作しません。 .background{     background:gray;  
HTML

JavaScriptのテキストボックスから値を取得する方法を現役エンジニアが解説【初心者向け】

JavaScriptのテキストボックスから値を取得する方法について解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。   目次 テキストボックスとは テキストボックスの値とは テキストボックスの値を取得する方法 実際に書いてみよう   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 テキストボックスから値を取得する方法について詳しく説明していくね！ 大石ゆかり お願いします！   テキストボックスとは テキストボックスとは、ユーザーが入力した情報を受け取るフォーム要素の1つです。 <input>タグで表現されます。 <input type="text" id="テキストボックスのid"> <input>タグは type 属性の値で内容が大きく変わります。 詳しくは以下の記事を参考にしてください。 mozilla.org-input   [PR] Webデザインで副業する学習方法を動画で公開中テキストボックスの値とは 上記で紹介したinput要素に入力されている内容のことを、本記事では「テキストボックスの値」と呼びます。   テキストボックスの値を取得する方法 テキストボックスの値を取得するには、大きく分けて2つのステップが必要です。 テキストボックスの要素をJavaScriptで指定する 指定したテキストボックスの要素のvalueプロパティを参照する   テキストボックスの要素をJavaScriptで指定する テキストボックスの要素をJavaScriptで指定するには様々な方法がありますが、最も一般的な方法としてgetElementByIdがあります。 この方法を使うには、指定したいテキストボックスの要素にid属性を付与する必要があります。 //HTML <input type="text" id="message"> このinput要素をJavaScriptで指定する場合、書き方は以下の通りになります。 //JavaScript const textbox = document.getElementById("message") HTML側で指定したmessageというidを、getElementByIdの引数に入れることで、その要素を指定しています。   指定したテキストボックスの要素のvalueプロパティを参照する テキストボックスの要素が指定できたら、その要素のvalueプロパティを参照すると、テキストボックスの値を取得できます。 コードにすると以下のような形です。 const textbox = document.getElementById("message") const value = textbox.value   テキストボックスの値を取得する方法についての基本的な解説は以上です。 ここからは実際にコードを書いていくことで理解を深めましょう！   実際に書いてみよう 今回のサンプルプログラムでは、テキストボックスから値を取得して別の要素に表示します。 完成形のコードは以下の通りになります。 ぜひ流れを追いながら、ご自身のエディタにコードを書き写してみましょう！ <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>sample1</title> </head> <body> <form id="form1" action="#"> <input type="text" id="input-message"> <input type="button" onclick="showMessage()" value="送信"> </form> <p id="output-message"></p> <script language="javascript" type="text/javascript"> const showMessage =
JavaScript

HTMLでspanを使用して右寄せ表示する方法を現役デザイナーが解説【初心者向け】

HTMLのspan要素はご存じでしょうか。 一部の文字の色を変更したり、表示位置を変更させたい時などに便利なタグです。 この記事では、HTMLでspanを使用して右寄せ表示する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   目次inputタグに入力された内容の見え方について入力フォームの中身のみ右寄せにする方法入力フォームの中身のみ右寄せに表示してみようまとめ監修してくれたメンター   そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 spanを使用して、右寄せ表示する方法について詳しく説明していくね！ 大石ゆかり お願いします！   span要素について spanタグは、インライン要素の性質を持つタグです。 divタグと同じく、汎用的にグループ化を定義するためのタグとして活用されます。 spanタグはテキストや要素をカスタマイズするのに向いています。 以下はコード例です。 See the Pen 2020-03-23-sample-05 by YOHEI INAI (@yohei_inai) on CodePen.   spanタグは、おもに一部分の装飾を目的としたタグとして扱われています。 全体というより、部分的な調整の役割として使用されるパターンが多いです。   divタグとの違い 似たような性質のタグとしてdivタグを挙げましたが、ブロックレベル要素かインラインレベル要素かの違いがあります。 ブロックレベルの要素を右寄せにしたい場合は、ブロックレベル要素を右寄せする方法の記事で解説しています。   span要素で囲った部分を右寄せする方法 インライン要素を右側に表示したい時には、次の方法があります。   text-alignプロパティを使う CSSのプロパティであるtext-alignを使う方法です。 値にrightを定めることによって、ブロック要素の内部のインライン要素レベルを右寄せにできます。 HTML: <p>この<span>テキスト</span>です。</p> CSS: p { text-align: right; } こちらの方法は、あくまでもspan要素ではなく、それを子要素として扱うブロックレベル要素である親要素を対象とします。 インライン要素自体を右寄せする場合には、floatプロパティを使用します。   floatプロパティを使う CSSのプロパティであるfloatを使う方法です。 値にrightを定めることによって、インライン要素であるspanそのものを右寄せにできます。 HTML: <p>この<span>テキスト</span>です。</p> CSS: p span{ float: right; }   [PR] Webデザインで副業する学習方法を動画で公開中実際に書いてみよう span要素を右寄せにする方法として、text-alignプロパティを使用する場合と、floatプロパティを使用する場合の2通りのコードを解説します。 コードを確認しながら、ご自分のPCでも実践してみましょう。   text-alignプロパティを使用した場合のサンプルコード See the Pen 2020-03-23-sample-06 by YOHEI INAI (@yohei_inai) on CodePen. 親要素であるdivの内部のインライン要素が、すべて右側に表示されています。   floatプロパティを使用した場合のサンプルコード See the Pen 2020-03-23-sample-07 by YOHEI INAI (@yohei_inai) on CodePen. 親要素であるdivの内部のインライン要素自体が、右側に表示されています。   まとめ いかがでしたでしょうか？ 今回は、CSSでspanタグを右側に表示する方法をご紹介しました。 Webサイトのデザインとして、左詰めからテキストが表示される仕組みであるため、視認性のためにもテキストを右に寄せることは滅多にありません。 レイアウトを整える目的にて使用することがありますので、参考までに留めてください。 span要素内の改行については、こちらの記事もあわせてチェックしてみください。   大石ゆかり 内容が分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   HTMLを学習中の方へ これで解説は終了です、お疲れさまでした。 つまずかず「効率的に」学びたい 副業や転職後の「現場で使える」知識やスキルを身につけたい HTMLを学習していて、このように思ったことはありませんか？ テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。 まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。 時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
HTML

中央寄せしたい！CSSでセンタリングする方法【初心者向け】

CSSでセンタリング(中央寄せ)する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 サイト内の画像を真ん中に表示したいという時にとても便利な技術です。初心者の方でも自分で書けるようになっておくと良いでしょう。 領域を中央寄せする方法、テキストや画像を中央寄せする方法を実際にソースコードを書きながら紹介しています。 目次inputタグに入力された内容の見え方について入力フォームの中身のみ右寄せにする方法入力フォームの中身のみ右寄せに表示してみようまとめ監修してくれたメンター そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。   大石ゆかり 田島メンター！！画面内の要素を常に中央に配置したいのですが、どうしたらいいですか～？ 田島悠介 色々方法があるけれど、最初に text-align : center を使ってみようか。 大石ゆかり どうやって使えば良いでしょうか？ 田島悠介 画像を囲っているdiv領域にCSSを付与するんだ。実際にやってみよう。   画像を中央寄せに表示する方法 まずは、画像を中央寄せに表示するサンプルを見てみましょう。 div領域内でimg要素をセンタリングして表示する 画像を中央寄せに表示させるためには、画像の外枠となるdiv要素にtext-align : center を付与します。 画像そのものではなく、親要素にCSSを付与することに注意しましょう。 また、div領域にtext-align : center を付与すると、領域内の子要素だけでなく、孫要素を含む全ての要素に効果が発生します。 効果は、「各インライン要素に発生し、センタリングの基準は各要素の1階層上の要素である」という点に注意しましょう。こちらの画像の場合、画像の親要素がdivであり、div領域の幅を基準に画像がセンタリングされていますね。ブロック要素には無効であることにも気を付けましょう。 上記の例では、わかりやすくdiv領域に border : solid 1px を付与して、枠が目に見えるようになっていますが、div領域が目に見えない場合は text-align : center を付与しても「何を基準にセンタリングされたのか」わからずに混乱することもあります。 div領域に border : solid 1px を付与することで中央寄せの基準が確認しやすいということも覚えておきましょう。 領域を中央寄せに表示する方法 div領域そのものや、text-align : center ではセンタリングできなかった要素を中央寄せするには、margin : 0 auto を使いましょう。 ブロック要素を margin : 0 auto でセンタリングして表示する divなどのブロック要素を中央寄せするには、中央寄せしたい要素に margin : 0 auto を付与します。 img要素をセンタリングした時と違って、「div要素のセンタリング」という文字列は中央寄せになっていません。 この文字列はpタグの中にテキストを記述して表示していますが、今回このpタグには何もCSSを付与していないためです。 marginプロパティは、付与したブロック要素の外側の余白を調整するものです。ですから、上記のグラデーション領域の左右のマージンが自動調整されて、中央寄せされています。 「margin : 0 auto」は暗記されている方も多いと思いますが、0の部分は上下のマージンに相当するため、既存マージン指定と競合を起こして表示に不具合が起こる場合があります。その場合は、margin-left : auto、margin-right : auto と指定することで、縦方向に影響を及ぼさずにブロック要素のセンタリングができます。 [PR] Webデザインで副業する学習方法を動画で公開中CSSでセンタリングを成功させるコツ 実際にWEBサイトの画面をデザインしている時に、レイアウト表示に不具合が出てハマった！という方も多いと思います。 こうした状況を解決するためのヒントを記載しておきますので、ぜひ参考にしてください。 インライン要素とブロック要素の違いを理解する 外枠のdiv領域のサイズ指定をする ブロック要素を中央寄せにしたい場合はwidthを〇〇%に指定する ブロック要素内のテキストをセンタリングして不具合が起こる場合   1.インライン要素とブロック要素の違いを理解する HTML要素は、インライン要素とブロック要素の2つに大別されます。 インライン要素とは、<img>タグや<span>タグが有名で、これらの要素は画面に横並びに表示されます。また、インライン要素特有の特性を持ちます。 ブロック要素とは、<div>タグや<p>タグが有名で、これらの要素は画面に縦並びに表示されます。また、デフォルトの幅が親ブロック要素の枠内100%に広がりますので、margin : 0 auto
CSS

JavaScriptでセレクトボックスの値を動的に生成する方法を現役エンジニアが解説【初心者向け】

JavaScriptでセレクトボックスの値を動的に生成する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次inputタグに入力された内容の見え方について入力フォームの中身のみ右寄せにする方法入力フォームの中身のみ右寄せに表示してみようまとめ監修してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでセレクトボックスの値を動的に生成する方法について詳しく説明していくね！ 大石ゆかり お願いします！   セレクトボックスとは 入力画面などで選択を行う下記のような部品です。   セレクトボックスの値とは セレクトボックスの値とは、セレクトボックスの選択肢のことです。 上記の例では、「和食」「中華」「イタリアン」のそれぞれが「セレクトボックスの値」です。 [PR] Webデザインで副業する学習方法を動画で公開中セレクトボックスの値の設定方法 HTMLのselectタグの中にoptionタグで値を記述していきます。 先程のセレクトボックスの画像の例では、下記のように3つのoptionタグが書かれています。 なお、ここで日本語の「和食」「中華」「イタリアン」はあくまでユーザー向けの表示です。 実際に内部で値として登録されるのはoptionタグのvalueである”JapaneseFood” “ChineseFood” “ItalianFood”です。 <select name="genre" id="genre"> <option value="JapaneseFood">和食</option> <option value="ChineseFood">中華</option> <option value="ItalianFood">イタリアン</option> </select> 「セレクトボックスの値を動的に生成する」とは そもそも「セレクトボックスの値を動的に生成する」とはなんでしょうか。 さきほどの和食・中華・イタリアンの例では、最初からHTMLに3つの値が設定されていますが、これは「静的に生成されている」といいます。 これに対して「動的に生成する」とは、JavaScriptを用いて、その時の状況に応じてあとから値を追加することをいいます。 例えば、先ほどのセレクトボックスで和食を選んだ場合には「天ぷら」「寿司」を、中華を選んだ場合は「炒飯」「エビチリ」を選択肢として提示したい場合、ユーザーの選択に応じて「動的に」次のセレクトボックスの値を生成する必要が出てきますね。 このような実装については、本記事後半の「実際に書いてみよう」で解説しています！ まずは、具体的に値を動的に追加する方法を見ていきましょう。 セレクトボックスの値を動的に生成する方法 JavaScriptでselectタグを取得して、optionタグを追加することで実現できます。 下記のコードでは、セレクトボックスに「天ぷら」という値を追加しています。 HTML <select name="food-name" id="food-name"> </select> JavaScript //select要素を取得する const selectFoodName = document.getElementById('food-name'); //option要素を新しく作る const option1 = document.createElement('option'); //option要素にvalueと表示名を設定 option1.value = "tempura"; option1.textContent = "天ぷら"; //select要素にoption要素を追加する selectFoodName.appendChild(option1)   最終的なHTML <select name="food-name" id="food-name"> <option value="tempura">天ぷら</option> </select> 実際に書いてみよう 選択した値によって動的にセレクトボックスの値を生成してみよう それではいよいよ実践的な実装をしていきましょう！ 100%理解するのが難しかったとしても、「こんな風に活用できるのか」とイメージするだけでも有意義ですので、ぜひ読み進めてみてください。 冒頭の例で使った料理のジャンルを選択するセレクトボックスを使って、2つめのセレクトボックスに選択したジャンルのメニューを設定してみます。 完成した動作は下記のような形になります。 和食を選んだ場合と中華を選んだ場合で、右側のセレクトボックスの選択肢が変わっていますね。 まずはHTMLソースです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> </head> <body> <!-- 1つめのセレクトボックス。これは静的に生成されている（最初から内容が決まっている） --> <select name="genre" id="genre"> <option disabled selected>ジャンルを選択してください</option> <option
JavaScript

人気の子ども向けロボットプログラミング教材10選

この記事では、人気の子ども向けロボットプログラミング教材10選を紹介しています。 ロボットプログラミングは、3歳から簡単に始められるものから大人も楽しめる本格的なものまで種類が豊富で、プログラミング初心者の方にもおすすめのプログラミング教材です。 子どものうちからプログラミングをはじめることには多くのメリットがあり、小学校、中学校、高校と段階的に必修化されるプログラミング教育への導入としても役立つため、習い事としてもおすすめです。 子どもがロボットなどの動くおもちゃやプログラミングに興味があるようでしたら、まずはロボットプログラミング教材からはじめてみてはいかがでしょうか。 目次 ロボットプログラミング教材とは 【幼児におすすめ】ロボットプログラミング教材 3選 【小学生におすすめ】ロボットプログラミング教材 7選 これもおすすめ！人気のプログラミング教材 もっと学びを深めたい子どもには ロボット教材で楽しくプログラミングを学習しよう！ ロボットプログラミング教材とは ロボットプログラミング教材とは、プログラムによって実際にロボットなどを操作して動かすことができる教材です。 自分のプログラムした内容がすぐに確認できるので、子どもが興味を持ちやすく、楽しみながら学習することができるのが特徴であり、ロボットプログラミング教材のメリットです。 知育おもちゃとしてもおすすめの文字入力不要で幼児でも操作しやすいものから、テキスト言語でプログラムする本格的なロボットまで種類が豊富です。 それでは、「幼児向け」と「小学生向け」に分けてそれぞれにおすすめのロボットプログラミング教材を紹介します！ [PR] Webデザインで副業する学習方法を動画で公開中【幼児におすすめ】ロボットプログラミング教材 3選 それではまず、幼児が遊びながら学べるロボットプログラミング教材を3つ紹介します。 幼児向けのものはWi-Fiなどのネットワークやパソコン、タブレット等が必要なく、簡単にはじめられるものが多く揃います。 1）コード・A ・ピラー ツイスト ツールタイプ：タンジブル, ロボット 対象：3歳〜 価格：5,500 円 文字入力不要 コード・A・ピラー ツイストは、幼児（3歳～6歳）の子ども向けの芋虫型プログラミングロボットです。 マテル社のベビー・プリスクールのおもちゃブランド、「フィッシャープライス」によって開発されました。 プログラミングの際に文字の入力を必要としないので、幼児の子どもでも簡単に、かつ、楽しみながらプログラミングを学習することができます！ コード・A・ピラーは乾電池式のロボットで、芋虫のように自走します。 芋虫の胴体部分が関節ごとに外れるようになっており、胴体部分のパーツのそれぞれに「前進」、「右折」、「左折」などの命令を持たせることができます。 これら胴体部分パーツをつなげ変えることでコード・A・ピラーの動きを変化させることができます。 さらに、子どもが考えたプログラムによって胴体部分のパーツを光らせたり、音を鳴らしたり、楽しく遊びながらプログラミングを学べる知育玩具となっています。 例えば、コード・A・ピラーが障害物を避けて走るにはどのようにしたらよいか、付属のゴールプレートを置いた場所に向うにはどうしたらよいかなど、手先を使いながら組み替えたり、走らせてみたり、子ども自身が考えて動かします。 この体験はプログラミング的思考を育むことにつながるでしょう。 2）Cubetto（キュベット） ツールタイプ：タンジブル, ロボット 対象：3歳〜 価格：35,750円 文字入力不要 Cubetto（キュベット）は、手を使って遊ぶ木のおもちゃ型のコーディングキットです。 キュベットと一緒に冒険することで、子どもたちはプログラミングの基礎を身につけることができます。 この教材の特徴は、テキスト言語などの子どもには複雑な手段を一切使わずに、LEGOのようなブロックを組み合わせることでロボットを動かせる、という点です。 各ブロックに命令がそれぞれ1つずつ組み込まれており、それらを組み合わせボードにはめることでキュベットに指示を出します。青い実行ボタンを押すと作成したプログラム通りにキュベットが動き出します。 魅力的なワールドマップとストーリーブックによって子どもの学習意欲が高まり、楽しく遊びながら学習ができます。 これからを生きる現代の子どもにとって重要なスキルの一つであるプログラミングを、子どもたちが分かりやすい形で身につけることができます。 3）PETS（ペッツ） ツールタイプ：タンジブル, ロボット 対象：3歳後半〜 価格：22,000円 文字入力不要 PETS（ペッツ）は、方向ブロックをロボットの背中に挿し込んで、子どもが作成した命令通りに動くプログラミング学習ロボットです。 マス目状の特性シートの上を、ときには障害物をよけながらスタートからゴールへと動かしていきます。 PETSでは、パソコンなどに難しいコードを打ち込む学習方法ではなく、実際にロボットに触れて動かし、楽しみながらプログラミング的思考を学ぶことができます。 また、ロボット自体が簡単な作りとなっているため、単三電池4本があればすぐに学習を開始することができます。 保護者や教育者など教える側にも負担なく、大人も一緒になってプログラミング体験ができるロボット教材です。 【小学生におすすめ】ロボットプログラミング教材 7選 次に、小学生はもちろん中高生から大人まで、楽しみながらプログラミングを学習できるロボット教材を7つ紹介します。 1）embot（エムボット） ツールタイプ：ビジュアル言語, ロボット 対象：6歳〜 　 価格：6,600 円 文字入力不要 タブレットでの操作を推奨 embot（エムボット）はNTTドコモが開発したプログラミング教育用の教材ロボットです。 専用のアプリをダウンロードして、そのアプリからプログラミングを行い、embotを動かすことができます。 ビジュアル言語を使っての直感的なプログラミングですので、子どもたちだけでなく教える側である先生や親御さんにとってもプログラミング学習の導入がしやすい教材です。 教材の外装はダンボールで簡単に加工しやすく、外装ダンボール，embotコア，ブザー，LEDライト，サーボモーターを自由に組み合わせて、いろいろな活用を考えることもできます。 直感的なプログラミングで論理的思考力を養うことができ、子どもたちの自由な発想、想像力を高めることも期待できます。 公式サイトではembotを活用した様々な指導案や動画が公開されていますので、ぜひそちらも参考になさってください。 2）kurikit（クリキット） ツールタイプ：ビジュアル言語 , テキスト言語 , ロボット 対象：6歳〜 価格：6,600 円 文字入力対応可 PCやタブレットでの操作を推奨 kurikit（クリキット）の代表的なプロダクトは「ココロキット」と呼ばれるロボットプログラミング教材です。 こちらは、同社のヒット商品である「ユカイな生きものロボットキット」の拡張キットとして販売されています。 子どもが工作のように自分で組み立てて作ったロボットを、ビジュアルプログラミングやテキスト言語のJavaScriptによって記述したプログラムで動かすことができます。 シンプルな構成で専門的な知識がなくても簡単に操作することができ、プログラミングでロボットを動かしながら楽しく学ぶことができます。 kurikitのコースには、初級と上級があり、初級のコースでは直感的にプログラミングができる「ビジュアルプログラミング」を、上級コースではプロのエンジニアも使っている「テキストプログラミング」に挑戦できます。 3）toio（トイオ） ツールタイプ：タンジブル, ビジュアル言語 , テキスト言語 , ロボット 対象：6歳〜大人 価格：16,980円＋税（本体セット） 文字入力対応可 PCやタブレットでの操作を推奨 toio（トイオ）には、パソコン不要でカードを使ってゲーム感覚で楽しめるものから、本格的なテキスト言語で自由にプログラミングを行えるものまで、幅広くプログラミング学習コンテンツが用意されています。 プログラミングの基本を遊びながら身につけることができ、ステップアップしていく中で枠に囚われない動作を自由に作ることができます。 toioでは、初級コースとして「GoGo ロボットプログラミング ～ロジーボのひみつ～」というコースがあります。 これは、プログラミングの基本要素「順次、分岐、反復」が楽しみながら身につく冒険絵本を作成していくコースとなっています。子どものプログラミングによって、絵本の上をかわいいロボットが動きまわります。 また、初中級コースとして、ビジュアルプログラミングアプリ「toio Do」が用意されています。 こちらはパソコンやタブレットを使ったビジュアルプログラミングにステップアップします。しかし、いきなりプログラムを作成しなくても、サンプルプログラムを使用してロボットの動き試すことから始められます。ブロックを組み換えて改造することでオリジナル作品を作ることも可能です。 さらに、上級コースとして、toioコアキューブというものが用意されています。 キューブを使い、JavaScriptなどのテキスト言語でより実践的なプログラミングが体験できます。 4）LEGO®BOOST（レゴブースト） ツールタイプ：ビジュアル言語 , ロボット 対象：7～12歳 価格：19,660円 文字入力不要 Wi-Fiなどのネットワーク、パソコン・タブレット不要 LEGO®BOOST （レゴブースト）では、LEGOで作ったロボットをプログラミングによって動くおもちゃに変身させながら、楽しくプログラミングを学ぶことができます。 障害物のあるコースを移動させたり、シューターで的に命中させたりなど、子どもが興味を持ちやすい内容になっています。 LEGOが行う動作には、ジョークやダンス、ビートボックスなど面白い機能も豊富に用意されていますので、お友達と一緒にゲームをしているようにプログラミングを学べます。 アプリには60種類以上のアクティビティがあり、プログラミングのブロックを集めながら基本的なプログラミングのスキルを身に付けることができます。 さらにアプリのクリエイティブキャンバスという機能でオリジナル作品を組み立てることもできますので、さらに発展的なプログラミングを作成することも可能です。 5）mBot（エムボット） ツールタイプ：ビジュアル言語 , テキスト言語 , ロボット 対象：8歳〜 価格：15,400円 文字入力対応可 PCやタブレットでの操作を推奨 Makeblock Co., Ltdが開発したmBot（エムボット）は、光センサーや超音波センサー、ブロックやタイヤなどがセットになっています。 いろいろな機能が入っているためプログラミング技術だけでなく、センサーの仕組みやロボットの構造なども学ぶことができます。 これらのセンサーやロボットをmBlockで作ったプログラムで動かすことで、試行錯誤してロボットの動きを考える経験が生まれます。 さらに、mBlockで作成したプログラムを、現在多くのシステムエンジニアが活用している非常に汎用的なテキスト言語、Pythonや、Arduino言語のプログラミングコードに切り替えることもでき、より実用的な製品であるといえます。 6）KOOV®（クーブ） ツールタイプ：ビジュアル言語 , ロボット 対象：8歳以上 価格：36,880 円＋税 文字入力不要 PCやタブレットでの操作を推奨 KOOV®（クーブ）とは、ブロックで自由な「かたち」を作って、それらを「プログラミング」することでさまざまな「動き」を与えながら学ぶロボット・プログラミング学習キットです。 ロボット制作の体験によって、子どもたちの探究心や創造力、未来を切り拓く思考力を育むことができます。 下記の3つのステップを子どもの理解や成長に合わせて選択することができますので、プログラミング初心者の子どもでも安心して挑戦できます。 STEP 1「ロボットレシピ」を真似る お手本となる「ロボットレシピ」を見ながら、いろいろな作品を制作して、ロボットとして動かしてみるところからプログラミング学習を始めます。 STEP 2「学習コース」で体系的に学ぶ 流れに沿ってロボットを作るためプログラミングを徐々にマスターでき、確認クイズで学習を振り返りながら、少しずつロボットプログラミングを理解することができます。基本的な組み立てとアプリの操作を学習できるコースも用意されています。 STEP 3「自由制作」で子ども自ら発明する ブロックの組み立てと、そのプログラミングの流れを一通りマスターした後で「自由制作」を行うことで、オリジナル作品づくりに挑戦することができます。 作成したロボットプログラミングの写真・動画を共有して世界中の人々に評価してもらうこともでき、新たなロボット制作のアイデアを生み出すことができます。 7）ArtecRobo2.0（アーテックロボ2.0） ツールタイプ：テキスト言語, ビジュアル言語, ロボット 対象：8歳以上 価格：27,000円 文字入力対応可 PCやタブレットでの操作を推奨 ArtecRobo2.0（アーテックロボ2.0）は、日本の学校教材メーカーである株式会社アーテックが開発したロボットプログラミング学習教材セットです。 縦、横、斜めに自由につながるブロック、モーターやセンサーなどのロボットパーツ、プログラミングソフトを使用して、ロボットの仕組みとプログラミング技術を学ぶことができます。 パーツ説明も親切で、ブロックの組み立ては工具やネジ、接着剤などを使わずに行うことができ、ロボットパーツを接続する際に付属コードの配線が見えるので、子どもがどう配線したらどう動くのかを実感しやすい構成となっています。 プログラムを作るソフトは、パソコン用では「Studuino」、iPad用では「Tickle for iPad」があります。 どちらも画面上で命令をブロックのようにつなげて並べるビジュアル言語方式なので、低学年の子どもでも無理なく学習を開始できます。 さらに、児童用テキストや教員用指導書が付属しているので、子どもがテキストを参考に予習・復習をすることができます（WEBでも公開）。 これもおすすめ！人気のプログラミング教材 ここからはロボットではないが人気のタンジブル教材を紹介します！ タンジブルとは形のないもの（命令、情報、プログラムなど）を、直接触ることができる形のあるものとして操作できるタイプの教材を指します。 ロボットプログラミング教材よりもお手頃で始めるハードルが低いので、ぜひ参考にしてくださいね。 micro:bitV2（マイクロビット） ※micro:bitはmicro:bitV2にバージョンアップされています。 ツールタイプ：テキスト言語, ビジュアル言語 対象：7〜16歳 価格：2,200円 文字入力対応可 PCやタブレットでの操作を推奨 BBC micro:bit（マイクロビット）は、イギリスの公共放送局「BBC」によって開発された教育用コンピュータで、イギリスをはじめ多くの国の子どもたちがBBC micro:bitでプログラミングを学んでいます。 クレジットカードよりも小さいサイズの電子基板にセンサーやLEDといったなどさまざまな機能が搭載されているにもかかわらず、その価格は非常に安価です。 センサーやLEDの他にも、コンパス、無線通信機能、加速度センサー、温度センサーなどの搭載されていて、子どもたちが作った段ボールやペットボトルのおもちゃに心臓部としてこのmicro:bitを入れることで、自作のおもちゃを動かすことができます。 micro:bitで学ぶプログラミングでは、マイクロビット本体のほか、プログラムを書くためのパソコン、データを転送するケーブルなどの周辺機器を扱うため、子どもが技術に触れる機会を増やすことができますよ。 Toy-Conガレージ（トイコンガレージ） ツールタイプ：ビジュアル言語 対象：6歳〜 価格：6,980円＋税 文字入力不要 Nintendo Switch本体が必要 Toy-Conガレージ（トイコンガレージ）は、Nintendo Switchを使って行うビジュアルプログラミング学習教材です。 Toy-Conガレージでは、Nintendo Labo の付属のToy-Conを作って遊ぶほかに、オリジナルのToy-Conのプログラム「発明」に挑戦することもできます。 入門動画がYouTubeの任天堂公式チャンネルにて公開されているので、専門知識がなくても簡単に操作が可能です。 Toy-Conガレージでは、タッチスクリーンを使って指で直感的に作業できるので、子どもやプログラミング初心者でもキーボードでコードを書く必要がなく、プログラミング学習の導入としてもおすすめです！ YouTubeの任天堂公式チャンネルでは「バラエティキット」に含まれている「ラジコンカーToy-Con」と「紙人形Toy-Con」を使ったものや、本体に加えて輪ゴムを使った「輪ゴムギター」など、作例が豊富に紹介されています。 ですが、工作は必須ではないのでJoy-Conだけを使用してプログラミングを始めることもできますよ！ 子どもがあれこれと工夫することで、「あそび」とはまた別の手触りや反応といった「体験」を作ることが可能となっているプログラミング学習教材です。AND、NOT、カウンター、タイマーなど、一般的なプログラミングの概念に通じる機能が詰まっていて学習教材としても質が高いと言えます。 MESH（メッシュ） ツールタイプ：ビジュアル言語 対象：6歳〜大人 価格：13,871円＋税 文字入力不要 Wi-Fiなどのネットワーク、パソコン・タブレットなど不要 MESH（メッシュ）は、ソニー株式会社が開発した、小さな「電子タグ」型のプログラミング学習教材です。 USBメモリを一回り大きくしたような形状で、スマートフォンやタブレット、Windows10上のアプリを使ってプログラミングが行えます。 アプリは画面上のアイコンを組み合わせてプログラムを作成する「ビジュアルプログラミング」形式になっており、子どもやプログラミング初心者でも直感的なプログラミングが可能です。 MESHには「LED」、「ボタン」、「人感」、「動き」、「温度・湿度」、「明るさ」、「GPIO（拡張）」の７種類の電子タグがありそれぞれを組み合わせることで色々な機能が実現できます。 MESHではプログラミングしてできたものを「レシピ」と呼び、そのレシピを作成する際に何を作るか、どの電子タグを組み合わせるかなどを子どもが考えながら、意図した仕組みを完成させるので、自然とプログラミング的思考が身に付きます。 複数のMESHの組み合わせけでなく、身近にあるモノをMESHとスマホなどの通信機器と組み合わせ、「モノ」に通信機能をもたせる、いわゆるIoT（Internet
子ども向けプログラミング

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

エンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

テックアカデミーGAIナレッジベース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLのinputタグ内に記載された内容のみ右寄せに表示する方法を現役デザイナーが解説【初心者向け】