上位表示実現へ!XHTML・CSSで作るウェブサイト RSSを登録する

SEO検索上位実現のためにXHTML・CSSの技術をいかに活用するか。また実際に当社が実践したSEO手法も公開。

現在休刊中です    
解除

規約に同意して

登録した方には、まぐまぐの公式メルマガ(無料)をお届けします。
あなたの一票を待っています!まぐまぐ大賞2008
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 &copy; 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 まで ■
**************************************************

現在休刊中です
解除

規約に同意して

登録した方には、まぐまぐの公式メルマガ(無料)をお届けします。

最近の記事

上へ戻る