icon
icon

プログラミングにも使える!TeraPadの使い方【初心者向け】

テキストエディタの【TeraPad(テラパッド)】の使い方を初心者向けに解説した記事です。プログラミングがWebサイト制作にも使えるので、TeraPadを使ってHTML/CSSを入力する方法も紹介しています。

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

プログラミングに使えるテキストエディタは複数ありますが、そのうちの1つであるTeraPad(テラパッド)について初心者向けにご紹介します。

 

インストール方法から簡単な使い方まで紹介しているので、ぜひ使ってみてください。

 

目次

本記事は下記の流れでご紹介します。

 

 

TeraPadの特徴

TeraPadは、Windows上で動くフリーのテキストエディタで、Microsoft Windows 95/98/Me/NT4/2000/XP/Vista/7/8の動作する環境で使用可能です。

Windows標準搭載の『メモ帳』にはない、多くの機能を備えています。

  • HTMLファイルのタグが自動的に色分け表示される
  • 行番号が表示される
  • 元に戻すの回数が多い (標準で64回可能。メモ帳は、やり直しが1回しか効かない。)
  • ブラウザでのプレビュー機能がある

 

 

[PR] プログラミングで挫折しない学習方法を動画で公開中

TeraPadのインストール方法

次に、インストール方法について解説していきます。

※記事のインストールする環境のOSはWindows7です

 

1.ダウンロードページにアクセス

ダウンロードページにアクセスし、下図を参考に枠内をクリックし、ファイルをダウンロードします。

01

 

このようなメッセージが表示されたら、『実行』をクリックします。

02

 

ここで『はい』をクリックします。

03

 

2.インストール

ダウンロードができたらインストールを行います。

[次へ]をクリックしてください。

31

 

さらに、[次へ]をクリックします。

32

 

インストール先を確認し、 [次へ]をクリックします。

(※インストール先を変更する場合は、ここで「参照」をクリックします)

33

 

「はい」を選択し、フォルダを作成します。

37

 

さらに、[次へ]をクリックしてください。

34

 

これでインストール完了です。

35

 

「Readme.txt」のファイルが表示され、デスクトップに次のようなTeraPadのアイコンが表示されます。

38

 

 

TeraPadの使い方

ここからは基本的な使い方について紹介します。

今回は基本となる、ファイルの新規作成、ファイルの保存、上書き保存の方法を紹介します。

 

ファイルの新規作成

ファイルを新規作成する場合は、[ファイル]メニュー →[新規作成]を選択します。

 

ファイルの保存

ファイルを保存する場合は、[ファイル]メニュー →[名前を付けて保存]を選択し、[ファイルの種類]を選択し、ファイル名を入力します。

 

上書き保存

ファイルを上書き保存する場合は、[ファイル]メニュー →[上書き保存]を選択(または、[上書き保存]ボタンをクリック)します。

68

 

なお、HTMLやJavaScriptなどを入力する際は、「全角スペース」を区別できるように設定することをおすすめします。

表示 > オプション > 表示 にある「全角空白」にチェックを入れると、全角スペースを入力した際に、四角のマークが表示されるようになります。

全角余白

 

 

HTML/CSSを入力してブラウザに表示する

最後に、実際にTeraPadを使って、HTMLファイルとCSSファイルを作成してみましょう。

 

1.TeraPadの起動

デスクトップにあるTeraPadのアイコンをダブルクリックして起動します。

 

2.HTMLファイルの作成と保存

[ファイル]メニュー →[名前を付けて保存]を選択して、ファイル名を[index.html]として保存してください。

62

上のように記述すると、タグが色分け表示されました。

上書き保存をします。

 

3.ブラウザで確認

入力した内容をブラウザで確認しましょう。

ツールバーの[InternetExplorer]ボタンをクリックすると、ブラウザが起動します。

63

 

ブラウザが開き、きちんと反映されたことがわかりますね。

66

 

4.CSSファイルの作成と保存

続いてCSSファイルも作成しましょう。

TeraPadに戻り、[ファイル]メニュー →[新規作成] を選択します。

[ファイル]メニュー →[名前を付けて保存]を選択し、ファイル名を[style.css]として保存してください。

(※保存場所は、[index.html]と同じ場所にする必要があります)

 

CSSのコードを記述し、上書き保存をします。

(※Webページ全体の背景色を『水色』にするという内容の記述)

64

 

 

5.HTMLファイルにCSSファイルへのリンクを追記

[index.html]に戻り、HTMLファイルに上のように追記し、上書き保存をします。

(※CSSファイル[style.css]へリンクするという内容の記述)

65

 

6.再度、ブラウザで確認

再度ツールバーの[InternetExplorer]ボタンをクリックして、ブラウザを起動しましょう。

CSSが適用され、Webページの背景色が『水色』に設定されたことが確認できます。

67

今回の記事は以上です。

 

他のテキストエディタを使ってみたい場合は、Sublime Textの使い方も合わせてご覧ください。

[お知らせ]TechAcademyではプログラミング初心者でも最短4週間でエンジニアになれるオンラインブートキャンプを開催しています。テキストエディタなど特別な開発環境がなくてもプログラミングを学ぶことができます。

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