CSS note

animation:none;
background:initial;
color:inherit;
cursor:auto;
display:inline;
font-family:sans-serif;
font-size:medium;
font-size-adjust:none;
font-style:normal;
font-weight:400;

letter-spacing:normal;

padding:0;

text-decoration:none;

text-shadow:none;
text-transform:none;
transform:none;
vertical-align:baseline;
word-break:normal;
hyphens:auto;
word-spacing:normal;
z-index:auto;
/* 他のプロパティの値により利用が制約される　*/
text-align:left;
line-height:normal;
position:static;
bottom:0;
left:0;
right:0;
top:0;
height:auto;
margin:0;
text-overflow:inherit;
white-space:normal;
width:auto;
tab-size:8;
all:none;
clip:auto;
first-letter:?;
first-line:?;
/* マイナーなプロパティ　*/

font-kerning:auto;
font-language-override:normal;
font-smooth:auto;
font-stretch:normal;
font-synthesis:weight;
font-variant-caps:normal;
font-variant-ligatures:normal;
font-variant-position:normal;
text-align-last:auto;
text-emphasis:none currentColor;
text-stroke:0 #000;
writing-mode:horizontal-tb}

Animation

Hello World

HTML

<span class="animation">Hello World</span>

CSS

.animation {
animation-duration:10s;
animation-name:animation-1;
color:blue;
font-size:3em
}

@keyframes animation-1 {
	0% {
	color:blue
	}

	25% {
	color:#ff0
	}

	50% {
	color:blue
	}

	100% {
	color:green
	}
}

Background

Hello World

HTML

<span class="background">Hello World</span>

CSS

.background{
font-size:3em;
padding:.5em;
background:rgba(149, 165, 166,.5);
color:currentColor;
}

Color

Hello World

.color{
color:rgba(52, 152, 219,1.0);
font-size:3em;
}

display

display:inline

HTML

<div class="display-inline">
<span>Hello World</span><span>Hello World</span><span>Hello World</span><span>Hello World</span><span>Hello World</span>
</div>

CSS

.display-inline span{
display:inline;
font-size:1.5em;
padding:.5em;
border:1px dotted #ccc;
}

display:block

.display-block span{
 display:block;
 font-size:1.5em;
 padding:.5em;
 border:1px dotted #ccc;
}

display:flex

HTML

<div class="display-flex">
 <p>Hello World</p>
 <p>Hello World</p>
 <p>Hello World</p>
 <p>Hello World</p>
 <p>Hello World</p>
</div>

CSS

.display-flex{
 display:flex;
 font-size:1.5em;
 padding:.5em;
 border:1px dotted #ccc;
}
.display-flex p{
 font-size:1.5em;
 padding:.5em;
 border:1px dotted #ccc;
 flex:1 1 auto;
}

display:list-item

HTML

<div class="display-list-item">
<span>Hello World</span><span>Hello World</span><span>Hello World</span><span>Hello World</span><span>Hello World</span>
</div>

CSS

.display-list-item span{
 display:list-item;
 list-style-type:decimal;
 margin-left:4.4em;
}

font-family

HTML

<div class="font-family">
<span class="google-font-oswald300">Hello World</span><span class="google-font-indie-flower">Hello World</span><span class="google-font-lobster">Hello World</span><span class="google-font-open-sans-condensed">Hello World</span><span>Hello World</span>
</div>

CSS

.font-family span{
 font-size:2em;
 padding:.5em;
}

font-size

HTML

<div class="font-size">
<span>Hello World</span><span>Hello World</span><span>Hello World</span><span>Hello World</span><span>Hello World</span>
</div>

CSS

.font-size span{
 padding:.5em;
 border:1px dashed #ccc;
}
.font-size span:nth-child(1){
 font-size:1em;
}
.font-size span:nth-child(2){
 font-size:1.2em;
}
.font-size span:nth-child(3){
 font-size:1.4em;
}
.font-size span:nth-child(4){
 font-size:1.6em;
}
.font-size span:nth-child(5){
 font-size:1.8em;
}

font-size-ajust

工事中

font-weight

HTML

<div class="font-weight">
<span>Hello World</span><span>Hello World</span><span>Hello World</span><span>Hello World</span><span>Hello World</span><span>Hello World</span><span>Hello World</span><span>Hello World</span><span>Hello World</span>
</div>

CSS

.font-weight span:nth-child(1){
 font-weight:100;
}
.font-weight span:nth-child(2){
 font-weight:200;
}
.font-weight span:nth-child(3){
 font-weight:300;
}
.font-weight span:nth-child(4){
 font-weight:400;/* normal */
}
.font-weight span:nth-child(5){
 font-weight:500;
}
.font-weight span:nth-child(6){
 font-weight:600;
}
.font-weight span:nth-child(7){
 font-weight:700;/* bold */
}
.font-weight span:nth-child(8){
 font-weight:800;
}
.font-weight span:nth-child(9){
 font-weight:900;
}

