CSS | コンピューター

CSSで一般的に使用される疑似クラス

以下は、一般的に使用される疑似クラスの一部です値説明：link このクラスを使用して、未訪問のリンクに特別なスタイルを追加します。：訪問済みこのクラスを使用して、訪問したリンクに特別なスタイルを追加します。：ホバーこのクラスを使用して、要素の上にマウスを置いたときに要素に特別なスタイルを追加します。：active このクラスを使用して、アクティブな要素に特別なスタイルを追加します。：focus このクラスを使用して、要素にフォーカスがあるときに要素に特別なスタイルを追加します。：first-c

CSSでの：first-child疑似クラスの使用

：最初の子を使用する他の要素の最初の子である要素に特別なスタイルを追加するための疑似クラス。例次のコードを実行して、：first-child疑似クラス-の使用法を理解することができます。 <html> <head> <style> div > p:first-child { &

CSSでの：lang疑似クラスの使用

：lang疑似クラスを使用して、指定した要素で使用する言語を指定します。このクラスは、特定の言語構成に対して異なる規則を持つ複数の言語にアピールする必要があるドキュメントで役立ちます。例次のコードを実行して、：lang疑似クラスの使用法を理解することができます <html> <head> <style> /* Two levels of quotes for two languages*/ &

CSS可視性プロパティの使用

可視性と呼ばれるプロパティ要素を非表示にすることができます。このプロパティをJavaScriptと一緒に使用して、非常に複雑なメニューと非常に複雑なWebページレイアウトを作成できます。可視性プロパティは、次の表にリストされている値を取ることができます値説明表示ボックスとその内容がユーザーに表示されます。非表示ボックスとそのコンテンツは非表示になりますが、ページのレイアウトには影響します。折りたたみこれは、動的なテーブルの列と行の効果でのみ使用されます。例次のコードを実行して、visibleの操作方法を学

CSSの可視性の使用：可視;

可視性値が表示されているプロパティ要素を表示するために使用されます。次のコードを実装して、 visibleを実装してみてください。プロパティ- 例 <html> <head> <style> p { visibility: hidden; }

CSSを使用してHTML要素を配置します

CSSは、HTML要素の配置に役立ちます。任意のHTML要素を任意の場所に配置できます。要素をページ内の自然な位置に対して相対的に配置するか、親要素に基づいて絶対的に配置するかを指定できます。例相対的なポジショニングの例を見てみましょう- <html> <head> </head> <body> <div style = "position:relative;left:70px

CSSポジショニング関連のプロパティ

CSSのポジショニング関連のプロパティは次のとおりです。相対ポジショニング相対配置は、通常表示される場所を基準にしたHTML要素の位置を変更します。したがって、「left：20」は要素の左位置に20ピクセルを追加します。絶対測位位置：の要素絶対値は、画面の左上隅を基準にして指定された座標に配置されます。固定ポジショニング固定位置を使用すると、スクロールに関係なく、要素の位置をページ上の特定の場所に固定できます。指定された座標は、ブラウザウィンドウを基準にしています。

CSSによる相対的な位置付け

相対配置は、通常表示される場所に対するHTML要素の位置を変更します。したがって、「left：20」は要素の左位置に20ピクセルを追加します。 2つの値を使用できますtop および左位置と一緒に HTML要素をHTMLドキュメント内の任意の場所に移動するためのプロパティ。左に移動-左には負の値を使用します。右に移動-左に正の値を使用します。上に移動-topに負の値を使用します。下に移動-topに正の値を使用します。例次のコードを実行して、相対ポジショニングを実装してみてください- <html> <head> &nbs

CSSによる絶対測位

位置がの要素：絶対画面の左上隅を基準にして指定された座標に配置されます。 2つの値を使用できますtop そして左位置と一緒に HTML要素をHTMLドキュメント内の任意の場所に移動するためのプロパティ。左に移動-左に負の値を使用します。右に移動-左に正の値を使用します。上に移動-topに負の値を使用します。下に移動-topに正の値を使用します。例次のコードを実行して、絶対測位を実装してみてください- <html> <head> </head> <

CSSによる固定ポジショニング

固定位置を使用すると、スクロールに関係なく、要素の位置をページ上の特定の場所に固定できます。指定された座標は、ブラウザウィンドウを基準にしています。上と左の2つの値を使用できます位置と一緒に HTML要素をHTMLドキュメント内の任意の場所に移動するためのプロパティ。左に移動-左には負の値を使用します。右に移動-左には正の値を使用します。上に移動-topに負の値を使用します。下に移動-topには正の値を使用します。例次のコードを実行して、固定ポジショニングを実装してみてください <html> <head&

CSSz-indexプロパティの使用

z-indexプロパティは位置とともに使用されますレイヤーの効果を作成するプロパティ。どの要素を上に、どの要素を下に配置するかを指定できます。例次のコードを実行して、 z-indexを実装してみてください。プロパティ- <html> <head> </head> <body> <div style = "background-color:blue; width:300px; height:100px;

CSS疑似クラスとは何ですか

CSS疑似クラスは、一部のセレクターに特殊効果を追加するために使用されます。これらの効果を使用するためにJavaScriptやその他のスクリプトを使用する必要はありません。最も一般的に使用される疑似クラスは- 値説明：link このクラスを使用して、未訪問のリンクに特別なスタイルを追加します。：訪問済みこのクラスを使用して、訪問したリンクに特別なスタイルを追加します。：ホバーこのクラスを使用して、要素の上にマウスを置いたときに要素に特別なスタイルを追加します。：active このクラスを使用して、アクティブな要素に特

CSSでの：link疑似クラスの使用

：link 疑似クラスは、未訪問のリンクに特別なスタイルを追加するために使用されます。可能な値は、任意の有効な形式の任意の色名です。例 <html> <head> <style> a:link { color:#000000; } </style> </head> <body>

CSSでテキスト行の高さを設定する

行の高さプロパティは、テキスト行の高さを設定するために使用されます。 line-heightの値プロパティには、数値、長さ、またはパーセンテージを指定できます。例 <html> <head> </head> <body> <p style = "width:300px; height:100px; border:2px solid green; padding:5px; margin:10px; line

CSSでボックスの最小高さを設定します

最小の高さプロパティは、ボックスの最小の高さを設定するために使用されます。 min-heightプロパティの値は、数値、長さ、またはパーセンテージにすることができます。例 <html> <head> </head> <body> <p style = "width:400px; min-height:150px; border:1px solid blue; padding:5px; margin:10px;

CSSを使用してレイヤーを作成する

CSSを使用してレイヤーを作成するには、次のコードを実行してみてください。 z-indexプロパティを使用しました例 <html> <head> </head> <body> <div style = "background-color:red; width:300px; height:100px; position:relative; top:10px; left:80px; z-index:2"&

CSSでのmargin-rightプロパティの使用

マージン右要素の右マージンを指定します。長さ、％、またはautoの値をとることができます。次のコードを実行して、右マージンを設定してみてください- 例 <html> <head> </head> <body> <p style = "margin-right: 10px; border:2px solid red;"> This

ボックスがCSSで使用できる最大幅を設定します

最大幅プロパティは、ボックスの最大幅を設定するために使用されます。 max-widthプロパティの値は、数値、長さ、またはパーセンテージにすることができます。例 <html> <head> </head> <body> <p style = "max-width:100px; height:200px; border:1px solid green; padding:5px; margin:10px;&quo

ボックスがCSSで使用できる最小幅を設定します

最小幅プロパティは、ボックスの最小幅を設定するために使用されます。 min-widthプロパティの値は、数値、長さ、またはパーセンテージにすることができます。例 <html> <head> </head> <body> <p style = "min-width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;"

ボックスのコンテンツがボックス自体よりも大きい場合にブラウザに何をするかを指示するために使用されるプロパティはどれですか？

CSSはオーバーフローと呼ばれるプロパティを提供しますこれは、ボックスの内容がボックス自体よりも大きい場合の対処方法をブラウザに指示します。このプロパティは、次のいずれかの値を取ることができます- 値説明表示コンテンツが含まれている要素の境界をオーバーフローできるようにします。非表示ネストされた要素のコンテンツは、含まれている要素の境界で切り取られ、スクロールバーは表示されません。スクロール含まれている要素のサイズは変更されませんが、スクロールバーが追加され、ユーザーがスクロールしてコンテンツを表示できるようになります。