スポンサーリンク
最近はいろんな方から質問をいただくようになりました。
なるべくわかりやすく説明したいのですが、説明しても通じない方もおられます。
「スイマセン。エキハ、ドコデスカ？」
「次の角を右です。」
「モシモシ。ツギトハ、ナニデスカ？ミギハ、ドコデスカ？
ワタシハ、フランスデ、ソダチマシタ。ニホンゴ、ムズカシdeス。」
マドモアゼル、あなたに駅への行き方を説明したいのですが、
まず日本語からお教えしないとダメですか？
お気を悪くされないで欲しいのですが、最低限のHTMLを知ってもらわないと
説明できないんですよ。奥さん！
ブログはHTMLを知らなくても使えます。
しかし、カスタマイズするとなると最低限知っているべき事があります。
レーシングドライバーになりたいと言われても、
ブレーキもアクセルも知らないのでは、困っちゃう。
ということで「ハイパー超初心者対象のHTML講座」1回目です。
くり返しますが、お気を悪くしないでください。
この講座は、あなたにカスタマイズをして欲しいから開くのです。
コラム「HTMLとは」
ところでHTMLとは何でしょうか？
HTMLはHyperText Markup Languageの頭文字です。
つまり、日本語に直すとハイパーテキスト・マークアップ・ランゲージです。簡単ですね。
Wikipedia:HyperText Markup Language
お断り
この講座では、ウソを多くお教えします。しかし、それはわかりやすくするためのウソです。
たとえば、いちばん小さい数字はいくつでしょう？ゼロです。この答えは正解でしょうか？
マイナス値があるじゃないか！と言われるかもしれません。その通りです。
つまり、いちばん小さい数字がゼロと言うのはウソです。
しかし、一般的に言って間違いではありません。
この講座ではこのように、わかりやすくするためのウソをつきます。
HTMLは<ではじまり>で終わる
HTMLと言うものは、常にタグに囲まれています。
タグとは<ではじまり>で終わるものです。下のがHTMLです。
<html> <head></head> <body></body> </html>
今回は、上のHTMLを説明します。
タグは常に半角で書く
日本語キーボードには、左上のほうに「半角/全角」というキーがあります。
<と＜はそっくりですが、半角の<と全角の＜では全然意味が違います。
たいていのコンピューターは空気を読めないバカです。融通がききません。
<と>そして、その中のアルファベットは必ず半角で打たないといけません。
うっかり全角で打ってしまっても、コンピュータは気を利かして判断してくれません。
なんでうまくいかないの？というときは、全角でタグを打っていないか確認しましょう。
タグは常にセットで存在する
タグには、開始タグと終了タグがあります。２つの名前は必ず同じです。
上の例でいうと、<html>の終了タグは</html>です。
タグのおしまいは / （スラッシュ）
開始タグと終了タグはどうやって区別するのでしょうか。 <の次にタグの名前が書いてあるものが開始タグ。 開始タグ：<html>
<の次に / （スラッシュ）があるのが終了タグです。 終了タグ：</html>
HTMLがグチャグチャに崩れた場合、まずこのタグのセットが正しいかを調べましょう。
つまり、開始タグと同じ名前の終了タグがあるか？開始タグの数と終了タグの数は同じか？
開始タグと間違えて終了タグを打ったり、終了タグと間違えて開始タグを打っていないか？
これを調べるだけで、解決することは多いです。
後からはじまったタグは、必ず先に終わる
タグの中には、別のタグを入れられます。
しかし、タグＡの中ではじまったタグＢは、必ずタグＡの中で閉じないといけません。
タグＢの入っているタグＡが閉じたのに、タグＢが閉じていないのは間違いです。
間違っていても動けば別に構いません。しかし誤作動します。だから正しく表示されません。
正しいHTML
<html> <head>←開いて 閉じる→</head> <body>←開いて 閉じる→</body> </html>
間違ったHTML
<html>
<head>←開いて 閉じる→</head>
<body>←開いて
先に閉じている→</html>
閉じる順番が間違い→</body>
HTMLの最初のタグは <html>
HTMLは <html> から </html> までです。必ず <html> ではじまり、 </html> で終わります。
そして、<html> の次に来るのが <head> ～ </head>
その次に、<body> ～ </body> が必要です。
<head> ～ </head> には表示されない情報を入れる
<head> ～ </head> の中にあるのは、表示されないデータです。
表示されないけど必要なものが入っています。
たとえば、このページは日本語で書いてあります。とか、どういった内容の文章です。
などという事が書いてあります。
表示されるのは <body> ～ </body>
<head> ～ </head> に何か書いても表示されません。
表示されるようにブログを書くのは、 <body> ～ </body> のなかです。
今あなたが見ているこのページの文章は全部 <body> ～ </body> に書いてあります。
HTMLの基本構造
<html> <head></head> <body></body> </html>
次回に続く
イラストはふゆき職業別イラスト（アイデア工房）のものを使わせていただきました。
あなたのお住まいの地域で最安のブロードバンド選び
関連コンテンツ
スポンサーリンク
おおっためになる記事だっ！
私も、これ書こうと思ってなかなか書けなかったの。ありがとう♪
ウソっていうのは、誤解を生みやすいかもね。
正確ではないけど、一般的にはそう思っておいて
間違いのない内容、ってかんじですかね。
だって、信じてもOKな内容でしょ？
方便？言い方、難しいねぇ。
はじめから厳密にやるととても難しくなるので。
あぁ、これ今私が勉強すべきことかも・・・。
半角英字の羅列を見ながら、何のこっちゃわからず、うなってます。
心姫さん。
半角英数字を見ながら悶々としている
あなたのためにも頑張ります。
＞日本語に直すとハイパーテキスト・マークアップ・ランゲージです。簡単ですね。
ここ、つっこんで欲しいとこ？
＞厳密にやるととても難しくなる
ええ、ほんとに。まったく。
心姫さん、困っているあなたの姿はTomの活力だそうですよ。
ぜひ、悶々としてやってくださいませ。
こんにちは
遅まきながら、コメント欄に画像を入れるのを取り入れさせていただきました。
ありがとうございます。
こちらこそありがとうございます。
使ってもらえてうれしいです。
＞ここ、つっこんで欲しいとこ？
そうです。
こんにちは！
訪問＆コメントありがとうございます！
お～なるほど・・
自分もミスってたところですね。
付け焼刃で
あんなのをセットしてたけど
やっぱり勉強は必要ってことですね。
カチカチっとな！
こんいちわ。
私もここから 勉強します。
半角
タグは常にセットで存在する
タグのおしまいは / （スラッシュ などは覚えましたが
表示されるようにブログを書くのは、 <body> ～ </body> のなか。
今日 覚えました(^_^;) これからもちょくちょくきます。
ありがとうございました、 ポチしていきますね
みかんさん。ありがとうございます。
今日は、にぎわってますね笑。
需要がある記事ってことだね
こんばんは
いちから勉強しなおします。
またうかがわせて頂きますのでよろしくお願いします。
Tomさんこんばんは！
幼い頃、プラモデルを購入しても、全く説明書を読まないで製作に取り掛かる癖は、現在も変わらないようです。
カスタマイズについて、ここでシッカリ勉強させて頂きます!
(≧ω≦*)σﾎﾟﾁﾎﾟﾁﾝ
半角空白に全角空白が混じってないかも
大事なんだよね。
コピペのときは、特に注意。
2回以降でやるのかな？
あ、人気ブログランキング上がってるね。よかった。
では、おやすみなさい~。
こんにちわ・
こちらの講座への案内を記事に入れました。
ＴＢさせていただきますね。
こんばんは、始めまして
皆さんのブログを回っていたら、コメント欄に画像が出てるのでいいなと思って、
調べていたら、Tomさんのブログに辿りつきました
早速、画像が出るようにしました、分かりやすい説明ですぐに出来ました
これからも、ブログを色々いじくって行こうと思うのでよろしくお願いします
先生。続きが読みたいですっ！
先生～、まだ悶々としてますんで、ヨロシクお願いします。
トムちゃんありがとう、自分風に直してみました。
大丈夫？あげは。
もし、うちのちょいコツ方式でやってるなら
救助方法が変わるから、教えてね。
http://fanblogs.jp/parthaken/archive/329/0
おはようございます。
トムちゃん、かこちゃん、大変お騒がせしました。
トムちゃんの書いてくれている、方法で直しました。
どうもありがとうございました。
はじめまして。
hiroと申します。
ガブリエルさんのところからやってきました。
最近、ファンブログをはじめました。
分からない事が多いのですが
こちらのサイトがとても役立ちそうです。＾＾
またお伺いします。
リンク貼らせていただきました。
こんばんは
めっちゃわかりやすいです
はやく続きが読みたいです！
こんにちは、
超 初心者ですので、
大変参考になります。
こういう初歩的なところから、知りたかったのです。
ありがとうございます。
こんばんわ
初めまして。かんぺいと言います。
こちらのサイトを参考にさせて頂いて、少しだけカズタマイズしました。
リンクの文字色を変えてみました＾＾；
まだまだ初心者ですが、今後も参考にさせて頂きたいと思っています。
こんにちわ
何もわからないわたしですが、すごくわかりやすい説明に感動しました。これからも勉強させてください。
がんばりたいんです。
Tom様
当サイトにコメントいただきましたお返事を書かせていただきました。
遅くなりましてすみません。
http://fanblogs.jp/takeuke/archive/362/0#commentform
Tomさん
はじめまして、
mercyと申します。
大変、ためになりました。
今後も、参考にさせて頂きたいと思います。
失礼します。
こんばんわ。
とても勉強になるサイトですね。
自分はまだまだ詳しいことがわからないので、
こちらのサイトを参考に勉強させていただければと思います。
またお邪魔させていただきます。