メインコンテンツ | メニュー

Main Contents

Apr 13 2005

■【HTML-13】ここまでで出来るようになったこと

ここまででどうでしょうか？
難しいくてまだ全然わかりませんか？それとも肩透かしに簡単ですか？
ここで一区切りして、今までをまとめておきます。

１）HTMLって強面だけど、間にいろいろ入っているだけで、基本構造は一緒。
　→<html>で始まり、</html>で終わる。
　→<head>には、表示されないけど書いておくことを書く場所。
　→<body>には、実際Webブラウザに表示されることを書く場所
　→電話での聞き伝えと一緒なので、
　　ページの最初に表示されることは、<body>の最初に書いてある
　　
２）エントリー内で、太文字を使ったり、大きさを変えたりできる。
　→<B></B>で囲めば、太文字になる。
　
３）HTMLリファレンスを見れば、太文字以外の“書き方指示”が載っている
　→こんな書き方したい！と思えば、リファレンスを見ればいい。
　
４）「この表示はどんなHTML？」と思うページがあったら「ソースの表示」
　→右クリックで「ソースの表示」を選んで、HTMLを表示する
　→これでいろいろ見ていけば、ボキャブラリーが増える！


ゆっくり進みたい人は、実際エントリーでHTMLを使ってみてください。
そして、こんな表現したい！と思ったら、リファレンスで調べたり、それをやっているページのソースを見たり、検索して探したりしてみてください。
自分で思ったことが出来れば楽しいですよ！
そして、ちょっと出来たらまたここに帰ってきて、続きを読み進んでみてください。

このまま行くぞ!って人は、次からはCSSに内容が入っていきます。
「もぉCSSかよ！」と思われるかもしれません。でもCSSもHTML同様、そんな肩に力入れるほどのものではありません。同じようなものだと思ってください。

さてさて、CSSができれば、もっと自由にブログを飾ることができますよ！

Apr 12 2005

■【HTML-12】自分のブログのHTMLを見てみる

さぁ、ちょっとステップアップして、実際の強面HTMLに挑戦です。
まず手始めに普段見ているWebページのHTMLを見てみましょう。

いままでやった、こんなに簡単なことでホントにいいんだろうか？とまだ思われているかもしれませんが、全然大丈夫です。この回で強面HTMLが少しでも分れば、ちょっとは自信つくと思いますよ！

さぁ、始めましょう！対決する強面HTMLは何でもいいんですけど、
説明しやすいように、例えばこのブログを見てみます。
ページのどこででもいいので、右クリック（Macではコンテクストメニューって読み替えてね）をします。すると「ソースの表示」がありますので、それを選択します。

すると、まぁ立派な強面なHTMLが表示されますね。

まず、親近感を持ってもらうため、知っているタグを探してみます。
最初はやっぱ、<html>でしょう。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

2行目あたりにありません？いろいろ属性付いてますが、htmlタグですね。
んでずーっと下までスクロールして、一番最後の行を見てみますと…</html>がありますね。
その一つ上には、</body>がありますね。ってことは<body>もあるわけです。

またずーっと上までスクロールして最初に戻って、26行目あたりを探してみてください。ありました？
その上は</head>がありますね。ってことは<head>もあるわけです。
<head>は<html>の次行にありますね。

こんなに強面ですが、あんなに簡単だった基本構造とおりにできていることが分っていただけましたでしょうか？
属性もいっぱい入って途中いろいろややこしいのはありますが、タグの基本とおりです。
間にいっぱい入っているだけで、分ってしまえばどうってことないでしょう？

ちょっと親近感持ってもらえました？


<body>以下をざぁーと見てみると、時々日本語がありますね。
その日本語は、このページに書かれている日本語ばかりです。
Webページを見てください。それで同じ文字が書いてある場所を探してみます。

ありました？
日本語だけ追って行ったら、書いてある構成順が一緒ですよね。

いままでの話を理解してもらっていたら、全然当たり前な話です。HTMLは電話での聞き伝えなんですから、表示する日本語はそのまま書いてあるわけです。

ってことはですよ！
Webページ見てて「これはどんな風にHTMLを書いたら、こんな表示になるんだろう？」って思ったら、そのHTMLを見ればタネ明かしできるってことです。

実は、みんなそうやってHTMLの勉強をしています。

例えば、エントリータイトルの文章を見つけてみてください。

