ホームページ 作成
ホームページ作成の流れは以下のようになっています。
- レイアウトの決定
- CSSファイルをコピペで作成
- HTMLファイルをコピペで作成
レイアウト | CSSとHTMLについて | CSS |
---|---|---|
ホームページを作成するにあたってまず、どういった内容をどういう配置で表示 されるかを解説します。 |
簡単なCSSとHTMLの説明です。 |
ホームページのレイアウトの設定を記載します。 |
HTML | 確認 | その他・・・ |
ホームページの内容を記載します。 |
コピペした内容を実際にブラウザーで見てみます。 |
画像の作成方法とか、アイコンの作成方法とか、CSS、HTMLの解説を載せたいと思っています・・・ |
レイアウト
レイアウトの種類は、大きく分けると以下の8種類があると思います。
用途(メニューがいっぱいほしいなど)によって使い分けが大事だと思います。
私も初心者ですので、どれがどの用途に適しているのか正直よく分かりません・・・
ですが、私自身以下のレイアウトが一番オーソドックスのような気がしていますので、
初心者の方であれば迷わずこれにしてください。
※コピペで作成といっても、このレイアウトしか用意してないから。。。
CSSとHTMLについて
CSS(スタイルシート)とは、ホームページの表示の箇所を担当するファイルのことです。
HTMLがコンテンツ(ホームページの内容)の箇所を担当しています。
表示と内容を別々のファイルで作成することによって、ホームページの管理を楽にする
ことができます。
どういった感じに楽になるかというと、今は気にしなくていいと思います。。。
作成していくうちに、徐々にわかるようになっていけば問題なしです。
CSS
手順はを以下に示しておきます。
-
ディスクトップ上に『public_html』というフォルダを作成します。
-
『public_html』の中に『style.css』というファイルを作成します。
-
『style.css』をダブルクリックで開き下記をコピペし、保存します。
/*-----------------------------------------* レイアウト *-----------------------------------------*/ #container { width:790px; background-color: #FFFFFF; margin:0px auto; } #header { width:100%; background-color: #C78042; text-align:center; color: #F0E4CF; font-size: xx-large; margin:5px 0px 1px 0px; padding: 10px 0px 10px 0px; } #navi { width: 100%; background-color: #FFFFFF; text-align:center; } #posi { background-color: #F0E4CF; text-align:left; padding: 0px 0px 0px 30px; font-size: 80%; } #sidebar { width:20%; float: left; background-color: #F0E4CF; text-align:center; padding:auto; font-size: 80%; } #sidebar_navi { width: 95%; background-color: #C78042; margin: 5px auto 10px auto; border: 1px solid #000000; } #sidebar_ad { width: 95%; background-color: #C78042; margin:5px auto 10px auto; border: 1px solid #000000; } #content { width:80%; float:right; background-color: #F0E4CF; text-align:left; } #footer { width:100%; clear:both; background-color: #D5A676; padding-top: 1px; font-size: 80%; text-align: right; } /*-----------------------------------------* 共通 *-----------------------------------------*/ body { margin: 0; padding: 0; line-height:1.4; font-family:Arial, sans-serif; text-align: center; } /*-----------------------------------------* #navi *-----------------------------------------*/ #navi table{ width: 100%; } #navi td{ text-align: center; width: 34%; padding: 5px 0px; border: 1px solid #000000; border-collapse: collapse; } #navi a{ color:black; text-decoration:none; } #navi a:hover{ color:red; } /*-----------------------------------------* #content *-----------------------------------------*/ #content h1 { text-align:left; margin: 0px; padding:1px 1px 1px 20px; color: #665F38; border:1px solid #C78042; background-color: #F0E4CF; } #content h2 { text-align:left; margin: 0px; padding:1px 1px 1px 20px; color: #665F38; border:1px solid #C78042; background-color: #F0E4CF; } /*-----------------------------------------* #sidebar *-----------------------------------------*/ #sidebar h3 { text-align:center; margin: 0px; padding:1px; color: #665F38; border:1px solid #000000; background-color: #F0E4CF; } #sidebar ol { padding: 0px; margin: 10px 0px; } #sidebar li { list-style-type: none; }
HTML
-
CSSファイルを置いたのと同じ場所(『public_html』の中)に『index.html』というファイルを作成します。
※アイコンの表示が異なる場合がありますが気にしなくてOKです。 -
『index.html』をメモ帳などのエディタにドラッグ&ドロップします。
メモ帳などのエディタがディスクトップ上にない場合は 左下の『Windowsマーク -> すべてのプログラム -> アクセサリ -> メモ帳』でメモ帳をあらかじめ 表示させておき、メモ帳の中に『index.html』をドラッグ&ドロップして下さい。 -
下記をコピペし、保存します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <meta name="description" content="サイトの説明を記述"> <meta name="keywords" content="キーワードを記述"> <link rel="stylesheet" href="style.css" type="text/css"> <title>タイトルを記述</title> </head> <body> <div id="container"> <div id="header">初心者用お手軽コピペでホームページ作成</div> <div id="navi"> <TABLE> <tr> <td nowrap bgcolor="#D5A676"><a href="index.html">ホーム</a></td> <td nowrap><a href="sample1.html">サンプル1</a></td> <td nowrap><a href="sample2.html">サンプル2</a></td> </tr> </TABLE> </div> <div id="posi">ホーム-><a href="index.html">ホーム</a></div> <div id="sidebar"> <div id="sidebar_navi"> <h3>サイドバーメニュー</h3> <ol> <li><a href="#MENU_1">メニュー1</a></li> <li><a href="#MENU_2">メニュー2</a></li> <li><a href="#MENU_3">メニュー3</a></li> </ol> </div> <div id="sidebar_ad"> <p>メニュー以外の内容をここに記載する。</p> <p>宣伝:初心者用お手軽コピペでホームページ作成</p> <p>宣伝:初心者用お手軽コピペでホームページ作成</p> </div> </div><!-- /#sidebar --> <div id="content"> <h1>見出し1 タイトル</h1> <p>タイトル1の内容をここに記載する。</p> <blockquote> 宣伝:初心者用お手軽コピペでホームページ作成<br> 宣伝:初心者用お手軽コピペでホームページ作成 </blockquote> <h2><a name="MENU_1">見出し2 メニュー1</a></h2> <p>メニュー1の内容をここに記載する。</p> <blockquote> 宣伝:初心者用お手軽コピペでホームページ作成<br> 宣伝:初心者用お手軽コピペでホームページ作成 </blockquote> <h2><a name="MENU_2">見出し2 メニュー2</a></h2> <p>メニュー2の内容をここに記載する。</p> <blockquote> 宣伝:初心者用お手軽コピペでホームページ作成<br> 宣伝:初心者用お手軽コピペでホームページ作成 </blockquote> <h2><a name="MENU_3">見出し2 メニュー3</a></h2> <p>メニュー3の内容をここに記載する。</p> <blockquote> 宣伝:初心者用お手軽コピペでホームページ作成<br> 宣伝:初心者用お手軽コピペでホームページ作成 </blockquote> </div> <!-- /#content --> <div id="footer"><hr> Copyrightc 2010 テストテキスト ALL Rights Reserved. </div> </div><!-- /#container --> </body> </html>
確認
『index.html』をダブルクリックして開いてみましょう。
ちょっと色とかめちゃめちゃですが、レイアウトが思い通りになっていると思います。
※レイアウトよりちょこっと追加してるのがあります。
『index.html』と同じように『sample1.html』『sample2.html』を作成すれば、ページが切り替わります。
でもね。。。同じ内容をコピペして作成してるので、見た目変わらないけど。。。
あとは、書きたかった内容を記述していけばりっぱなホームページの完成です。。。
細かいところはいろいろありますが、また次回ということで。。。