TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLでページを再描画する方法を現役エンジニアが解説【初心者向け】
オーダーメイドコース
icon
icon
HTML

HTMLでページを再描画する方法を現役エンジニアが解説【初心者向け】

初心者向けにHTMLでページを再描画する方法について解説しています。ページの再描画にはrefreshによる方法、reloadによる方法があります。それぞれの違いと書き方、設定方法を覚えましょう。

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

HTMLでページを再描画する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

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

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

ページを再描画する方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

目次

 

再描画する場面

HTMLのページを再描画するには以下のような場面があります。

  • refresh(リフレッシュ)、リダイレクト：ページ自体を別のページに移動したい場合
  • reload(リロード)：ページを再度表示（リロード）することで最新化したい場合

 

[PR] Webデザインで副業する方法とは

再描画する方法

refreshを行うにはheadセクションのmetaタグで秒数と遷移先を記述します。例えば以下のページは3秒後にGoogleに移動します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="refresh" content="3; URL=https://www.google.co.jp">
  <title>Sample</title>
</head>
<body>
  このページは３秒後にGoogleに移動します。
</body>
</html>

refreshについて、詳しくは以下の記事も参考にしてください

MDN – HTTPのリダイレクト

 

ページを再描画してみよう

reloadを行うにはJavaScriptのreload()関数を使用します。

location.reload();

reload()関数について、詳しくは以下の記事も参考にしてください。

MDN – Location.reload()

reload()を使った例は以下のようになります。

<!DOCTYPE html>
<html lang="ja">
  <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Sample</title>
</head>
<body>
  ただ今の時刻は<span id="dt"></span>です。
  <input type="button" onclick="location.reload();" value="リロード" />
  <script>
    const dt = document.getElementById("dt");

    // 現在時刻を表示
    const now = new Date();
    dt.innerHTML = now.toLocaleTimeString();
  </script>
</body>
</html>

実行結果は以下のようになります。リロードボタンを押すたびに画面が更新されます。

 

まとめ

今回の記事ではHTMLでページを再描画する方法について学習しました。

 

監修してくれたメンター

太田和樹（おおたかずき）

ITベンチャー企業のPM兼エンジニア

普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。

開発実績：画像認識技術を活用した駐車場混雑状況把握、音声認識を活用したヘルプデスク支援システム、ロボットアプリの開発、大規模基幹系システムの開発・導入マネジメント。著書「知識ゼロからの機械学習入門（技術評論社）」。

地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

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

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

記事を検索

関連するキーワード

関連する記事

HTMLでiframeを使う方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、HTMLでiframeタグを使う方法について解説します。...
HTML

HTMLのinput要素とrequired属性の使い方を現役デザイナーが解説【初心者向け】

HTMLのinput要素とrequired属性の使い方について解説します。 そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方 の記事を読...
HTML

HTMLの要素を操作する方法を現役デザイナーが解説【初心者向け】

HTMLの要素を操作する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HTM...
HTML

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

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

HTMLでbodyタグにonLoad属性を使う方法を現役エンジニアが解説【初心者向け】

HTMLでbodyタグにonLoad属性を使う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

HTMLをスマホ対応にする方法を現役デザイナーが解説【初心者向け】

HTMLをスマホ対応にする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HT...
HTML

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

JavaScriptでブロック崩しを作成する方法を現役エンジニアが解説【初心者向け】

