ウェブ学のすすめ

Study of Web Design & Programing

実践課題【CSS06】 TAG Design

CSS

課題

【CSS06】

  • 以下の画像と同じように表示させるCSSを記述しなさい
  • 文字の擬似クラスも設定しなさい（色は自由選択）
  • 記述場所はエンベッド

TAG Design

>> About US
>> Works
>> Access
>> Contact

個人情報の取扱いについて
サイトマップ

Copyright 〓 2012 WebDesign

引用元：CSS06〜07 - Webデザインの勉強｜忘筌

解答

実践課題【CSS06】 TAG Design - jsdo.it - share JavaScript, HTML5 and CSS

<?xml version="1.0" encoding="UTF-8"?>
<!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-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>TAG Design</title>
<style type="text/css">
body {
    font-family:
	"Hiragino Kaku Gothic Pro",
	"ヒラギノ角ゴ Pro W3",
	Meiryo, 
	"メイリオ", 
	Osaka, 
	"MS P Gothic", 
	"ＭＳ Ｐゴシック", 
	sans-serif;
    background-color: #f5f5f5;
    width: 740px;
    padding: 10px;
    margin-top: 50px;
}
ul {
    list-style-type: none; 
    margin-top: 0;
    margin-left: -40px;
}
li {
    height: 100px;
    margin-bottom: 10px;
    font-size: 1.0em;
}
li#list_1 {
    background-image: url(http://jsrun.it/assets/d/b/L/g/dbLgz.gif);
}
li#list_2 {
    background-image: url(http://jsrun.it/assets/d/V/G/k/dVGkC.gif);
}
li#list_3 {
    background-image: url(http://jsrun.it/assets/i/r/s/6/irs6D.gif);
}
li#list_4 {
    background-image: url(http://jsrun.it/assets/d/s/m/m/dsmmR.gif);
}
a {
    font-weight: bold;
    text-decoration: none;
}
a.listimage:link { 
    color: #ffffff; 
}
a.listimage:visited { 
    color: #000000; 
}
a.listimage:hover { 
    color: #0000ff; 
}
a.listimage:active { 
    color: #00ff00; 
}
a.info { 
    margin-right: 20px;
    color: #1e90ff;
}
p {
    font-size: 0.8em;
    text-align: right;
}
address {
    font-size: 0.8em;
    font-style: normal;
    font-weight: bold;
    text-align: center;  
}
</style>
</head>
<body>
<div>
<img src="http://jsrun.it/assets/8/r/O/g/8rOgA.gif" alt="TAG Design">
</div>
<ul>
<li id="list_1"><a href="#" class="listimage">>> About US</a></li>
<li id="list_2"><a href="#" class="listimage">>> Works</a></li>
<li id="list_3"><a href="#" class="listimage">>> Access</a></li>
<li id="list_4"><a href="#" class="listimage">>> Contact</a></li>
</ul>
<p>
<a href="#" class="info">個人情報の取扱いについて</a>
<a href="#" class="info">サイトマップ</a>
</p>
<address>Copyright 〓 2012 WebDesign</address>
</body>
</html>