では、さっそくHTMLを勉強しましょう・・・・

といいたいところですが、その前にいくつか制作のための準備があります。

1)HTML、CSSのテキストエディターをインストールします。
フリーソフトのSublime textがおすすめです。
http://matome.naver.jp/odai/2137785598009652401

Sublime textにはemmetというプラグインがあります。サイト制作を格段に早くできますので、導入されてみてください。

これはショートカットキーでHTMLの入力を補完してくれるプラグインです。

詳しくはこちらの記事導入方法動画で確認されてください。

※動画は無料登録(録画授業は月に一本見ることが可能です。)

2)ブラウザをインストールします。
Firefox、Google Chromeをインストールしてください。

制作物の確認はFirefox等で行います。

3)ブラウザにアドオンを入れます。
Firefoxのアドオンから FireBugを探し追加します。
※ブラウザ上で作ったページの要素確認ができます。

ブラウザを再起動するとちょっとだけ形状が変わっています。

Firefox アドオンについてはリンク先をご覧ください。

ここまでできたらHTMLとかCSSに実際に触れてみましょう。

Firefoxを立ち上げます。何でもいいのでHPを閲覧しましょう。

Firebugを使ってみましょう。虫をクリックしてください。

 

 

こんな感じでブラウザ内でHTMLとCSSを見ることができるようになります。

詳しい使い方は

こちらのサイトが詳しいです。

効率的なデバックツール「Firebug」の使い方

 

まずはこのFirebugでいろいろなHPを見ることから始めてください。

4)Sublime textを開いて Firebugで見ているページの

HTMLファイル、CSSファイルをコピーして貼り付けます。

それぞれsample.html   style.css

と名前をつけてください。

そのsample.htmlをfirefoxで開いてみましょう。

ある程度画像も出るかもしれませんが、文章のページが表示されます。

これがHTMLでサイトを作るという基本になります。

Share this Post

Leave a Comment

メールアドレスが公開されることはありません。