プログラミングで月収5万円になるまでの記録3日目

更新日：2019-05-19

こんばんは、こずえです。
プログラミング学習記録3日目です。
前回に引き続き「はじめてのCSS入門講座」を進めました。

所感：
今日は学習のメモを記事に直接書きながら進めてみました。
所感としては慣れればこちらの方が早くなる気がするため次回もやってみようと思います。
あと今日は帰社後にジムに行ったせいか学習している時に強い睡魔に襲われました…(;つД｀)

1 合計学習時間
2 学習内容
- 2.1 はじめてのCSS入門講座
- 2.2 メモ、つまづき、役立った情報

合計学習時間

前回までの時間：3.00[h]
今回の時間：1.5[h]
合計時間：4.50[h]

学習内容

はじめてのCSS入門講座

メモ、つまづき、役立った情報

今回はメモや確認に使ったコードなどのみです。

属性セレクタ(別称：オプション)

「class=”xxxx”」の部分が属性・値になる。
class→属性
“xxxx”→値

タグやクラス・IDを利用して選択していたものを属性を対象にできる

他のセレクタと同じように使うことができる。
言葉だけだとイメージが弱かったのですが、書き方とソースコードを見ることですぐに理解できました。

[属性名]
[属性名=”値”]

CSS

/*[属性名]*/
[class] {
	background-color: red;
	color: white;
}

/*[属性名="値"]*/
[href="#"] {
	background-color: yellow;
	color: black;
}

HTML

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSSの練習</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>Lorem ipsum</h1>
    <div class="test1">
        <input type="text">
        <a href="#">href</a>
        <a href="index.index_template.html">href</a>
        <p>
            pppppppppppppppppppppppppppppppp
        </p>
    </div>
</body>
</html>

属性セレクタの動作確認

疑似要素

動的に発生する事象を要素としてセレクタに使うためのもの。
以下が例です。

まだ訪問していないリンク (link)
訪問済みリンク (visited)
フォーカスされている (focus)
マウスポインタが乗っている (hover)
etc…

書き方
:疑似要素

CSS

/*未訪問リンク*/
:link {
	color: red;
}

/*訪問済みリンク*/
:visited {
	color: green;
}

/*マウスポインタが乗っている*/
a:hover {
	text-decoration: none;
	background-color: lightgray;
}

/*フォーカスされている(Tab移動で選択されている場合など)*/
:focus {
	background-color: yellow;
}

<br>HTML<br>

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>CSSの練習</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>Lorem ipsum</h1>
	<div class="test1">
		<input type="text">
		<a href="#a">#a</a>
		<a href="#b">#b</a>
		<a href="#c">#c</a>
		<p>
			pppppppppppppppppppppppppppppppp
		</p>
		<input type="text">
		<a href="#a">#a</a>
		<a href="#b">#b</a>
		<a href="#c">#c</a>
		<p>
			pppppppppppppppppppppppppppppppp
		</p>
	</div>
</body>
</html>

疑似要素の動作確認

#aと#bが訪問済みリンク
#cがまだ未訪問リンク
2つ目のinputをフォーカス