CSS

順序付けされていないリストアイテム（<ul> ）Webページでは、デフォルトで丸い箇条書きでスタイル設定されています。しかし、リストアイテムの箇条書きを削除したい場合はどうでしょうか。ナビゲーションコンポーネントを構築するとき？ 次のHTMLは、Webサイトのナビゲーション/メニューコンポーネントの一般的な構造です。 メニュー項目から箇条書きを削除するには、デフォルトのCSSルールlist-style-type: disc;をオーバーライドする必要があります。 noneに置き換えます ： nav ul { list-style-type: none; } 注：タイプセレ

CSSを使用してテキスト要素に線形グラデーションカラーを追加する方法と、一般的なグラデーションの間違いを回避する方法を学びます。 HTMLテキスト要素にグラデーションテキストの色を追加するには、次のCSSプロパティが必要です。 background -webkit-background-clip -webkit-text-fill-color backgroundを使用するのはなぜですか テキストを着色するためのプロパティ？このアプローチは少しハッキーに見えますが、うまくいくことを約束します！ 次の2色、オレンジと赤を使用して、テキスト要素に左から右に線形グラデーションを適

HTML入力要素のプレースホルダーテキストをCSSでスタイル設定するには、疑似要素をターゲットにする必要があります。 属性。これは、CSS疑似セレクター::を使用して行います。 。 プレースホルダーテキストを含む通常の入力要素 デフォルトのブラウザスタイルでプレースホルダーテキストがどのように表示されるか： CSS それでは、CSS ::placeholderを使用しましょう。 入力要素のプレースホルダーテキストを赤にするセレクター： input::placeholder { color: red; } 結果： 再利用可能なプレースホルダーテキストクラス すべての&l

CSSを使用してカーニングを調整する方法を学びます。 選択したWebフォントにカーニングデータが含まれている場合、ブラウザはフォントカーニングをテキストに適用するかどうかを自動的に判断します。これは、font-kerningを使用して行われます。 autoに設定されているCSSプロパティ デフォルト： font-kerning: auto; つまり、ブラウザは、カーニングデータが組み込まれている場合でも（何らかの理由で）フォントにカーニングを適用することを決定する場合があります。 ブラウザの「意見」に関係なく、フォントカーニングが適用されていることを確認したい場合は（フォントに適用されて

font-stretch CSSプロパティを使用すると、テキストを狭く（圧縮）または広く（拡張）することができます。 これらのタイプのフォントは、凝縮とも呼ばれます。 または拡張 フォント。 凝縮されたフォント ストローク幅の狭い文字があります。また、通常のフォントと比較して、文字間のスペース（文字間隔/先頭）がはるかに狭くなっています。 拡張フォント 高さに比例して、通常のフォントよりもストローク幅が広い文字があります。 CSS font-stretch プロパティの値は次のとおりです（フォント面の種類）： 超凝縮 余分に凝縮された 凝縮 半凝縮 通常 半拡張 拡張 追加拡張

CSS font-styleプロパティを使用すると、テキストに3つの異なるフォントタイプ（スタイル）を適用できます。通常、斜体、斜体です。 .normal{ font-style: normal; } .italic { font-style: italic; } .oblique { font-style: oblique; } normal ：は、通常のテキストに使用されるデフォルトのローマン/通常のフォントスタイルです。 italic ：強調のために使用される、少し右に傾斜したフォントです。 oblique ：強調のために使用される、少し右に傾斜したフォントです。

CSSのfont-variantの使用方法を学ぶ テキストにスモールキャップス文字を使用するプロパティ—およびスモールキャップスを使用する必要があるかどうか。 CSS font-variant プロパティは、テキストを通常のテキストケースとして表示するか、スモールキャップスフォントとして表示するかを指定します。プロパティには3つの値があります： 通常（デフォルトのテキストケース） 継承 スモールキャップス 基本的な使用法： .small-caps { font-variant: small-caps; } font-variantの使用を開始する前に プロパティは、それを正しく

CSSの@importルールの使用方法を学ぶ スタイルシートをインポートします。 CSS @import at-ruleを使用すると、CSSスタイルシートを他のCSSスタイルシートにインポートできます。コードベースが大きく成長しているウェブサイトには実用的です。 基本的な使用法： @import url(variables.css); この方法では、すべてのスタイルを1つの大きなスタイルシートに保持するのではなく、CSSスタイルを変数、タイポグラフィ、色、間隔などの個々のファイルに分割できます。 次に、個々のCSSファイルをすべてメインのCSSスタイルシートにインポートして、それらを

CSSを使用してコンテナの下部に要素を配置する方法を学びます。 HTMLには親子関係があります。 CSSを使用してコンテナの下部に要素を配置するには、次のプロパティと値を使用する必要があります。 position: relative; （親） position: absolute; （子供） bottom: 0; （子供） 例： .parent { position: relative; } .child { position: absolute; bottom: 0; } 視覚化を容易にするために、CSSクラスを上から取得し、幅、高さ、色を追加しました。 .p

