Tips

CSS練習問題 第19回

CSS練習問題 第19回

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

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

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

問題

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

私:「こないだプリン全部食べたって言ってたじゃん?」
石橋君:「そ、そうだっけ?忘れたよ」

って少し顔が赤くなってた。。。。関係は終わったんだよ。。。。もう忘れよう。。。

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

「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;
}
[/css]

要素を重ねる場合には、「position」を利用します。
「#」はIDセレクタです。(←覚えていますか~?)
「.」はクラスセレクタ

今回は、「id=page1」部分にのみ指定をしています。
これでも、下のコンテンツ要素は上に上がり、重なって見えます。

通常なら、文字要素の下に「background-color」で色を付けて、見えなくするのですが、今回はこれで正解とします。

ちなみに、どういう場合に、こういう指定をするかというと、Javascriptなどで、何らかのイベント(操作)が発生した場合に、下を見せるみたいな場合に利用します。

解答例2
[css] section[id^=page]{
position: absolute;
}
[/css]

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

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

この例では、下の要素が上に来てしまっています。
重ねるという要件は満たしているので、正解としています。

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

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