また、デスクトップに下記のショートカットが作成されます。次回からは、このアイコンをダブルクリックするとNotepad++を起動することができます。 オフィシャルサイトのリンクから、インストーラーパッケージをダウンロードしてください。 また、文字コードの隣のボタンから、シンタックスを設定することができます。今回は例としてHTMLに設定しました。 なお本記事は、オンラインのプログラミングスクールTechAcademyの内容をもとに紹介しています。 FTP Rushを起動すると、メニューなどが英語ですので、まずは日本語にしましょう。 拡張子ごとの強調文字指定(さらに括弧なども強調表示可能)   まずは、メニューバーの「ウインドウ」>「パネル」>「カラーコードパネル」でパネルを表示させましょう。 まずはWinSCPインストーラのダウンロードサイトにアクセスします。 インストールができたら早速使ってみましょう。 下記画面が出てきたら赤枠箇所をクリックしてください。 [ファイル]メニュー →[名前を付けて保存]を選択して、ファイル名を[index.html]として保存してください。   ダウンロードと書かれたところがありますので、そこをクリックします。 Notepad++のインストールができたら、基本的な使い方を覚えていきましょう。 Notepad++ の使い方 今回は必ず使用する、ファイルの新規作成、ファイルの保存、上書き保存の方法を紹介します。 入力できたら「確認」をクリックしましょう。 このなかから、npp.5.9.installer.exeをクリックしてダウンロードしてください。 下記の画像のようにHTMLを記述すると、タグが色分け表示されたことがわかります。   これで日本語化は完了したので、FTPへの接続に移ります。 ここで上書き保存をしてください。図では、c:\sampleのフォルダに保存しています。     下記のようなメッセージが出るので「インストール(I)>」をクリックします。 Notepad++はWindowsのメモ帳と同じような操作方法ですので、初心者でも直感的に使うことができます。 その後、使い方に慣れてきて自分なりの使い勝手を求めるようになった場合にも応用力が高く、さまざまなカスタマイズが可能です。また、高機能でありながら動作も軽く、ノートパソコンでも軽快に使用することができます。   下記の画像のようにHTMLを記述すると、タグが色分け表示されたことがわかります。また、htmlのタグで四角の記号が現れるので、どのように区切られているのかわかりやすく表示されます。 サクラエディタの特徴     そんなSCPはどんなOSにも基本的に備わっている機能ではありますが、そのまま利用するには少々わかりにくいこともあります。     チェックボックスを弄る必要はありませんが、もう一度パスワードを入力するのが面倒だという人は「パスワード保存」にチェックを入れてもいいでしょう。 文字コード・シンタックスの設定   ユーザーID:FTPユーザー名(FTPアカウント名)を入力します。   接続の設定画面が表示されます。   起動するとこのような画面が開きます。   CotEditorでは、カラーコードパネルを使って直感的に設定することが可能です。 メニューの「ファイル」を選択し、「接続」をクリックします。   他にWindowsのFTPクライアントソフトを試したい場合は、WinSCPの使い方もご覧ください。 これでFTP Rushの使い方は以上です。 入力した内容をブラウザで確認しましょう。保存したindex.htmlをダブルクリックすると、デフォルトのブラウザで開くことができ、内容を確認することができます。また、保存したファイルをドラッグ&ドロップでブラウザに持っていくと確認することができます。 最後に、実際にサクラエディタを使って、HTMLファイルとCSSファイルを作成してみましょう。 ファイルを上書き保存する場合は、[ファイル]メニュー →[上書き保存]を選択(または、[上書き保存]ボタンをクリック)します。 ぜひ実際にインストールして使ってみてください。 ファイル名の数字はバージョンアップされると変化します。     画面が切り替わった後自動的にダウンロードが開始されますので、ダウンロードが終了するまでしばらくお待ちください。 ファイルの保存 ALFTPのページにアクセスしましょう。 ファイルを新規作成する場合は、[ファイル]メニュー →[新規作成]を選択します。 (※CSSファイル[style.css]へリンクするという内容の記述) 3.ブラウザで確認 無事メニューが日本語になりましたが、このままでは一部がまだ日本語で表示されません。 ファイルを実行後下記画面が表示されますので、赤枠をクリックしてください。 [index.html]に戻り、HTMLファイルに下記のように追記し、上書き保存をします。   ダウンロードができたら、「CotEditor_1.5.4.dmg」のファイルをクリックします。   ここで上書き保存をしてください。図では、c:\sampleのフォルダに保存しています。 接続の設定画面が表示されます。 1.ダウンロードページへアクセス サクラエディタの使い方   最近は、個人でレンタルサーバを利用するようになり、当たり前のようにネットワーク越しにファイルやデータのやり取りをするようになりました。ただし、ネットワーク越しにデータのやり取りをするということは、それだけ情報漏洩の危険性も高まるということでもあります。 今回の記事は以上です。   インストールが完了したら、すぐに使用することができます。   色々フォントが出てきますが、MSゴシックなど知っているフォント名に変更しましょう。 起動ができたら実際にCotEditorを使ってみましょう。 ローカル側でアップロードしたいファイル等を選択し、メニューの「転送」、「アップロード」とクリックしていきます。 インストール方法から説明していきますので、初心者の方もこれを参考に使ってみてはいかがでしょうか。 [お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。, プログラミングに使えるテキストエディタは複数ありますが、今回はMac専用のテキストエディタ「CotEditor」の使い方を初心者向けに紹介します。 ここで「%p」はterapadフォルダを意味している。 (6)コマンドラインパラメータ: 「"%f"」 「""」で囲むことが大事。囲んでないと動かないことがある。 (7)あとは適当に設定する。 ※保存場所は、[index.html]と同じ場所にする必要があります サクラエディタ の使い方   ファイルが保存できたら、下記の画像のようにWebブラウザにファイルをドラッグしてください。   このようなメッセージが出るので「実行(R)」をクリックします。 目次 入力できたら赤枠をクリックしてください。 また、ローカル側からファイルを直接ドラッグ&ドロップでアップロードすることも可能です。 とても簡単ですね。   なお、メニューボタンの「アップロード」をクリックしても同様のことが可能です。   HTMLを入力した際などWebブラウザから確認することができます。 コードの色を指定する 実際にNotepad++を使って、HTMLファイルとCSSファイルを作成してみましょう。 接続に成功すると、下記ウィンドウが表示されます。 このようなメッセージが出るので「実行(R)」をクリックします。 なお、他のMac専用のテキストエディタとしてはmiが有名です。 目次   サーバー側のファイルが上方に表示されます。 SCPは自分のPCから相手のPC(あるいはサーバ)にファイル転送をする際、転送対象のファイルを暗号化することができるため、転送中にファイルの中身が読み取られることはありません。 ※この例では背景を水色にします。 ズーム dmgファイルをクリックすると、下記画像のような新しいウインドウが開きます。   インストールの作業はこれだけです。 また、メニューボタンの「接続」をクリックしても同様のことが可能です。   編集内容をWebブラウザで確認する メニューから「FTP」を選択し、「簡易接続ダイアログ」をクリックします。 先ほど保存した、index.htmlのファイルをダブルクリックしてください。 リンクフォルダに指定した共有フォルダーが表示されます。[図6] (8) Deskを開き、共有したい文書を、リンクフォルダ内の共有フォルダーに保存します。 [図7] (9) リンクフォルダ内の共有フォルダーを開くと、保存したファイルが表示されています。[図7] このページのトップへ. ファイルの保存   Notepad++の特徴   この状態で左側から右側へ、右側から左側へ対象となるファイル、およびフォルダをドラッグ&ドロップするだけで、安全にデータのやり取りをすることができます。 ローカル側でアップロードしたいファイル等を選択し、右クリックで出てくるメニューから「転送」をクリックします。       [ファイル]メニュー →[名前を付けて保存]を選択し、ファイル名を[style.css]として保存してください。   そちらも日本語で表示させるためには、メニューから「ツール」を選択し、「オプション」をクリックします。 WinSCPの使い方に入る前に、SCPについてご紹介します。   文字コードはデフォルトでは、UTF-8に設定されています。もし変更する場合は「Unicode(UTF-8)」と表示されている箇所をクリックして変更してください。 クリック後、下記画面が表示されますので、利用する言語を選んでください。(今回は日本語を選択します。) ここで下記のようなメッセージが出るので、日本語表示のメニューになるようにインストールしたい場合はJapaneseになっていることを確認して、「はい(Y)」をクリックします。   サクラエディタはとても高機能な、Windows上で動作する日本語テキストエディタです。 英語で書かれていますが、わからなくても問題はないと思います。「Download」と書かれている箇所が見えると思いますので、そこをクリックします。 プラグイン(後から追加する機能)のアップデート画面が開きます。インターネットに繋がっている場合は、「Update Selected」をクリックしてください。インターネットに繋がっていない場合はアップデートできないので、「Cancel」を押してください。   ファイルを保存する場合は、[ファイル]メニュー →[名前を付けて保存]を選択し、[ファイルの種類]を選択し、ファイル名を入力します。     この後、「次へ(N)>」をクリッして進むとこのような画面が表示されますが、ここでも「次へ(N)>」をクリックします。 ALFTPを起動すると、このようなダイアログが表示されますが、特に設定する必要はないのでキャンセルをクリックしてしまいます。   「code.9leap.net(コ... プログラミング独学のロードマップ作りについて、TechAcademyのメンター(現役エンジニア)が初心者向けに解説します。     ※本記事のインストール環境はWindows7です 動し,「ツール」メニューから「ツールの設定(T)...」を選ぶ。(3)右側の追加ボタンで設定画面を開く。(4)名前: 「tab変換」 (こんな風な名前にすればよい。自分で適用に考えて)(5)実行ファイル: TpTab.exeを指定 「"%p\vccnet.cmd"」と記入  「""」で囲むことが大事。囲んでないと動かないことがある。  ここで「%p」はterapadフォルダを意味している。(6)あとは適当に設定する。. 5.HTMLファイルにCSSファイルへのリンクを追記 「次へ(N)>」と進んでいくとこのような画面が出るので、リストを下にスクロールし「Create Shortcut on Desktop」にチェックを入れて「次へ(N)>」をクリックします。これでインストールが始まります。インストールが終わるとデスクトップにショートカットが作成されます。 また、ローカル側からファイルを直接ドラッグ&ドロップでアップロードすることも可能です。 キー操作を覚えて同じ操作を自動実行できます CSSファイルもindex.htmlの場合と同じ方法で作成しましょう。 下記のような画面が出るので「次へ(N)>」をクリックします。 [PR] プログラミングで挫折しない学習方法を動画で公開中WinSCPのインストール方法 Windowsで使えるFTPクライアントソフトとして、WinSCPもあるので合わせてチェックしてみてください。 4.CSSファイルの作成と保存 下記画面が表示されたら、赤枠箇所をクリックします。 画面を下にスクロールすると現れる緑のバーの「ダウンロードファイル一覧」をクリックして、全てのファイルを表示させてください。 Notepad++に戻り、[ファイル]メニュー →[新規作成] を選択します。 本記事は以下の流れでご紹介します。 一番上がインストール版で、その下がインストールしなくても使用できるポータブル版になりますが、今回はインストール版を使用します(中身そのものに違いはありません)。 この記事は、下記の流れで紹介していきます。 V2(Unicode版)の最新版ダウンロード(図の青い枠)を使用すると簡単にインストールできます。ファイル名はこのページにアクセスした時点での最新のバージョン名となりますので、この画面の名称とは異なる場合があります。画面の下記をクリックするとダウンロードページが開き自動的にダウンロードが始まります。 プログラミングに使えるテキストエディタは複数ありますが、そのうちの1つであるTeraPad(テラパッド)について初心者向けにご紹介します。. HTML/CSSを入力してブラウザに表示させる方法 まずはこれらの使い方だけおさえておきましょう。 さまざまな文字コードに対応しています ここでは、赤枠の「インストール」をクリックしてください。 他のWindows対応のテキストエディタを使ってみたい場合は、TeraPadの使い方も合わせてご覧ください。 ALFTPと書かれているところをクリックするとVectorのページに飛びますので、そこでダウンロードを行ないます。     ではインストールから始めて実際に使用してみましょう。 ダウンロードしたexeファイルをダブルクリックします。 SCPとは サクラエディタに戻り、[ファイル]メニュー →[新規作成] を選択します。 HTML/CSSを入力してブラウザに表示する Notepad++の特徴 ダウンロードしたexeファイルをダブルクリックします。   自動アップデート ユーザ名:FTPユーザー名(FTPアカウント名)を入力します。 CSSファイルもindex.htmlの場合と同じ方法で作成しましょう。   次の画面では、青色箇所にチェックが入っていることを確認して、赤枠箇所をクリックしてください。 [ファイル]メニュー →[名前を付けて保存]を選択して、ファイル名を[index.html]として保存してください。 Macで使えるテキストエディタを他にも試してみたい場合は、miの使い方も合わせてご覧ください。     6.再度、ブラウザで確認   本記事は以下の流れでご紹介します。 以下のような画面になるので、保存先のフォルダやファイル名を指定して保存します。 [お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。, プログラミングに使えるテキストエディタは数多くありますが、今回はNotepad++(ノートパッド・プラス・プラス)の使い方を初心者向けに解説します。Notepad++はWindows上で動作する初心者にも使いやすい日本語での利用が可能なテキストエディタです。 正常に終了するとこの画面になるので「完了(F)>」をクリックするとインストールが完了します。 入力できたら「OK」をクリックしましょう。 ファイルを保存する場合は、[ファイル]メニュー →[名前を付けて保存]を選択し、[ファイルの種類]を選択し、ファイル名を入力します。画面では、c:\sample というフォルダに保存しようとしている例になります。     1.Notepad++の起動 ALFTPの使い方 ファイルの新規作成 カラー強調表示(特定のキーワードの自動的に色分け)ができます なお本記事は、TechAcad... 本記事は、キャリアに特化したQ&Aサービス「JobQ」との連載企画になります。毎週月曜日に就職や転職など、あるテーマに沿って紹介していくシリーズです。今... 本稿は、Web Designer Depotのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 インストールから簡単な使い方までを紹介しますので、まだ利用したことのない方はぜひお試しください。 続いて、下記画面が表示されたら、青色箇所にチェックが入っていることを確認して、赤枠箇所をクリックしてください。     「TeraPad」の使い方をご紹介。「メモ帳」に代表されるテキストエディタ。その種類は数多くありますが、定番なのがフリーウェアのテキストエディタ「TeraPad」。ダウンロード・インストールの方法から使い方まで解説します。作業を効率化しましょう!   インストール方法から簡単な使い方まで紹介しているので、ぜひ使ってみてください。