<h3><a href="http://moo-t.net/blog/・・・" title="■【HTML-12】自分のブログのHTMLを見てみる">■【HTML-12】自分のブログのHTMLを見てみる</a></h3>
ってなっています。（ご覧になったページによっては<aタグがないかもしれません）

<h3>ってなんやねん？ってリファレンスで調べてみると、
□h1～6　見出し

H は Heading（見出し）の意味です。文章の見出し（章題）を記述します。見出しのレベルは h1～h6 まであり、h1 が一番大きな見出しになります。
ってありました。
ということは、<h3>は3番目に大きな見出しってことになります。

<h3>の次は、<a href="とあります。
□a - リンクする

a はアンカー（Anchor）の略です。
<a href="...">～</a> の形式は、指定したページにジャンプしたり、指定したメールアドレスに対するメールソフトを起動したりする目的で使用されます。
ってありました。
ということは、この見出しはリンクになってるってことですね。

Webページにもどって、実際リンクであるエントリータイトルを押してみてください。
リンクになっているので、違うページに移動しましたよね。


ねっ！なんか小難しそうな強面HTMLですが、色々尾ひれが付いているだけで、じっくり見ていけばとても単純な仕組みで出来ていることがわかってもらえたかと思います。

Apr 11 2005

■【HTML-11】HTMLリファレンス

さぁこれで、使いたくなったら、そのタグを調べればできようになりました。
その調べる辞典のことをリファレンスって言います。

Webで検索したら、リファレンスっていっぱいHitします。
ボクは、
□とほほのHTMLリファレンス
とほほさんのこのリファレンスにお世話になりました。いまでも使っています。
リファレンスは、最初のうちは書籍で持っていると便利ですよ！

タグといい、属性といい、リファレンスといい、色々用語が登場して嫌気がさしてきていませんか？
別に覚えなくてもいいです。必要度の低いことだと思います。

でもなぜわざわざ説明しているのか？というと、インターネットを使った独学で、もっとも頼りになるのは、YahooやGoogleで検索ができることです。
調べたい単語を入力すれば、簡単にページが検索できますよね。その時専門用語で検索をした方が効率的だからなのです。

その程度に専門用語を知っておけば十分、だと思いますよ。
覚えなくても、だいたいこの辺のWebページに書いてあったなぁ。とその程度に頭の隅に置いておいてください。

Apr 10 2005

■【HTML-10】実際にHTMLを作ってみよう！

さぁ、今までの話がウソじゃなかったことがここで証明されます。
実際、もっとも簡単なHTMLを書いてみます。

□HTMLはどんなテキストエディタでも作れる
　HTMLは文章が書けるいわゆるワープロソフトなら、どれでも作れます。
　Windowsには標準で、メモ帳とかありますよね。あれでいいです。
　拡張子（ファイル名の最後に付ける英文字)を.htmlにして保存してください。

一番簡単なHTMLをメモ帳で書いてみます。

<html >
<head>　　</head>
<body>はじめてのHTMLですよ</body>
</html>
↑これをコピーして、メモ帳にペーストしてください。
そして、.htmlという拡張子を最後に付けた名前ならなんでもいいので付けて保存してください。（ここではtest.htmlという名前で保存したとします。）

保存したtest.htmlをお使いのWebブラウザで開いてみてください。

はじめてのHTMLですよ
って表示されました？
ねっ、できたでしょう！

じゃぁ、文字を太くしてみます。
『はじめてのHTMLですよ』の前後に<strong>タグを追加してください。
(<strong></strong>は<B></B>でもOKです。)

<html >
<head>　　</head>
<body><strong>はじめてのHTMLですよ</strong></body>
</html>
↑こんな感じ。


保存して、ブラウザの「再読み込み（リロード）」を押してください。

はじめてのHTMLですよ
って表示されました？
ねっ、太くなったでしょう？


次に属性なんか増やしてみましょうか？

<body>の属性に背景色を指定するbgcolor属性があります。これを追加します。
とほほのHTMLリファレンス bodyタグ

<html >
<head>　　</head>
<body bgcolor="yellow"><strong>はじめてのHTMLですよ</strong></body>
</html>
↑、こんな感じ。同じく保存→再読み込みします。
背景が黄色くなったでしょう？

bgcolor="yellow"　は英語そのまんまで、yellowが指定している色です。
だからblueに変えれば、背景が青になります。

