http://www.scorpionsfootball.com 初心者向けにホームページの作り方を1からお教えします。 Fri, 27 Aug 2010 00:44:58 +0000 http://backend.userland.com/rss092 ja 前回ブロックレベル要素について簡単にご説明致しましたので、今回はインライン要素についての説明です。 ブロックレベル要素が“範囲”の指定だとすると、インライン要素は“部分”の指定です。 ちょっと区別しづらいかと思いますが、テキストの一部を指定するものと考えると判り易いでしょう。 文章中のひとつの単語だけを太字にしたり、色を変えたりといった装飾を施したい場合、このインライン要素を利用するのです。 となると、以前ブロックレベル要素のひとつとして例に挙げた見出しタグ、あれはテキストに対して指定しているものなのでインライン要素ではないのかと疑問に思われるかもしれませんが、これはそもそもの見出しの意味を考えてください。 見出しは以下に続く文章のタイトルであり、文章中に含ませるものではありません。 タイトルはそれがひとつの要素であり、他の要素と混在するものではないのです。 HTMLタグとは、基本的には「文書」の構造を忠実に再現するものなのです。 「文書」とは社内報告書や研究室のレポートなど。 最近ではデザイン性の高い作り方のホームページが数多くあるので、そういった無機質な見た目の文書はイメージしにくいかと思いますが、デザイン性を全て省いてHTML構造だけを見ると実にシンプルなものになっていることでしょう。 ただ、実際には正しい文書構造での作り方でHTMLを構成していないホームページも数多くあります。 見た目の良さだけを優先したがばかりに、見出しではないのに見出しタグを使っていたり、インライン要素を無理矢理ブロックレベル要素に見立た作り方をしていたり。 これらこそが初心者にありがちなホームページの作り方だったりします。 当サイトで初心者に正しいホームページの作り方を呼び掛けているのは、そういった間違いを正すためでもあるのです。 http://www.scorpionsfootball.com/?p=65 ホームページは初心者でも簡単に作れると言われています。 あらゆるプログラミングと比較しても作り方が最も初心者向けとされているのがHTMLのため、初心者の中には独学で予備知識もなくホームページが作れると考えている方もいらっしゃいます。 確かに、独学でも作り方さえ熟知していれば簡単にホームページが作れるのですが、予備知識は必要です。 知識がゼロの状態からHTMLを作れると思ったら、それは大きな間違い。 初心者だからこそ、最初の基本的な知識はしっかりと抑えておきましょう。 それが、初心者として正しいホームページの作り方です。 さて、そのHTMLの基本的な知識ですが・・・ 前回ブロックレベル要素とインライン要素（＋置換要素）について簡単にご説明いたしました。 今回はそれらについてもう少し詳しくお話しいたします。 まず最初にブロックレベル要素ですが、前回も説明した通りこの種のタグでは指定した箇所を“範囲”と見なして何らかの設定を行います。 ホームページの中でも特によく見かけるブログを例に挙げると、大抵はブログタイトル（ホームページ名）やサブタイトル（ホームページの説明文）などが記されたエリア（ヘッダー）が、ページの最上部に配置されていますね。 その下の左側もしくは右側には自己紹介やカレンダーや「最新記事一覧」といったプラグインを表示するサイドバーがあり、もう片側あるいは中央にブログのメインである記事が載るエリアがあります。 そして、ページの最下部まで下ると、ページ移動のナビゲーションリンクやコピーライトを表示するエリア（フッター）が。 簡単に言うと、これらのヘッダー、サイドバー、メインエリア、フッターが、それぞれブロックレベル要素で範囲指定して配置されているのです。 少し難しく言うと、ブロックレベル要素をいくつも重ねたり併用することで、あのような複雑な表示を成しているのですが。 http://www.scorpionsfootball.com/?p=63 ホームページを構成するタグには数多くの種類がありますが、それらは大きく分けて2種類に分類することができます。 以下、それらについてです。 ●ブロックレベル要素 ホームページ内の文書的な構成を行うための要素です。 ヘッダーやフッターなど、それぞれを“範囲”と見なすため、基本的にはホームページの画面の横幅いっぱいがひとつの要素に含まれることになります。 ただし、横幅や高さを指定することができるので、それを利用して配置していくことも可能。 ホームページタグの例：h1～h6（見出し）、p（段落）、table（表）、div、など ●インライン要素 ホームページ内の文章（テキスト）の一部を編集するための要素です。 ホームページの文章中の一部の単語や文字に装飾を加える場合などに使用するので、いずれかのブロックレベル要素内での使用が原則となっています。 “範囲”を指定する要素ではないため基本的には横幅や高さの指定はできませんが、例外として、スタイルシートにインライン要素をブロックレベル要素として利用できるものがあります。 ホームページタグの例：a（アンカー）、strong（強調）、br（改行）、span、など ○置換要素 ホームページタグのうちインライン要素に含まれる種類のもので、テキストに置き換えて使用できる要素です。 上記で述べたとおりインライン要素は横幅や高さの指定が基本的にはできませんが、置換要素に類されるタグに関してはそれらが指定できるようになっています。 ホームページタグの例：img（画像）、select（セレクトボックス）、textarea（テキスト入力エリア）、など http://www.scorpionsfootball.com/?p=59 HTMLでは、主に「タグ」と呼ばれるパーツを組み合わせて、ホームページの構成をプログラミングしていきます。 タグはタグ名と属性（属性名、属性値）で構成されており、それらが“<”と“>”で囲まれて成り立っています。 また、タグにはいくつかの種類がありますが、それらの大半には「開始タグ」と「終了タグ」があります。 終了タグには属性と値は無く、代わりにタグ名の前に“/”が入ります。 タグ名は要素名と呼びます。 要素とは開始タグから終了タグの全体を含めたもののことです。 例：<h1 id="head">見出し</h1> <h1 id="head">見出し</h1>・・・要素 <h1 id="head"></h1>・・・タグ <h1 id="head">・・・開始タグ </h1>・・・終了タグ h1・・・タグ名（要素名） id="head"・・・属性 id・・・属性名 head・・・属性値 この例の場合「見出し」というテキストが要素の内容で、ブラウザに表示されます。 要素の内容と一部の属性値以外のタグ類は、原則半角文字で記述しなくてはなりません。 タグ名と属性名は半角であれば大文字と小文字のどちらでも構いませんが、XHTMLの場合は全て小文字でなくてはいけないので小文字で作成することをお勧めします。 また、属性値を囲む引用符（"）ですが、属性値が以下のもののみの場合は省略可能となっています。 ※省略可能の属性値・・・半角数字、-、_、:、. だだし、こちらもXHTMLでは省略不可となるので、省略しないホームページの作り方を心がけましょう。 http://www.scorpionsfootball.com/?p=55 閑話休題を挟みまして、再び初心者向けホームページの作り方についてです。 たった今気付いたんですが、このサイト名にもしている「初心者向けホームページの作り方」、この言い方だと、ホームページの作り方が初心者向けなのではなく、作られるホームページが初心者向けのようにきこえますね（汗） まあ、それも良しとしましょう。 初心者向けのホームページということは、それだけ見易く、操作もしやすいと考えられます。 ホームページはいろいろな人が見るものですから、そうでなくてはいけません。 さて、今回説明する初心者向けの“作り方”ですが、これからしばらくはHTMLについて訥々と述べて行きたいと思います。 どうぞお付き合いくださいませ。 HTMLとは正式名を「HyperText Markup Language」と言い、最も簡単なプログラミング言語と言われているものです（しかし、よくあるプログラミング言語のリストには含まれていません） 正式名の意味まで説明しようとすると、ホームページの作り方とはあまり関係のない話題にまで飛び火してしまうので割愛させていただきます。 まずは、以前述べたことと少々かぶりますが、HTMLでは何を書くのかについて説明しましょう。 HTMLでは、主にページ内の文書構成を整えます。 判りやすい例として、学校から保護者あてに配布されるプリント類を例に挙げましょう。 あれらの最上部にはまずプリントの大見出しがありますね。 そしてその下に時候の挨拶やプリントの主旨等があり、それから小見出しやそれぞれの内容が続きます。 内容によっては文章だったり箇条書きだったりしますし、小見出しの中にさらに小さな見出しで区別されている場合もありますね。 HTMLに書くのは、そういった基本的な文書構成だけです。 見栄えやレイアウトは全く意識しません。 次回から、HTMLの書き方について細かく説明していきましょう。 http://www.scorpionsfootball.com/?p=53 今回は初心者向けではないかもしれませんが、サーバーに関するサービスについてお話ししてみたいと思います。 サーバーに関するサービスは結構多くの種類があります。 そのうちのひとつが、プロバイダであったり、レンタルサーバーであったり。 レンタルサーバーのサービスは別名をホスティングといい、同じホスティングでも共用サーバーと専用サーバーの二種があります。 それらのうち、初心者がホームページのために利用するのであれば、比較的レンタル料が安価な共用サーバーであったり、またプロバイダのホームページサービスであったりするでしょう。 その方が、作り方の点でも容易ですしね。 初心者に限らず、個人でホームページを運営する方々はそれらを利用することになると思います。 では、残りの専用サーバーはどんな人が利用するのかというと、多くは企業や会社においてです。 専用サーバーは比較的レンタル料が高価な分容量も大きく、またセキュリティの面にも優れていますので、利用するなら専用サーバーとなるわけです。 もちろん、企業単位で利用するのですから、初心者だろうと上級者だろうと関係ありません。 ホームページの作り方だって、それを担当する全ての社員が心得ているでしょう。 さて、もうひとつサーバーに関するサーバーで特筆して紹介しておきたいものがあります。 それは、データセンター。 データーセンターとは顧客のサーバーを預かって、管理などを行う施設です。 そしてそのサービスをコロケーション、或いはサーバーハウジングと呼びます。 このサービスも利用しているのは主に企業や会社でしょう。 利用することの利点は、管理を代行してくれるのもさることながら、サーバーが専用の強固な施設に守られていることにありますね。 http://www.scorpionsfootball.com/?p=51 ホームページを作るとなると、ホームページのスペースとアドレスが必要になりますよね。 スペースとはサーバーのことで、プロバイダのサービスを利用する他、レンタルサービス（ホスティング）というものもあります。 レンタルには無料のものもあれば有料のものもあり、有料サービスの中には専用・共用サーバーの2種類があります。 作り方の初心者が利用するとなると無料サービスになるかと思いますが、その場合ホームページに広告が表示されますのでご了承ください。 プロバイダのサービスを利用すれば、容量を追加したりしない限り無料で広告も表示されませんが、CGIが使えないなど少なからず作り方に制限がある可能性があります。 ホームページのアドレスとはURL、ドメインのことです。 プロバイダのサービスを利用した場合、ドメインはほとんど定められているでしょう。 プロバイダがOCNならURLが「http://www.ocn.ne.jp/・・・」となるように。 一昔前まではレンタルサーバーにおいてもドメインはこのようにある程度定められています。 しかし昨今では独自ドメインというものに対する人気が高まり、初心者が自分でドメインを選べるレンタルサーバーも増えてきています。 中には「http//www.●●●.jp/◆◆◆/」というアドレスの◆◆◆の部分は定められていますが、●●●の部分は自分で選べるという、従来のドメイン決定方法とは逆のパターンを取っているサービスもあります。 逆になっているだけなら利点は従来のものとそう変わらないようにも思えるかもしれませんが、ユーザーに与える心理的効果としては独自ドメインに見えるのです。 独自ドメインが何故作り方初心者に人気があるのかというと、やはりホームページの作り方を学び始めたばかりの初心者でも、作り方に慣れた人のように見えるためでしょう。 また、ホームページのテーマに合わせてドメインを選べば、ユーザーに関連付けて覚えてもらえる可能性も高まります。 ある意味、作り方よりも形から入るという取り組みではありますが、ホームページの作り方に意欲を持てるというのは、初心者にとって良い方法かもしれませんね。 http://www.scorpionsfootball.com/?p=49 今や、初心者でも簡単に作り方を学んで制作できるようになったホームページ。 ホームページは数あるエンターテイメントの中でも、手軽で親しみやすいものとして大変な人気を集めていますね。 初心者がホームページを利用してコンテンツを提供するのは、仲の良い友人と歓談することと似ています。 しかし、ご注意ください。 友人との遣り取りとホームページは似て非なるものです！ ホームページは、そのパソコンの向こうでどんな人が見ているか判りません。 自分と同じ世代の者かもしれないし、小さな子供かもしれないし、逆にご老人かもしれません。 日本人ではないかもしれないし、もしかすると自分とは全く異なる趣味や価値観を持っている人かもしれませんよね（可能性です。この際ホームページのジャンルは置いておきましょう） ホームページは今や初心者でも取り組める手軽なエンターテイメントのひとつと化していますが、今一度、考えを改めずとも次のように心がけてください。 ホームページは商品でもあります！ 自分から誰かに何かを提供するのですからね。 ホームページの正しい作り方の神髄は、それを商品と考えることにあります。 ホームページを商品と考えて作り方を心がけるということは、すなわち使い勝手や便利さなどをユーザーのためにと考えて作り方を心がけるということです。 何がどうなってホームページが作られていればユーザーには嬉しいか・・・そう考えてホームページの作り方を心がけるのが、初心者の心得とお考えください。 前回にお話したブラウザに関する表記だって、そういった心がけのひとつなんですよ。 http://www.scorpionsfootball.com/?p=47 前々回まで、ブラウザについてお話していました。 覚えていますでしょうか？ ホームページは日本全国・・・引いては全世界の人が問題なく閲覧できるような作り方をしなくてはならないため、特定のブラウザでさえ見られれば良いというものではありません。 自分が主に使用しているブラウザだけではなく、他数種類のブラウザで問題なく表示されることを、例えホームページの作り方に関して初心者であっても心がけなければならない・・・ということでしたね。 そのためにもいくつかの有名なブラウザをご紹介しましたが、さすがに全世界ともなると本当に様々な種のブラウザが存在します。 初心者でなくともそれら全てのブラウザで確認することはほぼ不可能ですし、初心者であればなおさら紹介したブラウザでさえも確認しきることは難しいかもしれません。 多くのブラウザで表示確認すべきだというのは、あくまでも推奨であり、心がけです。 やむを得ず他ブラウザでの確認を省く場合・・・ ・・・そんなときは、ホームページに注意書きをしておくのが、閲覧者に優しい作り方といえるでしょう。 ホームページの隅っこ。最下部で構いません。 「当サイトはInternet Explorer 8、及びFirefox 3.5で表示確認しています」 といったことを書いておきましょう。 それだけで、少なくともどのブラウザならホームページが見れるということが判ります。 もちろん、多くのブラウザで確認しておけばこのような注意書きをする必要はありませんし、そうでなくても自信があるのなら書いておかなくてもいいかもしれません。 しかし、自分はホームページの作り方に関して初心者だと考えているならば、万が一といったことも考えた方が良いでしょう。 http://www.scorpionsfootball.com/?p=42 これまで初心者向けのつもりで、HTMLファイルの作り方だとか、ホームページの作り方を何度かお話してきました。 ただし、初心者向けのホームページの作り方だからこそ細かい作り方が疎かになることのないよう、初心者向けだからこそ正しいホームページの作り方となるよう気をつけていたつもりです。 それらは、自分がかつてホームページの作り方に関して初心者だった経験によりますし、また、自分自身が未だにホームページの作り方に関して初心者だと思っているため。 だからこそ、ホームページを作り方を知らないという実際の初心者の方々に対する、初心者用正しい作り方の呼びかけのつもりでもあるのですが・・・ ・・・作り方以外にも思ったのですが、実際のところ、初心者の皆さま方の作り方はどのようなホームページの作り方なのでしょう？ 初心者用作り方のリファレンスサイトなどを見て、ホームページの作り方を勉強しているのでしょうか？ それとも、経験者にホームページの作り方を聞いて？ また、既存のホームページから作り方を初心者なりに参考にしているのでしょうか？ ちなみに私が真の初心者のときは散々な作り方でした。 先輩がホームページ制作経験者（でも初心者）なので作り方を教えていただいたのですが、そのときに聞いた作り方はタグの書き方（作り方）のみ。 なので、ページの作り方はわかっても正しい作り方ではなかったのですね。 いや、先輩自身が初心者だから作り方が悪いとかいうわけではなく、私が作り方初心者のくせに自分でホームページの作り方を調べるということをしていなかったのです・・・（汗） 現在のホームページの作り方の初心者の皆さま方にこれだけはという作り方のアドバイスです。 初心者ならホームページの作り方は順序良くご自分で勉強して作り方を知るようにしてください。 「初心者向け」とされているホームページの作り方を記しているものは世の中にたくさんありますから！ http://www.scorpionsfootball.com/?p=35