CSS

 Computer >> コンピューター >  >> プログラミング >> CSS
  1. CSS3を使用してオーバーフローテキストを壊す

    オーバーフローテキストを分割するには、word-wrapプロパティを使用して、値「break-word」に設定します。以下は、CSS3-を使用してオーバーフローテキストを分割する方法を表示するコードです。 例 <!DOCTYPE html> <html> <head> <style> div {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    border: 3px solid #3008c0; }

  2. CSS3を使用したボックスサイズ設定によるレイアウトの作成

    CSS3を使用してボックスサイズのレイアウトを作成するには、コードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <style> body{    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .container{    width: 500px;    border:8px solid rgb(35, 0, 100); } .border { &nbs

  3. CSSでカレンダーを作成するにはどうすればよいですか？

    CSSを使用してカレンダーを作成するには、コードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <style>    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    * {       box-sizing: border-box;    

  4. フレックスボックスを使用した高度なCSSレイアウト

    CSS3は、一般にFlexboxと呼ばれるレイアウトモードのFlexibleBoxを提供します。 Flexbox（フレキシブルボックス）はCSS3のレイアウトモードです。このモードを使用すると、複雑なアプリケーションやWebページのレイアウトを簡単に作成できます。コンテナ、フレックスアイテムなどが含まれます。コンテナには次のプロパティがあります- フレックス方向 フレックスラップ フレックスフロー justify-content 整列アイテム align-content 以下は、flexboxを使用した高度なCSSレイアウトのコードです- 例 &l

  5. CSSでレスポンシブタイムラインを作成するにはどうすればよいですか？

    CSSを使用してレスポンシブなタイムラインを作成するためのコードは、次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" event="width=device-width, initial-scale=1.0"> <style>    * {       box-sizing: border-box;    }    body { &

  6. CSSを使用したツールチップの構築

    ツールチップは、追加情報を設定するために使用されます。これは、訪問者がマウスポインタを要素の上に移動すると、Webページに表示されます。 以下は、CSSを使用してツールチップを構築するためのコードです- 例 <!DOCTYPE html> <html> <style> body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    text-align: center; } .toolTip {   &

  7. CSSでスキルバーを作成するにはどうすればよいですか？

    CSSでスキルバーを作成するためのコードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    * {       box-sizing: border-box;    }    body {    

  8. CSS3を使用した透明なボックス内のテキスト

    CSS3で透明なボックスにテキストを設定するには、コードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .transparentBox {    background: url("https://i.picsum.photos/id/249/1000/300.jpg")

  9. CSS3キーフレームアニメーションを作成する方法は？

    CSS3でキーフレームアニメーションを作成するには、個々のキーフレームを定義します。キーフレームは、CSS3の中間アニメーションステップを制御します。 以下は、CSS3を使用したキーフレームアニメーションの作成です- 例 <!DOCTYPE html> <html> <head> <style> div {    width: 100px;    height: 100px;    background: rgb(218, 78, 36);    border: 4

  10. CSSの不透明度/透明度

    CSS Opacity / Transparencyの場合、opacityプロパティが使用されます。たとえば、 opacity: 0.3; 以下は、CSSを使用した不透明度/透明度を示すコードです- 例 <!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } div {    width: 200px;   &

  11. CSSポインタ-イベントプロパティ

    pointer-eventsプロパティは、ポインタイベントがトリガーされたときに要素が何らかのアクションを実行するかどうかを指定します。ポインタイベントは、マウスのクリック、タッチ、スタイラスなどでトリガーできます。 以下は、CSSのpointer-eventsプロパティを示すコードです- 例 <!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-seri

  12. CSSポジショニング要素

    positionプロパティは、要素の配置に使用されます。つまり、以下はポジショニング要素です- 静的 −要素ボックスは、通常のドキュメントフローの一部として、前の要素と前の要素の後に配置されます。 相対 −要素のボックスは、通常の流れの一部として配置されてから、ある程度の距離だけオフセットされます。 絶対 −要素のボックスは、それを含むブロックに関連して配置され、ドキュメントの通常のフローから完全に削除されます。 修正済み −要素のボックスは絶対的に配置され、位置について説明されているすべての動作が絶対的です。 以下は、CSSを使用して要素を配置するためのコードで

  13. CSSシャドウ効果

    text-shadowプロパティとbox-shadowプロパティをそれぞれ使用して、テキストと要素に影を追加します。 以下はCSSのシャドウ効果のコードです- 例 <!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } h2 {    color: rgb(28, 0, 128);    text-s

  14. CSSでレスポンシブテーブルを作成するにはどうすればよいですか？

    CSSを使用してレスポンシブテーブルを作成するためのコードは、次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style>    body{       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, san

  15. CSSで比較表を作成するにはどうすればよいですか？

    CSSを使用してレスポンシブテーブルを作成するためのコードは、次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style>    table {       border-collapse: collapse;       border-spac

  16. フォームの入力要素内にアイコンを配置するCSS

    CSSを使用してフォームの入力要素内にアイコンを配置する方法を示すために、コードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/fontawesome. min.css" /> <style> body {    font-family: "Segoe

  17. CSSでフルスクリーンのビデオ背景を作成するにはどうすればよいですか？

    CSSを使用してフルスクリーンのビデオ背景を作成するには、コードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    * {       box-sizing: border-box;    }    body {

  18. CSSを使用したクロスブラウザの不透明度の設定

    プロパティの不透明度は最新のソリューションであり、Firefox 0.9以降、Safari 2、Opera 9以降、IE 9以降、およびすべてのバージョンのChromeで機能します。 -moz-opacityプロパティは、0.9より古いFirefoxバージョンの不透明度プロパティです。–khtml-opacityプロパティは、1から始まるサファリバージョン用です。filterプロパティは、不透明度のような効果を与える5〜9のIEブラウザ用です。現代の不透明度のフォールバックとしてこれらすべての値を一緒に使用すると、すべてのブラウザで不透明度を使用できます。 以下は、CSSを使用してクロスブラ

  19. CSSでトグルスイッチ（オン/オフボタン）を作成するにはどうすればよいですか？

    CSSでトグルスイッチを作成するためのコードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style>    .switch {       position: relative;       display: inline-block; &

  20. CSSでゼブラストライプテーブルを作成するにはどうすればよいですか？

    CSSを使用してゼブラストリップテーブルを作成するためのコードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style>    table {       border-collapse: collapse;       border-spa

Total 1566 -コンピューター  FirstPage PreviousPage NextPage LastPage CurrentPage:11/79  20-コンピューター/Page Goto:1 5 6 7 8 9 10 11 12 13 14 15 16 17