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

Kozue Blog

プログラミング 学習 記録

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

更新日:

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

所感:横道にそれるといつの間にか1時間経っていることが…(´・ω・`)

合計学習時間

前回までの時間:7.50[h]
今回の時間:2.00[h]
合計時間:9.50[h]

学習内容

はじめてのCSS入門講座

役立った情報

Google Chromeでページの全画面キャプチャを撮る方法

ChromeでWEBページ全体をフルスクリーンショット!見ているページの全画面キャプチャー画像をダウンロードする方法

Requ.log | レク.ログ

記事内でソースコードをきれいに表示する

ソースコードの表示がとても見づらいので下記記事を参考にGoogle Code Prettifyを導入しました。

Google Code PrettifyをWordPressに適用する

メモ

displayプロパティとvisibilityプロパティ

display

HTML要素をどのように表示するか

  • block:ブロック要素として表示
  • inline:インライン要素として表示
  • inline-block:インラインで扱えるブロック要素として表示
  • none:表示しない

inline-blockはブロック要素にしか適用できないcssオプションを指定したい時に使用する。

ここで言う表示 / 非表示とはブロック自体のことを指している。
noneを指定した場合はブロックの表示領域が消える。

visibility

HTML要素をどのように見せるか

  • visible:ボックスを表示させる
  • hidden:そのボックスを非表示にさせる

ここで言う表示 / 非表示とはブロック内の内容のことを指している。
hiddenを指定した場合はブロックの表示領域が消えることはない。

boxのサイズの考え方

min-width / max-width
min-height / max-height
  • min-****:最小サイズ
  • max-****:最大サイズ

****にはwidthまたはheigthを当てはめる。
幅や高さは外側のboxサイズによって決まるため、相対的な単位を使用する際は基準を意識する必要がある。

box-sizing

ボックスのサイズの算出方法を指定するオプション

  • content-box:padding / borderを幅や高さに含めない。(デフォルト)
  • border-box:padding / borderを幅や高さに含める。

border-boxはCSS3であるため、ベンダープレフィックス(-moz-や-webkit-)が必要。
例:-webkit-box-sizing: border-box;

overflow

文字があふれた時のふるまいを指定する

  • visible:はみ出して表示
  • scroll:スクロールバーを表示
  • hidden:はみ出した部分を表示させない

floatプロパティ

回り込みを実現する。

float
  • left
  • right
  • none (デフォルト)
clear

floatを解除する

  • left
  • right
  • both:左右解除

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

わんちゃんの画像を立て続けに回り込みさせてみました。

HTML

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>CSSの練習</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div>
		<p class="overflow-scroll">
			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>
		<img src="img/animal_inu.png" alt="animal_inu" title="animal_inu">
		<p>
			今から「わん」と鳴きます。今から「わん」と鳴きます。今から「わん」と鳴きます。今から「わん」と鳴きます。今から「わん」と鳴きます。今から「わん」と鳴きます。今から「わん」と鳴きます。今から「わん」と鳴きます。今から「わん」と鳴きます。今から「わん」と鳴きます。今から「わん」と鳴きます。今から「わん」と鳴きます。今から「わん」と鳴きます。今から「わん」と鳴きます。今から「わん」と鳴きます。今から「わん」と鳴きます。今から「わん」と鳴きます。今から「わん」と鳴きます。今から「わん」と鳴きます。今から「わん」と鳴きます。今から「わん」と鳴きます。今から「わん」と鳴きます。今から「わん」と鳴きます。今から「わん」と鳴きます。
		</p>
		<img src="img/animal_inu.png" alt="animal_inu" title="animal_inu">
		<p>わん</p>
		<img src="img/animal_inu.png" alt="animal_inu" title="animal_inu">
		<p>わんわん</p>
		<img src="img/animal_inu.png" alt="animal_inu" title="animal_inu">
		<p>わんわんわん</p>
		<img src="img/animal_inu.png" alt="animal_inu" title="animal_inu">
		<p>わんわんわんわん</p>
		<p>
			わんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわん<img src="img/animal_inu.png" alt="animal_inu" title="animal_inu">わんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわんわん
		</p>
	</div>
</body>
</html>

CSS

img {
	height: 200px;
	float: left;
}

p {
	background-color: gray;
}

.overflow-scroll {
	max-width: 500px;
	max-height: 200px;
	overflow: scroll;
}

div	{
	max-width: 600px;
	background-color: lightgray;
}

表示結果

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

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