保存→再読み込みやってみました？なったでしょう？

ちょっと嬉しくない？初めてHTMLができましたよ！

こんな感じで、タグを書いてブラウザで見て…
を繰り返してHTMLは作っていきます。

普通のHTML入門なら、ここから徐々に難易度が上がりややこしい話になっていくのですが、ブロガーにはそれは必要ありません。だって、その難しいのはブログがやってくれるんですから＾＾
最初にブログとは定型書類を管理してくれるもの。と言いました。
お役所の書類と同じで、インターネットで通用する定型書類には、それなりのルールがあります。HTMLを１から全て作っていくならばそれらも知る必要があるのですが、ブログの場合は、そういった面倒なことはブログがやってくれます。（だから知らないタグや属性が増えて強面HTMLになるんですが…^^;）

Apr 09 2005

■【HTML-9】タグの属性

文法が分ったら、あとは使いたい単語を辞書で調べて、それを使っていけばいいわけです。なので、この文字は斜体にしたいと思ったら、斜体にするタグを、「ここに画像を貼りたい」って思ったら、画像を貼るタグを調べればいいわけです。

っと思ってやってみると、新しい用語に当たります。
それは属性。

属性とは、タグの詳細情報です。

例えば、画像を貼るタグ<img>は、ここに画像を貼るという意味しかありません。
どれを？大きさは？がないわけです。

そこで登場！属性です。

どれを？は　src=で、大きさは？、width= height=　になります。
これを一緒に書けば、この画像をこの大きさでここに貼る。っていう指示になります。

<img src="xxx.gif" width=100 height=100>

ってな具合。
こんな感じで、属性が増えるもんだから、段々と強面になっていくわけです。

タグと属性が分かれている理由は、同じ属性が他のタグで使えたりするからです。
例えば、width（横幅） height（縦高）は他のタグでも使います。
タグそれぞれに、専用の属性があるわけではないので、一度覚えた属性は他のタグでも使えたりします。

「やっぱり、色々覚えることがあるんやん！」と思われたかもしれません。
何故、属性の話を後回しにしたのか？

それは英語の例を思い出してください。全ての単語を知っていないと英語が話せないわけではないですよね。この属性もそれと同じです。
やたら属性の多いタグもありますし、逆もあります。単語と同じく全ての属性を知っていないとそのタグが使えないわけではないのです。そしてブログで使う属性はまた限られてきます。

タグを知ることがボキャブラリーを増やす、のと同様、
属性を知るのもボキャブラリーを増やすことなのです。

だから、徐々に増えていけばいいわけです。

HTMLに向いている学習法は、完ぺき主義的な方法ではなく、その場しのぎ的な方法なのです。だから、少々知らないことがあっても前へ進む！

ってことで、次行ってみよ～！

Apr 08 2005

■【HTML-8】もっとも基本的な構造を示すHTMLタグ

って何だと思います？
それは「これはHTMLです」というタグです。そんな基本的なことまであるのか！とびっくりされるかもしれません。

「これはHTMLです」のタグは<html></html>です。
なので、全てのHTMLは<html>で始まり</html>で終わります。


次に基本的な構造は、言い伝えのイメージを思い出してください。
内容に入る前に、どんな紙を用意して欲しいとか言いましたよね？あれです。
これを先に言わないと「後から言うなよ！」ってなっちゃいますからね。

「こんな書く場所を用意してください」のタグは<head></head>です。

そして、やっと内容を言い出すわけです。

「ここからここまでが内容です」のタグは<body></body>です。


今までをまとめると・・・

<html >
<head>　　</head>
<body>　　</body>
</html>
これが、どんなに複雑なHTMLになっても守られる基本構造です。

ブログでは、<body></body>は実際に表示される内容。
<head></head>は表示されないけど、書いておきたいこと。
程度に知っておいてください。

Apr 07 2005

■【HTML-7】後はボキャブラリーを増やすだけ

英語とか、語学を勉強するって、
「文法を知る」と「ボキャブラリーを増やす」に分かれますよね。

HTMLも同じです。文法に相当することは、前回で終わりました。
・・・って、本当にあれだけなのです。細々したことは色々あるんですが、ブログをする上ではあまり重要ではありません。なのでそれでつまづくよりも、先にすすんだ方がいいと思います。
文法が分っていただければ、あとは『書き方の指示』ボキャブラリーを増やすだけです。
今は前回やった太文字だけ知っています。他に斜体もあるし、文字を大きくしたり。
やりたい書き方の指示を<>カッコに入れていけばいいわけです。

