25 トランスフォーム
<img src="z.png" style="transform:rotate(30deg)">
<img src="z.png">
<img src="z.png" style="transform:rotate(-30deg); transform-origin: 92px 0px">
<div>
<span style="font-family:serif">serif:フォント123あいう文字列１２３</span>
<span style="font-family:sans-serif">sans-serif:フォント123あいう文字列１２３</span>
<span style="font-family:fantasy">fantasy:フォント123あいう文字列１２３</span>
<span style="font-family:monospace">monospace:フォント123あいう文字列１２３</span>
<span style='font-family:"Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif'>"Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif:フォント123あいう文字列１２３</span>
</div>
<div>
<span style="font-size:small">small</span>
<span style="font-size:medium">medium</span>
<span style="font-size:large">large</span>
<span style="font-size:x-large">x-large</span>
<span style="font-size:xxlarge">xxlarge</span>
<span style="font-size:larger">larger</span>
<span style="font-size:smaller">smaller</span>
<span style="font-size:14px">14px</span>
</div>
<div>
<span style="font-weight:bold">font-weight:bold</span>
<span style="font-style:italic">font-style:italic</span>
<span style="line-height:40px">line-height:40px</span>
</div>
<div>
<span style="font:bold 12px sans-serif">font:bold 12px sans-serif</span>
<span style="font:monospace">font:monospace</span>
</div>
<div>
<span style="color:red">red</span>
</div>
normal a b
pre a b
nowrap a b
pre-wrap a b
pre-line a b
word-break:normal; width:100px
word-break:break-all; width:100px
word-break:keep-all; width:100px
left
center
right
justify
word-spacing: 30px;
letter-spacing: 4px;
text-indent: 4em;
text-decoration: underline
text-decoration: line-through
text-shadow: 4px 4px 2px green
writing-mode: vertical-rl; height:200px;background-color: yellow; 縦書きです
<div>
<p style="white-space: normal;">normal a b</p>
<p style="white-space: pre;">pre a b</p>
<p style="white-space: nowrap;">nowrap a b</p>
<p style="white-space: pre-wrap;">pre-wrap a b</p>
<p style="white-space: pre-line;">pre-line a b</p>
</div>
<div>
<p style="word-break:normal; width:100px">word-break:normal; width:100px</p>
<p style="word-break:break-all; width:100px">word-break:break-all; width:100px</p>
<p style="word-break:keep-all; width:100px">word-break:keep-all; width:100px</p>
</div>
<div>
<p style="text-align: left;">left</p>
<p style="text-align: center;">center</p>
<p style="text-align: right;">right</p>
<p style="text-align: justify;">justify</p>
</div>
<div>
<p style="word-spacing: 30px;">word-spacing: 30px;</p>
<p style="letter-spacing: 4px;">letter-spacing: 4px;</p>
<p style="text-indent: 4em;">text-indent: 4em;</p>
</div>
<div>
<p style="text-decoration: underline">text-decoration: underline</p>
<p style="text-decoration: line-through">text-decoration: line-through</p>
<p style="text-shadow: 4px 4px 2px green">text-shadow: 4px 4px 2px green</p>
</div>
<div>
<p style="writing-mode: vertical-rl; height:200px;background-color: yellow;">writing-mode: vertical-rl; height:200px;background-color: yellow; 縦書きです</p>
</div>
#idBack > div {
background-image: url(f.png);
border: dotted 3px magenta;
}
<div style="background-image: none; background-color: aqua;">background-color: aqua</div>
<div style="background-image: url(f.png);">background-image: url(f.png);</div>
<div style="background-repeat: repeat-x;">background-repeat: repeat-x</div>
<div style="background-repeat: repeat-y;">background-repeat: repeat-y</div>
<div style="background-repeat: no-repeat;">background-repeat: no-repeat</div>
<div style="background-repeat: round;">background-repeat: round</div>
<div style="background-repeat: space;">background-repeat: space</div>
<div style="background-attachment: scroll;">background-attachment: scroll</div>
<div style="background-attachment: fixed;">background-attachment: fixed;</div>
<div style="background-attachment: local; overflow:scroll">background-attachment: local; overflow:scroll●ここまで</div>
<div style="background-repeat: no-repeat; background-position:center">background-repeat: no-repeat; background-position:center</div>
<div style="background-repeat: no-repeat; background-position:right bottom">background-repeat: no-repeat; background-position:right bottom</div>
<div style="background-repeat: no-repeat; background-position: right 10px bottom 10px">background-position: right 10px bottom 10px</div>
<div style="background-clip:content-box">background-clip:content-box</div>
<div style="background-origin:content-box">background-origin:content-box</div>
<div style="background-size:contain">background-size:contain</div>
<div style="background-size:cover">background-size:cover</div>
<div style="background-size:30%">background-size:30%</div>
<div style="background: url(f.png);">background: url(f.png)</div>
<div style="background-image: linear-gradient(to bottom,aqua,white);">bbackground-image: linear-gradient(to bottom,aqua,white);</div>
<div style="background-image: linear-gradient(45deg,aqua,yellow,white);">background-image: linear-gradient(45deg,aqua,yellow,white);</div>
#idBorder > div {
width: 400px;
height: 30px;
border: solid 4px black;
}
<div></div>
<div style="border-width: 8px">border-width: 3px</div>
<div style="border-left-width: 8px">border-width: 3px</div>
<div style="border-bottom-style: dotted">border-bottom-style: dotted</div>
<div style="border-style: dashed">border-style: dashed</div>
<div style="border-style: double">border-style: double</div>
<div style="border-style: groove">border-style: groove 刻み</div>
<div style="border-style: ridge">border-style: ridge 飛び出し</div>
<div style="border-style: inset">border-style: inset 沈み</div>
<div style="border-style: outset">border-style: outset 飛び出し</div>
<div style="border-color: blue">border-color: blue</div>
<div style="border-top-color: red">border-top-color: red</div>
<div style="border: 1px dotted red">border: 1px dotted red</div>
<div style="border-left: 1px dotted red;">border-left: 1px dotted red</div>
<div style="border-radius:10px;">border-radius:10px;</div>
<div style="border-left: 1px dotted red; border-radius:10px;">border-left: 1px dotted red; border-radius:10px;</div>
<div style="border-top-left-radius:10px;">border-top-left-radius:10px;</div>
<div style="box-shadow: 0px 0px 4px 4px gray;">box-shadow: 0px 0px 4px 4px gray;</div>
<div style="box-shadow: 4px 0px 4px 4px gray;">box-shadow: 4px 0px 4px 4px gray;</div>
<div style="box-shadow: 4px 4px 4px 0px gray;">box-shadow: 4px 4px 4px 0px gray;</div>
<div style="box-shadow: 4px 4px 0px 4px gray;">box-shadow: 4px 4px 0px 4px gray;</div>
<div style="box-shadow: 4px 4px 4px 0px gray inset;">box-shadow: 4px 4px 4px 0px gray inset;</div>
.clsOutline1:focus {
outline-width: 5px;
outline-style: solid;
outline-color: green;
}
.clsOutlineOffset:focus {
outline-offset: 3px;
}
.clsOutline2:focus {
outline: 6px double powderblue;
}
.clsHrefWrite::after {
content: attr(href);
}
.clsAddContents::before {
content: url(r.png)
} .clsAddContents::after {
content: ' afterによる追加なのだ' url(y.png)
}
<b>アウトライン</b>
<input type="text" class="clsOutline1">
<input type="text" class="clsOutline1 clsOutlineOffset">
<input type="text" class="clsOutline2">
<b>追加コンテンツ</b>
<a class="clsHrefWrite" href="https://www.google.com/?hl=ja"></a>
<span class="clsAddContents">span</span>
<b>カーソル</b>
<div>
<span style="cursor: crosshair;">cross</span>
<span style="cursor: pointer;">pointer</span>
<span style="cursor: move;">pointer</span>
<span style="cursor: help;">help</span>
<span style="cursor: no-drop;">no-drop</span>
<span style="cursor: col-resize;">col-resize</span>
<span style="cursor: row-resize;">row-resize</span>
</div>
<b>エリア指定 box-sizing</b>
<div style="width:50px; height:50px; padding:10px; border:6px solid gray;">none</div>
<div style="width:50px; height:50px; padding:10px; border:6px solid gray; box-sizing:content-box">content-box</div>
<div style="width:50px; height:50px; padding:10px; border:6px solid gray; box-sizing:border-box;">border-box</div>
<b>resize</b>
<div style="width:50px; height:50px; border:6px solid gray; resize:both; overflow:hidden;">resize:both</div>
<b>領域を超えたテキスト</b>
<div style="width:50px; height:50px; border:6px solid gray; text-overflow:ellipsis; overflow:hidden;">text-overflow:ellipsis</div>
<img src="z.png" style="transform:rotate(30deg)">
<img src="z.png">
<img src="z.png" style="transform:rotate(-30deg); transform-origin: 92px 0px">
#idTransition1 {
transition-property: background-color margin-left;
transition-duration: 0.3s;
transition-timing-function: linear;
}
.clsTransition:hover {
background-color: gold;
margin-left: 30px;
}
#idTransition2 {
transition-property: background-color margin-left;
transition-duration: 3s;
transition-timing-function: linear;
}
#idTransition3 {
transition-property: background-color margin-left;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
}
#idTransition4 {
transition-property: background-color margin-left;
transition-duration: 0.3s;
transition-timing-function: linear;
transition-delay: 0.3s;
}
#idTransition5 {
transition: background-color,margin-left 0.3s linear;
}
<div id="idTransition1" class="clsTransition">background-color margin-left 0.3s linear</div>
<div id="idTransition2" class="clsTransition">background-color margin-left 3s linear</div>
<div id="idTransition3" class="clsTransition">background-color margin-left 0.3s ease-in-out</div>
<div id="idTransition4" class="clsTransition">background-color margin-left 0.3s linear 0.3s</div>
<div id="idTransition5" class="clsTransition">background-color,margin-left 0.3s linear</div>