2010年11月24日

第12回 CSS 〜箇条書き〜

今までHTMLで行っていた表現をCSSで。
非推奨とかよく分かんなかったけど今ならちょっと分かる気がする。
前回がちょっと長めだったんで今回の範囲は短め。

【この課での目標】

CSSを用いての箇条書き表現

【教材範囲】

はじめてのホームページHTML入門 の192〜199ページ

【成果物】

http://programming.so.land.to/20101124-2.html
※Chromeだと見れません。

【つまづいた箇所・解決法】

特に無し

【未解決の悩み】

CSS上の#を付けるor付けないの区別はなんだろう?

【ソース】

※タグの囲み(<)を半角から全角に置換してあります。

〜HTML〜


<html>
<head>
<title>CSSを使った記述2</title>

<link rel="stylesheet" type="text/css" href="20101124-2.css">

</head>
<body>

<div>
<ol id="list-style">
<li id="style-yazirushi">ね</li>
<li id="style-yazirushi">うし</li>
<li id="style-yazirushi">とら</li>
<li>う</li>
</ol>
</div>

<div>
<ul id="list-style">
<li>A</li>
<ul>
<li>AA</li>
<li id="style-circle">AO</li>
</ul>
<li>B</li>
<li>O</li>
<li class="new-icon">AB</li>
</ul>
</div>


</body>
</html>


〜CSS〜

#list-style {
list-style-type: upper-roman;
}

ul {
list-style-type: disc;
}

#style-circle {
list-style-type: circle;
}

#style-yazirushi{
list-style-image: url(yazirushi01.jpg);
}

.new-icon {
background: url(new01.gif) no-repeat 40px 2px;
}

body {
color: white;
background-color: gray;
}
posted by yuuya1986 at 16:45| Comment(0) | HTML/CSS | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。