戻る

スタイルシートの適用先を変更する

<p class="feed">に適用していたスタイルシートの設定を、<div id="sidebar">の中の<aside>に適用するように設定します。そこで、スタイルシートのセレクタを「p.feed」から「div#sidebar aside」に変更します。

HTML

ファイル名:sample_b/sample_b.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SAMPLE</title>
<style>

a	{color: #017acd}

/* コンテナ */
div#container	{width: 760px;
	margin-left: auto;
	margin-right: auto}

/* ヘッダー */
div#header	{background-color: #017acd;
	background-image: url(sky.jpg);
	padding: 28px 20px 150px}

div#header h1	{margin: 0}

div#header p	{color: #ffffff;
	font-size: 0.75em;
	margin: 0}

/* パンくずリスト */
nav#bread	{font-size: 0.75em;
	margin-top: 3px;
	margin-bottom: 30px}


/* コンテンツ */
div#content	{width: 564px;
	float: right;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 25px}

div#content h2	{background-color: #014471;
	background-image: url(bar-blue.png);
	background-repeat: no-repeat;
	font-size: 0.875em;
	color: #ffffff;
	line-height: 28px;
	padding-left: 6px;
	margin-top: 0;
	margin-bottom: 0}

div#content h3	{background-color: #e0e0e0;
	background-image: url(bar-green.png);
	background-repeat: no-repeat;
	font-size: 0.875em;
	line-height: 23px;
	padding-left: 30px;
	margin-top: 30px;
	margin-bottom: 0}

div#content p	{font-size: 0.75em;
	line-height: 1.6;
	margin-top: 10px}


/* サイドバー */
div#sidebar	{width: 166px;
	float: left;
	margin-bottom: 25px}

div#sidebar nav ul	{font-size: 0.75em;
	margin-top: 0;
	margin-left: 0;
	padding-left: 0;
	line-height: 0}

div#sidebar nav ul li	{list-style-type: none}

div#sidebar nav ul li a	{display: block;
	line-height: 30px;
	text-decoration: none;
	color: #ffffff;
	background-color: #005087;
	border-bottom: solid 1px #ffffff;
	padding-left: 10px}

div#sidebar nav ul li a:hover	{background-color: #017acd}

div#sidebar aside	{margin-bottom: 10px}

div#sidebar aside a	{font-size: 0.75em;
	color: #444444;
	text-decoration: none;
	line-height: 30px;
	border: solid 1px #888888;
	padding: 5px}

div#sidebar aside img	{border: none;
	vertical-align: middle}


/* フッター */
div#footer	{background-image: url(line-blue.png);
	background-repeat: repeat-x;
	width: 760px;
	margin-top: 0;
	padding-top: 8px;
	clear: both}

address	{font-size: 0.75em;
	font-style: normal;
	text-align: center}

</style>

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>

<!-- コンテナ -->
<div id="container">

<!-- ヘッダー -->
<div id="header">
<h1><img src="logo.gif" alt="Green Leaf" /></h1>
<p>生活を楽しくする情報をもっと身近にお届けします</p>
</div>

<!-- パンくずリスト -->
<nav id="bread">
<a href="link.html">トップページ</a> >
<a href="link.html">サービス案内</a>
</nav>


<!-- コンテンツ -->
<div id="content">

<h2>サービス案内</h2>

<p>Green Leafは生活を楽しくするサービスを、もっと身近にお届けするために活動している企業グループです。情報サイトやショッピングサイトを通じてさまざまなサービスの提供を行い、みなさまをサポートいたします。</p>

<h3>情報サイト「Green Leaf」</h3>

<p>情報サイト「Green Leaf」では、「生活を楽しくするサービスをもっと身近に」をテーマに、日常生活で役に立つサービスの情報をお届けします。生活を楽しくするためには、「衣」「食」「住」を満たすことが大切です。そのために必要な情報を充実させました。最新のファッション事情から洋服のリサイクル情報、安全でおいしい食材にレシピ、それを味わえるレストラン、住まいを快適にアレンジするテクニック、職人に支えられた伝統の技などなど… 楽しみながら活用していただければと思います。</p>

<p>また、「遊」を充実させる情報として、関東、関西圏を中心としたレジャーや癒しのスポットを紹介します。名所・旧跡に温泉、日帰り旅行からちょっとした贅沢な旅まで取り揃えていく予定です。</p>


<h3>ショッピングサイト「Green Shop」</h3>

<p>ショッピングサイト「Green Shop」では、情報サイト「Green Leaf」で紹介した "いいもの" や "おもしろいもの" を購入していただけるようにしています。</p>

<p>そのほかにも、ショップ内のToy Boxコーナーではヨーロッパやアフリカの遊び心にあふれる玩具を、Candy Boxコーナーではカラフルでおいしいお菓子をたくさん扱っています。また、地域ごとの地場産野菜の宅配も承っておりますので、ぜひご利用ください。</p>

</div>



<!-- サイドバー -->
<div id="sidebar">

<nav>
<ul>
<li><a href="link.html">トップページ</a></li>
<li><a href="link.html">会社情報</a></li>
<li><a href="link.html">サービス案内</a></li>
<li><a href="link.html">お問い合わせ</a></li>
<li><a href="link.html">ブログ</a></li>
</ul>
</nav>

<aside>
<a href="feed.xml">
<img src="feed-icon-14x14.png" alt="RSS" />
RSSフィード
</a>
</aside>

</div>


<!-- フッター -->
<div id="footer">
<address>Copyright (C) Green Leaf, All rights reserved.</address>
</div>

</div>

</body>
</html>

inserted by FC2 system