CSS

CSS：focus psuedo-classは、フォーカス状態の要素を選択します。これは、要素をクリックするか、タブボタンで要素を選択したときに発生します。 ：focusは、選択する要素の名前の後にあります。 Webページにフォーカスがある場合にのみ、要素にスタイルを適用することをお勧めします。たとえば、ユーザーがフォームフィールドをクリックしたときに、フォームフィールドに境界線を適用したい場合があります。 そこでCSS：focus疑似クラスが登場します。：focus疑似クラスは、ユーザーが要素をクリックするか、タブを使用して要素を選択すると、スタイルを適用します。 キーボードボタン。

ブラウザはCSSボックスモデルを使用して、要素がWebページにどのように表示されるかを決定します。ボックスモデルは、要素のサイズとその境界線、パディング、およびマージンを表します。これらの各要素のスタイルを個別に設定できます。 すべての要素はボックスで囲まれています。これらのボックスがどのように機能するかを理解できることは、Webページ上で希望する方法でアイテムを配置するための重要な部分です。 CSSボックスモデルは、Webページでのボックスの表示方法と配置方法を決定するために使用されます。このモデルは、CSSのボックスを構成する4つのコンポーネント（コンテンツ、パディング、ボーダー、マ

CSSタブは、ナビゲートしやすい1つの場所に関連情報を表示するのに非常に優れています。それらは基本的に、レシピボックスやバインダーに表示されるタブ付きの仕切りのように見えます。タブ付きナビゲーションを使用するWebサイトの例を次に示します。 サウスウエスト航空はタブ付きナビゲーションを使用して、ユーザーがフライトのチェックイン、フライトの予約、またはホテルの予約への追加をナビゲートできるようにします。 Enterpriseは、ナビゲーションにタブを使用して、ユーザーがレンタルするか購入するかを決定できるようにします。また、他のサービスについても学習します。 これらの2つのサイトを

CSSの特異性の概念は、ちょっとした早口言葉であるだけでなく（3倍速く言ってみてください！）、ちょっとしたマインドベンダーになることもあります。これは、CSSで理解するのが難しい概念の1つです。この記事では、特異性の意味、計算方法、セレクターのランキングによってページに表示されるスタイルがどのように決定されるかについて説明します。だから心配しないでください！あなたはすぐに特異性の専門家になります。 「特異性」とはどういう意味ですか？ CSSの特異性とは、基本的にセレクターの重要性を指します。各セレクターには、タイプに応じて固有性が割り当てられます。セレクターの数が多いほど、セレクターはより

カーソルは「 すべてのデモの母 」では、60年代後半にDouglasEnglebartがマウスとグラフィカルユーザーインターフェイスを世界に紹介しました。マウスカーソルを使用すると、コンピューター画面のどこにいるかを確認できます。ユーザーエクスペリエンスツールとして、画面上の任意の時点で何ができるか、またはコンピューターが何をしているかを示すことができるのは本当に素晴らしいことです。この記事では、Webページでマウスカーソルを使用してWebサイトのユーザーエクスペリエンスを向上させる方法のいくつかについて説明します。 構文 CSSセレクターでは、次の構文を使用して、カーソルをデフォルト

Web開発者は、作業している背景画像の開始位置を調整する必要がある場合に、CSSbackground-positionプロパティを使用します。この記事では、background-positionプロパティと、それを調整して画像の位置を変更する方法について説明します。 構文 CSSセレクター内のbackground-positionプロパティの構文は次のとおりです。 background-position: value 背景位置で値を宣言するには、いくつかの異なる方法があります。 使用できるキーワードペアの値はいくつかあります。 左上 左中央 左下 右上 右中央 右下 センタートップ セ