letter-spacing

.letter-spacing span{
 font-size:2em;
 display:block;
 font-kerning:normal;
}
.letter-spacing span:nth-child(1){
 letter-spacing:normal;
}
.letter-spacing span:nth-child(2){
 letter-spacing:0.05em;
}
.letter-spacing span:nth-child(3){
 letter-spacing:0.1em;
}
.letter-spacing span:nth-child(4){
 letter-spacing:0.15em;
}
.letter-spacing span:nth-child(5){
 letter-spacing:0.2em;
}

word-spacing

英文の単語間のスペースのはばをカスタマイズできる。Defines normal space between words (0.25em) . This is default

HTML

<div class="word-spacing">
<span class="word-spacing-default">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </span>
<span class="word-spacing-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </span>
<span class="word-spacing-1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </span>
<span class="word-spacing-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </span>
</div>

CSS

.word-spacing{
 font-size:1.5em;
}
.word-spacing span{
 display:block;
 margin-bottom:1em;
}
.word-spacing .word-spacing-1{
 word-spacing:.3em;
 color:#1abc9c;
}
.word-spacing .word-spacing-2{
 word-spacing:1em;
 color:#27ae60;
}

line-height

HTML

<div class="line-height">
<span>永麗あいうえおかきくけこん?!12345678AVfiflabcdefg#”!'</span><span>永麗あいうえおかきくけこん?!12345678AVfiflabcdefg#”!'</span><span>永麗あいうえおかきくけこん?!12345678AVfiflabcdefg#”!'</span><span>永麗あいうえおかきくけこん?!12345678AVfiflabcdefg#”!'</span><span>永麗あいうえおかきくけこん?!12345678AVfiflabcdefg#”!'</span>
</div>

CSS

.line-height span{
 border:1px solid #ccc;
 font-size:1.2em;
}
.line-height span:nth-child(1){
 line-height:1;
}
.line-height span:nth-child(2){
 line-height:1.3;
}
.line-height span:nth-child(3){
 line-height:1.5;
}
.line-height span:nth-child(4){
 line-height:1.7;
}
.line-height span:nth-child(5){
 line-height:2;
}

padding

.padding1 span,
.padding2 span{
border:1px dashed #ccc;
}
.padding span:nth-child(1){
 padding:0;
	
}
.padding span:nth-child(2){
 padding:.2em;
	
}
.padding span:nth-child(3){
 padding:.4em;
	
}
.padding span:nth-child(4){
 padding:.6em;
	
}
.padding span:nth-child(5){
 padding:.8em;
	
}

text-shadow

HTML

<div class="text-shadow">
<span>Hello World</span>
</div>

CSS

.text-shadow span{
 text-shadow: 4px 4px 2px rgba(150, 150, 150, 0.47);
 font-size:2em;
 font-weight:700;
}

text-transform

HTML

<div class="text-transform">
<span>hello world</span><span>hello world</span><span>hello world</span><span>hello world</span><span>hello world</span><span>hello world</span>
</div>

CSS

.text-transform span{
 display:block;
 font-size:2em;
}
.text-transform span:nth-child(1){
 text-transform: none;
}
.text-transform span:nth-child(2){
 text-transform: capitalize;
}
.text-transform span:nth-child(3){
 text-transform: uppercase;
}
.text-transform span:nth-child(4){
 text-transform: lowercase;
}
.text-transform span:nth-child(5){
 text-transform:.8em;
}
.text-transform span:nth-child(6){
 text-transform: full-width;
}

z-index

HTML

<div class="z-index">
<span>Hello World</span><span>Hello World</span><span>Hello World</span><span>Hello World</span><span>Hello World</span>
</div>

CSS

.z-index{
 position:relative;
 margin-bottom:400px;
}
.z-index span{
 padding:2em;
 display:block;
 box-shadow:-6px 0px 3px -3px #9e9ea6;
 border:1px solid #aaa;
}
.z-index span:nth-child(1){
 z-index:1;
 margin-left:142px;
 background:rgba(222,222,222,.3);
}
.z-index span:nth-child(2){
 z-index:2;
 margin-left:284px;
 margin-top:-40px;
 background:rgba(222,222,222,.3);
}
.z-index span:nth-child(3){
 z-index:3;
 margin-left:426px;
 margin-top:-90px;
 background:rgba(243, 156, 18,.3);
}
.z-index span:nth-child(4){
 z-index:4;
 margin-left:568px;
 margin-top:-90px;
 background:rgba(52, 152, 219,.3);
}
.z-index span:nth-child(5){
 z-index:5;
 margin-left:710px;
 margin-top:-90px;
 background:rgba(192, 57, 43,.3); 
}

