半歩ずつでも前に進めば変わっていく

Kozue Blog

プログラミング 学習 記録

プログラミングで月収5万円になるまでの記録8日目

更新日:

こんばんは、こずえです。
プログラミング学習記録8日目です。
前回に引き続き「はじめてのCSS入門講座」を進めました。

所感:今日は1つの動画のみですが、手を動かして理解に力を入れました。

合計学習時間

前回までの時間:12.50[h]
今回の時間:0.75[h]
合計時間:13.25[h]

学習内容

はじめてのCSS入門講座

メモ

背景を操る

background-sizeの値
  • contain:縦横比は保持、背景領域に収まるように最大になるよう拡大 / 縮小
  • cover:縦横比は保持、背景領域を完全に覆う最小サイズになるよう拡大 / 縮小
background-clip
  • border-box:背景をボーダーボックスで適用する(デフォルト)
  • padding-box:背景をパディングボックスで適用する
  • content-box:背景をコンテントボックスで適用する
containとcoverそれぞれ表示させてみた

ウィンドウの縦横サイズを変えて確認しました。

HTMLソースコード
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>CSSの練習</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="box">
		<p>
			Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
		</p>
	</div>
</body>
</html>
CSSソースコード
div {
	margin: 50px auto;
	font: 1.1em/1.5 sans-serif;
	box-sizing: border-box;
}

html {
	height: 100%;
}

.box {
	/*height: 100%;*/
	width: 80%
	height: 500px;
	padding-right: 30px;
	background: url("img/gahag-0115043179.png") no-repeat center bottom;
	border: 15px solid rgba(35, 66, 97, .5);
	background-size: contain;
	/*background-size: cover;*/
	background-clip: border-box;
}

-プログラミング, 学習, 記録
-, , ,

Copyright© Kozue Blog , 2019 All Rights Reserved Powered by STINGER.