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

Kozue Blog

プログラミング 学習 記録

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

更新日:

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

所感1:インプットだけしてきたものをいざアウトプットしようとしたら理解できていない部分がたくさんありました。

所感2:飽き性&欲に弱い私ですが今日で1週間になります!えらい!(∩´∀`)∩

合計学習時間

前回までの時間:9.50[h]
今回の時間:3.00[h]
合計時間:12.5[h]

学習内容

はじめてのCSS入門講座

メモ

positionプロパティ

position

位置を決める基準の指定

  • static:配置の方法を決めない(デフォルト)
  • absolute:絶対位置への配置
  • relative:相対位置への配置
  • fixed:絶対位置への配置

absolute…static以外の指定をされた親(親以上)のボックスの左上を基準とする。

relative…staticで表示される位置を基準とする。

fixed…スクロールしても固定される。
スクロールしてもついてくる広告みたいなイメージ。

位置を決めるオプション
  • top
  • bottom
  • right
  • left

z-index

z-index

奥行きを指定する。
手前ほど数字が大きい。
奥0 ⇔ n手前

positionと組み合わせることで重なったように見せることもできる。

背景の指定の基本

background
  • background :複数の背景の指定をまとめて指定
  • background-color:背景の色を指定
  • background-image:背景の画像を指定

backgroundで複数の指定をする場合は「,」区切り。
デフォルトでは指定されたものが背景全体を埋め尽くすように繰り返し表示される(background-repeat:repeat)。

複数指定をした場合の背景の奥行は指定した順に手前に表示される。

url

url(“ファイルパス”)

色の指定方法
  • 色の名前:基本的に16種類(ブラウザごとに規定値を持っている)
  • 16進数:#RGB
  • 10進数:rgb(R, G, B)もしくはrgba(R, G, B ,A)

10進数指定rgbaのAはalpha値を指していて範囲は0~1(10%なら.1と記述)

背景の指定の応用

background-repeat

背景素材の繰り返し方法の指定

  • no-repeat:繰り返さない
  • repeat:縦横に繰り返す
  • repeat-x:横方向にのみ繰り返す
  • repeat-y:縦方向にのみ繰り返す
background-position

背景の表示開始位置の指定

  • キーワード方式:center / top / bottom / left / right
  • %:左上(通常の基準点)を基準として、BOXの何%の位置から開始するのかを指定
  • 数値:単位を付けて数値で指定
background-attachment

画面をスクロールする際に背景画像をどのように表示するかを指定

  • fixed:背景画像の位置が固定されてスクロールしても動かない
  • scroll:スクロールに伴って背景画像も移動する
  • local:BOXのスクロール位置に合わせて移動する

書いたソースコードと表示結果

HTML

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>CSSの練習</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>背景の指定</h1>
	<div class="background_box scroll">
		<h2>Scroll</h2>
		<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>
		<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>
	<div class="background_box fixed">
		<h2>Fixed</h2>
		<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>
		<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>
	<div class="background_box local">
		<h2>Local</h2>
		<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>
		<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

.background_box {
	max-width:  600px;
	max-height: 300px;
	box-sizing: border-box;
	overflow: scroll;
	margin: 1em auto;
	background: url("img/animal_inu.png") top left repeat-x,
				url(img/animal_neko.png) top+30% left repeat-x,
				url(img/animal_usagi.png) top+60% left repeat-x;
	background-size: auto 15%;
	background-color: lightblue;
}

.scroll {
	background-attachment: scroll;
}

.fixed {
	background-attachment: fixed;
}

.local {
	background-attachment: local;
}

表示結果

background

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

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