CSS

 Computer >> コンピューター >  >> プログラミング >> CSS
  1. CSSを使用したFirst-Lettersのスタイリング::first-letter

    CSSは、::first-letter疑似要素を使用して要素の最初の文字のスタイルを設定するのに役立ちます。句読点、有向グラフ、およびコンテンツプロパティによって、最初の文字が変更される可能性があることに注意してください。 次の例は、CSS::first-letter疑似要素を示しています。 例 <!DOCTYPE html> <html> <head> <style> body {    text-align: center; } ::first-letter {    font-size: 3em;

  2. CSSを使用して魅力的な最初の行を作成する::first-line

    CSS ::first-line pseudo-elementは、要素の最初の行のスタイルを設定するのに役立ちます 次の例は、CSS::first-line疑似要素を示しています。 例 <!DOCTYPE html> <html> <head> <style> body {    text-align: center;    background-color: darkorchid; } ::first-line {    font-size: 2em;    co

  3. CSSで兄弟要素を選択する

    最初のセレクターの直後にある要素を照合する場合は、隣接する兄弟セレクター（+）を使用します。ここでは、両方のセレクターが同じ親要素の子です。 CSS隣接兄弟コンビネータの構文は次のとおりです- Selector + Selector{    attribute: /*value*/ } 2番目に選択した要素の位置に関係なく、同じ親の兄弟を選択する場合は、CSSの一般的な兄弟コンビネータを使用します。 CSSの一般的な兄弟コンビネータの構文は次のとおりです- Selector ~ Selector{    attribute: /*value*/ }

  4. CSSを使用した子要素の選択

    CSS子コンビネータは、親要素のすべての子要素を選択するために使用されます。 CSS子コンビネータの構文は次のとおりです。 セレクター{属性：/*値*/} CSS子孫コンビネータは、親要素のすべての子孫を選択するために使用されます CSS子孫コンビネータの構文は次のとおりです セレクターセレクター{属性：/*値*/} 例 次の例は、CSSの子と子孫のコンビネータを示しています。 * {text-align：center;ボーダー：10pxグルーブトマト;} ::first-line {box-shadow：inset 0 0 7px cornflowerblue;}

  5. CSS：focus-疑似クラス内

    フォーカスされた要素の親のスタイルを設定する場合は、CSS：focus-withinpseudo-classを使用します。 次の例は、CSS：focus-withinpseudo-classを示しています。 例 <!DOCTYPE html> <html> <head> <style> form {    margin: 2%;    padding: 2%;    display: flex;    flex-direction: column;   &

  6. オブジェクトフィットとオブジェクト位置を使用してCSSで画像を切り抜く

    CSS object-fit およびオブジェクトの位置 プロパティは、画像を切り抜いて、要素での表示方法を指定するのに役立ちます。 CSSobject-fitプロパティの構文は次のとおりです- Selector {    object-fit: /*value*/    object-position:/*value*/ } 例 次の例は、CSSobject-fitプロパティを示しています。 <!DOCTYPE html> <html> <head> <style> img {   &nb

  7. CSSでのデータ属性（data- *）の使用

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

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

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

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

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

  10. 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

  11. 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

  12. 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

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

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

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

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

  15. 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を明示的に指定する必要があります。 構

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

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

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

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

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

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

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

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

  20. 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

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