CSS

 Computer >> コンピューター >  >> プログラミング >> CSS
  1. CSS表示プロパティの操作

    CSS Displayプロパティは、要素がWebページにどのように表示されるかを設定するために使用されます。その値の一部がここに表示されます- Sr.no プロパティ値 説明 1 インライン 要素をインライン要素として表示します。 2 ブロック 要素をブロック要素として表示します。 3 コンテンツ コンテナを非表示にして、要素の子要素をDOMの次のレベルの子にします 4 フレックス 要素をブロックレベルのフレックスコンテナとして表示します 5 グリッド 要素をブロックレベルのグリッドコンテナとして表示します 6 インラインブロック

  2. CSSを使用してインラインブロックを表示する

    display inline-blockプロパティ値で設定された要素は、要素をインラインレベルのブロックコンテナとして表示するために使用されます。 例 CSSでインラインブロックプロパティ値を実装する例を見てみましょう- <!DOCTYPE html> <html> <head> <style> p {    background-color: orange;    color: white; } p.demo {    display: inline-block; } </st

  3. CSSを使用してテーブルの境界線を折りたたむ

    テーブルの境界線を折りたたむには、CSSのborder-collapseプロパティを使用します。テーブルの境界線を折りたたむ例を見てみましょう- 例 <!DOCTYPE html> <html> <head> <style> table {    border-collapse: collapse;    background-color: black;    color: white; } th, td {    border: 2px dashed yellow;

  4. CSSskew（）関数

    スキュー（）関数は、2Dの場所で要素をスキューするために使用されます。適用するスキューの量をskew（）関数のパラメーターとして設定します。 例 <!DOCTYPE html> <html> <head> <style> .translate_img {    transform: translate(50px, 10%); } .skew_img {    transform-origin: top left;    transform: skew(45deg, 0); } </

  5. CSSでピクセルを使用してフォントサイズを設定する

    CSSでfont-sizeプロパティを設定するには、pixels（px）も使用できます。これは、テキストのピクセル精度が必要な場合に役立ちます。 例 ピクセルでフォントサイズを設定する例を見てみましょう- <!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:

  6. CSSを使用したテーブルレイアウトの制御

    テーブルレイアウトを制御するには、table-layoutプロパティを使用します。レイアウトは-として設定できます table-layout: auto|fixed|initial|inherit; 例 ここで、値auto-を使用してテーブルレイアウトを制御する例を見てみましょう。 <!DOCTYPE html> <html> <head> <style> table {    border-collapse: collapse;    background-color: black;   &n

  7. CSS rgb（）関数

    rgb（）関数は、RGBカラー値を設定するために使用されます。関数のパラメーターは、色の強度をパーセンテージまたは0から255までの値で設定します。 例 まず、CSSでrgb（）を実装する例を見てみましょう- <!DOCTYPE html> <html> <head> <style> div {    text-align: justify;    text-justify: inter-word;    color: rgb(213,33,33);    back

  8. CSS3を使用して画像のコントラストを調整する

    CSSで画像のコントラストを設定するには、フィルターのコントラスト（％）を使用します。値0は画像を黒くし、100％は元の画像とデフォルトを表すことを忘れないでください。残りは、任意の値を設定できますが、100％を超える値を使用すると、画像のコントラストが高くなります。 例 CSS3で画像のコントラストを調整する例を見てみましょう- <!DOCTYPE html> <html> <head> <style> img.demo {    filter: brightness(120%);    filter:

  9. CSS3を使用して画像にドロップシャドウを追加する

    CSS3の画像にドロップシャドウを追加するには、フィルタープロパティのドロップシャドウ値を使用します。次の値があります- h-シャドウ –水平シャドウのピクセル値を指定します。 v-shadow –垂直シャドウのピクセル値を指定します。負の値は、画像の上に影を配置します。 ぼかし –シャドウにぼかし効果を追加します。 拡散 -正の値ではシャドウが拡大し、負の値では縮小します。 色 –影に色を追加するには 例 <!DOCTYPE html> <html> <head> <style> img.demo {    f

  10. CSSのtext-justifyプロパティ

    CSSのtext-justifyプロパティは、text-alignプロパティがjustify値に設定されている場合に、テキストの位置揃え方法を設定するために使用されます。プロパティ値は次のとおりです- text-justify: auto|inter-word|inter-character|none|initial|inherit; 例 ここで、CSSでtext-justifyプロパティを実装する例を見てみましょう- <!DOCTYPE html> <html> <head> <style> div {    text-a

  11. CSSスクロール動作プロパティ

    scroll-behaviorプロパティは、スクロールの動作を設定するために使用されます。 scroll-behaviorプロパティに次の異なるプロパティ値を設定できます- scroll-behavior: auto|smooth|initial|inherit; 例 ここで、sroll-behaviorプロパティを実装する例を見てみましょう- <!DOCTYPE html> <html> <head> <style> html {    scroll-behavior: smooth; } #area1 {  

  12. CSS3 scale3d（）関数

    scale3d（）関数は、3D空間で要素をスケーリングするために使用されます。要素は、パラメータとして設定された数値に基づいてスケーリングされます。 例 <!DOCTYPE html> <html> <head> <style> .scale3d_img {    transform: scale3d(0.5, 1, 1.7); } </style> </head> <body> <h1>Learn</h1> <p>Learn Apache Spark&l

  13. CSSのポジショニング方法を理解する

    要素を配置するために、CSSには次の配置方法があります- CSSでの相対的な配置 相対配置では、要素は通常の位置を基準にして配置されます。これには、position：relativeを使用します。 例 <!DOCTYPE html> <html> <head> <style> div.demo {    position: relative;    color: white;    background-color: orange;    border: 2px d

  14. CSSを使用したテキスト変換

    CSSでのテキスト変換の場合、次の値でtext-transformプロパティを使用します- text-transform: none|capitalize|uppercase|lowercase|initial|inherit; 例 <!DOCTYPE html> <html> <head> <style> div {    line-height: 1.9;    text-transform: uppercase; } </style> </head> <body>

  15. CSS3のmatrix3d（）関数

    CSSのmatrix3d（）関数は、4x4の均質な3D変換行列を定義するために使用されます。 例 <!DOCTYPE html> <html> <head> <style> .demo_img {    transform: matrix3d(1,1,0,0,0,1,0,0,0,0,1,0,1,100,0,1); } </style> </head> <body> <h1>Learn</h1> <p>Learn Apache Spark</p>

  16. CSS rgba（）関数

    rgba（）は、赤、緑、青、およびアルファのRGBAカラー値を定義します。アルファは色の不透明度、つまり0.0から1.0の間の数値です。ここで、1.0は完全に不透明になります。 例 rgba（）関数を実装する例を見てみましょう- <!DOCTYPE html> <html> <head> <style> #demo1 {background-color: hsla(140, 100%, 50%, 0.8);} #demo2 {background-color: hsla(130, 100%, 50%, 0.6);} #demo3 {backgr

  17. CSSを使用した文字間隔

    文字、つまり文字の間にスペースを設定するには、文字間隔プロパティを使用します。プロパティ値は次のとおりです- letter-spacing: normal|length|initial|inherit; 例 <!DOCTYPE html> <html> <head> <style> p.demo1 {    letter-spacing: 1px; } p.demo2 {    letter-spacing: 10px; } </style> </head> <body>

  18. CSS3フィルター機能を理解する

    フィルタ関数は、コントラスト、明るさ、色相の回転、不透明度、画像などの要素に視覚効果を設定するために使用されます。ここで、いくつかのフィルタ関数を見てみましょう- コントラスト CSSで画像のコントラストを設定するには、フィルターのコントラスト（％）を使用します。値0は画像を黒くし、100％は元の画像とデフォルトを表すことを忘れないでください。残りは、任意の値を設定できますが、100％を超える値を使用すると、画像のコントラストが高くなります。 例 CSS3で画像のコントラストを調整する例を見てみましょう- <!DOCTYPE html> <html> <hea

  19. CSSを使用したテキストの色の設定

    テキストの色を設定するには、CSSのcolorプロパティを使用します。色は、色名、16進値、RGB値、またはHSL値を使用して設定できます。 例 <!DOCTYPE html> <html> <head> <style> span {    background-color: orange;    color: white; } p.demo {    display: none; } span.demo1 {    display: inline; } </s

  20. CSSの書き込みモードプロパティ

    書き込みモードプロパティは、テキストの行を水平方向に配置するか垂直方向に配置するかを設定するために使用されます。プロパティ値は-です writing-mode: horizontal-tb|vertical-rl|vertical-lr; 例 <!DOCTYPE html> <html> <head> <style> p {    writing-mode: vertical-rl; } </style> </head> <body> <h1>Demo Heading</h

Total 1566 -コンピューター  FirstPage PreviousPage NextPage LastPage CurrentPage:27/79  20-コンピューター/Page Goto:1 21 22 23 24 25 26 27 28 29 30 31 32 33