第二十一回　HTML・CSSの基礎　【その3】 [まぐまぐ！]

2007/07/07

第二十一回　HTML・CSSの基礎　【その3】

◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇ 上位表示実現へ!XHTML・CSSで作るウェブサイト  ◇
◇ 発行：不定期　著作：淵上　喜弘【LLCJIRIKI】  ◇
◇ http://www.jiriki.co.jp　　　　　　　　　　　◇
◇ http://jiriki.jp     　　　　　　　　　　　　◇
◇ info@jiriki.co.jp　　　　　　　　　　　　　　◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇

SEO・SEMブログが出来ました！
http://jirikiseo.blog94.fc2.com

お待たせいたしました。
ようやく復活いたしました。
しかしながらおかげさまで仕事も忙しく
なかなかメルマガまで手が回らずにもどかしい気持ちです。

今回はとりあえず「基礎」となるHTMLとCSSをご用意いたしました。
IE7での確認を取っていますのでIE7でご覧いただければと思います。
時間の都合上FFやOperaなどでは確認しておりません。
おそらくちょっとズレてると思います・・・。

以下、SEOに効く基本ソースです。＜＞を半角に直してお使いください。

＜?xml version="1.0" encoding="Shift_JIS"?＞
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"＞
＜head＞
＜meta http-equiv="content-language" content="ja" />
＜meta http-equiv="content-type" content="text/html; charset=Shift_JIS" />
＜meta http-equiv="content-script-type" content="text/javascript" />
＜meta http-equiv="content-style-type" content="text/css" />
＜meta name="description" content="ウェブサイトの概要説明50文字程度" />
＜meta name="keywords" content="ウェブサイトのキーワード5つ程度" />
＜link rev="MADE" href="mailto:あなたのメールアドレス" />
＜link rel="copyright" href="あなたのサイトアドレス" title="著作者名" />
＜link rel="INDEX" href="index.html" />
＜link rel="stylesheet" type="text/css" href="maincss.css" />

＜title>サイトタイトル（短めにキーワードを含めて）</title>
＜/head>

＜body>

＜div id="container">

＜h1>サイトタイトルとキャッチフレーズ（キーワードを含めて）</h1>

＜div id="wrapper">

＜div id="textbox">
＜h2>コンテンツタイトル</h2>
＜h3>コンテンツサブタイトル</h3>
＜p>＜em>キーワードから始まるコンテンツの内容。テキストエリア</em></p>
＜/div>

＜div id="headnavi">
＜ol>
＜li>＜a href="#">メニューリンク</a></li>
＜li>＜a href="#">メニューリンク</a></li>
＜li>＜a href="#">メニューリンク</a></li>
＜li>＜a href="#">メニューリンク</a></li>
＜/ol>
＜/div>

＜div id="footer">
＜p>COPYRIGHT © 2006-2007 コピーライト表記</p>
＜/div>
＜/div>
＜/div>

＜!-- アクセス解析はココに設置 -->

＜/body>
＜/html>

以下CSSソースです。トッカン制作ですので微妙な指定があると思います。

* {
    margin: 0;
    padding: 0;
    }

body {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-family: tahoma, Arial, sans-serif;
    color: #333333;
    background: #d8d8d8;
    }

/*ブロック設定-------------------------------------*/

#container {
    width: 810px;
    margin-left: auto;
    margin-right: auto;
    background: #ffffff url() no-repeat;
    }

#wrapper {
    width: 790px;
    margin-top: 30px;
    }

#textbox {
    width: 468px;
    float: right;
    padding: 0 60px 0 10px;
    border-left: 2px dotted #666666;
    }

#textbox ol {
    margin: 10px 0 10px 0;
    padding-left: 20px;
    }

#textbox ol {
    list-style-type: square;
    }

#headnavi {
    font-size: 14px;
    font-weight: bold;
    float: left;
    width: 185px;
    height: 20px;
    padding: 5px 0 5px 55px;
    }

#headnavi ul, #headnavi li {
    list-style: none;
    margin: 2px 0 0 0;
    padding: 0;
    }

#headnavi a, #headnavi a:link, #headnavi a:visited {
    text-decoration: none;
    color: #000000;
    padding: 2px 10px 0 0;
    text-align: center;
    }

#headnavi a:hover {
    color: #ff9900;
    text-decoration: underline;
    }

#footer {
    clear: both;
    margin: 0 0 0 35px;
    padding: 170px 0 0 0;
    text-align: center;
    font-weight: bold;
    }


/*文字設定----------------------------------------------*/

h1 {
    font-size: 16px;
    margin: 10px 0 0 45px;
    }

h1 a {
    color: #000000;
    text-decoration: none;
    }

h1 a:hover {
    color: #ff9900;
    }

h2 {
    font-size: 16px;
    }

h3 {
    font-size: 14px;
    border-bottom: 1px solid #d8d8d8;
    margin: 0 0 5px 0;
    }

#textbox p {
    font-size: 14px;
    line-height: 1.5em;
    padding-bottom: 1em;
    padding-top: 1em;
    }

p {
    font-size: 13px;
    line-height: 1.5em;
    padding-bottom: 1em;
    padding-top: 1em;
    }

em {
    font-style: normal;
    }

strong {
    color: #ff9900;
    }

.news {
    margin-left: 45px;
    color: #000000;
    }

a {
    color: #000000;
    text-decoration: none;
    }

a:hover {
    color: #ff9900;
    text-decoration: underline;
    }

a:visited {
    color: #666666;
    }

/*特殊設定-----------------------------------------------------------------*/

.hidden {
    display: none;
    }

a img {
border-style : none;
border-width : 0px;
text-decoration : none;
    }

次回はこのソースに沿って解説を行っていきます。

**************************************************
■著者：淵上　喜弘【LLC JIRIKI　合同会社ジリキ】■
■http://www.jiriki.co.jp 　　　　　　　　　　　■
■http://jiriki.jp      　　　　　　　　　　　　■
■お問い合わせご質問は　info@jiriki.co.jp　まで ■
**************************************************