word-break

HTML

<div class="parent-block">
<p class="no-break-text">http://example.com/test/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
<div class="parent-block">
<p class="break-text">http://example.com/test/aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>

CSS

.parent-block{
 border:1px solid #ccc;
 padding:1em;
 background:rgba(236, 240, 241,1.0);
 max-width:300px;
 height:auto;
}
.no-break-text{
 word-break:normal;
 hyphens:normal;
 word-wrap:initial;
 overflow-wrap:initial;
}
.break-text{
 word-break: break-all;
 hyphens: auto;
 word-wrap: break-word;
 overflow-wrap: break-word;
}

関連　&shy;,<wbr />

font-style

HTML

<div class="font-style">
<span class="normal">Hello World</span><span class="itaric">Hello World</span><span class="oblique">Hello World</span>
</div>

CSS

.font-style span{
 font-size:2em;
 display:block;
}
.font-style .itaric{
 font-style:itaric;
}
.font-style .oblique{
 font-style:oblique;
}

transform

HTML

<div class="transform">
<span>Hello World</span><span>Hello World</span><span>Hello World</span><span>Hello World</span><span>Hello World</span>
</div>

CSS

.transform span{
 display:inline-block;
 height: 60px;
 width: 150px;
 line-height: 60px;
 margin: 25px 25px;
 text-align: center;
 border: 0;
 transition: all 0.3s ease 0s;
 color:#fff;
}
.transform span:nth-child(1){
 background:#1abc9c;
}
.transform span:nth-child(2){
 background:#2ecc71;
}
.transform span:nth-child(3){
 background:#3498db;
}
.transform span:nth-child(4){
 background:#9b59b6;
}
.transform span:nth-child(5){
 background:#34495e;
}
.transform span:nth-child(1):hover{
 background:#1abc9c;
 color:red;
}
.transform span:nth-child(2):hover{
 background:#2ecc71;
 box-shadow: inset 0 0 0 5px #e67e22;
}
.transform span:nth-child(3):hover{
 background:#3498db;
 transform: rotate(30deg);
}
.transform span:nth-child(4):hover{
 background:#9b59b6;
 transform: rotate(4deg) scale(0.574) skew(-38deg) translate(111px);
}
.transform span:nth-child(5):hover{
 background:#34495e;
 transform: rotate(360deg) ;
}

text-align

HTML

<div class="text-align">
<span>hello world</span><span>hello world</span><span>hello world</span>
</div>

CSS

.text-align{
 overflow:hidden;
}
.text-align span{
 display:inline;
 color:#fff;
 padding:1em;
 display:block;
}
.text-align span:nth-child(1){
 background:#1abc9c;
 text-align:left;
}
.text-align span:nth-child(2){
 background:#2ecc71;
 text-align:center;
}
.text-align span:nth-child(3){
 background:#3498db;
 text-align:right;
}

vertical-align

HTML

<div class="vertical-align">
<span>hello world</span><span>hello world</span><span>hello world</span><span>hello world</span><span>hello world</span><span>hello world</span><span>hello world</span><span>hello world</span><span>hello world</span>
</div>

CSS

.vertical-align{
 border:1px solid #ccc;
}
.vertical-align span{
 padding.5em 0;
 background:#ccc;
 color:#000;
}
.vertical-align span:nth-child(1){
 vertical-align:baseline;
}
.vertical-align span:nth-child(2){
 vertical-align:length;
}
.vertical-align span:nth-child(3){
 vertical-align:sub;
}
.vertical-align span:nth-child(4){
 vertical-align:super;
}
.vertical-align span:nth-child(5){
 vertical-align:top;
}
.vertical-align span:nth-child(6){
 vertical-align:text-top;
}
.vertical-align span:nth-child(7){
 vertical-align:middle;
}
.vertical-align span:nth-child(8){
 vertical-align:bottom;
}
.vertical-align span:nth-child(9){
 vertical-align:text-bottom;
}

text-decoration

HTML

<div class="text-decoration">
<span class="underline">Hello World</span><span class="overline">Hello World</span><span class="line-through">Hello World</span><span class="shorthand-underline-overline">Hello World　※</span><span class="shorthand-underline-color">Hello World　※</span><span class="shorthand-underline-wavy-color">Hello World　※</span>
</div>

CSS

.text-decoration .underline{
	text-decoration: underline;
}
.text-decoration .overline{
	text-decoration: overline;
}
.text-decoration .line-through{
	text-decoration: line-through;
}

.text-decoration .shorthand-underline-overline{
	text-decoration: underline;
	text-decoration: underline overline;/* firefoxのみ */
}
.text-decoration .shorthand-underline-color{
	text-decoration: underline;
	text-decoration: underline red; /* firefoxのみ　赤の下線 */
}
.text-decoration .shorthand-underline-wavy-color{
	text-decoration: underline;
	text-decoration: underline wavy red; /* firefoxのみ 波線 */
}

