CSS | コンピューター

CSSを使用して最初の要素を除くすべての要素を選択する方法：not（：first-child）セレクター

CSS `:not(:first-child)を使用して最初の要素を除くすべてのHTML要素を選択する方法を学びますセレクタ。次のルールセットをCSSスタイルシートに追加すると、Webサイト全体のすべてのh2要素の上部マージンが64ピクセルになります。 h2 { margin-top: 64px; } しかし、一般的にWebサイトの最初のh2要素にそのトップマージンを与えたくないが、他のすべてのh2要素に与えたくない場合はどうでしょうか。：not（：first-child）セレクターを使用する次のルールセットをスタイルシートに追加します。 h2:not(:first

大文字/すべて大文字のテキストに文字間隔が必要な理由[タイポグラフィ]

大文字のテキスト要素に少しの文字間隔を使用することでメリットが得られることが多い理由と、CSSでそれを行う方法について学びます。タイポグラフィでは、テキスト要素に大文字/すべて大文字（大文字）を使用する場合、通常、文字の間に少し余裕を持たせる必要があります。そうしないと、文字がきつすぎて快適に読めなくなります。文字間隔追跡とも呼ばれますそれらは同義語です。どちらも文字（単語）のグループ間のスペースの量を指します。コミュニケーションでは、文字間隔という用語はWebでより多く使用され、追跡は印刷タイポグラフィでより多く使用されます。いくつかの例を見てみましょう。通常と大文字

CSSを使用して単純なループ背景色アニメーションを作成する方法

キーフレームとさまざまなCSSアニメーションプロパティを使用して、純粋なCSSで単純なアニメーションの背景色ループを作成する方法を学びます。この例では、HTMLの<body>をターゲットにしています要素をCSSで直接使用しますが、次のコード例を任意のHTML要素、クラス、またはIDに適用できます。コードこのデモを参照として使用できます。注：このコードはIE9では機能しません。アニメーションの計画結果がどのようになるか正確にわからない場合でも、自分が進む方向についてのアイデアを持っていることは常に実用的です。コーディングを開始する前に、ループアニメーションにつ

CSSを使用してホバーで要素をズーム/スケールアップする方法

transformを使用して、純粋なCSSでホバー時に要素をズーム/スケールアップする方法を学びますプロパティの変換メソッド：scale() 。ホバー時にズーム/スケールアップこのボックスの上にマウスを移動してみてください。元のサイズのちょうど1.5倍に拡大されるため、マウスを上に移動（ホバー）すると50％大きくなります。 CSSのtransform プロパティのscaleメソッドは、要素のサイズを増減できます。 3Dと2Dの両方で機能します。この簡単な例では、2Dを使用します。上記の例を再現するには、1つのHTML要素と2つのCSSルールセットが必要です。 HT

ポインタイベントプロパティを使用してCSSの特定の要素でホバー/マウスオーバーイベントを無視する方法

マウスオーバー/ホバーを削除/無視する方法を学ぶ（:hover ）pointer-eventsを使用した特定のHTML要素のイベントプロパティ。最近、クライアントの1人のためにチームギャラリーページを作成しました。各ギャラリーアイテムは、マウスをその上に移動すると色が変わるオーバーレイを使用するUIカードで表されます。しかし、私は問題に遭遇し、それがこのチュートリアルに影響を与えました。 UIカードのコンテンツと構造各ギャラリーカードアイテムは、次の要素で構成されています。従業員の写真-白黒従業員名-白従業員の役割-白微妙な暗い背景のオーバーレイユーザーが各カードの上

インラインCSSを使用してホバー効果をどのようにコーディングしますか？

インラインCSSを作成せざるを得ない場合があります。 HTMLメールテンプレートで—メール/ニュースレタープロバイダーによって異なります。しかし、インラインCSSでホバー効果を得るにはどうすればよいですか？できませんただし、JavaScriptのonMouseOverを使用して、同じホバー効果を作成できます。およびonMouseOut メソッド。ホバー（またはマウスオーバー）時のハイパーリンクの色を青から赤に変更するとします。結果：購読するにはここをクリック一般に、インラインCSSは理想的ではありませんが、物事を成し遂げるために理想的とは言えないコードを使用せ

CSSでプレタグを100％レスポンシブにする方法

いくつかのCSSプロパティを追加して、HTMLプレタグを100％レスポンシブにする方法を学びましょう。他のチュートリアルWebサイトでよく見られる問題は、長いコードスニペット（preでラップされている）です。タグ）ページの幅をオーバーフローさせ、ページレイアウトを壊します。これは、デフォルトでpreが原因で発生しますタグにはCSSのwhite-spaceがありますプロパティをnormalに設定、このように： pre { white-space: normal; } この問題を修正するには、normalを変更するだけです。 pre-wrap ： pre { white-

CSSFlexboxを使用して要素を垂直方向および水平方向に中央揃えする方法

ビデオからのCodePen

CSSを使用してバウンドするSVGアイコンをアニメーション化する方法

今日は、CSSアニメーションを使用して矢印SVGアイコンを上下にバウンスさせる方法を学習します。また、多くのCSSアニメーションプロパティのいくつかを使用して、アニメーションタイプ、タイミング、および期間を微調整する方法についても学習します。なぜこれが役立つのですか？アニメーションは、正しく実行されると、次のことができます。ユーザーをガイドするユーザーに行動を起こすように促しますユーザーの注意を引き付けます（まだそれを持っている間）。要件フォローするにはテキストエディタが必要です。独自のローカル開発環境がない場合は、CodePenをお勧めします。すぐにコーディングを開

CSS、入力フィールドの黄色の背景色を削除する方法

一部のブラウザが一部のWebサイトの入力フィールドを自動入力するために恐ろしい黄色の背景色を追加する理由を疑問に思ったことはありませんか？彼らがなぜそうするのかはわかりませんが、この冒涜をすばやく取り除く方法を説明します。先に進む前に、子供がいないことを確認してください。なぜこれが「問題」なのですか？まあ、どういうわけかあなたのデザインのカラーパレットが鼻のような黄色とうまく合うなら、そうではないかもしれません。ちなみに、これはWebkit（Chrome、Safari、その他多くのブラウザ）固有の問題です。 FireFoxは白い背景色を使用しています。次のCSSコードは、

CSSを使用して単語の最初の文字を大文字にする方法

CSSを使用して単語の最初の文字を大文字にするには、first-letterを使用します。セレクター：すべて小文字の見出しがあるとします：そして、tを作成します「これ」の大文字。 first-letterを添付するだけです h2へのセレクター CSSスタイルシート： h2:first-letter { text-transform: capitalize; } もちろん、first-letterを適用することもできますクラス属性へのセレクターも同様です： .name-of-class:first-letter { text-transform: capitalize;

CSSを使用してテキストを円の周りにラップする方法

CSSを使用して段落テキストブロックを円形要素の周りに折り返す方法。コンテンツのプレゼンテーションをもう少し面白く、雑誌のようにしたい場合は、CSSを使用して、テキストを興味深い方法で要素に揃えて折り返すことができます。まず、HTMLコンテンツを追加しましょう： <article>に注意してください要素にはpostというクラスがありますおよび<img> 要素には.circleというクラスがあります。次に、次のCSSを追加します。 .post { max-width: 800px; margin: 3rem auto; } .circle

Flexboxの子要素の高さがCSSで垂直方向に伸びないようにする方法

フレックスボックスがあるとします内部にボタンが付いたコンテナ：ボタン（子要素）をjustify-contentと水平方向に中央揃えしようとする場合このようなプロパティ： .container { height: 300px; display: flex; justify-content: center; } 次に、ボタン（子要素）の高さは、親要素の高さ（この場合は300px）に合わせて拡張されます。）：これはおそらくあなたが望むものではありません！フレックスアイテムを防ぐには、いくつかの方法があります。（フレックスコンテナの子供）垂直に伸びないようにします

YouTubeビデオ埋め込みをCSSでレスポンシブにする方法

CSSを使用して、YouTube動画をウェブサイトに埋め込み、モバイルからデスクトップデバイスまで完全にレスポンシブにする方法を学びましょう。 YouTubeから埋め込みビデオコードをコピーして、<iframe>を取得するとこれに似たラッパー：残念ながら、iframeをブラウザに正しいアスペクト比で表示するには、高さと幅を固定する必要があります。これにより、iframeはすぐに使用できるレスポンシブデザインと互換性がなくなります。幸い、iframeを親コンテナにラップすることで、動画を埋め込むことができます。次に、CSSを使用してビデオコンテナのスタイルを設定し

CSSでテキスト選択を無効にする方法

user-selectを使用してテキスト選択を無効にする方法を学ぶ CSSプロパティ。デフォルトでは、ウェブブラウザでは、本物の限り、任意のウェブサイトでテキストを選択できます。テキスト要素であり、テキストが含まれる画像ではありません。マウスまたはキーボードを使用してテキストを選択できます。 cmd + a （Mac）、または Ctrl + a （Windows）。しかし、（何らかの理由で）テキストの選択を許可したくない場合はどうなりますか？ CSSプロパティuser-selectを使用します noneの値を指定します： selector { user-select

CSSを使用して順序付けされていないリストに四角い弾丸を作成する方法

CSSプロパティlist-style-typeを使用して、順序付けされていないリストに四角い箇条書きを作成する方法を学びます。デフォルトでは、順序付けされていないリストアイテム（<ul> ）ウェブページでは丸い箇条書きを使用しています。丸い箇条書きは次のようにスタイル設定されます： ul { list-style-type: disc; } そして、次のようになります： HTML CSS JavaScript 箇条書きを正方形にするには、デフォルトのlist-style-typeをオーバーライドできます。このような設定： ul { list-

CSSで大文字のローマ数字を使用して順序付きリストのスタイルを設定する方法

CSSで大文字のローマ数字を使用して順序付きリストのスタイルを設定する方法を学びます。 HTMLで順序付きリストを作成するには、次を使用します。 <ol> 順序付きリスト要素を定義するタグ。 <li> リストアイテムの要素を定義するタグ。例：デフォルトでは、順序付きリストアイテムは通常の10進数でスタイル設定されます：リストアイテムリストアイテムリストアイテム 10進数のデフォルトの順序付きリストは、すべてのブラウザーに組み込まれているUser-Agentスタイルシート（UAS）から取得されます。 CSSプロパティで定義されています：li

CSSで小文字のローマ数字を使用して順序付きリストのスタイルを設定する方法

CSSで小文字のローマ数字を使用して順序付きリストのスタイルを設定する方法を学びます。 HTMLで順序付きリストを作成するには、次を使用します。 <ol> 順序付きリスト要素を定義するタグ。 <li> リストアイテムの要素を定義するタグ。例：デフォルトでは、順序付きリストアイテムは通常の10進数でスタイル設定されます：リストアイテムリストアイテムリストアイテム 10進数のデフォルトの順序付きリストは、すべてのブラウザーに組み込まれているUser-Agentスタイルシート（UAS）から取得されます。 CSSプロパティで定義されています：li

レイアウトをCSSに中央揃えする方法

WebページのレイアウトをCSSに中央揃えする2つの異なる方法を学びます。ウェブサイトの記事のレイアウトをスタイリングしていて、<article>を中央揃えにしたいとします。ページの真ん中に水平方向に要素を配置します。あなたはいくつかの方法でそれを行うことができます。要素を水平方向に中央揃えにする最も単純で古典的なアプローチは、CSSプロパティmarginを使用することです。左右の値をautoに設定します。無料のCodePenエディターを使用してフォローできます。記事のレイアウトについては、次の基本的なHTMLマークアップを使用してください。そして、次の

CSSで背景画像を繰り返さないようにする方法

CSSプロパティbackground-imageを使用する場合ウェブサイトに背景として画像を埋め込むには、可能性がありますウェブページの幅と高さを埋めるために画像が無限に繰り返されることに気づきました。これは、デフォルトでブラウザにCSSプロパティbackground-repeatがあるために発生します repeatに設定。背景画像の繰り返しを停止するには、デフォルトのrepeatをオーバーライドするだけです。 no-repeatの値、このように： body { background-image: url(path-to-image.jpg); background-r