-
CSS3のHSLAカラー値
HSLAカラー値は、色相、彩度、明度、およびアルファ用です。アルファは色の不透明度、つまり0.0から1.0の間の数値です。ここで、0.0は完全に透明な場合、1.0は完全に不透明な場合です。 例 <!DOCTYPE html> <html> <head> <style> #demo1 {background-color: hsla(140, 100%, 50%, 0.8);} #demo2 {background-color: hsla(130, 100%, 50%, 0.6);}
-
CSSのrotate()関数
CSSのrotate()関数は要素を回転させます。このパラメータは、回転の角度を設定します。値には、度、ラジアンなどがあります。 例 <!DOCTYPE html> <html> <head> <style> #demo1 {background-color: hsla(140, 100%, 50%, 0.8);} #demo2 {background-color: hsla(130, 100%, 50%, 0.6);} #demo3 {background-color: hsla(190, 100%, 50%, 0.4);} #demo4 {b
-
CSSでの固定位置
位置が設定された要素:固定;ページをスクロールしても同じ場所に留まります。 例 <!DOCTYPE html> <html> <head> <style> div.demo1 { position: relative; color: white; background-color: orange; border: 2px dashed blue; width: 600px; height: 2
-
CSSを使用したテキストのフォーマット
CSSでテキストをフォーマットするには、テキストの色、テキストの装飾、行の高さ、テキストの方向、テキストの配置などを変更できます。 いくつかの例を見てみましょう- テキストの配置 CSSを使用してテキストの配置を設定するには、text-alignプロパティを使用します。可能なプロパティ値は次のとおりです- text-align: left|right|center|justify|initial|inherit; 例 テキストの配置を設定する例を見てみましょう- <!DOCTYPE html> <html> <head> <style> .
-
CSSのscale()関数
CSSのscale()関数は、2D平面上の要素のサイズを変更する変換を定義するために使用されます。 scale()関数のパラメーターとして、各方向のスケーリング量を設定します。 例 <!DOCTYPE html> <html> <head> <style> .translate_img { transform: translate(100px, 10%); } .scale_img { transform: scale(1.2); background-color: y
-
CSSでEmを使用してフォントサイズを設定する
CSSでfont-sizeプロパティを設定するには、emを使用できます。これは、テキストのピクセル精度が必要な場合に役立ちます。デフォルトでは、1em =16px、2em=32pxです。 例 <!DOCTYPE html> <html> <head> <style> .demo { text-decoration: overline; text-decoration-color: yellow; font-size: 1.3em; } </style> &l
-
CSSのテキストで使用される装飾の種類を設定します
テキストに使用する装飾の種類を設定するには、text-decoration-lineプロパティを使用します。 CSSでは、テキスト装飾用に次のオプションがあります- text-decoration-line: none|underline|overline|line-through|initial|inherit; 例 <!DOCTYPE html> <html> <head> <style> .demo { text-decoration: overline underline; text-d
-
CSSを使用したデフォルトの表示値の変更
CSSのすべての要素にはデフォルトの表示値があり、簡単に変更できます。これは、表示プロパティ値を明示的に設定することで定義されます。地平線メニューのインライン表示プロパティ値を設定している例を見てみましょう- 例 <!DOCTYPE html> <html> <head> <style> p { background-color: orange; color: white; } li { display: inline; } </style> </he
-
CSSを使用してブロックを表示する
display property valueブロックを使用すると、要素が新しい行から始まります。それで、それは全幅を取ります。したがって、要素はブロック要素として表示されます。 例 CSSで表示ブロックを実装する例を見てみましょう- <!DOCTYPE html> <html> <head> <style> p { background-color: orange; color: white; } p.demo1 { display: block; } p.demo2
-
CSSでテキスト装飾のスタイルを設定します
テキスト装飾のスタイルを設定するには、text-decoration-styleプロパティを使用します。次の値を使用できます- text-decoration-style: solid|double|dotted|dashed|wavy|initial|inherit; 例 <!DOCTYPE html> <html> <head> <style> span { text-decoration: line-through; text-decoration-color: blue; } .demo
-
CSSでグリッドテンプレートプロパティを設定します
グリッドテンプレートプロパティを設定するには、行と列の数を指定する必要があります。それで、グリッドレイアウト内の領域も設定します。グリッドテンプレートの構文は同じ-を反映しています grid-template: none|grid-template-rows / grid-template-columns|grid-template-areas|initial|inherit; 例 グリッドテンプレートの例を見てみましょう- <!DOCTYPE html> <html> <head> <style> .grid-contai
-
CSSでグリッドレイアウト内の領域を設定します
グリッドレイアウト内の領域を設定するには、grid-template-areasプロパティを使用します。例を見てみましょう- 例 <!DOCTYPE html> <html> <head> <style> .demo { grid-area: newArea; } .grid-container { display: grid; grid-template-areas: 'newArea newArea . . .'  
-
CSSハイフンプロパティ
ハイフンプロパティは、テキストが複数行に折り返されるときに単語をハイフンでつなぐ方法を指定するために使用されます。次の値があります- hyphens: none|manual|auto|initial|inherit; 例 <!DOCTYPE html> <html> <head> <style> div { width: 50px; border: 2px dashed red; } .demo { -webkit-hyphens: manual; &n
-
CSS分離プロパティ
分離プロパティは、要素が新しいスタッキングコンテンツを作成する必要があるかどうかを定義するために使用されます。構文は次のとおりです- 構文 isolation: auto|isolate|initial|inherit; 例 <!DOCTYPE html> <html> <head> <style> .demo1 { background-color: orange; } #demo2 { width: 300px; height: 400px; } .demo3 {
-
CSSのobject-positionプロパティ
object-positionプロパティは、画像またはビデオを独自のボックス内に配置する方法を指定するために使用されます。 例 <!DOCTYPE html> <html> <head> <style> img.demo { width: 200px; height: 200px; object-fit: none; object-position: 10px 20%; border: 2px dashed yello
-
CSS3のHSLカラー値
HSLは、要素に色が設定されている場合の色相、彩度、明度を表します。色相の値は0〜260で、0または360は赤、240は青、120は緑です。彩度と明度はパーセンテージ値です。 例 HSLカラー値の例を見てみましょう- <!DOCTYPE html> <html> <head> <style> #demo1 {background-color: hsl(150, 100%, 50%);} #demo2 {background-color: hsl(150, 100%, 50%);} #demo3 {background-color: hsl(14
-
CSSの残りの音声メディアプロパティ
CSSのrest-afterプロパティは、音声メディアが要素の後に一時停止を設定するのに役立ちます。 構文は次のとおりです- rest-after: <time> | none | x-weak | weak | medium | strong | x-strong ここで、 x-weak |弱い|ミディアム|強い| x-strong 一時停止の強さによる残りです 休憩後の音声メディアプロパティの例を見てみましょう- h1 { rest-after: 15ms; } 時間は、一時停止をミリ秒単位で設定します。
-
CSSアニメーションを使用してvertical-alignプロパティをアニメーション化する
CSSを使用してvertical-alignプロパティにアニメーションを実装するには、次のコードを実行してみてください- 例 <!DOCTYPE html> <html> <head> <style> img { vertical-align: 80px; &n
-
CSSアニメーションを使用して変換プロパティをアニメーション化する
変換にアニメーションを実装するには CSSでプロパティを使用すると、次のコードを実行してみることができます- 例 <!DOCTYPE html> <html> <head> <style> div { margin: auto; border: 2
-
CSSの幅のプロパティをアニメーション化
幅でアニメーションを実装するには CSSでプロパティを使用すると、次のコードを実行してみることができます- 例 <!DOCTYPE html> <html> <head> <style> div { width: 300px; height: 25