CSSでグラデーションの背景色を設定するには、linear-gradient()を追加する必要があります backgroundに機能する 財産。 簡単なボックスクラスを作成して試してみましょう： .box { width: 200px; height: 200px; background: linear-gradient(yellow, red); } 結果： 線形グラデーション関数内で色を並べ替えることで、開始色と終了色を変更できます。 /* Starting red, finishing yellow */ background: linear-gradient(r

CSSのRGBとRGBaの色の違いと、RGBaを使用してWebサイト用の美しく注目を集めるUIコンポーネントを作成する方法について説明します。 RGB およびRGBa 16進コードの色の値（#282828など）を使用する代わりに、CSSで使用される2つのカラーモデルです。 ）。 RGBとRGBaの違いは何ですか？ RGBは赤、緑、青の略です RGBaは、赤、緑、青、およびアルファの略です。 アルファは透明性です チャンネル。色の透明度を制御するために使用できます。 混乱していても心配しないでください。すぐに意味がわかります。 RGBとRGBaを使用するために、CSS

HTMLとCSSを使用してWebサイト用のシンプルで美しいUIカードコンポーネントを設計する方法を学びます。また、カードを暗くしすぎずにテキストを少し余分にポップさせる線形グラデーションの「トリック」についても学びます。 UIカードは、Webサイトで前菜の一種として機能するUIコンポーネントです。一般的なUIカードには、テキスト、写真、アイコン、および1つまたは複数のインタラクティブ要素（ボタンやリンクなど）が含まれています。 UIカードは、必要に応じて単純または複雑にすることができます。 今日、私たちは非常にシンプルなUIカードを設計しています。これは次のとおりです。 このUIカ

CSSのパディングの使用方法を学ぶ プロパティ。 CSSのpadding プロパティは、内部のスペースの量を制御するために使用されます コンテンツと境界線の間のHTML要素。 padding CSSのmarginと混同されることがよくあります プロパティ。外部にスペースを追加します。 要素の境界線（paddingの反対） CSSパディングの基本 テキストラベル（そのコンテンツ）が付いたボタン要素は次のとおりです。 ボタンに24pxのパディング値を与えましょう： button { padding: 24px; } 結果： パディング値を0に変更した場合 あなたはこ

CSSのマージンとパディングの違いについて学びます。 マージンとパディング 最短の定義から始めましょう： マージン HTML要素の境界線の外側にスペースを追加します パディング HTML要素の境界線の内側にスペースを追加します HTML要素にマージンまたはパディングを適用すると、次のように要素に異なる影響を与えます。 上記の概念図を念頭に置いて、この知識を実際のHTML要素に適用してみましょう。 上記は単純な 内の要素 容器。 ボタンには次のものがあります： 24pxの余白。ボタンの周囲にスペースを追加し、ボタンを内側に配置する親要素の境界から押し出します。 4

CSS省略形プロパティの使用方法を学ぶ スタイルシートが占めるスペースを減らすためです。 CSSの省略形のプロパティを使用すると、記述を減らしてより多くのことを実行できます。 h1のスタイルを設定するとします。 ジョージアの要素 font-family、フォントサイズは42ピクセル、行の高さは1.25です。 まず、以下の通常のCSSメソッドを見てみましょう。 h1 { font-family: Georgia, serif; font-size: 42px; line-height: 1.25; } 次に、CSSのフォントを使用する場合と比較します。 以下の

HTMLにはpreloadという属性があります これにより、ブラウザにヒントを与えることができます どのように、そしてもっと重要なことに、いつ ページの読み込み時にアセットを読み込みます。 preload 属性は、いくつかのHTML要素で使用できます。たとえば、<link>に追加できます ブラウザがCSSスタイルシートの早期フェッチを開始するようにする要素。 しないでください preloadを使用する <link>の属性 このように（一部のWebサイトが推奨しているように）： 上記のコードはスタイルシートをプリロードするだけなので、適用しません。 それ。

CSSのbox-sizingの使用方法を学ぶ ブラウザがHTML要素の幅と高さを計算およびレンダリングする方法を制御するプロパティ。 ボックスのサイズ設定（コンテンツボックスとボーダーボックス） CSSのbox-sizing プロパティには2つの値があります： コンテンツボックス （デフォルト） border-box ボックスサイズの値はどちらも、ブラウザがHTML要素のサイズを計算してレンダリングする方法に影響しますが、共通しているのはそれだけです。 content-box デフォルトでは、すべてのHTML要素は content-boxを使用します 値： box-siz

CSSでHSLおよびHSLa色を使用する方法と、それらがRGB/RGBaおよびHexと異なる点を学びます。 HSLとHSLaはCSSのカラーメソッドであり、HexまたはRGB / RGBaの代わりに使用して、より多くの実世界を適用できます。 あなたのウェブサイトへの色。 HSLとHSLaはCSSの世界ではやや新しいものですが、一般的な色の世界では、1970年代から存在しています。 HSL対HSLa： HSLはHueSaturationLightnessの略です HSLaはHueSaturationLightnessAlphaの略です HSLaはHSLの拡張であり、透明度の値（また

16進色の使用方法を学ぶ （CSSでは「16進色」とも呼ばれます。 16進表記（または16進表記）は、RGBカラーを表現するための代替方法です。 16進色表記は、3つのブロックで指定され、それぞれに2つの値があります。 RR GG BB 一緒にそれらは#RRGGBBになります。 ギリシャ語では、ヘキサは6を意味し、ご覧のとおり、RRGGBBの合計は6です。 16進色がRGBと異なる点は、16進色が0から255までの値を2桁で表現することです。 たとえば、以下の100％白のRGBカラー： rgb(255,255,255); 次のように16進色で表現できます： #f

数字の代わりに本名を使用して色を定義するCSSキーワードはたくさんあります。これまでの公式の名前付きCSSカラーリストは次のとおりです。 aliceblue アンティークホワイト アクア アクアマリン 紺碧 ベージュ ビスク 黒 ブランシェダルモンド 青 ブルーバイオレット 茶色 バーリーウッド cadetblue シャルトリューズ チョコレート サンゴ コーンフラワーブルー コーンシルク 深紅色 シアン ダークブルー darkcyan darkgoldenrod ダークグレー ダークグリーン ダークグレー darkkhaki darkmagenta darkoli