ウェブのお勉強はじめました（３）タグについていろいろと
学んだことを書くのは難しい。
ひょいひょういと飛び越えた知識もやっているうちに何となくわかってしまうけれど、文章は論述でいくわけだからその間をしっかり埋めなきゃ不誠実。ウェブの本の難しさはこの辺に起因し、会社に入ればいやでもわかるというのはなんだか「料理の世界」みたい。
前回はタグ打ちについて書きました。terapadに以下のコードを張り付けて「index01.html」なんて名前で保存して、ダブルクリックするとブラウザで良い感じに表示できる実感から「なんとなく理解」が始まりました。
<!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のほうの設定を直せば大丈夫。前回のリンク参照）
あ、ブラウザなんですがinternetExplorerはやめた方がええです。GoogleChromeかFireFoxにしましょう。パソコン買ったらだいたい当たり前のように内蔵されてるから使い続けている人もいると思いますがこれを機会に切り替えましょう。余分な機能付いてないので表示も早いです。
それで、テキストエディタは他にも色々あります。
Adobe Brackets・・・ブラケッツ、なんと無料。練習に良い。ざっくり
adobe dremever・・・ドリミーバー。お金がかかる。高機能。ざっくり
両方ともタグを打った段階で次はこれですか？って感じで予測変換をしてくれてタグを打つのが早くなる。でもあんまり練習にならないのでとにかく最初は手で打ちましょうとは先生の言葉。
ひたすらタグを打ち、一息つくたびにCtrl＋Sで文章の保存を徹底せよ！とのこと。
ちなみに授業で使っているテキストは翔栄社『HTML5＆CSS3標準デザイン講座』（草野 あけみ)です。
ここに書かれている文章を参考によく使うタグ
<h1>~</h1>・・・見出し：h1~h6までの6段階。<p>~</p>・・・段落：意味のまとまりごとに区切る。
<ul>〜</ul>・・・箇条書きリスト（順不同）:１２３４と番号がつかないリスト。<li></li>と一緒に使う。
<ol>〜</ol>・・・箇条書きリスト:1234と番号が付く。<li></li>と一緒に使う。
<dl>~</dl>・・・記述リスト：dt要素やdd要素と一緒に使う。
<table>~</table>・・・表組み：tr要素やtd要素と一緒に使う。
<address>~</address>・・・連絡先
<div>~</div>・・・任意の範囲を選択：囲むイメージ、めちゃ使う。
<a>~</a>・・・ハイパーリンク：リンクを作るときに使う。
<em>~</em>・・・強調
<strong>~</strong>・・・重要な語句：ブログでよく使う人も多いかも。
<img>・・・画像
<span>~</span>・・・任意の範囲
＊厄介なのがHTML5というものになって新要素が多く入ってきたことらしい。らしいというのはまだ教えてもらってないから。耐えず勉強をしていかないといけないのですな。
tr要素？td要素？とタグだけ見てもわからないと思うのですが、
ウェブの文章にはタグが必要でそれを装飾するのがCSSというのだけ理解できれば本屋に置いてある入門書の内容をどんどん模写していくのが一番の勉強になりそう。上記のタグが意味するところは今後ひとつずつ書きたいと思ってます。
しかしこのペースで続く感じがしない（笑）
code-drill（コードドリル - プログラミング言語のタイピング練習）で練習してタイピングの速度を速めるべし（自戒）
ウェブのお勉強はじめました（２）タグ打ちをしてみよう
ウェブを独学で勉強しようと書店でぱらぱら立ち読みすると大体つまづくのがこの辺。
自分がそうだったから。
料理書をいくら読んでも料理が出来ないように、まずは実際に材料を揃えて作ってみるしかない。
大前提としてウェブの文章はその文章が独立して存在しているわけではなく、ほとんどの場合に見出しやわかりやすいパラグラフに整理されている。ブログなどで文章を書くとき改行などがやりやすくなっているのは運営側がそのように設定しているから。
ウェブサイトを作るときはそういう設定を自分でやっていかなければならない！
どうやって？
たとえば「ウコンの力」「飲み会前に」「ばっちり効果」「ロングセラー」みたいな文章があったとする（適当すぎるのは勘弁）
ウコンの力は見出しなので、
<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で見栄えを良くする。
そんな流れ。
ウェブのお勉強はじめました（１）ウェブの文章は基本三文節
5年ぶりにブログの更新を再開（笑）これからウェブについての勉強の記録をつけ始めます。
目的は自分の学んだことの復習と、タグ打ちやイラストレーターを一回もしたことがない素人の自分が同じように素人の友人を仮想読者に仕立て上げて書き続けられれば、今後誰かに教える時に役立つのではないかと思ってのことです。
ということで授業で膨大に叩き込まれる情報からきちんと消化できたものだけを載せていきます。
さて今日学んだのは、ウェブにおける文章の基本は三文節ということ。
文節とは基本一息で読める量。ウェブにおいては、文章の書き方本などでよく言われているような「起承転結」ではなく、結論→情報→結論という書き方が重要とのこと。だから書いた文章のテーマは何なのかとの突き詰めが必要で、それはサイトを上位表示にするためのメタディスクリプションを記述するときに役立つ。
ウェブ上で検索されるとは検索エンジン(Googleなど）がサーバーに持って行った情報のみ検索されるということだから、検索エンジンが効率的にサイトの情報を収集するためにどのようにサイトを作ればいいのかを考えていく。これを検索エンジン最適化（英: Search Engine Optimization）という。いわゆるSEO対策というアレ（ちなみにブログは情報をすぐ持って行ってくれる仕組みがある）
まだきちんとよくわからないが、ここが勉強になりそう。
検索結果上位表示のための記述 - Webデザインの勉強 | Webサイト制作科 1月20日開講クラス
これからはどしどし学んでいくつものサイトを見て、どういう構造やデザインなのかを絶えず意識せよ。とのこと。
例）ウコンの力
飲まなきゃ→理由（情報など）→飲まなきゃの構造。
- 新商品画像↓
- キャンペーン情報↓
- 関連商品↓
- 会社情報・連絡先
以上のような「1ページで一つの商品」チラシのようなサイトをランディングページという。
（参考：「ランディングページとは何か、これで分かる！」ランディングページとは何か、これで分かる！ | Ｗｅｂ集客の開花塾）
