ウェブのお勉強はじめました（２）タグ打ちをしてみよう - Webとライティングの学習帳|2月のグリズリー

ウェブを独学で勉強しようと書店でぱらぱら立ち読みすると大体つまづくのがこの辺。

自分がそうだったから。

料理書をいくら読んでも料理が出来ないように、まずは実際に材料を揃えて作ってみるしかない。

大前提としてウェブの文章はその文章が独立して存在しているわけではなく、ほとんどの場合に見出しやわかりやすいパラグラフに整理されている。ブログなどで文章を書くとき改行などがやりやすくなっているのは運営側がそのように設定しているから。

ウェブサイトを作るときはそういう設定を自分でやっていかなければならない！

どうやって？

たとえば「ウコンの力」「飲み会前に」「ばっちり効果」「ロングセラー」みたいな文章があったとする（適当すぎるのは勘弁）

ウコンの力は見出しなので、

<h1>「ウコンの力」</h1>

といったように書く。
そして続いて

<p>「飲み会前に」・・・（具体的内容）</p>

<p>「ばっちり効果」・・・（具体的内容）</p>

<p>「ロングセラー」・・・（具体的内容）</p>

といったように続けるのがウェブにおける文章の書き方。

今書いたのはあくまで簡単な例だけども、この文章にタグ付けをしていく作業をマークアップという。

見出しは

<h1><h2><h3><h4><h5><h6>

まで六段階あり、見出し１が一番重要でタイトルなどをつける時に使われる。それぞれをどのように使うか話はまた今度。

<p></p>

はパラグラフ。意味のまとまりと考える。上の例で言えば「飲み会前に」の文章のまとまりと、「ばっちり効果」の文章のまとまりは違うのでパラグラフを分けてみた。

そしてタグ付けは必ず、



<p>中身</p>といった感じで挟む！

さて、もうつらいと思った人もいるかも。わかる。

けど、とりあえず「terapad」をダウンロードしてみておくれ。（窓の社から：TeraPad - 窓の杜ライブラリ）

実際に作ってみよう

とりあえず

<!DOCTYPE html>

<html lang="ja">

<head>

    <meta charset="UTF-8">

    <title>タグをつけて書いてみる</title>

</head>

<body>

    <h1>「ウコンの力」</h1>

    <p>「飲み会前に」・・・（具体的内容）</p>

    <p>「ばっちり効果」・・・（具体的内容）</p>

    <p>「ロングセラー」・・・（具体的内容）</p>

</body>

</html>

これをコピーしてterapadにペースト。「○○○（半角英数字で自分が把握できる名前）.html」というファイル名で保存する。フォルダ管理が何よりも重要なので保存先はcドライブ直下に入れる（ここがデータが壊れた際に一番復旧しやすい）

そして普通に「○○○.txt」で保存したのとは違って、ダブルクリックなりドラッグでブラウザに持ってくると。ブラウザ上で表示される文章は記号がいろいろと消えて文章のみになっているはず。

あ、terapadが文字化けする場合は以下を参照。（HTML、PHPファイルで文字コードUTF-8使用時の注意点（BOM有り、無し）｜PHP工房）

ということです。ウェブサイト制作の第一歩はこの謎記号を使ってひたすら文章をいじっていくわけ。料理で言えば野菜をどんどん切ったりって段階ですな。今回使ったサイトを作るときの言語をHTMLと言ったりします。まず装飾の前にHTMLで段落や見出しなどの文書構造を決めるのがなによりも重要なので闇雲にデコレーションしても意味ないわけです。（検索サイトはおかしなタグを使っているとみなす）

そして上のソースコードをブラウザで表示したときに「ウコンの力」が大きくなっているけれど、これは別にh1が文字を大きくさせるとかそういうことではなく単純にブラウザのなかで決められている設定。だから自分で綺麗な感じの装飾をしたい場合、それを変える必要がありこれをスタイルシートの変更(CSSの記述）という。

文章があって、HTMLで構造をはっきりさせてCSSで見栄えを良くする。
そんな流れ。