JavaScriptでブロック崩しを作成する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まるでしょう。   なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 ブロック崩しを作成する方法について詳しく説明していくね！ 大石ゆかり お願いします！   Canvasとは Canvasとは、グラフィックやアニメーションを描画するHTML要素です。 JavaScriptで図形を描画して動かすことで、ゲームを作成することも可能です。 また、今回はCanvasを使ったブロック崩しの作成方法を紹介していくため、その使い方を学習していきましょう。   JavaScriptでブロック崩しを作成する方法 JavaScriptにはCanvasのAPI（canvasを操作する部品）が用意あります。 CanvasのAPIを使って四角や丸を書いて、動きの処理を作成すればブロック崩しが作成できるでしょう。 CanvasのAPIは下記の3つの手順で使えるようになります。 HTMLでcanvasタグを記述する JavaScriptでcanvasタグを取得する 取得したcanvasタグ（HTMLCanvasElement）のgetContextメソッドを呼び出す 今回作成するブロック崩しは3D（立体）ではなく2D（平面）であるたる、getContextメソッドの引数には2dを指定してください。 getContextの戻り値であるCanvasRenderingContext2Dから、図形を書くためのいろいろなメソッドを呼び出すことが可能です。   [PR] Webデザインで副業する方法とは実際に書いてみよう（サンプルコード） サンプルコードで下記の画像のようなブロック崩しを作成します。 HTMLでcanvasタグを記述 <canvas id="canvas" width="480" height="400"></canvas> JavaScriptで取得するためにidにcanvasという名前を設定しています。 CSSでcanvasタグの領域を黒くする canvas { background: black; } 実際には、この記述はなくても動作に影響はありません。 canvasタグの領域をわかりやすくするために黒くしています。   メインのJavaScriptのソースコードをみていみていきましょう。 let canvas = document.getElementById("canvas"); let ctx = canvas.getContext("2d"); /******************** ボールの設定 ********************/ const BALL_COLOR = 'skyblue'; //ボールの色 const BALL_RADIUS = 10; //ボールの大きさ（半径） let ballX = canvas.width / 2; //ゲーム開始時のX軸（←→）の位置 let ballY = canvas.height - 30; //ゲーム開始時のY軸（↑↓）の位置 let xMove = 2; //X方向への移動量 let yMove = 2; //Y方向への移動量 /******************** 操作する板の設定 ********************/ const BAR_COLOR = 'blue'; //板の色 const BAR_HEIGHT =
JavaScript

Pythonで複数のグラフを重ねて描画する方法を現役エンジニアが解説【初心者向け】