position

HTML

<div class="position-absolute">
<span>Hello World</span><span>Hello World</span><span>Hello World</span><span>Hello World</span><span>Hello World</span>
</div>

CSS

.position-absolute {
 position:relative;
 width:310px;
 height:310px;
 border:1px solid #ccc;
 background:#bdc3c7 }
.position-absolute span {
 padding:.5em;
 width:90px;
 height:90px }
.position-absolute span:nth-child(1) {
 position:absolute;
 top:0;
 left:0;
 background:#e74c3c;
 color:#fff }
.position-absolute span:nth-child(2) {
 position:absolute;
 top:0;
 right:0;
 background:#27ae60;
 color:#fff }
.position-absolute span:nth-child(3) {
 position:absolute;
 left:0;
 bottom:0;
 background:#1abc9c;
 color:#fff }
.position-absolute span:nth-child(4) {
 position:absolute;
 right:0;
 bottom:0;
 background:#e74c3c;
 color:#fff }
.position-absolute span:nth-child(5) {
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background:#2c3e50;
 color:#fff;
 display:inline-block;
 width:90px;
 height:90px;
 margin:auto;
 text-align:center;
 }

text-overflow

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

クリックすると、全文を表示します

HTML

<p class="ellipsis text-overflow" tabindex="0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="clip text-overflow" tabindex="0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

CSS

.text-overflow{
 borde:1px solid #ccc;
 background:#ecf0f1;
 box-shadow: inset 0px 0px 10px rgba(52, 152, 219,.7);
 padding:.5em;
 width: 50vw;
 overflow: hidden;
 white-space: nowrap;
}
.ellipsis {
 text-overflow: ellipsis;
}
.clip{
 text-overflow: clip;
}
.clip:focus, .ellipsis:focus{
 text-overflow:none;
 overflow:visible;
 white-space: normal;
}

width

HTML

<div class="width" tabindex="0">
<img src="https://tenman.info/labo/css/files/squirrel-150x150.jpg" alt="squirrel" width="150" height="150" class="alignnone size-thumbnail wp-image-3081" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

CSS

.width{
 width:155px;
 height:155px;
 overflow:hidden;
}
.width img{
 float:left;
}
.width p{
 margin-left:160px;
 padding:5px;
}
.width:focus{
 width:100%;
 text-overflow:none;
 overflow:visible;
 white-space: normal;
 outline:none;
 border:1px solid aaa;
 box-shadow:0px 0px 6px -2px #4b4368;
}

height

HTML

<div class="height" tabindex="0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

CSS

.height{
 width:30vw;
 height:150px;
 overflow-x:hidden;
 overflow-y:scroll;
}

white-space

<div class="white-space">
<p class="no-wrap">Lorem ipsum dolor sit amet,
 consectetur adipiscing elit, sed do eiusmod 
tempor incididunt ut labore et dolore magna aliqua. 
</p>
</div>

.no-wrap{
 white-space:no-wrap;
}
.no-wrap br{
 display:none;
}

Clip

デフォルトフォントサイズ　メモ

参照元：https://triple-underscore.github.io/css-fonts-ja.html#font-size-prop

<absolute-size>	xx-small	x-small	small	medium	large	x-large	xx-large
拡縮率 scaling factor	3/5	3/4	8/9	1	6/5	3/2	2/1	3/1
HTML 見出し HTML headings	h6		h5	h4	h3	h2	h1
HTML フォントサイズ HTML font sizes	1		2	3	4	5	6	7

参照元：https://www.w3.org/TR/html5/rendering.html

Set 'font-size' to the keyword corresponding to the value of value

according to the following table:

value	'font-size' keyword	Notes
1	x-small	h6 { margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em; font-weight: bold; }
2	small	h5 { margin-top: 1.67em; margin-bottom: 1.67em; font-size: 0.83em; font-weight: bold; }
3	medium	h4 { margin-top: 1.33em; margin-bottom: 1.33em; font-size: 1.00em; font-weight: bold; }
4	large	h3 { margin-top: 1.00em; margin-bottom: 1.00em; font-size: 1.17em; font-weight: bold; }
5	x-large	h2 { margin-top: 0.83em; margin-bottom: 0.83em; font-size: 1.50em; font-weight: bold; }
6	xx-large	h1 { margin-top: 0.67em; margin-bottom: 0.67em; font-size: 2.00em; font-weight: bold; }
7	xxx-large	see below

The 'xxx-large' value is a non-CSS value used here to indicate a font size 50% larger than 'xx-large'.

• Global CSS Property Usage
• dotgraphy

新着記事