Webデザインをする時に必要なソフトはブラウザとテキストエディタ
Webデザインを行う前には必要なソフトが2つあります。それがブラウザとテキストエディタです。この2つのソフトには色々ありますが今回は「FireFox」と「TeraPad」になります。初心者にオススメするソフトになるのでぜひ使って見てください。
Webデザインで使うブラウザはFireFoxがオススメ
FireFoxはWebブラウザです。無料でダウンロードして使用することが出来ます。インストールが完了したら、細かい設定をする必要がなく、すぐ使用することができるのでオススメ。
ブラウザには色々種類があり
- IE
- Safari
などがあります。自分が使いやすいブラウザをを調べて使って見てください。こだわりのない方は「fire fox」をオススメします。
初心者にオススメするテキストエディタはTeraPadがオススメ
TeraPadはテキストエディターです。こちらも無料でダウロードして使用することが出来ます。テキストエディターにも色々な種類があり
- Atom(上級者向け)
- サクラエディタ(上級者向け)
などがあります。上記のエディタは初期設定や使い方を覚えるまでに大変になります。興味のある方は使って見てください。面倒なことをしたくない方、初心者の方は「TeraPad」をオススメします。
firefoxのインストール手順紹介
fire foxをインストールしてみよう
インストール手順は下記のようになります。
- 右のリンクをクリック→firefoxのインストールはこちら
- ページ内の「今すぐダウンロード」をクリック
- エクスプローラを開き「ダウンロード」タブをクリック
- 「Firefox Installer.exe」をダブルクリック
- ウィザード通りにインストール実行
- デスクトップに「Firefox」のアイコンが表示されたらインストール完了
では次に「TeraPad」をインストールしてみましょう。
TeraPadのインストール/各種設定紹介
TeraPadをインストールしてみよう
インストール手順については下記のようになります。
- 右のリンクをクリック→TeraPadのインストールはこちら
- ページ内の「TeraPad.exe」をクリックしてダウンロード
- エクスプローラを開き「ダウンロード」タブをクリック
- 「tpad109.exe」をクリック
- ウィザード通りにインストール実行:全て「次へ」でOK
- デスクトップに「TeraPad」のアイコンが表示されたらインストール完了
インストールが完了したら初期設定してみましょう。
TeraPadの各種設定をしていこう
文字コードの設定の概要
デフォルトでは文字コードが「SHIFT-JIS(S)」で設定されています。「SHIFT-JIS(S)」のまま作業を行ってしてしまうと、ひらがな、カタカナ、漢字が文字化けしてしまいます。作業をする前に「UTF-8」に設定しておきましょう。
文字化けしてしまった場合、こちらを確認してみてください。
文字コード設定手順
- TeraPadを立ち上げます。
- 左上の「ファイル(F)」をクリック
- 「文字コード指定再読込(D)」にカーソルを合わせる
- 「UTF-8(N)(F)」を選択
- 設定完了
タブの文字数設定の概要
コードを記述する際にインデント(文字下げをしてコードを見やすくする)をします。その時にキーボードの「タブ」ボタンを押して文字下げします。その空白の数を設定します。
タブの文字数設定手順
- TeraPadを立ち上げます。
- 左上の「表示(V)」をクリック
- 「タブの文字数(A)」にカーソルを合わせる
- 「2」を選択
- 設定完了
ファイルを開くときの設定
html/css/jsのファイルを開く際に「TeraPad」で開く設定を行っていきます。
- 「TeraPad」を開き、新規で「test.html」を作り「デスクトップ」にファイルを保存します。
- 「デスクトップ」にある「test.html」を右クリック
- 「プログラムから開く」にカーソルを合わせ、「別のプログラムを選択(C)」をクリックする
- 「TeraPad」を選択し、「常にこのアプリを使って.htmlを開く」にチェックを入れて「OK」を押す
「別のプログラムを選択(C)」に「TeraPad」がない場合
下記の手順を行うと「別のプログラムを選択(C)」の中に「TeraPad」が表示されます。
- 一番下までスクロール「その他のアプリ↓」をクリック
- 一番下までスクロール「このPCで別のアプリを探す」をクリック
- アドレスバーに「C:\Program Files (x86)\TeraPad」を入力
- 「TeraPad.exe」を選択して開くをクリック
TeraPadの使い方説明
作業内容 | 作業手順 | ショートカット(キーボード) |
ファイルを新規作成する |
|
Ctrl+N |
保存されているファイルを開く |
|
Ctrl+O |
ファイルを上書き保存する |
|
Ctrl+S |
文字検索 |
|
Ctrl+F |
文字の置き換え |
|
Ctrl+R |
htmlファイルをブラウザで開く | ツールバーの「firefoxのアイコン」をクリックまたは
対象のファイルをブラウザの上にドラック&ドロップ |
なし |