「書き方の指示が山ほどあるんじゃないの？」
と疑いの視線をもの凄く感じますが、それもそんなにありません。

これが、その一覧です。
□HTMLリファレンス

これで全部です。
そんな多くないと思ってもらえるか？むちゃ多い！と思われるか？
どっちと思うかは人それぞれですが、全部知って覚える必要は全然ありません。
必要なだけでいいのです。なぜか？

例えば、日本語が話せるからって、広辞苑全ての言葉って知らないですよね？
英語ペラペラだからって、辞典全ての単語を知ってるわけないですよね？

なんで、言葉を全て知らないのにペラペラに話せるのか?
それは、使わない単語は知らなくとも英語の文法さえ知っていれば困らないからですよね。観光で海外行く人には、医学専門用語は必要ないわけです。

つまり、ブログをやる人には、ブログで必要な書き方の指示を知ればいいわけです。
文法に相当するルールは前回やりましたから、後はブログで必要な書き方の指示を理解すればいいわけです。ブログで必要なボキャブラリーは多くありません。

書き方の指示は、HTMLではタグと呼ばれます。

Apr 06 2005

■【HTML-6】HTMLのルール

じゃぁ具体的にその半信半疑を取り払っていきましょう。

HTMLはルールと言いました。
ルールなので、誰が書いても同じになるよう、書き方が決まっています。

まず、最初のルールは、

内容は頭から順に書いていく
WebやHTMLってなんか小難しいことをしているって思われている方には、なんだか全然凄くない事ですが、電話での言い伝えと同じく丁寧に頭から順に内容をHTMLで書いていきます。テクニックとしてそれを破る方法はあるんですが、基本はこれです。
実は、ブログを改造する上で、このルールは意外に大切です。
例えば、エントリータイトルの直下にある文字を改造したいと思ったら、そのタイトルの下の行を探せば、該当箇所があるんです。

「■【HTML-4】Webの仕組みのイメージ」でイメージしてもらった言い伝えの一文を例にします

最初に『今日の日記』と太文字で書いてある。
これ、実際に聞き取るってなると、
・『今日の日記』のように、実際に書く内容
・太文字で書いてある、のように内容の書き方の指示
に分けて聞くと思います。実際書くのとその書き方という分け方です。
これを聞き間違えると、書かなくてもいいこと書いちゃったりしますよね。

これと同じ事をHTMLでも行います。
後者の書き方の指示は、<>表記のカッコでくくって書きます。

このルールで例文を書き換えると

<太文字>今日の日記</太文字>
となります。
/は、ここまでっていう意味です。

ということは、<太文字></太文字>で囲ったところが太文字となります。
電話で言い伝えるときも、「こっから、ここまでが太文字」といった具合の範囲指定を言うと思います。それと同じです。

HTMLとは、<>表記のカッコで範囲指定する言語
なのです。

“太文字”って日本語は流石に使いません。ちゃんと書き方のルールがあります。
HTMLでは、Bと書きます。英語で太文字って意味のBoldのBです。
またまた、HTMLのルールで例文を書くと

<B>今日の日記</B>
となります。


HTMLとは、<>表記のカッコで範囲指定する言語で、書き方の指示が決まっている
実は、これでHTMLのほとんどのルールは終わりです。


ええええっ！まじで！って思われるかもしれませんが、ホントにこれだけです。
とりはらうどころか、より増した半信半疑は、次で減らせるのか…次回へ。

Apr 05 2005

■【HTML-5】HTMLの仕組みのイメージ

HTMLは、サーバーという人から書類内容を聞くときの言葉・言語です。
聞き伝えを上手にできるよう、ルールを決めています。
HTMLを理解するというのは、そのルールを知ることになります。

HTMLは見た目、すげー難しそうですよね。
でも、それはもの凄く子供騙しで、多くの人がその見た目に騙されています。
だって、書いてあることは、さっきイメージしてもらったあの電話のやりとりそのまんまなんですから。
英語で書いてあって、知らない単語がせせこましく書いてあるから難しいように思うだけ。

…と、騙されたと思って、まずそう思い込んでみてください＾＾

Apr 04 2005

■【HTML-4】Webの仕組みのイメージ

