HTMLとCSSで作るウェブサイト作成入門

環境設定について

　ウェブサイトを構築するための環境としては、専用のソフトを使ったり、オフィスソフトを使ったり、さまざまな方法がありえます。しかし、ここでは、HTMLやCSSを学んでいただくことを目的としていますので、イチからそれらのコードをキーボードで打ち込んで、プログラミングしていただきたいと思います。
　テキストを打ち込む、と言えば、Windowsには「メモ帳」、Macには「テキストエディット」など標準でインストールされたテキストエディタがあります。ただ、これらのエディタには最低限の機能しかなく、プログラミングにはあまり使いやすくありません。イチから作成するにしても、もう少し楽に作成したいということで、他のエディタを使うことをお勧めします。
　HTMLやCSSの作成方法については、WindowsでもMacでも変わりませんので、ご利用の環境を問わずこの資料で学んでいただけます。ただ、この資料は、Windows環境で作成していますので、画像や動画の説明に出てくるブラウザはインターネットエクスプローラー(IE)、テキストエディタはTerapadとなっています。この組み合わせ以外でも大差はありませんので、環境が異なる人は、それぞれの環境に読み替えてご利用ください。
　先にも書いた通り、この資料では、テキストエディタとしてTerapadを使って説明しています。Terapadは、フリーのWindows用テキストエディタです。フリーではありますが、シンプルながら十分な機能を備え、長く多くの人々に利用されてきたエディタです。Windows環境の方で初心者の人や特に決まったエディタを使っていないという人にはTerapadの使用をオススメします。
　Terapadがパソコンに入ってない場合は、こちらやこちらからダウンロードして設定して下さい。USBメモリやSDカードにも設定できますが、そのような外付けメモリに設定しておけば、使い慣れたTerapad環境を持ち歩くこともできます。なお、mac版はありませんので、macの場合はmiなどを利用するなどして下さい。

Terapadの設定　

　Terapadを使うに当たって、ひとつ、便利な設定をしておきましょう。Terapadを起動し、メニューバーから[表示]-[オプション]を選択。開いたオプションウインドウで「表示」タブをクリックし、マークの箇所をすべてチェックしておいて下さい。こうすることで、通常、目に見えないはずの、半角スペースや全角スペース、TABスペース、改行などが表示されるようになり、誤入力を防いだり、デバッグ(プログラムの間違い探し)が容易になったりします。

画面の配置

　最近のパソコンは、高解像度でワイドの大画面であることが多くなりました。画面の領域に余裕がある場合にぜひ試してもらいたいのは、左側にテキストエディタ、右側にブラウザとする画面配置です(以下)。テキストエディタで編集して保存、ブラウザで再読込して確かめ、またエディタで編集して保存、ブラウザを再読み込みして・・・と繰り返すと、画面を開いたり閉じたりしなくて済むので効率的です。

　また、既に作成したHTMLファイルは、ダブルクリックするとブラウザで表示されてしまいます。通常、〜.htmlや〜.htmという拡張子は、ブラウザと関連づけられているからです。HTMLファイルを再度編集するときは、Terapadでファイルを開く必要がありますが、ファイルをTerapadにドラッグ＆ドロップすると、簡単に開くことができます。

ファイル拡張子の表示

　先に〜.htmlや〜.htmという拡張子について触れましたが、ファイル名の後についている〜.txtや〜.css、〜.jpgといった「どっとナントカ」というところが拡張子です。Windowsではこの拡張子を表示させないようにするのがデフォルト(標準)になっていることがありますので、パソコンによっては「どっとナントカ」の部分が見られない、という場合があります。拡張子が表示されていれば、〜.htmlや〜.htmならWebページを表示するHTMLファイルだな、とか、〜.cssならスタイルシートのCSSファイルだな、ということがわかりますが、表示されていないとわかりません。プログラミングをするうえで、対象のファイルが何のファイルかがわからないと不便ですので、表示されていない人は、表示されるよう設定しましょう。
　Windows8や10なら、スタートボタンから[エクスプローラー](注：インターネットエクスプローラーではありません)を選択。開いたエクスプローラーのメニューの[表示]をクリックすると[ファイル名拡張子]というチェックボックスが現れますのでチェックを入れます。Windows7ならスタートボタンから[コンピューター]を選択。開いた画面のメニューの[整理]をクリックして表示される項目から[フォルダーと検索のオプション]を選択。「フォルダー オプション」が開きますので[表示]タブを選択し[詳細設定]のリストにある[登録されている拡張子は表示しない]のチェックを外し[OK]ボタンで完了です。

作業フォルダの作成

　Webプログラミングを学ぶにあたり、作成したHTMLファイルやCSSファイル、関連する画像ファイルなどが迷子になってしまわないように、作業用フォルダを作成しておきましょう。Windowsのエクスプローラで、パソコンやネットワークフォルダ、USBメモリなど、作業用フォルダを作成するのに適切な場所を開き、右クリック。ポップアップメニューが表示されるので、[新規作成]-[フォルダー]を選ぶと、「新しいフォルダー」というフォルダができます。ここでは、Webプログラミングの基礎という意味で、フォルダ名を「webkiso」としておきましょう(下図参照)。この資料では、このフォルダ名を一貫して使います。

　webkisoフォルダを作成したら、フォルダをダブルクリックして開きましょう。今はまだ空っぽのフォルダですが、これからこの中にプログラムを作っていきます。

ショートカットの利用

　最後に、環境設定ではありませんが、プログラミング作業を効率よくするためのコツとしてショートカットの利用をご紹介しておきます。プログラミングに限らず、パソコンでレポートを書いたりプレゼン資料を作る際にも役立つと思います。
　例えばコピー＆ペースト(貼り付け)。Windows環境では、コントロールキーを押しながら[c]キーを押す、つまり[Ctrl]+[c]でコピー、[Ctrl]+[v]で貼り付けできます。マウスでコピーしたい文字列を選択して、マウスの右ボタンをクリックして表示されたポップアップメニューからコピーを選んで・・・と作業するよりずっと速くて楽です。他にも[Ctrl]+[z]で「もとに戻す」ことができますし、[Ctrl]+[s]で「上書き保存」することもできます。上書き保存は、クセにしておくと、常に作業結果が保存されますので、「プログラムを書いている途中でパソコンがクラッシュして保存する前に消えてしまった」ということを防げます。他にもいろいろありますが、これらはプログラミングの最中によく使いますので、ぜひ指に覚えさせましょう。

• コピー：　　[Ctrl]+[c]
• ペースト：　[Ctrl]+[v]
• 元に戻す：　[Ctrl]+[z]
• 上書保存：　[Ctrl]+[s]