【短期集中連載】HTMLのタグ?CSSのプロパティ?(1)

 
前回、『【短期集中連載】インスピレーションサイト紹介』という記事を書きました。
 
今回は、そもそも『タグってどんなのがあって、どうやって使うの』
『プロパティってどんなのがあって、どうやって使うの』っていうお話です。
 
 


 
 
例えば書き方だったらね、ググれば良いんですよ。
『HTML 書き方』とか『CSS 書き方』とかね。

HTMLの書き方→http://weblan3.com/html/reference-write-html.php
CSSのの書き方→http://ougonnetlife.com/css-reference/csskakikata.htm
 
 
でも、そもそも『HTML(CSS)ってどんなものがあるんや?』ってことです。

実際に出来てるサイトのソースコードを見たところで、
ソレがナニを意味してるかだって分からないですものね。

資料や実際のコードを読んでも同じ。
 
 
 
そこでどうしたかというと・・・
テンプレート使ってサイト作ろう
 
 
今回、改めて昔使ってたサイトを探した結果
残念ながらすでに閉鎖されていたので…orz

代わりに良さげなサイトを1つ見つけておきました。
無料HTML+CSSホームページテンプレート [Cool Web Window]

 
 
メニューから
『CSSテンプレート』→『個人向けテンプレート』
可愛いのがあるんで好きなのDLしちゃいましょう。

種類は少ないので気に入ったのが無かったら
『CSS』『素材』『スタイルシート』『フリー』
などのワードを使ってお好みのサイトを探してみてね。
 
 


 
 
そしたらファイルの確認。
『inde.html』がHTMLファイル
『base.css』とか『style.css』ってのがCSSファイル
 
 
HTMLが全く分からない人は・・・

  1. 『index.html』をブラウザーで開く
  2. 同時に『index.html』をTepaEditorとかメモ帳で開く
  3. ブラウザーで文字などを探す
  4. 見つけた文字などをTepaEditorで見つける
  5. TepaEditorで文字を変えてみる
  6. ブラウザーの画面を更新して変化を確認する

これを繰り返してDLしたサイトの中身を
自分のサイトに変えていってみよう。
 
 
 
HTMLが少しは分かる人は・・・

  1. ファイルをコピーする
  2. 2つのファイルをTepaEditorとかメモ帳で開く
  3. 片方のHTML記述を全部消す
  4. ブラウザで開いて白紙を確認する
  5. 1つずつ見て打ち込みながら内容を自分のサイトに変えていく
  6. 入力しながらブラウザーを更新して「ナニを変えたらナニが変わるか」をチェックする
  7. 分からないタグはググる

 
 
まずは出来てるものを真似る。
最初はコードを見ながら、慣れたら自分で考えてコードを打ってみよう。
 
 
 
最後に。

もし、『違ぇよ!知りてぇのはコレだよ!』
っていう意見があったらメールとかTwitterで言ってもらえたら更新します。