ホーム -> 作成

ホームページ 作成

ホームページ作成の流れは以下のようになっています。

  • レイアウトの決定
  • CSSファイルをコピペで作成
  • HTMLファイルをコピペで作成
レイアウト CSSとHTMLについて CSS

ホームページを作成するにあたってまず、どういった内容をどういう配置で表示 されるかを解説します。

簡単なCSSとHTMLの説明です。
何故「CSS」ファイルって必要なの?とか解説しています。

ホームページのレイアウトの設定を記載します。
ファイルを作成し、コピペするだけなので、どなたでも簡単に作成できると思います。

HTML 確認 その他・・・

ホームページの内容を記載します。
コピペで全体像は作成できますが、実際の内容はみなさんが独自で記載します。

コピペした内容を実際にブラウザーで見てみます。

画像の作成方法とか、アイコンの作成方法とか、CSS、HTMLの解説を載せたいと思っています・・・


このページのTOPへ


レイアウト

レイアウトの種類は、大きく分けると以下の8種類があると思います。
用途(メニューがいっぱいほしいなど)によって使い分けが大事だと思います。

初心者向けホームページ作成解説サイト レイアウト

私も初心者ですので、どれがどの用途に適しているのか正直よく分かりません・・・
ですが、私自身以下のレイアウトが一番オーソドックスのような気がしていますので、 初心者の方であれば迷わずこれにしてください。
※コピペで作成といっても、このレイアウトしか用意してないから。。。

初心者向けホームページ作成解説サイト レイアウト


このページのTOPへ


CSSとHTMLについて

CSS(スタイルシート)とは、ホームページの表示の箇所を担当するファイルのことです。 HTMLがコンテンツ(ホームページの内容)の箇所を担当しています。
表示と内容を別々のファイルで作成することによって、ホームページの管理を楽にする ことができます。
どういった感じに楽になるかというと、今は気にしなくていいと思います。。。
作成していくうちに、徐々にわかるようになっていけば問題なしです。


このページのTOPへ


CSS

手順はを以下に示しておきます。

  1. ディスクトップ上に『public_html』というフォルダを作成します。

    初心者向けホームページ作成解説サイト CSS_01

  2. 『public_html』の中に『style.css』というファイルを作成します。

    初心者向けホームページ作成解説サイト CSS_02

  3. 『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;
    }
    					

このページのTOPへ


HTML

  1. CSSファイルを置いたのと同じ場所(『public_html』の中)に『index.html』というファイルを作成します。

    初心者向けホームページ作成解説サイト HTML

    ※アイコンの表示が異なる場合がありますが気にしなくてOKです。
  2. 『index.html』をメモ帳などのエディタにドラッグ&ドロップします。

    初心者向けホームページ作成解説サイト HTML

    メモ帳などのエディタがディスクトップ上にない場合は 左下の『Windowsマーク -> すべてのプログラム -> アクセサリ -> メモ帳』でメモ帳をあらかじめ 表示させておき、メモ帳の中に『index.html』をドラッグ&ドロップして下さい。
  3. 下記をコピペし、保存します。
    <!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">ホーム-&gt;<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>
    					

このページのTOPへ


確認

『index.html』をダブルクリックして開いてみましょう。
ちょっと色とかめちゃめちゃですが、レイアウトが思い通りになっていると思います。
※レイアウトよりちょこっと追加してるのがあります。

『index.html』と同じように『sample1.html』『sample2.html』を作成すれば、ページが切り替わります。
でもね。。。同じ内容をコピペして作成してるので、見た目変わらないけど。。。

あとは、書きたかった内容を記述していけばりっぱなホームページの完成です。。。
細かいところはいろいろありますが、また次回ということで。。。

初心者向けホームページ作成解説サイト ホームページ完成

inserted by FC2 system