CSS

 Computer >> コンピューター >  >> プログラミング >> CSS
  1. CSSでのデータ属性（data- *）の使用

    data- *属性を使用して、要素に関する追加情報を格納できます。次の例は、CSSデータ-*属性を示しています。 例 <!DOCTYPE html> <html> <head> <style> dl {    margin: 2%; } p {    width: 60%;    background-color: lightgreen;    padding: 2%;    color: white;    text-alig

  2. CSSを使用したスクロールアンカーの無効化

    Webブラウザが提供するデフォルトのスクロールアンカーを無効にするには、オーバーフローアンカーを使用できます。 プロパティ。 例 次の例は、オーバーフローアンカープロパティのアイデアを示しています- <!DOCTYPE html> <html> <head> <style> body {    overflow-anchor: none; } div{    display: flex;    flex-direction: row; } </style> </hea

  3. CSSポインターイベントプロパティでマウスとタッチを許可するかどうかの制御

    CSSのpointer-eventsプロパティを使用して、要素でマウスとタッチを許可するかどうかを制御できます。 CSSポインタイベントプロパティの構文は次のとおりです- pointer-events: auto|none; 上記、 自動 デフォルトです。要素はポインタイベントに反応しますが、 なし： 要素はポインタイベントに反応しません 例 次の例は、CSSのpointer-eventsプロパティを示しています。 <!DOCTYPE html> <html> <head> <style> a {    margin

  4. CSScaret-colorでカーソルの色を変更する

    挿入カレットの色を変更するには、CSScaret-colorプロパティ 使用されます。 例 次の例は、CSSのcaret-colorプロパティを示しています。 <!DOCTYPE html> <html> <head> <style> form {    padding: 2%;    margin: 2%;    text-align: center; } form:focus-within {    box-shadow: 0 0 10px rgba(0,0,0

  5. CSStab-sizeプロパティを使用したHTMLでのタブサイズの設定

    CSSタブサイズプロパティ タブで使用される空白の量を設定できます。次の例は、CSSのtab-sizeプロパティを示しています。 例 <!DOCTYPE html> <html> <head> <style> body {    display: flex;    flex-direction: column; } p {    white-space: pre; } p:last-of-type {    tab-size: 32;    -mo

  6. text-align＆text-justify CSSプロパティを使用してテキストを揃える方法は？

    CSS text-justify プロパティは、要素の位置合わせタイプを指定するのに役立ちます。 text-alignプロパティは、要素内のテキストの水平方向の配置を設定します。 例 次の例は、CSSのtext-justifyプロパティを示しています。 <!DOCTYPE html> <html> <head> <style> article {    margin: 3%;    background-color: peachpuff;    text-align: justif

  7. CSSハイフンプロパティを使用してテキストにハイフンを追加する

    CSSのハイフンの使用 プロパティでは、テキストにハイフンを追加する方法を指定できます。 例 次の例は、CSSハイフンプロパティを示しています。 <!DOCTYPE html> <html> <head> <style> div {    width: 20%;    border: 2px groove lime;    margin: 10px;    padding: 10px;    hyphens: none;    

  8. CSStext-indentプロパティでテキストをインデントする

    CSSのテキストインデント プロパティを使用すると、テキストをインデントする際の空白の量を指定できます。 例 次の例は、CSSのtext-indentプロパティを示しています。 p {text-indent：15％;} article {background-color：＃000000;マージン：2％;したがって、多くのエロスはティーンエイジャーの素敵な谷です。フェリーが大量になるにつれて教室ではありません。それは、最初は悲しい、柔らかい場所の境界にありました 出力 これにより、次の結果が生成されます- 例 p {マージン：2％;テキストインデント：13％;ボーダ

  9. CSSの更新-テキストの装飾と下線をスタイリングするための新しいプロパティ

    次のテキスト装飾プロパティの導入により、以前よりも多くの方法でテキストのスタイルを設定できるようになりました。 text-decorationは、text-decoration-thickness、text-decoration-color、text-decoration-line、およびtext-decoration-styleの省略形です。 text-decoration-skip、text-decoration-skip-ink、text-decoration、text-underline-offset、text-underline-positionを明示的に指定する必要があります。 構

  10. CSSを使用してWebサイトのダーク/ライトモードを作成する方法

    ページのテキストの色と背景色を変更することで、Webサイトにダーク/ライトモードを追加できます。 構文 次の構文を使用して、ダークモードを適用できます。 Selector {    color: white;    background-color: black } 例 <!DOCTYPE html> <html>    <head>       <style>          div {  

  11. CSSを使用したモバイルブラウザでのプルツーリフレッシュ機能の無効化

    CSS overscrollbehaviorプロパティを使用して、Webページの境界領域をスクロールする出力を変更できます。これにより、ブラウザでプルトゥリフレッシュを無効にできます。 CSSoverscroll-behaviorプロパティの構文は次のとおりです- Selector { overscroll-behavior: /*value*/ } 例 次の例は、CSSのoverscroll-behaviorプロパティを示しています。 <!DOCTYPE html> <html> <head> <style> div {  

  12. 2020年のWebデザインのための最新のCSSプロパティとAPI

    開発者がJavaScriptとCSSを組み合わせてWebサイトをカスタマイズできるように、新しいCSSプロパティが開発され、人気のあるブラウザーをサポートするようになりました。これらのいくつかを以下に示します- フォーカス-範囲内 要素内のフォーカスアクセシビリティを解決することを目的としています スクロールスナップ これにより、ネイティブのスクロールと減速が可能になります @media（prefers- *） ユーザーのデバイス設定に応じてページのUIとUXの両方を設定できるため、より高いレベルのパーソナライズが可能になります。 *ライトレベル、強制色、配色、コントラスト、動きの減

  13. 特定のクラス/属性/タイプを持たない要素を選択するためのCSSセレクター

    CSS：not（）疑似クラスを使用すると、特定の値を持たない要素やセレクターと一致しない要素を選択することで、スタイルを調整できます。 例 次の例は、CSSを示しています：疑似クラスではありません。 <!DOCTYPE html> <html> <head> <style> p {    background-color: cornflowerblue;    color: white; } p:not(div>p) {    background-color: khaki; &

  14. CSSのスクロールでヘッダーが固定されたHTMLテーブル

    postion：stickyとtop：0を設定することで、HTMLテーブルのスクロールに固定ヘッダーを作成できます。 例 次の例は、これを実装する方法のアイデアを示しています- <!DOCTYPE html> <html> <head> <style> div {    color: white;    display: flex;    padding: 2%;    background-color: rgba(190,155,150);   &nbs

  15. CSSの疑似クラスと疑似要素の違い

    疑似クラス 疑似クラスは、：hover、：active、：last-childなどのセレクターの状態を表します。これらは単一のコロン（:)で始まります。 CSS疑似クラスの構文は次のとおりです- :pseudo-class{ attribute: /*value*/ } 疑似要素 同様に、疑似要素は、::after、::before、::first-lineなどの仮想要素を選択するために使用されます。 これらは二重コロン（::）で始まります。 CSS疑似要素の構文は次のとおりです- ::pseudo-element{ attribute: /*value*/ } 例 次

  16. CSSでテキストボックスのプレースホルダーの色を変更する方法

    ::placeholder疑似要素を使用して、テキストボックスのプレースホルダーテキストの色を変更できます。 CSS::placeholder疑似要素の構文は次のとおりです- ::placeholder { attribute: /*value*/ } 例 次の例は、CSS::プレースホルダー疑似要素を示しています。 <!DOCTYPE html> <html> <head> <style> input:last-child::placeholder {    color: cornflowerblue; } <

  17. CSSでチェックマーク/チェックマークを作成する方法

    CSSを使用してカスタマイズされたチェックマークを作成できます。次の例は、この効果を示しています- 例 <!DOCTYPE html> <html> <style> div {    margin: 2%;    position: relative;    width: 40px;    height: 40px;    box-shadow: inset 0 0 12px lightblue; } div::before {    co

  18. CSSの使用：placeholder-空のテキスト入力のスタイルをカスタマイズするために表示

    プレースホルダーを持つ入力テキストボックスのスタイルをカスタマイズするには、CSSの：placeholder-shown疑似クラスを使用します。 例 次の例は、CSS：placeholder-shownpseudo-classを示しています。 <!DOCTYPE html> <html> <head> <style> input:placeholder-shown {    border-color: dodgerblue; } input:nth-of-type(even):placeholder-shown { &nbs

  19. CSSFlexを使用して要素をコンテナの下部に配置する方法

    構文 CSSflexプロパティの構文は次のとおりです- Selector {    flex: /*value*/ } 例 次の例は、CSSフレックスプロパティを示しています。 <!DOCTYPE html> <html>    <head>       <style>          div {             display: flex;  

  20. CSSFlexを使用してコンテナの左右の配置を作成する方法

    構文 CSSflexプロパティの構文は次のとおりです- Selector {    flex: /*value*/ } 次の例は、CSSフレックスプロパティを示しています。 例 <!DOCTYPE html> <html>    <head>       <style>          #container {             display: flex;

Total 1584 -コンピューター  FirstPage PreviousPage NextPage LastPage CurrentPage:4/80  20-コンピューター/Page Goto:1 2 3 4 5 6 7 8 9 10