CSS基礎構文-第4章-ビデオ1
CSS基礎構文-第4章-ビデオ2
CSS基礎構文-第4章-ビデオ3
CSS基礎構文-第4章-ビデオ4
CSS基礎構文-第4章-ビデオ5
CSS基礎構文-第4章-ビデオ6
CSS基礎構文-第4章-ビデオ7
CSS基礎構文-第4章-ビデオ8
特定の要素と特定のクラスを指定する方法を学習しましょう！
■CSS基礎構文-第4章-ビデオ2
様々なケースを学習しましょう！
■CSS基礎構文-第4章-ビデオ3
子要素を指定する方法を学習しましょう！
■CSS基礎構文-第4章-ビデオ4
直下の子要素を指定する方法を学習しましょう！
■CSS基礎構文-第4章-ビデオ5
直下の子要素を指定してみましょう！
■CSS基礎構文-第4章-ビデオ6
隣接セレクタを学習しましょう！
■CSS基礎構文-第4章-ビデオ7
擬似クラスを学習しましょう！
■CSS基礎構文-第4章-ビデオ8
実際に擬似クラスを使用してみましょう！
■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>
/* p.text1 {
color: red;
} */
/* .box h1 {
color: red;
} */
/* .list1 > li {
color: red;
} */
/* .title + p {
color: red;
} */
li:nth-child(even) {
color: red;
}
</style>
</head>
<body>
<!– セレクタの指定方法 –>
<!– <h1 class=”text1″>オンサタデーズ</h1>
<p class=”text1″>テスト文章です。</p>
<p>テスト文章です。</p>
<h2>サタデーズオンライン</h2>
<p class=”text1″>テスト文章です。テスト文章です。テスト文章です。テスト文章です。</p> –>
<!– 子要素を指定する –>
<!– <div class=”box”>
<p>テスト文章です。</p>
<p>テスト文章です。</p>
<h1>サタデーズ</h1>
</div>
<p>テスト文章です。</p>
<h1>サタデーズ</h1> –>
<!– <ul class=”list1″>
<li>テスト文章1</li>
<li>テスト文章2</li>
<ul class=”list2″>
<li>テスト文章2-1</li>
<li>テスト文章2-2</li>
</ul>
<li>テスト文章3</li>
</ul> –>
<!– <h1>オンサタデーズ</h1>
<p class=”title”>テスト文章１</p>
<p>テスト文章２</p>
<h1 class=”title”>オンサタデーズ</h1>
<p>テスト文章１</p>
<p>テスト文章２</p> –>
<ul>
<li>テスト文章1</li>
<li>テスト文章2</li>
<li>テスト文章3</li>
<li>テスト文章4</li>
<li>テスト文章5</li>
<li>テスト文章6</li>
</ul>
</body>
</html>
