CSS練習問題　第１３回

ono

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

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

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

問題

営業の織田君（イケメンの先輩）と打ち合わせすることに。
私：「こないだのお見上げ、ありがとうございます（チョコのお菓子である）」
織田君：「いや、いや、良いんだよ。」
イケメンで爽やか。

そんな織田君からのお願い。

「Pythonでニューラルネットワーク」部分に下線を引いてほしいです。

私：「文字の下だけにひきますか？全体に横にひきますか？それとも、下のコンテンツに合わせますか？」
織田君：「下のコンテンツに合わせてください。」

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

<!DOCTYPE html>
<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;
			background-color:#eee;
		}
		</style>
	</head>
	<body>
		<div class="continer">
			<div class="lead">Pythonでニューラルネットワーク</div>
			<div class="content">
				Keras（ケラス）を利用する。
				こいつはTensorFlow（テンサーフロー）を利用する。（テンソルじゃないのかな？）
				ニューラルネットワークの勉強を始めると、微分・積分を使いまくる。特に微分。
				確率的勾配降下法を理解しないと駄目なようだ。
				モンテカルロ木探索など覚えることは多いです。
				活性化関数ってなんだー。
			</div>
		</div>
	</body>
</html>

解答例1

[css] .lead{
border-bottom: 1px solid #ccc;
width: 520px;
}
[/css]

下のコンテンツは、「.content」になるのですが、「width:500px」に対して、「padding:10px」を付けています。
この場合、左右に10pxづつ膨張していることになるので、それを加味した大きさを指定します。

下線を引く場合は、border-bottomを利用しますが、上(border-top)、下(border-bottom)、右(border-rigth)、左(border-left)と個別に指定することができます。

解答例2

[css] .content{
border-top: 1px solid #ccc;
}
[/css]

同じ名前でスタイルを定義すると、両方とも反映されます。
ですので、「.content」に対して、追加のプロパティーを与えてあげるとうまくいきます。
下のコンテンツの横幅一杯なので、こちらのほうが間違いないかも知れません。

同じ名前の場合は、下に定義されているほうが優先されます。