ホームページの作り方_手作りホームページを自作します。エディタを使って自分でつくるオリジナルなホームページの作り方を説明します。SEO対策webサイトを作ります。ここでは、エディタで、HTML(XHTML)とCSSを使って、ホームページ(WEBページ)を実際に自作する方法を学びます。HPの作成手順1.テキストエディターを1つ準備する。テキストエディタを準備しましょう。テキストエディタとは、一般的な文章やHTML等プログラムコードなどを書くことのできるテキスト編集ソフトです。余計な装飾機能はありません。マイクロソフトのWORDが備えている「図表や罫線や色彩など見栄えのよい装飾機能」はなく、純粋にテキスト文書のみを作成編集する専用ソフトウエアです。」)として保存したりできます。一般的に、どんなテキストエディタがあるのかを知りたいのであれば、Google検索機能を使って、検索窓に「無料テキストエディタ」という複合キーワードを入力して、リターンキーを押せば、無料テキストエディタを多数発見できます。その中から、好きなものを選び、ダウンロードし、インストールして、自分のパソコンのデスクトップにそのアイコンを表示させておいてくださいね。テキストエディタには、例えば、次のようなものがあります。これらの中から使いやすい自分の好みを1つ選びましょう。(ちなみに私はサクラエディタを使っています。)top2.ホームページのレイアウト、構成を決める。テキストエディタが決まったら、次は、ヘッダー、ナビメニュー、サイドメニュー、コンテンツ、フッターなどの枠組みを設けます。◆ホームページの枠組みとして次のテンプレートを参考にするといいでしょう。ホームページ(WEBサイト)の全体構造ホームページの構造は次のようになっています。</html>《終わり》*ボディを横に3つに区切り、最上部にヘッダーブロックを作り、その中にヘッドコピー(or画像)とナビメニューを入れます。*ボディーの真ん中のブロックを縦に2つに分けて、左サイドメニューとコンテンツのブロックを作ります。*ボディの最下部のブロックはフッターブロックです。3.エディターで、CSSファイルを作る。「makehp.css」など。別途にCSSファイルを作って、そのスタイルをコンテンツに適応させます。エディタで「スタイル宣言のルールセット」を単に羅列的に記述して行くことにより、CSSファイルができます。--></style>の「~」の部分に、「スタイル宣言のルールセット」をまとめて記述して本文でスタイルを適応させる方法があります。次のように設定します。3つ目の方法としては、その都度必要な場面で本文のタグ要素にスタイルを直接適応させる方法があります。上の3通りの方法の中で最も効果的なSEO対策は、最初にあげた「別ファイル」にすることです。別途にCSSファイルを作ってそれを利用する形が、検索エンジンにとっては迷わずスムーズに検索できるということで、最もSEO効果が高いのです。4.エディタで、ホームページの枠組みと内容を記述する。ホームページの枠組みは、上で紹介した構成で行うとよいでしょう。記事などのコンテンツはインナーブロックのコンテンツ部分に書きます。写真やイラストやビデオなどを作って、HTMLの中に埋め込むこともできます。ーtopサンプルで、実際に作成の仕方を学ぶでは、まず、実際,下記のサンプルプログラム「sample1」を見ながら、sample1と同じホームページを作っていきましょう。HTMLについては、HTMLの勉強でタグの使い方などを学びましょう。どんなふうに書けばどんな姿になるのかを学ぶことができます。実際ホームページを作ってみましょう。sample1のページは、上から、ヘッダー部分、ナビメニュー部分、インナー部分、そして、最後にフッター部分です。インナー部分が、「左サイドメニュー部分」と「コンテンツ部分」の2つの部分に分かれています。sample1をクリックするとブラウザにサンプルのホームページが現れます。その表示された画面上にマウスを乗せて右クリックするとポップアップメニューが開きます。そのポップアップメニューの中にある「ページのソースを表示」をクリックすると、sample1のソースコードが見られます。これから以下の説明では、このソースコードを開いて縮小表示しておいてくださいネ。そのソースコードを見ながら説明していきたいと思います。◆まず、DTD(文書型宣言)部分に続き、<html>の開始、そして<head>部分と続きます。<head>~</head>の中に<title>~</title>を入れます。文書型宣言(DTD)の所で、このサンプルホームページは、HTML4.01の移行型(Transitional)であることがわかります。xmlns="http://www.w3.org/1999/xhtml">の所で、このサンプルホームページはhtmlで使うタグ以外に、xhtmlで使うタグも混在して使っていることを示しています。<meta>の意味ですが、metaとは、ひとつ上の次元、ひとつ上の段階、超~、付属の、追加の、~の後に追加した、のような意味を持っています。従って、このmetaタグは、「全体に対して追加的な情報」、「body部分に影響を与えるひとつ上の次元、立場、ひとつ上の追加的情報」という解釈でよろしいかと思います。content="text/css">ここでは、「このサイトはスタイルシートCSSを使っています。charset=UTF-8">ここでは、「このサイトはhtmlファイルであり、文字コードはUTF-8です。同一サイト内にある別途スタイルシート「sample_css_html_HP.css」にリンクしたhtml、xhtml混在型ファイルであり、使用している文字コードは「UTF-8」です。href="/sample_css_html_HP.css">は、CSSファイルは同一サイト内にあり、そのファイル名は「sample_css_html_HP.css」です。そのファイルにハイパーリンクしています。(参考:「sample_css_html_HP.css」の中身は、このページの最下部にあります。(「/sample_css_html_HP.css」の「/・・」の部分で、このCSSファイルは同一サイトの同一ディレクトリにあることがわかります。◆まず、「ヘッダーブロック」を見ていきましょう!下記において、<div>~</div>の間に挟まれた部分がブロックです。~</div>)をつくります。続いて<ul>~</ul>で「ナビメニュー」ブロックを作ります。ホームページの作り方。/>CSS、XHTMLを利用してテキストエディタで作成します。~</div>は、あいだに挟まれている部分を画面の中央に表示します。alignは位置を指定する属性で、その属性値はcenter(中央)です。ページの最上端部にある横に細長いメニューが「ナビメニュー」です。このナビメニューの外枠は、<ul>~</ul>で表され、内側の各項目が<li>~</li>で表されます。部分であるhttp://michoka.jp/php_rensyu/php_exercise.htmlに指定しています。<a>のa要素は、アンカー(Anchor)を指定する要素で、リンクを設定する場合に使います。アンカーとはこのリンク機能で、一種の目印を提供するものになります。別のページや別のサイトにジャンプして表示できる機能です。a要素の、href属性は、リンク先を指定する属性で、上記の場合の属性値は、http://michoka.jp/php_rensyu/php_exercise.htmlですね。~>と、終了タグ</a>にはさまれた要素が、クリックするとジャンプする「リンクボタン」になります。上記の場合は、「PHP」の部分ですね。通常、hrefで指定するURLは、自分のサイト内へのリンクであれば、相対パスで指定し、ほかのサイトにリンクする場合は、絶対パスで指定します。/>はXHTMLで使うタグで、「改行」を表します。ちなみに、HTMLでは改行を<br>と表しています。/」を書くようになっています。/」は終了を表しています。/>は水平線(区切り線)を表示します。XHTMLで指定された形です。HTMLでは<hr>と書いていました。