Tips

CSS練習問題 第18回

CSS練習問題 第18回

CSS練習問題の18回目となります。
突然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{
float: right;
}
[/css]

右側に並べる場合には、「float」を利用します。
「#」はIDセレクタです。(←覚えていますか~?)
「.」はクラスセレクタ

今回は上の要素を右に並べるので、単純にやると「float:right」を指定するのですが、
大体コレジャナイ感を出されて修正する羽目になります。。。

まずは、これでも要素は右に行きますので、正解としています。

解答例2
[css] section[id=page1], section[id=page2]{
float: right;
}
[/css]

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

今回の例では、「属性名=値」が2つ指定されています。(←気が付いた?)
カンマ区切りで複数指定できるので、複数個指定しています。

この例では、全体的に右に寄ってしまうことになります。
大抵の場合、問題の内容からしてコレジャナイ感が漂ってきます。(できたものを見せると「うーん」って言われます)
今回は、属性セレクタ、複数指定の例を出しています。

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

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