-
CSSの:n番目の子の疑似クラス
CSS:nth-child()疑似クラスは、他の要素のn番目の子要素である要素を選択します。 構文 以下は構文です- :nth-child(){ /*declarations*/ } 例 CSSの例を見てみましょう:nth-child()疑似クラス- <!DOCTYPE html> <html> <head> <title>CSS :nth-child() Pseudo Class</title> <style> form { width:70%;  
-
CSSの疑似要素とは何ですか
CSS疑似要素は、基本的に、最初の文字、最初の行など、要素の特定の部分のセレクターです。:afterおよび:before疑似要素を使用して、要素の前後にそれぞれ挿入できます。 構文 以下は、要素でCSS疑似要素を使用するための構文です- Selector::pseudo-element { css-property: /*value*/; } 例 CSS疑似要素の例を見てみましょう- <!DOCTYPE html> <html> <head> <style> ol, ul { list-st
-
HTMLページにCSSを含める方法
CSSをHTMLページに含めるには3つの方法があります。これらは-です インライン ここでは、要素のstyle属性でCSSスタイルを指定します。ただし、ファイルをモジュール化するには、CSSを内部または外部にリンクすることをお勧めします。 内部 HTMLドキュメントの内のタグにCSS仕様を含めることができます。 外部 タグを使用して、ローカルまたはサーバーに配置できる.cssファイルをリンクできます。ファイルの外部リンクを使用してファイルをリファクタリングすると、複数のWebページで使用できる共通のCSSファイルを作成できます。 構文 HTMLにCSSファイルを含めるための構
-
HTMLドキュメントにCSSを含める
HTMLドキュメントにCSSを含めるには、CSSを内部に含めるか、インラインに含めるか、外部ファイルにリンクします。 構文 HTMLにCSSファイルを含めるための構文は次のとおりです /*inline*/ <element style="/*declarations*/"></element> /*internal*/ <head> <style> /*declarations*/ </style> </head> /*external*/ <head> <link rel=&quo
-
CSSの要素タイプセレクター
CSS要素タイプセレクターは、タイプのすべての要素を選択するために使用されます。 CSS要素タイプセレクターの構文は次のとおりです 構文 element { /*declarations*/ } 例 次の例は、CSS要素タイプセレクターを示しています <!DOCTYPE html> <html> <head> <style> li { list-style: none; margin: 5px; border-bottom-style: do
-
CSSの子孫セレクター
CSS要素セレクターは、2番目のセレクターと一致する要素名を持つ最初の要素の子孫を選択するために使用されます。 構文 CSS子孫セレクターの構文は次のとおりです- element element { /*declarations*/ } 例 次の例は、CSSの子孫セレクター-を示しています。 <!DOCTYPE html> <html> <head> <style> div { float: right; margin: 25px; pad
-
CSSのoutline-widthプロパティ
overlay-widthプロパティは、要素の境界の周りに特定の太さの線を描画するように定義できますが、borderプロパティとは異なり、アウトラインは要素の寸法の一部ではありません。 構文 CSSのoutline-widthプロパティの構文は次のとおりです- Selector { outline-width: /*value*/ } 注- アウトラインスタイルプロパティは、アウトライン幅を宣言する前に定義する必要があります。 アウトライン幅プロパティの例を見てみましょう- 例 <!DOCTYPE html> <html> <hea
-
CSSのmin-widthプロパティ
CSSのmin-widthプロパティを使用して、要素のコンテンツボックスに固定の最小幅を定義できます。これにより、幅が最小幅よりも小さい場合でも、要素のコンテンツボックスを狭くすることはできません。 構文 CSSのmin-widthプロパティの構文は次のとおりです- Selector { min-width: /*value*/ } 例 CSSのmin-widthプロパティの例を見てみましょう- <!DOCTYPE html> <html> <head> <title>CSS min-width Property&l
-
CSSの絶対単位と相対単位
CSS絶対単位と相対単位はどちらも、距離単位のカテゴリに分類されます。 CSS相対単位は、別の要素を参照する要素の長さを定義します。 たとえば、 vh 相対単位はビューポートの高さを基準にしています。 以下はCSSの相対単位です- Sr.No 単位と相対値 1 % 親要素の寸法 2 em 要素のフォントサイズ 3 例 要素のフォントのエックスハイト 4 lh 要素の線の高さ 5 rem ルート要素のフォントサイズ 6 rlh ルート要素の線の高さ 7
-
CSSのmin-heightプロパティ
CSSのmin-heightプロパティを使用して、要素のコンテンツボックスに固定の最小の高さを定義できます。これにより、高さが最小の高さよりも小さい場合でも、要素のコンテンツボックスを小さくすることはできません。 構文 CSSのmin-heightプロパティの構文は次のとおりです- Selector { min-height: /*value*/ } 例 CSSのmin-heightプロパティの例を見てみましょう- <!DOCTYPE html> <html> <head> <title>CSS min-height
-
CSSのClearプロパティを使用してFloatをオフにする
CSS clearプロパティを使用して、フローコンテンツをクリアするfloat要素の側を指定できます。 例 CSSのクリアプロパティの例を見てみましょう- <!DOCTYPE html> <html> <head> <title>CSS Clear</title> <style type="text/css"> .clear { clear: left; } .yellow{ background-color: #FF8A00; } .red{ &n
-
CSSの中央、水平、垂直方向の配置
要素とそのコンテンツを水平、垂直、または中央に配置するためのさまざまなオプションを提供するCSSを使用して、要素またはその中のコンテンツを配置できます。 水平方向の配置 インライン要素 インライン要素またはテキスト、アンカー、スパンなどのインラインブロック要素は、CSStext-alignプロパティを使用して水平方向に整列できます。 ブロックレベルの要素 div、pなどのブロックレベルの要素は、CSSのmarginプロパティを使用して水平方向に配置できますが、要素の幅は、配置が不要になるため、親に対して100%であってはなりません。 フロートまたは位置スキームを使用したブロックレベル
-
CSSを使用した絶対測位
CSSでの要素の配置を絶対値として定義できます。これにより、最初に配置された(静的を除く)親を基準にして要素がレンダリングされます。ポジショニング方法が絶対値である要素は、CSSポジショニングプロパティ(左、右、上、下)によって配置されます。 例 CSS絶対測位方法の例を見てみましょう- <!DOCTYPE html> <html> <head> <style> p { margin: 0; position: absolute; top: 50%; &
-
CSSを使用したフローティング要素
CSS floatプロパティは、ボックスまたはコンテンツの配置またはフォーマットに使用されます。開発者は、CSSフロートを使用して要素を左または右に配置できます。 floatプロパティには、次のいずれかの値を指定できます- 左 −要素はコンテナの左側に浮かんでいます 正しい −要素はそのコンテナの右側に浮かんでいます なし −要素はフロートしません。デフォルト値です 継承 −要素はその親のfloat値を継承します 例 CSSFloatプロパティの例を見てみましょう- <!DOCTYPE html> <html> <head> <title&
-
CSSの:first-child疑似クラス
CSS:first-child pseudo-classは、他の要素の最初の子要素である要素を選択します。 構文 以下は構文です- :first-child{ /*declarations*/ } 例 CSSの最初の子の疑似クラスの例を見てみましょう- <!DOCTYPE html> <html> <head> <style> table { margin: auto; padding: 10px; border: hsl(54, 100%
-
CSSを使用した固定ポジショニング
CSSでの要素の配置を固定として定義し、ユーザーのビューポートを基準にして要素をレンダリングすることができます。ポジショニング方法が固定されている要素は、スクロールしても移動せず、CSSポジショニングプロパティ(左、右、上、下)によって配置されます。 例 CSS固定測位方法の例を見てみましょう- <!DOCTYPE html> <html> <head> <style> p { margin: 0; position: absolute; top: 50%; &nbs
-
CSSの要素の幅と高さ
CSSのheightプロパティとwidthプロパティは、要素の高さと幅をそれぞれ指定するために使用されます。 max-height、max-width、min-height、およびmin-widthプロパティを使用して、これらのプロパティの最大値と最小値を設定することもできます。 構文 CSSの高さとCSSの幅のプロパティの構文は次のとおりです- Selector { height: /*value*/ width: /*value*/ } 要素の実際の幅と高さは次のように計算されます- ボックスサイズ 計算 全幅 幅+パディン
-
CSSを使用して要素の周囲にマージンスペースを設定する
CSSのmarginプロパティは、選択した要素の境界の周りにマージン領域を設定するために使用されます。 marginプロパティは、margin-top、margin-right、margin-bottom、margin-leftの省略形です。 構文 CSSマージンプロパティの構文は次のとおりです- Selector { margin: /*value*/ } 次の例は、CSSマージンプロパティ-を示しています。 例 <!DOCTYPE html> <html> <head> <style> body * { &nbs
-
CSSマージンプロパティ
CSSマージンプロパティは、margin-top、margin-right、margin-bottom、およびmargin-leftの省略形です。これにより、要素の周囲のスペースを指定できます。個々の辺にマージンを設定することもできます。 構文 CSSマージンプロパティの構文は次のとおりです- Selector { margin: /*value*/ } 例 次の例は、CSSマージンプロパティ-を示しています。 <!DOCTYPE html> <html> <head> <style> div { &n
-
CSSの背景の添付ファイル
CSSのbackground-attachmentプロパティは、ビューポートに対してページをスクロールするときの背景画像の位置を指定するために使用されます。値をスクロール、固定、ローカルにすることができます。 構文 CSSbackground-attachmentプロパティの構文は次のとおりです- Selector { background-attachment: /*value*/ } 例 次の例は、CSSのbackground-attachmentプロパティ-を示しています。 <!DOCTYPE html> <html> <hea