HTML入門トレーニング

コードエディタを選ぶ

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTMLを編集するためのコードエディタの選び方と、1つの例であるBracketsについて紹介します。
講師:
07:04

字幕

このレッスンでは、HTMLを編集するための コードエディタの選び方と ひとつの例である"Brackets"について紹介します HTMLファイルの実体は拡張子に ".htm",または".html"をもつ テキストファイルにすぎません このため、これを編集するためには テキストが編集できるソフトがあれば充分です しかし、実際にはHTMLを書くと、 非常に長い文書 あるいはCSSやJAVAスクリプトのような 他の言語を使うこと必要もあります そのため、これらのすべてを 手動で入力していくことは 非常に時間がかかります そこで、良質なコードエディタを使うことで コードを記述、編集するスピードを上げ、 更に、これらはを書く上での ミスを発見しやすくなっています では、実際にコードエディターを選ぶとき、 どのような基準で選べば良いでしょうか 最低でも必要そうな機能を上げてみましょう まず、行番号の表示です そのコードはどこにあるのか、 わかりやすくするために これは必要になる機能でしょう 次に、コードフォーマット 手動で入力したコードを 一定のルールに沿ってフォーマットしてくれる機能は 非常に便利です 更に、構文のハイライト コードに色をつけて見やすくする機能です そして、最後にHTML以外で あなたが使う予定の 言語をサポートしているかどうかです コードエディタには様々なものが存在します ドリームウィーバーや コーダーや サブライムテキスト、 Webstormなど 非常に多くのプログラムがあります すでにお好みのコードエディタがある場合は それを使いながらレッスンを進めることをお勧めします もし、まだ、コードエディタを使ったことがない場合 その場合は様々なコードエディタを試して 自分にあったものに選ぶことをお勧めします ここでは、その一つの例として "Brackets"というソフトを紹介します "Brackets"はAdobeが中心となって、 オープンソースで開発されているコードエディタです 先程確認したような最低限の機能以外にも 様々な機能が用意されています WindowsやMac、様々な環境のも対応してます ここでは、このダウンロードボタンをクリックして セットアッププログラムをダウンロードし 実際にセットアップしてみましょう Windowsをお使いの場合は 自動的にWindows版のプログラムが Macをお使いの場合は 自動的にMac用のプログラムがダウンロードされます それぞれ、環境に合わせてインストーラを起動し インストールしてみましょう 実際にインストールをして Windowsであればスタートメニュ Macであればアプリケーションフォルダの中から ソフトを起動してみます Bracketsを起動すると、 このような画面になります Bracketsは非常に拡張性に優れており 様々な拡張機能を自分で作成することができます もし、自分で作成しない場合でも 他の人が作った拡張機能を インターネットからダウンロードしてきて 簡単にインストールし、 機能を追加することもできます また、表示上の機能も豊富です 例えばここに表示されているコードのフォントサイズを あげたいと思ったら Windowsであればコントロールを押しながら Macであればコマンドキーを押しながら プラスボタンを押すと このようにフォントサイズを大きくすることができます 反対にコントロール、 あるいはコマンドキーを押しながら マイナスボタンを押すと こう、小さくできます このように簡単にカスタマイズできるのも Bracketsの特徴です また、特徴的な機能の一つである ライブプレビューという機能を 試してみましょう ライブプレビューはこの右上の 雷のようなアイコンから実行します ライブプレビューにはBrackets以外にも Google Chromeが必要になりますので 別途、インストールをしておきましょう BracketsとGoogle Chromeが インストールされている環境で HTMLファイルを開いた状態で この、右上のライブプレビューアイコンを クリックしてみます すると、Googleクロームが自動的に起動し 現在、表示しているHTMLが Google Chromeで表示されました ライブプレビュー機能の素晴らしい点は これだけではありません この表示しているHTMLを リアルタイムに編集できます Bracketsを画面の左半分に表示して 左側にBrackets, 右側にそのHTMLを表示しているブラウザ というレイアウトした状態で 実際にHTMLを編集してみましょう 例えば、Brackets上で テキストを編集しようとすると その部分がブラウザ上で 青い線でハイライトされています この、「BRACKETSを始める前に」 という後にテキストを入力してみましょう 「BRACKETSを始める前に チェックしてみよう」 という文字をブラケツ上で入力してみました すると、ブラウザをリロードなどしなくても リアルタイムに、このように 表示が反映されています これがライブプレビュー機能です もちろん、文字を削除すれば その削除した状態も反映されます ライブプレビュー機能をやめるには この、右上の稲妻アイコンをクリックします とすると、ここで編集した内容は 反映されなくなります ブラウザを閉じて、 Bracketsを全画面に戻します Bracketsでファイルを編集するときは、 この左側に表示されている サイドバーを使うと便利です 現在は"Getting Started" というフォルダを開きますので 別のフォルダーを開いてみましょう この部分をクリックすると、 「フォルダーを開く」というリンク表示されますので これを選択すると、 実際に開きたいフォルダーを開くことができます ここでは、ドロップボックスの中にある 該当のフォルダーを選択し、 「フォルダーの選択」ボタンをクリックします すると、このように そのフォルダーの中にある ファイル一覧が表示され、 編集したいファイルをクリックすると、 そのファイルを開くことができます このレッスンではHTMLを編集するための コードエディタの選び方 一つの例である"Brackets"について 紹介しました

HTML入門トレーニング

HTMLはWebページを作るうえでもっとも重要な言語です。これがきちんと定義されなければ、Webページは正しく表示されません。このコースではHTMLの成り立ちから基本的な構文の書き方、さまざまなタグの意味やその使い方まで幅広い内容を学ぶことができます。またHTMLと並んで重要な言語であるCSSやJavaScriptについても、それぞれその概要を説明します。

5時間43分 (48 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2015年05月01日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。