Tips

CSS練習問題 第20回
2019.12.04

CSS練習問題 第20回

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

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

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

問題

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

私:「そういえば12月だね。クリスマスってどうするの?」
石橋君:「忘れたよ(遠い目)」

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

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

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

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

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

<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となる値は何か、をプログラムで解く場合に重要になるのがこの勾配降下法です。
					幾つか勾配法にも種類がありますがここでは最急降下法、確率的勾配降下法の2つを扱います。
				</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」属性になります。
これが大きい方が上に表示されるようになります。
下のコンテンツ要素を下に表示したので、小さく設定しています。

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

CSS3

CSS練習問題 第19回

CSS練習問題の19回目となります。 突然HTMLを初めて、何か良くわからいけど、達人になってなんて言われている、新人に送る! 超簡単な練習問題です。 CSSは開発環境など必要ないので、手軽に勉強できます。 ただ、リファレンス集などを見てもなかなか覚えられないので、練習問題にチャレンジしてみましょう
CSS3

CSS練習問題 第18回

CSS練習問題の18回目となります。 突然HTMLを初めて、何か良くわからいけど、達人になってなんて言われている、新人に送る! 超簡単な練習問題です。 CSSは開発環境など必要ないので、手軽に勉強できます。 ただ、リファレンス集などを見てもなかなか覚えられないので、練習問題にチャレンジしてみましょう
CSS3

CSS練習問題 第17回

CSS練習問題の17回目となります。 突然HTMLを初めて、何か良くわからいけど、達人になってなんて言われている、新人に送る! 超簡単な練習問題です。 CSSは開発環境など必要ないので、手軽に勉強できます。 ただ、リファレンス集などを見てもなかなか覚えられないので、練習問題にチャレンジしてみましょう
CSS3

CSS練習問題 第16回

CSS練習問題の16回目となります。 突然HTMLを初めて、何か良くわからいけど、達人になってなんて言われている、新人に送る! 超簡単な練習問題です。 CSSは開発環境など必要ないので、手軽に勉強できます。 ただ、リファレンス集などを見てもなかなか覚えられないので、練習問題にチャレンジしてみましょう
CSS3

CSS練習問題 第15回

CSS練習問題の15回目となります。 突然HTMLを初めて、何か良くわからいけど、達人になってなんて言われている、新人に送る! 超簡単な練習問題です。 CSSは開発環境など必要ないので、手軽に勉強できます。 ただ、リファレンス集などを見てもなかなか覚えられないので、練習問題にチャレンジしてみましょう
CSS3

CSS練習問題 第14回

CSS練習問題の14回目となります。 突然HTMLを初めて、何か良くわからいけど、達人になってなんて言われている、新人に送る! 超簡単な練習問題です。 CSSは開発環境など必要ないので、手軽に勉強できます。 ただ、リファレンス集などを見てもなかなか覚えられないので、練習問題にチャレンジしてみましょう
CSS3

CSS練習問題 第13回

CSS練習問題の13回目となります。 突然HTMLを初めて、何か良くわからいけど、達人になってなんて言われている、新人に送る! 超簡単な練習問題です。 CSSは開発環境など必要ないので、手軽に勉強できます。 ただ、リファレンス集などを見てもなかなか覚えられないので、練習問題にチャレンジしてみましょう
CSS3

CSS練習問題 第12回

CSS練習問題の12回目となります。 突然HTMLを初めて、何か良くわからいけど、達人になってなんて言われている、新人に送る! 超簡単な練習問題です。 CSSは開発環境など必要ないので、手軽に勉強できます。 ただ、リファレンス集などを見てもなかなか覚えられないので、練習問題にチャレンジしてみましょう
CSS3

CSS練習問題 第11回

CSS練習問題の11回目となります。 突然HTMLを初めて、何か良くわからいけど、達人になってなんて言われている、新人に送る! 超簡単な練習問題です。 CSSは開発環境など必要ないので、手軽に勉強できます。 ただ、リファレンス集などを見てもなかなか覚えられないので、練習問題にチャレンジしてみましょう
CSS3

CSS練習問題 第10回

CSS練習問題の10回目となります。 突然HTMLを初めて、何か良くわからいけど、達人になってなんて言われている、新人に送る! 超簡単な練習問題です。 CSSは開発環境など必要ないので、手軽に勉強できます。 ただ、リファレンス集などを見てもなかなか覚えられないので、練習問題にチャレンジしてみましょう

HTML・CSSリファレンス 連載はこちら!

HTML・CSSリファレンス 連載目次

Recent News

Recent Tips

Tag Search