開発者として私たちがしなければならないことの1つは、新しいプロジェクトを与えられたときに問題に取り組む方法を理解することです。レスポンシブウェブサイトを使用する場合、ウェブサイトのレイアウトにCSSグリッドとCSSフレックスボックスのどちらかを選択することがよくあります。この記事では、GridとFlexboxの違いと、どちらを選択するのが最適なのかを見極めることを試みます。 Flexbox –簡単な概要 CSS Flexboxは、基本的にレスポンシブボックスモデルです。コンテナ内での配置を改善し、その機能を認識している限り、実装はかなり簡単です。 フレキシブルボックスモデルは、

CSSを作成するときに、特定の要素をターゲットにしたい場合があります。 <div>でいっぱいのHTMLドキュメントがあるとしましょう タグと<span> タグですが、何らかの方法でスタイルを設定するために、各タイプの最初のタイプのみをターゲットにしたかったのです。これは、：first-of-type疑似クラスと呼ばれるもので実行できます。 疑似クラスは、CSSセレクターが指定された元のスタイルとは異なる特定のスタイルを持つための方法です。これは、要素の状態によって異なります。この例では、最初の<div>を選択します。 そして最初の<span>

フォームを作成するときに、チェックボックスとラジオボタンの入力を使用して、ユーザー設定、条件への同意、または人口統計データを収集する必要がある場合があります。チェックボックスやラジオボタンなどのHTML入力要素は、デフォルトの外観になっています。外観を変更したい場合は、CSSを使用して外観を好みに合わせてカスタマイズできます。この記事では、フォームまたはWebページのチェックボックスとラジオ入力をカスタマイズする方法のサンプルを示します。 HTMLセットアップ スタイルを設定するHTMLスケルトンコードは、チェックボックスとラジオボタンの両方で基本的に同じです。 oneのメインコ

ブートストラップカード Bootstrapカードは最も人気のあるコンポーネントの1つであり、それには十分な理由があります。これらは非常に柔軟なメディアコンテナとして機能し、いくつかの優れたプリセットスタイルとフォーマットを備えています。 カードのコンテンツには、テキスト、画像、リンク、ボタン、リストなどがあり、ヘッダーとフッターを含めることもできます。 ブートストラップカードの基本 ブートストラップカードはフレックスボックスで作成され、デフォルトで含まれている要素の幅まで拡張されます。別の幅を指定する場合は、カード要素自体でBootstrapのwidthユーティリティクラスを使用するか、

UIを際立たせることになると、適切なカラーパレットを選択することに勝るものはありません。このチュートリアルでは、UIを作成するときに、要素やフォントなど、ほとんどすべてのものに色を割り当てるのがいかに簡単かを学びます。 色を追加するために、CSSにはcolorがあります データ型。標準の赤、緑、青（RGB）形式で色を表します。 色 構文 CSSを使用して色を定義する方法はいくつかあります。 キーワード付き。これらは、「赤」、「白」、「黄色」などの文字列、または#fffなどの16進数として入力されます。 16進表記、たとえば#fff。 rgb()経由 またはrgba() 機能表記。

今日はススワタリを中心にしようと思います 。一般に「スート」と呼ばれるこれらの小さな生き物は、たくさん動き回るのが好きなので、1つまたは複数の写真を撮れるように、静止して中央にいる必要があります。やってみましょう！ 注：読み進めながら、ブログのリポジトリを参照してください。 画像をHTMLに追加する 画像を中央に配置する必要があるのは非常に一般的です。すすの画像があり、従来のimageで追加するとします。 鬼ごっこ： <img class=soot src=soot.jpg alt=soot!> 忘れないでください：画像タグを作成するときは、このタグに子ノードを含めるこ

CSS font-sizeプロパティは、ページまたはWebサイト上のテキスト要素のフォントサイズを設定します。 font-sizeプロパティは、テキストコンテンツを含む任意のクラス、ID、または要素に適用できます。このプロパティは、px、em、rem、vw、vhの値を受け入れ、キーワードを使用します。 ほとんどの開発者は、さまざまなフォントサイズの組み合わせを使用してWebページのスタイルを設定します。たとえば、Web開発者は、見出しに大きなフォントを使用し、本文などに小さなフォントを使用する場合があります。多くの人が質問します：CSSまたはHTMLのフォントサイズをどのように変更します