インターネットの回線（ADSLとか光とか）を伝って、データが来ていますよね。
では、そのデータはどんなのがやってきて、どのように表示されるのでしょう？

こんなのを想像してみてください。

電話で書類の内容を話して、電話相手にまったく同じ書類をその場で作ってもらう。
FAX使えよ！って話ですが、もしFAXがなかったら…

例えば、こんな書類があったとします。

sarublo_exfile.jpg(16991 byte)

これを電話で話して伝えるとしたら、どうします？
多分、多くの人が、上から順にこんな感じで言い伝えていくと思います。
まず、これから作ってもらうのは日記です。紙はA4を用意して。
そんで頭から内容言っていくね。

最初に『今日の日記』と太文字で書いてある。
1行あけて、日付が『2006.03.27』と書いてある。
改行して、『今日はいい天気だった。だから写真を撮りに行った』
改行して、写真が貼ってある。写真は後で別に送るから、それ貼ってね…

ってな具合。

実は、WebのページがWebブラウザで表示される仕組みも、ほぼこんな感じなのです。

具体的な用語に言い換えると、
　電話で内容を言っている人は　＝　サーバー
　電話で内容を言っている人の電話番号　＝　URL（http://www～ってやつ）
　聞いて書き写しているのは　　＝　Webブラウザ（Internet Explorerとか）
　2人で話している言葉　　　　＝　HTML　
となります。

Webページを見るっていうのは、言い換えると、

URLっていう電話番号みたいなものでサーバーさんに電話をかける。
すると、サーバーさんは書類の内容をHTMLで言ってくれるので、
Webブラウザがそれを聞いて、同じものを書き起こしてくれる。
ってなります。

Apr 03 2005

■【HTML-3】ブログの仕組みのイメージ

ブログは定型書類の管理ソフトだとイメージしてください。
1枚の書類に1ページのWebページを作成してくれます。
ここに記事を書く。ここにその日付を書く。ここにコメント、トラバ…
といったように、一枚の紙に色々な入力欄がある定型書類。
ブログのエントリー（記事）入力ページってそんな感じじゃないですか。

ブログは、あなたにまだ何も書かれていない定型書類を提供し、それに記入して保存（投稿）したら、それを管理してくれるソフトです。

便利なことに、色々な分類方法で見せてくれます。
所謂TOPページやメインページは、日付で管理しているので、最新の書類数枚をまとめて見せてくれるページで、
カテゴリーページは分類されたフォルダの一つを見せてくれる、というイメージ。

ブログを書くっていうのは、その定型書類を1枚1枚書いて増やすってことです。
ブログデザインをするっていうのは、定型書類の雛形（元となる紙）をデザインするってことになります。

Apr 02 2005

■【HTML-2】HTMLを知ればできること

　・エントリー（記事）文を色々な表現で書けるようになる
　・ブログパーツの設置がより簡単になる
　・簡単なブログデザインの改造が出来る
　・CSSや、JavaScriptなど多くのWeb関連技術を理解する下地ができる

CSSとは、ブログデザインを作るときに使う言語です。
まずHTMLで下地ができていれば、CSSにステップアップでき、オリジナルなブログデザインが作れるようになります。

Apr 01 2005

■【HTML-1】サルブロ開始！

ブログのおかげで、HTMLを知らなくともWebページを作ることができるようになりました。HTMLを全く知らなくとも、ブログするには困らないですよね。

でも、ちょっとブログデザインを変えてみよう！とかブログパーツをつけてみよう！とか、いつものエントリー書きとは違うことをしようと思ったとき、やっぱりでてくるんですよねHTML。

HTMLは一度ぐらいは見たことがあると思います。
<img src="xxx.gif" width=100 height=100>
こーんなやつですよね。

なんか難しそうで強面なHTMLですが、実はぜーんぜん難しくありません。
本当は、ややこしく感じるところもあるんですよ。でも、これを読んでいただいている方はブログで使うためのHTMLが知りたいのであって、HTML博士になろうとは思っていませんよね。だったら、ブログで必要な部分だけでいいわけです。

私がこれを書こうと思った理由はここです。
HTML全体を説明しなくとも、ブログで必要なところだけを書けば、世に溢れるHTMLの解説書より簡単に書けるのでは？と思ったのが理由です。

まずその半信半疑な気持ちでいいですので、先に読み進みはじめてください。

サルでも分るブログHTML＆CSS入門、開始です。