2017/04/23SHAREツイートシェアはてブGoogle+PocketLINE3日で学ぶHTML入門の2日目をご覧いただきありがとうございます。1日目の【HTMLってなに?】では、HTMLの基礎的な知識から、基本構造について勉強しました。メモ帳などを使ってシンプルなウェブページを作ってみました。3日で学ぶHTML入門の2日目では、色々な要素のタグを実際に手を動かしながら記述してみましょう。3を使ってみよう!前回のレッスンでシンプルなウェブページを作った際にWindowsをお使いの方はメモパッド、Macをお使いの方はテキストエディットを使用したと思います。これらのツールでウェブサイトを作ることは可能なのですが、本格的にウェブサイトを作ろうとなると少し不便に感じることがあります。多くの開発者はプログラミングコードを記述するときに、テキスト・エディターと呼ばれるコーディングに特化したソフトを利用しています。3をご紹介いたします。Textとは私も愛用するプログラミングコーディングに特化したソフトウェアです。WindowsとMacの両プラットフォームに対応しており、無料で使用できます。テーマを変えたり、プラグインを適用することで自分好みにカスタマイズすることができます。ダウンロードとインストールこちらのダウンロード先に移動してください。ページ上部にあるDownloadから、お使いの使用OSに合わせてファイルをダウンロードしてください。ダウンロードが完了したら、ファイルをダブルクリックしてガイドに従ってインストールを行ってください。Textを起動すると黒のウィンドウが表示されます。Textになっていることを確認してください。この状態で試しに以下のコードを入力してみてください。<html><head></head><body></body></html>現在は通常のテキストを入力するモードなので、<html>や<head>などのタグが白色で表示されていると思います。ここで、ウィンドウ右下の入力モードをHTMLに変更してみましょう。入力したタグに色がついたのがわかると思います。このようにテキストエディターを使うと、タグの種類に応じて色分けがされるためタグの判別が容易になります。これは、複数行からなるウェブページを作る時にとても役に立ちます。Textには強力な補完機能があります。補完機能とはコードを自分で全て入力しなくても、入力モードに応じて要素タグの基本的なコードを自動的に入力してくれる機能です。それでは、実際に使ってみましょう。先ほど自分で入力した<html>〜</html>を全て削除してください。入力してみてましょう。すると、携帯電話の予測変換のように入力した文字に関連するタグ一覧が表示されます。候補が表示されたら、Enterキーを押してみましょう。補完機能によって、HTMLの骨組みとなる基本的なタグが自動的に入力されたと思います。この補完機能を使うことで、間違いの少ないHTMLファイルを短時間で作れるようになります。ファイルの保存それでは入力したコードを保存してみましょう。保存方法は2種類あります。クリックする方法です。この方法では少し変更を加える度に、毎回メニューバーまでマウスを操作しなくてはならないため面倒です。そこで、ショートカットキーの登場です。ショートカットキーとは、マウスを使うことなくある一定の操作をキーボードだけで実行できるようにしたものです。