ホームページ作りホームページ作成方法ビギナーズガイドホームページを作成方法を知るにはいったいどうしたら良いのでしょうか?このページには、その答えが記載してあります。そもそもホームページ自体の基本は『何なのでしょうか?』。難しいプログラムの様なものなのでしょうか?いいえ、そんなものではありません。ホームページ自体の基本は、テキストファイルです。・Macintoshであれば『SimpleText』といった文字情報のみ(装飾などは無い)を扱うソフトで作られるものです。簡単に一言で表すならば『文字情報(テキスト)のみのもの』です。)で見る事で、色がついたり、文字サイズが変化したり、画像を表示したり・・・といった事が可能になります。よって、ホームページ作りを知りたい場合には、この『あるルール』を知ってしまえば良いという事になります。Language)と呼ばれるルール(言語)であります。『やっぱり言語かぁ〜難しそうだなぁ〜』と思う事はありません。テキスト(文字)で記載したものを、ルールで配置したり、分類するだけの事です。それでは、実際にホームページ作りに入っていきましょう。下記の5ステップで見ていきましょう。1.実際に表示して見てみましょうごく簡単な記述をブラウザで表示して見てみましょう。基本的な構造であるルールを説明。基本的な構造に必要なものを説明。4.見た目を良くするにはスタイルシートページ自体の見た目を良くするには、スタイルシートを使用します。5.製作ソフトウェア製作するためのソフトウェアの紹介6.やはり必要となる書籍やはり手元に持っておきたい書籍をご紹介。辞書など必須アイテムも!1.実際に表示して見てみましょうさっそく表示して見てみましょうこの表示結果を分解すると下記の3種類になります。ページのタイトル大きな見出し文章それぞれが下図の様に対応します。具体的な記述内容はどうなっているのでしょか?下記がその記述内容になります。--><p>ホームページを作成するには、HTMLと呼ばれる言語(ルール)に従って記述していきます。--><p>記述するのは、メモ帳や、SimpleTextといったテキストファイルを作成できれば、問題ありません。>』で囲まれたものが記述してあります。再度確認してみましょう。<body><h1>〜ホームページ作成方法〜</h1><p>ホームページを作成するには、HTMLと呼ばれる言語(ルール)に従って記述していきます。</p><p>記述するのは、メモ帳や、SimpleTextといったテキストファイルを作成できれば、問題ありません。</body></html>見ても分かる様に赤色で表示した部分が文字情報にプラスして記述した部分になります。この部分がHTMLの記述ルールにあたります。文字情報に<>で囲ったものを付加して記述する事が理解できる思います。次にこの記述するルールの概要を説明していきましょう。2.基本のルール説明それでは基本的なルールである全体の構造を説明していきましょう。下図は上記の文章部分や見出しなどの『情報』の部分を取り除き『構造のみ』にしたものです。この『構造のみ』にした情報に色々な情報を追加してホームページを作成していくのですが、まず構造を説明していきますので再度下図を見てください。HTMLの基本構造はこの様に、<html>〜</html>の中に<head>〜</head>と<body>〜</body>を入れる構造になってます。<head>〜</head>の中には『ページ情報』としてタイトルや、使用する文字コード体系を設定したりします。実際に表示対象となる『内容』に関しては、全て<body>〜</body>の中に入れて行く事になります。上記のサンプルでは、この構造の中にページのタイトル大きな見出し文章を入れてページを作成した事になります。記述内容を保存します保存する際には、HTMLのファイルである事をコンピュータに教える必要がありますので、拡張子を.htmlまたは、.htmにします。この拡張子とは、それぞれのファイルの種類を分類する為に付けられてます。昔は、拡張子は3文字までしか使用できなかった時もあったので、.htmlの4文字と.htmの3文字が存在しますが、どちらでも問題ありませんが、どちらかに統一して設定した方が良いと思います。以前では通常の状態でも拡張子は画面上に表示されていたのですが、最近のパソコンでは拡張子を隠してファイル名だけの表示なっている場合が多いです。そこで、設定を変更して拡張子を表示する様にしましょう。Windowsのパソコンであれば、コントロールパネルの中に『フォルダオプション』があります。これによって拡張子が表示されますので、各ファイルの拡張子自体を設定して下さい。ここまでは、HTMLの構造を理解していただき、文章や文字をHTMLのルールである<>で囲ったもので記述していく事でページが完成する概要をご説明しました。以下では、この<>で囲った記号の様なものは、どんなものかを説明していきます。▲3.それぞれの役割HTMLの基本概要はご理解いただけたとして、<>このもの自体の説明をしていきます。上記サンプル内で使用したものを抜き出してみましょう。(構造に必要なものは除きます)<title>〜</title>、<h1>〜</h1>、<p>〜</p>この3種類のものが上記サンプルで使用されいたものです。それぞれがどの様な意味になっているかが下記になります。ページ自体にタイトルを設定する時に使用する。見出しを設定する時に使用する。文章の1つ段落を表すものとして使用する。この様に<>で囲ったものには、その中に入る『title』、『h1』、『p』によって意味が変わってきます。この<>で囲ってあるもの自体にも名前があり『タグ』と呼ばれます。様々なタグを使用する事でホームページを作成する事が可能になります。ここで再度、上記サンプルの記述内容を確認してみて下さい。構造を表すタグと、ページを作成する際に使用するタグを使用してページが構成されているのが確認できると思います。<body><h1>〜ホームページ作成方法〜</h1><p>ホームページを作成するには、HTMLと呼ばれる言語(ルール)に従って記述していきます。</p><p>記述するのは、メモ帳や、SimpleTextといったテキストファイルを作成できれば、問題ありません。</body></html>タグには、そのタグを使用する事によって文字が大きくなったりと視覚的に変化するものもあります。このサンプルで使用している<h1>がそれになります。文字を大きくする事が目的なタグではなく、見出しのタグであります。文字が大きくなったのは、殆どのブラウザで自動的に大きく表示する様になっているだけの事ですので、文字サイズを変更したい場合などは、文字サイズを変更するタグを使用する事になります。タグ自体には様々な種類があります。その中でも頻繁に使用される代表的なものを抜き出したものが下記一覧になります。使用HTML一覧にABCの順番に記載してありますので確認して下さい。▲4.見た目を良くするにはスタイルシートページ自体の見た目を良くするには、『スタイルシート』と呼ばれるものを使用します。このスタイルシートを使用する事で、上記サンプルが下記の様に変化させる事が出来ます。スタイルシートとはにて説明していきます。まとめ最後にこのページの内容をまとめておきますので、再度の確認をしてみてください。ホームページは簡単に作成できる。ホームページはテキスト情報でできている。タグと呼ばれるものを使用してページを作成する。見た目はスタイルシートを使用して作成する。▲5.製作ソフトウェアホームページ製作に役立つソフトウェアがあると、製作が大変スムーズに進みます。タグ一覧を記憶してしまえば殆どの作業は、メモ帳などさえあれば可能になりますが、最初はソフトウェアが助けてくれます。ホームページ製作に役立つソフトウェアを一覧にしました。▲6.やはり必要となる書籍ホームページ製作の為、やはり手元に持っておきたい書籍をご紹介。辞書など詳細の情報から、レイアウト方法など、いつでも何処でも手元に持っておきたいものです。詳解HTML&XHTML&CSS辞典HTMLからXHTML、そしてCSSに関する総合的な辞書。スタイルブック全体レイアウトを実際のサイト事例を使用し、詳細までを解説。スタイルシートの使い方のバリエーションを知る事ができる1冊。数種類のメニューの作り方、画像の配置方法からページ全体レイアウト方法。ロールオーバーやページ別の設定方法までをソースコードを記載しステップアップ方式で解説してある1冊。役立つ書籍にて確認して下さい。▲スポンサードリンク無料メール情報誌ワンランクUP講座ホームページのスタイルをワンランクアップ!基本調整や特選方法、さらにはインターネットの話題までメールマガジンでお届けします。スタイルブック全体レイアウトを実際のサイト事例を使用し、詳細までを解説。スタイルシートの使い方のバリエーションを知る事ができる1冊。本ページのW3Cでの記述検証結果は下記をクリックすると見れます。