CSS

 Computer >> コンピューター >  >> プログラミング >> CSS
  1. CSSのさまざまなメディアタイプ

    CSSメディアタイプは、ドキュメントがレンダリングされるデバイスタイプであり、すべてのメディアタイプに対して特定のスタイルを定義できます。 以下は、CSS3およびメディアクエリ4のメディアタイプです- Sr.No 値と説明 1 すべて スタイルシートはすべてのメディアタイプのデバイスに適用されます 2 印刷 スタイルシートはプリンターに適用されます 3 画面 スタイルシートは、コンピューターの画面、タブレット、スマートフォンなどに適用されます。 4 スピーチ スタイルシートは、ページを大声で「読み取る」スクリーンリーダーに適用

  2. CSSイメージスプライトを作成して使用する方法

    CSS Image Spriteは、ドキュメントページ内のすべての画像を組み合わせた画像ファイルです。画像リソースは一度だけロードする必要があるため、画像スプライトが付属していると便利です。 CSSの背景を使用して、結合された画像のさまざまな部分を表示できます。 CSS画像スプライトの例を見てみましょう- 例 <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .sprite {    back

  3. CSSの：last-child疑似クラス

    CSS：last-child疑似クラスは、他の要素の最後の子要素である要素を選択します。 構文 以下は構文です- :last-child{    /*declarations*/ } CSSの最後の子の疑似クラスの例を見てみましょう- 例 <!DOCTYPE html> <html> <head> <style> table {    margin: auto;    padding: 10px;    border: hsl(54, 100%, 50%) sol

  4. CSSビジュアルフォーマットを理解する

    CSS Visual Formattingは、ドキュメントの各要素を処理および変換して、CSSボックスモデルに準拠する1つ以上のボックスを生成するアルゴリズムに対応するモデルです。 処理された要素のCSSボックス生成- ブロックレベル これらの要素は、コンテンツがそれを必要としない場合でも、それら自体の上下に改行を強制し、使用可能な全幅を占有します。 例：分割（）、見出し（から）など インラインレベル これらの要素は、要素の上下に改行を強制せず、コンテンツに必要な幅のみを使用します。 例：スパン（）、強力な要素（） ブロックレベルのボックス生成の例を見てみましょう- 例 &

  5. 要素はHTMLでどのように浮かんでいますか？

    CSS floatプロパティを使用して、要素を含む親要素の左側または右側にフロートさせることができます。他の要素はフロートされたコンテンツの周りに配置されます。 同じ値のfloatプロパティが有効になっている複数の要素は、すべて隣接して配置されます。 例 CSSFloatプロパティの例を見てみましょう- <!DOCTYPE html> <html> <head> <title>CSS Float</title> <style> form {    width:70%;    ma

  6. CSSのmarginプロパティを使用した中央揃え

    CSSのmarginプロパティを使用して、ブロックレベルの要素を水平方向に中央揃えできますが、その要素のCSSwidthプロパティを設定する必要があります。 CSSマージンプロパティを使用して要素を中央に配置する例を見てみましょう- 例 <!DOCTYPE html> <html> <head> <title>Center Alignment using CSS Margin</title> <style> #yinyangSymbol {    width: 100px;    

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

    フォントサイズをピクセル単位で指定して、テキストが特定のピクセル数のみを使用するようにすることができます。ピクセルサイズは、画面の解像度と、ブラウザがそれを計算するために使用するアルゴリズムに基づいています。 構文 CSSfont-sizeプロパティの構文は次のとおりです- Selector {    font-size: /*value*/ } 例 次の例は、CSSのfont-sizeプロパティがピクセル単位で設定される方法を示しています- <!DOCTYPE html> <html> <head> <style> sp

  8. CSSでのテーブルレイアウトの制御

    CSS table-layoutプロパティは、テーブルの行、列、およびセルをレイアウトするためにブラウザが使用するアルゴリズムを定義するためのものです。これにより、テーブルのレイアウトを制御できます。 構文 CSStable-layoutプロパティの構文は次のとおりです- Selector {    table-layout: /*value*/ } 次の例は、CSSテーブルレイアウトプロパティ-を示しています。 例 <!DOCTYPE html> <html> <head> <style> table {  

  9. CSSユニットを理解する

    CSSユニットには、フォントサイズ、文字サイズ、ビューポートサイズなど、さまざまなカテゴリがあります。大きく分けて、上記のサブカテゴリで構成される絶対単位と相対単位の2つのカテゴリがあります。 以下はCSSの絶対単位です- Sr.No ユニットと名前 1 cm センチメートル（1 cm =100 mm） 2 in インチ（1インチ=2.54 cm） 3 mm ミリメートル 4 pc パイカ（1個=12ポイント） 5 pt ポイント（1ポイント=1/72インチ） 6 p

  10. CSSを使用した空のセルの処理

    CSSのempty-cellsプロパティは、テーブルの空のセルの表示を指定するために使用されます。 CSSのempty-cellsプロパティの構文は次のとおりです- 構文 Selector {    empty-cells: /*value*/ } 例 次の例は、CSSのempty-cellsプロパティ-を示しています。 <!DOCTYPE html> <html> <head> <style> table, table * {    border: groove; } table {   &n

  11. CSSセレクターと宣言を理解する

    CSSセレクターは、特定のパターンの各要素を照合することでHTML要素を選択するために使用されます。セレクター内でプロパティとその値を宣言することにより、スタイルを定義します。 構文 スタイルを宣言するための構文は次のとおりです- Selector { property: value; } CSSには、単純なセレクター、属性セレクター、疑似クラス、疑似要素、および標準のコンビネーターによるセレクターの組み合わせがあります。次の表に、セレクターの一部を示します- セレクター セレクターのタイプ 説明 * ユニバーサルセレクター すべての要素に一致します e タイプセ

  12. CSSの：lang疑似クラス

    CSS：lang（）疑似クラスセレクターは、lang属性が指定された要素を選択するために使用されます。これにより、コンテンツに関連付けられている特定の言語をターゲットにして、それに応じてスタイルを設定できます。 構文 以下は構文です- :lang(){    /*declarations*/ } CSS：lang（）疑似クラスセレクターの例を見てみましょう- 例 <!DOCTYPE html> <html> <head> <style> p:lang(it)::after {    padding: 2

  13. CSSコメント

    CSS宣言にコメントを書き込んで、読みやすさを向上させ、理解しやすくすることができます。 CSSは、コンテンツがアスタリスクで囲まれているスラッシュで開始および終了するコメントのC言語スタイルの構文に従います。 /**/内に記述された宣言はすべて無視されます。 構文 CSSコメントの構文は次のとおりです- /*Comments*/ 次の例はCSSコメントを示しています- 例 <!DOCTYPE html> <html> <head> <style> ul {    list-style: none; /*To remove

  14. 要素のスタイル設定にCSSセレクターを使用するにはどうすればよいですか？

    CSSセレクターを使用すると、好みに基づいて目的の要素を具体的にスタイル設定できます。 HTMLDOMの要素を選択するにはさまざまな方法があります。 構文 CSSセレクターの構文は次のとおりです- Selector {    /*declarations*/ } 次の例は、スタイリング要素のCSSセレクターを示しています- 例 <!DOCTYPE html> <html> <head> <style> #one {    filter: invert(85%); } </style> <

  15. CSS疑似要素

    最初の文字、最初の行、またはその前後に挿入するなど、要素の特定の部分のスタイルを設定できます。これらの目的のために、CSS疑似要素が使用されます。 注 − CSS疑似クラスを疑似要素から分離するために、CSS3では、疑似要素はダブルコロン表記を使用します。 構文 以下は、要素でCSS疑似要素を使用するための構文です- Selector::pseudo-element {    css-property: /*value*/; } 以下は、利用可能なすべてのCSS疑似要素です- Sr.No 疑似要素と説明 1 後 言及された各要素のコンテンツの後

  16. CSSの可視性と表示

    すべてのHTML要素にはデフォルトの表示値が設定されており、CSS Displayプロパティでオーバーライドできます。同様に、すべての要素の可視性はデフォルトとして可視に設定されますが、これはCSSVisibilityプロパティでオーバーライドすることもできます。 CSSDisplayプロパティの値は次のとおりです- Sr.No 値と説明 1 インライン 要素をインライン要素（など）として表示します。高さと幅のプロパティは、定義されている場合は効果がありません。 2 ブロック 要素をブロック要素（など）として表示し、改行を強制します 3 コン

  17. CSSを使用したオーバーフローコンテンツの処理

    CSSオーバーフロープロパティを使用して、要素のオーバーフローコンテンツを管理/処理できます。このプロパティを使用すると、ユーザーはコンテンツをクリップしたり、クリップしたコンテンツを表示するためのスクロールバーを提供したり、コンテンツをコンテナの外にレンダリングしたりできるため、名前がオーバーフローします。 構文 CSSオーバーフロープロパティの構文は次のとおりです- Selector {    overflow: /*value*/ } CSSオーバーフロープロパティの例を見てみましょう- 例 <!DOCTYPE html> <html> &

  18. CSSボーダーとアウトラインの違いを理解する

    CSS borderプロパティは、要素のborderプロパティを定義するために使用されます。これは、border-width、border-style、border-colorの省略形です。個々の辺の境界線のスタイルを設定したり、境界線の半径を指定したりできます。 一方、CSSアウトラインはスペースをとらず、設定されている場合は境界線の周りに表示されます。オフセットをサポートします。さらに、個々の側面に輪郭を付けるかどうかを指定することはできません。 デフォルトでは、境界線とアウトラインの両方は表示されません。 構文 CSSのborderおよびoutlineプロパティの構文は次のとおりで

  19. CSSディメンションのプロパティ

    CSSの幅、高さ、最大高さなどのいくつかのプロパティを使用すると、ユーザーは要素コンテンツボックスのサイズを制御できます。 CSSのmax-heightプロパティの例を見てみましょう- 例 <!DOCTYPE html> <html> <head> <title>CSS max-height</title> <style> form {    width:70%;    margin: 0 auto;    text-align: center; } * { &

  20. CSSで行の高さを設定する

    線の高さは、CSSのline-heightプロパティで定義できます。正の値のみを受け入れます。 構文 CSSのline-heightプロパティの構文は次のとおりです- Selector {    line-height: /*value*/ } 例 次の例は、CSSのline-heightプロパティを示しています。 <!DOCTYPE html> <html> <head> <style> div * {    margin: 1.5em;    box-shadow: -13px

Total 1566 -コンピューター  FirstPage PreviousPage NextPage LastPage CurrentPage:22/79  20-コンピューター/Page Goto:1 16 17 18 19 20 21 22 23 24 25 26 27 28