Pythonで複数のグラフを重ねて描画する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 Pythonで複数のグラフを重ねて描画することで、よりわかりやすいデータ表示が可能になります。 実務でもPythonを利用して機械学習など行う際に、複数のグラフを重ねた表示をしますので、ぜひ学習してみてください。 目次再描画する場面再描画する方法ページを再描画してみようまとめ監修してくれたメンター そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、Pythonに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Pythonで複数のグラフを重ねて描画する方法について詳しく説明していくね！ 大石ゆかり お願いします！   この記事では、Pythonにおいて複数の2次元グラフを1つの画像にして、重ねて描画する方法について解説します。   グラフを描画する方法 まずは、1つの2次元の線グラフを描画する方法について解説します。 Pythonでグラフを描画する際に、よく使われているライブラリがMatplotlibというライブラリです。 Matplotlibは、マットプロットリブという読み方をします。 Matplotlibは、線グラフ以外にもさまざまな形式のグラフを記述できます。   線グラフを描く方法 線グラフを描くには、pyplotモジュールのplotメソッドを用います。 y軸に関するデータとx軸に関するデータを用意して、次のように記載します。 オプション部分では、点の形を指定するmarker、線の色を指定するcolor 、線の形を指定するlinestyleを変更できます。 plt.plot(x軸の値, y軸の値, オプション)   線グラフの表示手順 plt.plotメソッドで線グラフの指定をした後、次のような実装をして表示をわかりやすくします。 plt.titleでは、グラフのタイトルを表示します。 plt.xlabelでは、x軸のラベルを表示します。 plt.ylabelでは、y軸のラベルを表示します。 plt.title("グラフのタイトル") plt.xlabel("x軸のラベル") plt.ylabel("y軸のラベル")   最後に、実際にグラフを描写するため、plt.show()メソッドを利用します。 plt.show()   複数のグラフを重ねて描画する方法 ここでは、複数のグラフを重ねて描画する方法について説明します。 基本的には、1つのグラフを描画することを繰り返せばよいだけです。   2つのグラフを重ねて描画する 2つのグラフを重ねて描画する場合には、グラフに描画する2種類のデータを用意し、次のようにplotメソッドを2回用いれば良いです。 plt.plot(x軸の値1, y軸の値1, オプション) plt.plot(x軸の値2, y軸の値2, オプション)   2つのグラフを明確に区別する 2つのグラフを明確に区別するために、オプションメソッドを使って色や点についての設定をしておくと、グラフを描画したときにわかりやすく描写できます。 plt.plot(x軸の値1, y軸の値1, marker = "o", color = "red") plt.plot(x軸の値2, y軸の値2, marker = "v", color = "blue)   [PR] Webデザインで副業する方法とは実際に描画してみよう 実際にコードを書いて実行することで、グラフの描画方法について確認してみましょう。 #ライブラリのインポート >>> import matplotlib.pyplot as plt #1つ目の表示するデータを用意 >>> x1 = [100, 200, 300, 400, 500, 600] >>> y1 = [10, 20, 30, 50, 80, 130] #2つ目の表示するデータを用意(1つ目のデータを利用) >>> x2 = x1 >>> y2 = x1 #1つ目のデータをplotメソッドでプロット >>> plt.plot(x1, y1, color = 'red', marker
Python

グラフ描画ライブラリ！matplotlibの使い方【初心者向け】

今回は、Pythonのグラフ描画ライブラリであるmatplotlibについて解説します。 matplotlibを使うと、様々な種類のグラフを描画したり、イメージを表示したりすることができるようになります。 Pythonでグラフを描画するには、標準的なライブラリですので、この記事を参考に、matplotlibの使い方を覚えていきましょう。   なお本記事は、TechAcademyのAIオンライン講座の内容をもとに作成しています。   目次 matplotlibとは matplotlibを利用するには matplotlibの使い方   大石ゆかり 田島メンター！matplotlibというのは何でしょうか？ 田島悠介 Pythonのグラフ描画ライブラリだよ。Pythonでグラフ描画を行う、標準的なライブラリなんだ。 大石ゆかり どのような機能があるのですか？ 田島悠介 例を見ながら説明していくね！   matplotlibとは matplotlibは、Pythonでグラフを描画したり、イメージを表示させたりする際に使用するライブラリです。matplotlibはオープンソースで公開されており、個人／商用問わず、誰でも無料で利用することができます。 matplotlibを使うと、様々な種類のグラフを描画することができます。主に2次元のグラフですが、3次元のグラフも描画することができます。数値計算ライブラリであるNumPyと組み合わせて利用する場合が多く、またJupyter Notebookを用いて、データ分析結果をソースコードと共にグラフィカルに表現することで、説明力の高いレポートを作成することができます。 matplotlibはNumPyと並び、Pythonでデータ分析を行うには、必須のライブラリと言えるでしょう。   [PR] Webデザインで副業する方法とはmatplotlibを利用するには matplotlibを利用するには、Anacondaなどの開発環境のパッケージを使うのが簡単です。 Anaconda Anacondaは、データ分析やグラフ描画など、Pythonでよく利用されるライブラリを含んだ開発環境です。 Anacondaをインストールすると、matplotlibもインストールされています。もしインストールされていない場合は、メニュー画面のEnvironmentsから、Not Installedを選択し、検索BOXに「matplotlib」と入力します。一覧にmatplotlibが表示されますので、チェックボックスで選択し、画面右下のApplyボタンを押すことでインストールすることができます。 以降は、Jupyter Notebookをもとに、matplotlibの使い方を説明していきます。 Jupyter Notebookの使い方についても合わせてご覧ください。   matplotlibの使い方 matplotlibを使う際は、初めにmatplotlibライブラリをインポートします。先頭の「% matplotlib inline」は、Jupyter Notebookで、ノートブック上にグラフを描画する際に指定する記述です。 % matplotlib inline import matplotlib.pyplot as plt 実行結果は特にありません。エラーがでなければ、正しくインポートされています。   折れ線グラフ 折れ線グラフを描画するには、plot命令を使用します。この例では、併せてグラフのタイトル、ラベルも設定しています。 % matplotlib inline import matplotlib.pyplot as plt price = [100, 250, 380, 500, 700] number = [1, 2, 3, 4, 5] # グラフを書く plt.plot(price, number) # グラフのタイトル plt.title("price / number") # x軸のラベル plt.xlabel("price") # y軸のラベル plt.ylabel("number") # 表示する plt.show() 実行結果は以下のようになります。 グラフにマーカーを表示するには markerオプションを使用します。グリッドを表示するにはgridオプションにTrueを指定します。 % matplotlib inline import matplotlib.pyplot as plt price = [100, 250, 380, 500, 700] number = [1, 2, 3,
機械学習

図形が描ける！HTML5のcanvasの書き方【初心者向け】

HTML5で使うcanvasの書き方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ブラウザ上で絵を描くアプリなどもcanvasで作ることができるので、活用の幅は広いはずです。 HTMLとJavaScriptで作ることができるので、ぜひ書き方を覚えておきましょう。 目次再描画する場面再描画する方法ページを再描画してみようまとめ監修してくれたメンター そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   canvasとは canvasとは、図形を描画するためのHTMLタグで、HTML5の策定時に新たに追加されました。 HTML5以前は、図形をWebで表示させるために、画像などを読み込むかFlashなどで描画するのが一般的でした。 しかしcanvasタグの登場により、HTMLとJavaScriptで簡単に描画することができるようになったのです。   canvasタグを使うのに必要な知識 簡単とはいえcanvasタグを用いてWeb上に図形を描画するには、以下に示すとおり、HTML / CSS / Javascriptの基本的な知識が必要です。   HTML Webページを作成するにはお馴染みのHTMLですが、役割はWebページの個々の内容（要素）をタグで囲み文書構造をブラウザに伝えることです。 canvasタグもHTMLの要素の一つなので、まずはHTMLの理解が必要になってきます。 CSS CSSの役割は、HTMLで作成した要素のレイアウトや見た目を制御することです。 canvasタグの背景色やページ全体のデザインを決めるために必要になってきます。   JavaScript Javascriptの役割は、HTMLで作成した要素を動かしたり、クリック等のユーザー操作に伴って表示を変えるなどの処理（イベント）をプログラムで制御することです。 canvasタグ内の図形を描画するのもJavascriptです。   以降では、Javascriptでcanvasの描画を行う方法を解説します。   [PR] Webデザインで副業する方法とはcanvasで図形を描画する方法 canvasで図形を描画するには、まずHTML内に以下の例のようにcanvasタグを書きます。 <canvas id="id名" width="横幅のpx値" height="縦幅のpx値"></canvas>   さらにHTML内にscriptタグを追加し、その中にグラフィックを描画するための命令を書いていきます。 canvasの描画方法はたくさんあるため、ここでは線を書く方法を紹介します。 // line_canvasという変数を定義し、canvas要素を取得する var line_canvas = document.getElementById("id名"); // 2Dグラフィックの描画に必要な各種設定（コンテキスト）を取得する var line_ctx = line_canvas.getContext("2d"); // 描画開始位置を初期化する line_ctx.beginPath(); // 開始位置に移動する line_ctx.moveTo(20, 20); // 線を引く line_ctx.lineTo(80, 80); // 描画を終了する line_ctx.closePath(); // 実際に線を引く line_ctx.stroke();   以上、ぱっと見複雑ですが一つ一つの工程を見ていくと何をしているのか理解できると思います。   実際に書いてみよう それでは実際に書いてみましょう。 canvas.htmlを作成して以下のソースコードをコピー＆ペーストして保存します。 <html> <head> <meta charset="utf-8" /> </head> <body> <h1>線</h1> <canvas id="line" width="100" height="100"></canvas> <h1>四角</h1>
HTML

Pythonでリアルタイムにグラフを描画する方法を現役エンジニアが解説【初心者向け】

Pythonでリアルタイムにグラフを描画する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して、初心者向けに解説します。 Pythonについてそもそもよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、Python講座の内容をもとに紹介しています。   田島悠介 今回は、Pythonに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Pythonでリアルタイムにグラフを描画する方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 matplotlibライブラリとは matplotlibライブラリを利用してリアルタイムにグラフを描画する方法 実際に書いてみよう まとめ   matplotlibライブラリとは matplotlibとは、Pythonでグラフ描画用として最も多く使用されているライブラリです。NumPyなどで用意したデータを渡すことで棒グラフや折れ線グラフなど、様々な種類のグラフを描画することができます。 例えば波形(sin波)を描画するプログラムは以下のようになります。なお、実行はJupyter Notebookで行っています。 import matplotlib.pyplot as plt import numpy as np %matplotlib inline # 描画領域を取得 fig, ax = plt.subplots(1, 1) # y軸方向の描画幅を指定 ax.set_ylim((-1.1, 1.1)) # x軸:時刻 x = np.arange(0, 100, 0.5) Hz = 5. # sin波を取得 y = np.sin(2.0 * np.pi * (x * Hz) / 100) # グラフを描画する ax.plot(x, y, color='blue') plt.show() 実行結果は以下のとおりです。 グラフを描画しているのは以下の部分です。 ax.plot(x, y, color='blue') plt.show() matplotlibについて、詳しくは公式サイトも参考にしてください。 matplotlib公式サイト [PR] Webデザインで副業する方法とはmatplotlibライブラリを利用してリアルタイムにグラフを描画する方法 plt.show()関数の代わりにplt.pause()関数を使用することでリアルタイムに描画を行うことができます。 実際に書いてみよう 今回のサンプルプログラムでは、上記のプログラムを変更し、徐々に周波数を上げていく様子をリアルタイムで確認してみます。 import matplotlib.pyplot as plt import numpy as np # %matplotlib inline 表示だとアニメーションしない %matplotlib # 描画領域を取得 fig, ax = plt.subplots(1, 1) # y軸方向の描画幅を指定 ax.set_ylim((-1.1,
Python

Photoshopで三角形を描画する方法を現役エンジニアが解説【初心者向け】

Photoshopで三角形を描画する方法について、TechAcademyのメンター（現役エンジニア）が初心者向けに解説します。 なお本記事は、TechAcademyのオンラインブートキャンプPhotoshop講座のカリキュラムをもとに執筆しています。   田島悠介 今回は、Photoshopに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 三角形を描画する方法について詳しく説明していくね！ 大石ゆかり お願いします！ 目次 多角形ツールとは 三角形を描画する方法 その他様々な図形の作り方 まとめ   多角形ツールとは Photoshopのカンバス上に、三角形や五角形などの図形を描画するためのツールです。星型の図形を描くこともできるので、多角形ツールを使うことで写真に簡単なデコレーションができます。 多角形ツールの使いかた ツールバーから「多角形ツール」を選択する カンバスをクリックすると「多角形を作成」ダイアログボックスが表示される 必要な値をダイアログから指定してOKボタンをクリック シェイプと呼ばれる多角形図形がカンバスに表示される   [PR] Webデザインで副業する方法とは三角形を描画する方法 Photoshopで三角形を描画するには、多角形ツールで角数3の多角形を描画すればOKです。多角形を作成ダイアログボックスで「星」の項目にチェックを入れずにOKボタンをクリックします。 三角形描画時に「コーナーを滑らかに」にチェックを入れることで、おにぎり型の図形を描くこともできます。また、カンバスをクリックしたままドラッグすることで、予め大きさや図形の回転度合いを調整しながら多角形のシェイプを描画することもできます。   その他様々な図形の作り方 星型図形を作る 多角形ツールを使うことで、星型の図形を描画することもできます。こちらの写真は、角数5で「星」にチェックを入れた多角形を写真に付与した例です。 変形した多角形の図形を作る パス選択ツールを使うことで、描画済みのシェイプを変形させることが可能です。 「パス選択ツール」を選択 描画済みシェイプをクリックして選択すると、多角形の頂点が白丸で表示される 変形させたい頂点をクリックしてドラッグすると、引っ張ったように図形が変形する また、「パスコンポーネント選択ツール」を使うと、図形を選択して移動させることが可能です。選択状態でメニューの「編集＞パスを変形＞回転」により回転も可能ですので、描画したシェイプはベストポジションに調整していきましょう。   まとめ 今回は、Photoshopで三角形や星のシェイプを描画する方法をご紹介しました。写真にちょっとしたデコレーションをするのに便利ですので、ぜひ活用してみてください。   監修してくれたメンター 寺谷文宏 ( Teratani Fumihiro ) WEBアプリケーションエンジニアとして数多くのプロジェクトを経験し、フロントエンドからサーバーサイドまで総合的な開発を得意としています。 万能なエンジニアとしてWEBデザインにも詳しく、WEB素材をIllustratorやPhotoshopにより制作することができます。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは初心者でも1週間でフォトレタッチをマスターできるオンラインブートキャンプ Photoshop講座を開催しています。 現役デザイナーに毎日チャットで質問することができます。
Photoshop

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

副業したい方

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

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

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

スキルアップしたい方

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

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

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

オーダーメイドコース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLでページを再描画する方法を現役エンジニアが解説【初心者向け】