サイト製作 - 2 / html

サイト製作 - 1の続き

body〜/body(通称:body内)に書き込めばホームページというか、ページの内容が出来上がる。

※head〜/head(通称:head内)の設定は少しレベルが高めなので、
あとから覚えていけば大丈夫。


body内に書きこめばページが出来るけど、
どうやって何を書き込むのか?
テキスト文章をそのまま書き込んでも内容は表示される。
↓こんな感じ

↓ブラウザでの表示はこんな感じ。




※ちなみにブラウザで表示を見るには、作業しているファイル、今だと「index.html」をブラウザにドラッグ&ドロップするだけ。




でもbody内にテキストを直書きはやらない方が良い。
デザイン上もソース上も良くない。
そこで「div」というブロック要素タグを使って、レイアウトを作っていく。divタグは箱のようなもの。綺麗に文房具を整頓するように、大きい箱の中にいろんな形の箱を入れて、「ここはペン立て、ここはホッチキス」というように場所を決めてレイアウトするもの。





ここでは何も深く考えずに、divタグをいくつも重ねて作っていくとイメージ。
ホームページは、ソース(下の画像のようなの)上、

タグとタグで挟んで囲まれた形をいくつも作って出来ていると考える。

つまり、開始のタグdivがあれば必ずそれを閉じる/divがあって、大きいdivの中にdivがまた存在したり、違うタグが中にあったりしてサイドバー、タイトル画像、リンクが作られている。


次は実際にソースを自分で書いてテキスト文章を表示させてみる。