Books & Comics
ありさとの蔵

　スタイルシートを使ったロゴのテストページ。

このページのソースです。 


<!DOCTYPE HTML PUBLIC "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
   <meta http-equiv="content-type" content="text/html; charset=shift_jis">
   <meta name="author" content="alisato">
<link rel="stylesheet" href="logo_test.css" type="text/css">
<title>ロゴのテスト</title>
</head>
<body background="dmy.gif" 
bgcolor="#ffffff" text="#000000" link="#7f007f" vlink="7f0000" alink="#00007f">
<!--★ロゴ★-->
<h1 class="logo">
<span class="logosub">Books & Comics<br></span
><span class="a" >あ</span
><span class="li">り</span
><span class="sa">さ</span
><span class="to">と</span
><span class="no">の</span
><span class="kura">蔵</span>
</h1>
</div>
<!--★左側部分★-->
<div class="left">
<ul class="mainnavi">
<li><a href="../../index.htm"><img alt="home"  border="0" height="16" src="../../img/home_tb.gif"  width="64"></a></li>
<li><a href="../../diary.htm"><img alt="diary" border="0" height="16" src="../../img/diary_tb.gif" width="64"></a></li>
<li><a href="../../book.htm" ><img alt="books" border="0" height="16" src="../../img/book_tb.gif" width="64"></a></li>
<li><a href="../../link/index.htm"><img alt="links" border="0" height="16" src="../../img/links_tb.gif" width="64"></a></li>
<li><a href="../../about.htm"><img alt="about" border="0" height="16" src="../../img/about_tb.gif" width="64"></a></li>
</ul>
<p class="setu">
　スタイルシートを使ったロゴのテストページ。
</p>
</div>
<!--★下側部分★-->
<div class="sita">
<hr>
<p>
このページのソースです。

<div class="code"><pre><tt><code>

</code></tt></pre></div>
<p>
<i>有里 (alisato@anet.ne.jp)</i><br><br>
<address>http://www2r.biglobe.ne.jp/~alisato/</address>
</div>
</body>
</html>
スタイルシートファイルのソースです 

/*ロゴの設定 ピクセルで絶対位置指定*/
/* Book & Comics */
.logosub { position:absolute;
           top:0; left:5;
           color:goldenrod;
           font-size:12px;
         }
/* あ */
.a       { position:absolute;
           top:20;left:5;
           background-color:pink;
           font-size:20px; width:20px;
         }
/* り */
.li      { position:absolute;
           top:20;left:30;
           background-color:indianred;
           font-size:20px; width:20px;
         }
/* さ */
.sa      { position:absolute;
           top:20;left:55; 
           background-color:pink;
           font-size:20px; width:20px;
         }
/* と */
.to      { position:absolute;
           top:20; left:80;
           background-color:indianred;
           font-size:20px; width:20px;
         }
/* の */
.no      { position:absolute;
           top:22;left:105;
           background-color:gold;
           font-size:18px; width:18px;
         }
/* 蔵 */
.kura    { position:absolute;
           top:4;left:130;
           background-color:olive;
           font-size:36px; width:40px;
           font-weight:400;
         }
/*左部分の設定*/
.left    { position:absolute;
           top:5;
           left:200;
         }
/*下部分の設定*/
.sita    { position:absolute;
           top:50;
           left:5;
         }
/*コード表示部分の設定*/
.code1   { background-color:#CCCCCC} 
.code2   { background-color:#CCCCFF} 

/*ナビゲーション部分の設定*/
ul.mainnavi{
  margin:0;
  padding:0;
  border:0;
}
ul.mainnavi li{
  display:inline; 
  list-style-type:none;
  margin:0;
}
p.setu { margin:0.5em 0 0 0;}

有里 (alisato@anet.ne.jp)

http://www2r.biglobe.ne.jp/~alisato/