CSSを使用してレイアウトを設計する場合、要素を上下または左右に配置することがよくあります。 z-index Z軸の3次元で要素を移動し、煙突効果を（互いの上に）使用できます。 z-index プロパティはautoのいずれかを取ります キーワードまたは整数。これらはすべて有効な宣言です。 z-index: auto; z-index: -1; z-index: 9999; 注 ：z-indexを適用するには、positionを使用して要素も配置する必要があります。 相対、絶対、または固定のいずれかのプロパティ。位置が指定されていない場合は、z-index: autoを適用した場合と同じ

font-styleを使用 CSSプロパティでは、テキストを強調するために、一連の特性を使用してフォントのスタイルを設定できます。 いつものように、Codepenをチェックアウトして、一緒にコーディングできるようにしてください。 フォントスタイル 構文とオプション font-styleを使用する場合、次のオプションがあります 。これらはすべてキーワードとして指定されていることに注意してください。 font-style: normal; font-style: italic; font-style: oblique 30deg; font-style: oblique; Font-

CSS背景画像プロパティは、Webサイトの背景を画像に変更します。背景画像は、background-image：url（url_of_image）プロパティを使用して設定されます。 background-imageプロパティを使用して、重複する複数の背景画像を指定できます。 背景画像は、見た目に美しいユーザーエクスペリエンスを生み出す現代のサイトで一般的な機能です。 Webデザイナーは、CSSのbackground-imageプロパティを使用して、事前に決定された固有のテーマに基づいてこの機能をカスタマイズします。 このチュートリアルと例では、このCSSプロパティに慣れることができます

さあ、楽しいCSSシェイプを作成しましょう！すべてのコードについては、私のCodepenに従ってください。これをやってみましょう。 長方形と正方形 すべての形状はdivでラップされます。デフォルトでは、divは幅と高さのプロパティに応じて正方形または長方形であるため、最も基本的な形状は正方形と長方形です。したがって、正方形の幅と高さは同じですが、長方形はそうではありません： .rectangle { width: 2rem; height: 4rem; background-color: violet; } .square { width: 5rem; height:

フォームを作成するときは、クライアントや顧客にとってユニークで魅力的なフォームを作成したいと考えています。フォームを表示する方法によって、ユーザーエクスペリエンスが大幅に向上することは事実です。フォームのスタイルを設定するために、さまざまなCSS入力タイプセレクターを使用します。 構文と例 この記事を読んでいる間、付属のCodepenを参照してください。 HTMLを使用してフォームを作成した経験があると思いますので、HTMLについては詳しく説明しません。 スタイリングを行わないと、フォームは次のようになります。 1990年代であれば、これはそれほど悪くはないでしょう。つまり、Net

CSSセレクターを使用すると、Web開発者はWebページ上の特定の要素または要素のセットにスタイルを適用できます。 セレクターを使用する場合、特定の属性を持つ要素のみをターゲットにすることを決定できます。そこでCSS属性セレクターが登場します。属性セレクターは、特定の属性を持つ要素にのみ特定のスタイルを適用するのに役立ちます。 このチュートリアルでは、要素のスタイルを設定するときにCSS属性セレクターを使用する方法について説明します。このチュートリアルを読み終えると、属性セレクターを使用して要素のスタイルを設定するエキスパートになります。 HTML属性 HTMLでは、属性は要

CSSを作成するときに、ページ上での要素の配置方法を変更したい場合があります。この記事では、CSSプロパティと、要素の垂直方向の配置方法を変更するプロパティ値について説明します。 プロパティの構文は次のとおりです。 vertical-align: property-value; ここで、property-valueには、baseline、length、sub、super、top、text-top、middle、bottom、text-bottom、initial、inheritのいずれかのオプションを含めることができます。 プロパティ値 ベースライン `baseline`プロパティ値は