CSS基礎構文-第3章-ビデオ1
CSS基礎構文-第3章-ビデオ2
CSS基礎構文-第3章-ビデオ3
CSS基礎構文-第3章-ビデオ4
CSS基礎構文-第3章-ビデオ5
CSS基礎構文-第3章-ビデオ6
list-style-typeプロパティ使ってみましょう!
■CSS基礎構文-第3章-ビデオ2
ulタグに対してスタイルを変更しましょう!
■CSS基礎構文-第3章-ビデオ3
list-style-positionプロパティ使ってみましょう!
list-style-imgプロパティ使ってみましょう!
■CSS基礎構文-第3章-ビデオ4
list-styleプロパティ使ってみましょう!
■CSS基礎構文-第3章-ビデオ5
id属性のセレクターを学習しましょう!
■CSS基礎構文-第3章-ビデオ6
class属性のセレクターを学習しましょう!
■MDN CSSリファレンス
https://developer.mozilla.org/ja/docs/Web/CSS
「ブラウザ」と「エディタ」は下記のWebページからダウンロードできます。
■Google Chrome (ウェブブラウザ)
https://www.google.com/intl/ja_ALL/chrome/
■Atom (テキストエディタ)
https://atom.io/
index.html
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<title></title>
<style>
/* ul {
list-style-type: square;
} */
/* ol {
list-style-type: none;
}
ul {
list-style-type: none;
} */
/* ul {
list-style-position: outside;
} */
/* ul {
list-style-image: url(icon.png);
list-style:square inside url(icon.png);
} */
/* #text {
color: red;
} */
.text {
color: red;
}
</style>
</head>
<body>
<!– list-style-typeプロパティ –>
<!– <ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol> –>
<!– list-style-positionプロパティ –>
<!– <ul>
<li>テストテキストです。テストテキストです。テストテキストです。テストテキストです。テストテキストです。テストテキストです。テストテキストです。</li>
<li>テストテキストです。テストテキストです。テストテキストです。テストテキストです。テストテキストです。テストテキストです。テストテキストです。</li>
<li>テストテキストです。テストテキストです。テストテキストです。テストテキストです。テストテキストです。テストテキストです。テストテキストです。</li>
</ul> –>
<!– id属性 –>
<div>
<p class=”text”>サタデーズ</p>
<p class=”text”>サタデーズ</p>
</div>
</body>
</html>