今回から、カスタマイズと言っていいかわかりませんが、表の作り方などについて説明しようと思っています。
いろんな方のサイトを見ると、表はかなりの確率で目にします。
それぐらい、表は便利だということですね。
とはいえ初心者の方には「表を作るのは難しい」というイメージがあると思います。
その理由は、タグ（< >←コイツ）の存在ではないでしょうか？ﾁｶﾞｳ??
たしかにタグは特有のルールや使い方があります。
でも、ゆっくり・じっくり考えれば、何も難しいことはありませんよ。
慣れてしまえばこっちのもんです。
ということで、これからしばらくの間はゆっくり・じっくりと説明していきます。
名付けて･･･
初心者救済企画!!食わず嫌いは損ですよ！とりあえず食べてみて？大作戦!!
裏タイトルは
「大丈夫だよ。怖がらないで。手取り足取り、ゆっくり教えてあげるから。ｹﾞﾍﾍ」
うぅ〜･･･ん。センスのなさに泣けてきた。。
！※caution※！
ある程度の知識がある方には退屈な記事になると思います。
そして、時間をかけて初心者の方に理解していただくために、話が長くなります。
読まれる方は、上記のことをご了承いただいたうえでお読みください。
いろんな方のサイトを見ると、表はかなりの確率で目にします。
それぐらい、表は便利だということですね。
とはいえ初心者の方には「表を作るのは難しい」というイメージがあると思います。
その理由は、タグ（< >←コイツ）の存在ではないでしょうか？ﾁｶﾞｳ??
たしかにタグは特有のルールや使い方があります。
でも、ゆっくり・じっくり考えれば、何も難しいことはありませんよ。
慣れてしまえばこっちのもんです。
ということで、これからしばらくの間はゆっくり・じっくりと説明していきます。
名付けて･･･
初心者救済企画!!食わず嫌いは損ですよ！とりあえず食べてみて？大作戦!!
裏タイトルは
「大丈夫だよ。怖がらないで。手取り足取り、ゆっくり教えてあげるから。ｹﾞﾍﾍ」
うぅ〜･･･ん。センスのなさに泣けてきた。。
！※caution※！
ある程度の知識がある方には退屈な記事になると思います。
そして、時間をかけて初心者の方に理解していただくために、話が長くなります。
読まれる方は、上記のことをご了承いただいたうえでお読みください。
まずは、表を作る前に、タグについて簡単に説明します。
説明しますが、完璧に理解しなくて良いですよ。
今回は、何となくイメージをつかんでいただくことを目的としていますので。。
では始めましょうか。
そもそも、今見ていただいているこのサイトはどのような作りなのでしょうか。
実際にサイトの裏側を見てみましょう。
・ブラウザの最上部にある「表示」から「ソース」をクリックしてください。
・新しい画面が表示されましたね。
これが、サイトを構成しているコードです。
WEBブラウザが、これを瞬時に処理して、きれいに表示してくれているわけです。
まさに？？？ですよね。
さっそくヒイちゃいました？
ちょ、ちょっと待ってくださいね。
骨組みは簡単なものなんです。
サイトの基本となる骨組みは↓下↓のとおりです。
<html>
<head>
</head>
<body>
</body>
</html>
はい。これだけです。
では簡単な説明をします。
<html> </html>：
一番始めと一番最後に、コレを入力することで、「このファイルはHTMLですよ。HTMLで処理してね〜。」と言っているわけです。
----------
HTMLとは？と言う方のために･･･
HyperText Markup Languageを略した物で、WEBページを表現するための言語のことです。
世界中の全てのパソコンで理解できる言語で、1991年に誕生したそうですよ。（意外と新しいんですね。）
----------
次に出てきた<head>〜〜</head>:
コレがサイトのタイトルなどを表している部分です。
また、ここでサイト全体に適用するスタイルシートの情報を指定します。
----------
スタイルシートって何？という方のために･･･
HTMLに対し、スタイルシートはCSS言語のことを指します。
スタイルシートは、読んで字のごとくスタイルを指定するシートです。。
HTMLだけでもサイトの見栄えを良くすることはできます。
でも、一つ一つのページを同じ見栄えにしたい時、それぞれのページで同じタグを入力（コピペ）するのは面倒ですよね？
そこで、スタイルシートという雛形を指定することで、「他のページもこの雛形を使ってね。」としているわけです。
スタイルシートについては、後でまた詳しく説明しますね。
----------
最後に<body>〜〜</body>:
さぁこれは何を示す部分でしょうか･･･何となくわかりますか？
headがサイトのタイトル等を示す部分、つまり頭の部分です。
ではbodyは？体？･･･
そうです。ここが、サイトの内容を示す部分になります。
ここにいろんなタグなどが入ってサイトができているわけですね〜。
サイトの基本的な骨組みは以上です。
上記を踏まえたうえで、もう一度ソースを見てみてください。
「ここからここまではhead（タイトル部分）で、ここからがbodyか」とわかっていただけると思います。
ちなみに、<html>の上に<!DOCTYPE〜>と書いてある場合がありますね。
これは、ドキュメントタイプというもので、「どのHTMLのバージョンで書かれていますよ」とWEBブラウザに教えてあげる役割を果たします。
HTML自体、この何年かの間に内容の違うバージョンの規格ができている(らしい)ので、このように最初に指定してあげることで、よりスムーズにサイトが表示されるわけですね。
･･･これについては私自身よくわかっていませんので、間違えていたらごめんなさい。。
えぇ〜と･･･なんでサイトの構成を説明したかというと、
一見複雑で、見ただけでウンザリしてしまいそうなものでも、一つ一つのタグを見てみると意外と簡単(?)
ということを言いたかったんです。
表を作るのはもっと簡単ですよ。
では次回からは、表の作り方を説明しますね。
説明しますが、完璧に理解しなくて良いですよ。
今回は、何となくイメージをつかんでいただくことを目的としていますので。。
では始めましょうか。
そもそも、今見ていただいているこのサイトはどのような作りなのでしょうか。
実際にサイトの裏側を見てみましょう。
・ブラウザの最上部にある「表示」から「ソース」をクリックしてください。
・新しい画面が表示されましたね。
これが、サイトを構成しているコードです。
WEBブラウザが、これを瞬時に処理して、きれいに表示してくれているわけです。
まさに？？？ですよね。
さっそくヒイちゃいました？
ちょ、ちょっと待ってくださいね。
骨組みは簡単なものなんです。
サイトの基本となる骨組みは↓下↓のとおりです。
<html>
<head>
</head>
<body>
</body>
</html>
はい。これだけです。
では簡単な説明をします。
<html> </html>：
一番始めと一番最後に、コレを入力することで、「このファイルはHTMLですよ。HTMLで処理してね〜。」と言っているわけです。
----------
HTMLとは？と言う方のために･･･
HyperText Markup Languageを略した物で、WEBページを表現するための言語のことです。
世界中の全てのパソコンで理解できる言語で、1991年に誕生したそうですよ。（意外と新しいんですね。）
----------
次に出てきた<head>〜〜</head>:
コレがサイトのタイトルなどを表している部分です。
また、ここでサイト全体に適用するスタイルシートの情報を指定します。
----------
スタイルシートって何？という方のために･･･
HTMLに対し、スタイルシートはCSS言語のことを指します。
スタイルシートは、読んで字のごとくスタイルを指定するシートです。。
HTMLだけでもサイトの見栄えを良くすることはできます。
でも、一つ一つのページを同じ見栄えにしたい時、それぞれのページで同じタグを入力（コピペ）するのは面倒ですよね？
そこで、スタイルシートという雛形を指定することで、「他のページもこの雛形を使ってね。」としているわけです。
スタイルシートについては、後でまた詳しく説明しますね。
----------
最後に<body>〜〜</body>:
さぁこれは何を示す部分でしょうか･･･何となくわかりますか？
headがサイトのタイトル等を示す部分、つまり頭の部分です。
ではbodyは？体？･･･
そうです。ここが、サイトの内容を示す部分になります。
ここにいろんなタグなどが入ってサイトができているわけですね〜。
サイトの基本的な骨組みは以上です。
上記を踏まえたうえで、もう一度ソースを見てみてください。
「ここからここまではhead（タイトル部分）で、ここからがbodyか」とわかっていただけると思います。
ちなみに、<html>の上に<!DOCTYPE〜>と書いてある場合がありますね。
これは、ドキュメントタイプというもので、「どのHTMLのバージョンで書かれていますよ」とWEBブラウザに教えてあげる役割を果たします。
HTML自体、この何年かの間に内容の違うバージョンの規格ができている(らしい)ので、このように最初に指定してあげることで、よりスムーズにサイトが表示されるわけですね。
･･･これについては私自身よくわかっていませんので、間違えていたらごめんなさい。。
えぇ〜と･･･なんでサイトの構成を説明したかというと、
一見複雑で、見ただけでウンザリしてしまいそうなものでも、一つ一つのタグを見てみると意外と簡単(?)
ということを言いたかったんです。
表を作るのはもっと簡単ですよ。
では次回からは、表の作り方を説明しますね。
この記事へのコメント
はじめまして。
最近ネットでお小遣い稼ぎに奔走中のデイドリ（２４）♂です。
勉強のために色々なブログを見て回っています。
この度ブログを拝見し非常に興味を持ち、コメントをさせて頂きました。
私もささやかながら自分なりのお小遣い取得をテーマにしたブログを運営しています。
最近私かなり稼がせて貰っているサイトを紹介しています。
一度ご覧になり、気に入って頂けたら相互リンクなどをさせて頂ければ幸いです。
自身まだまだネット初心者ですので、ブログ、コメントの仕方など分からない事だらけですので、
失礼や至らない点が多々あり申し訳ありませんが、宜しくお願い致します。
deidori
最近ネットでお小遣い稼ぎに奔走中のデイドリ（２４）♂です。
勉強のために色々なブログを見て回っています。
この度ブログを拝見し非常に興味を持ち、コメントをさせて頂きました。
私もささやかながら自分なりのお小遣い取得をテーマにしたブログを運営しています。
最近私かなり稼がせて貰っているサイトを紹介しています。
一度ご覧になり、気に入って頂けたら相互リンクなどをさせて頂ければ幸いです。
自身まだまだネット初心者ですので、ブログ、コメントの仕方など分からない事だらけですので、
失礼や至らない点が多々あり申し訳ありませんが、宜しくお願い致します。
deidori
復活したら羽が生えてきて、いろいろな所でくるくる回ってます
また、こっそりと勉強しに来ますね♪
また、こっそりと勉強しに来ますね♪
reoさんのブログは本当に勉強になります。早速、「別窓で開く」も使わせてもらいましたよ。（イヤリングの部分で）
私は後先考えないで行動するだけのアホな奴です。宝石の鑑定・鑑別も結局一年くらいダイアモンドの会社に勤めたくらいで、今や何の役にも立っていません。
reoさんの説明は本当に分かりやすくて興味がわいてきます。表も頑張って作ってみようと思うので、今後の解説どうぞよろしくお願いします。
今日も応援ポチ！
私は後先考えないで行動するだけのアホな奴です。宝石の鑑定・鑑別も結局一年くらいダイアモンドの会社に勤めたくらいで、今や何の役にも立っていません。
reoさんの説明は本当に分かりやすくて興味がわいてきます。表も頑張って作ってみようと思うので、今後の解説どうぞよろしくお願いします。
今日も応援ポチ！
こんにちは、reoさん！
コメントありがとう〜＾−＾
相互承諾ありがとうございました。
これからもよろしくです＾＾
応援ｐ
コメントありがとう〜＾−＾
相互承諾ありがとうございました。
これからもよろしくです＾＾
応援ｐ
殻ってどうしたんですか！？
何かありました？？
ほんと手取り足取りって感じで
詳しく書いてあってすごいです。
私は表大好きなんですけどタグが
嫌いで嫌いで｡ﾟ(ﾟ´Д｀ﾟ)ﾟ｡
今はエクセルで作っちゃってます(^^ゞ
確かにひとつひとつ見れば簡単
なんでしょうけどもね・・・
拒否反応！？
それとお褒めいただきありがとうございます(^^ゞ
いつももっとわかりやすく書けないもんかと
試行錯誤しながらやってるんですけど。
ブログライター始めて書き方について
すごく考えるようになったんですけど
できればプロ？とかにその文章とか
採点してもらいたい・・・
長くなっちゃった、ごめんねぽち。
何かありました？？
ほんと手取り足取りって感じで
詳しく書いてあってすごいです。
私は表大好きなんですけどタグが
嫌いで嫌いで｡ﾟ(ﾟ´Д｀ﾟ)ﾟ｡
今はエクセルで作っちゃってます(^^ゞ
確かにひとつひとつ見れば簡単
なんでしょうけどもね・・・
拒否反応！？
それとお褒めいただきありがとうございます(^^ゞ
いつももっとわかりやすく書けないもんかと
試行錯誤しながらやってるんですけど。
ブログライター始めて書き方について
すごく考えるようになったんですけど
できればプロ？とかにその文章とか
採点してもらいたい・・・
長くなっちゃった、ごめんねぽち。
あんまり気にしなくていいよ〜
オヒマな時にきてね
詳しい説明参考になります
それでは
カッチャ
オヒマな時にきてね
詳しい説明参考になります
それでは
カッチャ
うちのブログも1箇所表を使っていますが、html講座のHPを真似て作って四苦八苦でした。
これからの記事、楽しみにしていますね。
応援ぽち☆
これからの記事、楽しみにしていますね。
応援ぽち☆
ブログを見ていただいてありがとうございます。
僕が紹介してるサイトのプレゼントが僕が応募した時より良くなってました。嬉しいような悲しいような・・・僕はもう応募できませんからね（二重応募になっちゃいます）
応援＆リンクして帰ります♪
僕が紹介してるサイトのプレゼントが僕が応募した時より良くなってました。嬉しいような悲しいような・・・僕はもう応募できませんからね（二重応募になっちゃいます）
応援＆リンクして帰ります♪
これは私のための記事ですか？
と思ってしまった位私の分からない所にジャストです！！（はい、全部分かってませんでした〜）
こんなに丁寧にお教え頂けるなんて本当嬉しいです！
次も楽しみにしています！
応援〜
と思ってしまった位私の分からない所にジャストです！！（はい、全部分かってませんでした〜）
こんなに丁寧にお教え頂けるなんて本当嬉しいです！
次も楽しみにしています！
応援〜
こちらこそ有難うございました^^
今日も、初心者にに分かりやすいマニュアル記事ですね〜
誰かに頼まれた？？
いつかコピペでパクリに来ますね〜
（↑こればっかしｗ）
では〜応援（前日済ポチ済み）ぶちっっ！！
今日も、初心者にに分かりやすいマニュアル記事ですね〜
誰かに頼まれた？？
いつかコピペでパクリに来ますね〜
（↑こればっかしｗ）
では〜応援（前日済ポチ済み）ぶちっっ！！
この記事のトラックバックURL
http://kozukaigetblog.blog52.fc2.com/tb.php/33-87250b73
この記事にトラックバックする(FC2ブログユーザー)
この記事にトラックバックする(FC2ブログユーザー)
この記事へのトラックバック
