2019.12.04

CSS練習問題　第２０回

ono

CSS練習問題の２０回目となります。
突然HTMLを初めて、何か良くわからいけど、達人になってなんて言われている、新人に送る！
超簡単な練習問題です。

CSSは開発環境など必要ないので、手軽に勉強できます。
ただ、リファレンス集などを見てもなかなか覚えられないので、練習問題にチャレンジしてみましょう！

※この出題形式に関しては答えは１つではありません。
解答例はできるだけ複数載せるつもりですが、問題文の要件を満たしていれば正解として下さい。

問題

石橋君（ちょっと太った、隣の席の）に聞いてみた。

私：「そういえば１２月だね。クリスマスってどうするの？」
石橋君：「忘れたよ（遠い目）」

ぶーーーーーーーーーーーーーーーーーー。遠いよ。遠すぎる。M78星雲かイスカンダル眺めてるよ。
頑張れ！爽やかイケメンに負けるな！

そんな石橋君からのお願い。

「sectionが２つあって、重ねて表示してもらったけど、上の要素は上に表示して、下の要素だけ少し右にずらして」だって。

なんかお願いが長くなってきた。

では、さっそくお願い致します！

<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>CSS練習問題 | TECH PJIN</title>
		<meta charset="utf-8">
		<meta name="description" content="CSS練習問題">
		<meta name="author" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!--[if lt IE 9]>
			<script src="//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script>
			<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->
		<style>
		.content{
			width: 500px;
			padding: 10px;
			border: 1px solid #ccc;
			background-color:#fcfcfc;
			-webkit-border-radius: 10px;  /* Safari,Google Chrome用 */  
			   -moz-border-radius: 10px;  /* Firefox用 */  
			        border-radius: 10px;  /* CSS3草案 */  

		}
		section{
			width: 550px;
		}
		</style>
	</head>
	<body>
		<div class="continer">
			<section id="page1">
				<div class="lead">確率的勾配降下法</div>
				<div class="content">
					勾配降下法は統計学や機械学習で多く使われています。
					特に機械学習というのは基本的に何かしらの関数を最小化（最大化）する問題を数値解析的に解くことに帰結する場合が多いです。
					なので、基本的にはひたすら微分して0となるところを探す問題です。微分して0。
					で、その微分して0となる値は何か、をプログラムで解く場合に重要になるのがこの勾配降下法です。
					幾つか勾配法にも種類がありますがここでは最急降下法、確率的勾配降下法の２つを扱います。
				</div>
			</section>
			<section id="page2">
				<div class="lead">誤差逆伝搬法</div>
				<div class="content">
					勾配降下法に基づいた各層各パラメータの更新量を、上位層側から得る値を利用した計算により得る方法である。
					従って、出力層での誤差関数等の値からパラメータの勾配降下量を計算し、入力層方向へ各層各パラメータの更新量を決める値を計算しながら逆方向へ伝搬させていく。
				</div>
			</section>
		</div>
	</body>
</html>

解答例1

[css] #page1{
position: absolute;
}
#page2{
margin-left: 300px;
}
[/css]

要素を重ねる場合には、「position」を利用します。
「＃」はIDセレクタです。（←覚えていますか～？）
「．」はクラスセレクタ

「id=page1」には、「position: absolute;」を指定しています。これで上の要素の下に、下の要素が入ります。
「id=page2」には、「margin-left: 300px;」を指定しています。これで、下の要素を右に寄せています。

解答例2

[css] section[id^=page]{
position: absolute;
z-index: 100;
}
#page2{
margin-left: 300px;
z-index: 10;
}
[/css]

かなり難しい回答例です。（ウソですけど）
「[attribute=value]」の形式は属性セレクタといいます。（←やっぱ難しいじゃん！）
使い方は簡単で、属性名＝値をカギ括弧で囲うだけ！！

今回の例では、「属性名＾＝値」が指定されていますが、＾（ハット記号）は値から始まるものという意味です。
「id^=page」の指定では、「page」から始まっている値ということになります。（例：page123, pageABC, pagepageなど）

重なった要素の順番を指定するのが、「z-index」属性になります。
これが大きい方が上に表示されるようになります。
下のコンテンツ要素を下に表示したので、小さく設定しています。

これ書けたら、かっこいいですよ！！モテル！多分。