CSS

 Computer >> コンピューター >  >> プログラミング >> CSS
  1. CSSインラインブロック

    display プロパティは、Webページのレイアウトに不可欠です。 displayプロパティは、要素がその周囲の要素に関連してどのように表示されるかを決定します。このCSSプロパティにはいくつかの値があります。最もよく使用される値には、inlineが含まれます 、block 、およびinline-block 。この記事では、これら3つのCSS表示値の実装と違いについて説明します。 構文 displayのCSS値を実装するための構文、構文は次のとおりです。 表示：値; この記事では、3つの値はインライン、ブロック、およびインラインブロックであるため、構文は次のようになります。 表

  2. CDNを使用してアイコンを挿入する方法

    アイコンは、ユーザーがアプリケーションで実行できるアクションを示すのに適しています。すぐに利用できるアイコンライブラリがいくつかあります。ここに多くのいくつかがあります： Font Awesome – https://fontawesome.com/ フラティコン– https://www.flaticon.com/ マテリアルデザインアイコン– https://material.io/resources/icons/ 確かに上記以外にもたくさんありますが、このガイドの目的は、プロジェクトで上記のライブラリの1つを利用し、それをターゲットにしてスタイルを制御する方法を示す

  3. CSSFlexbox

    CSS Flexboxモデルは、確立されたCSSボックスモデルを改善するために作成されました。 Flexboxモデルには、Boxモデルの主要な要素（マージン、パディング、境界線、コンテンツ）が引き続き含まれていますが、コンテナ/親の子でスペースを最適に埋める柔軟性を提供します。 このチュートリアルは、フレックスボックスモジュールを少しよく理解するのに役立ち、サイトの応答性を高めることができます。 以下は、基本的なフレックスボックスモデルのデモンストレーションのスターターコードです。フレックスボックスについて説明するときは、それに従ってください。 <!DOCTYPE html

  4. テキストを使用したCSSで要素を中央揃え-整列、マージンなど

    このCSSチュートリアルでは、テキストとブロック要素を中央に配置する方法について説明します。レイアウトの水平方向と垂直方向に要素を中央揃えするために使用できるいくつかのトリックがあります。 テキスト要素を中央揃え 大きな要素内でテキストを中央揃えにするには、text-align: center;を使用します 以下に見られるように： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=dev

  5. CSSボーダー画像

    CSSのborder-imageプロパティは、最初は頭を悩ませるのが少し難しいです。この記事では、border-imageプロパティとは何か、それを使用する方法、およびさまざまなブラウザで使用する場合のその特異性について説明します。 CSS教育のこの時点で、borderプロパティが何であるかを知る必要があります。更新するには、要素の周囲の境界線を指定するために省略形を使用するプロパティです。構造は次のとおりです。 border: 2px /*width*/ dashed /*style*/ green; /*color*/ borderと

  6. CSSスティッキーフッター

    スティッキーフッターを固定フッターと混同しないでください。スティッキーフッターは、フッターが常に画面の下部（コンテンツがページを埋めない場合）またはWebページのコンテンツの下部に貼り付くパターンです。 。ユーザーがページをスクロールしても、固定フッターは画面の下部に留まります。これらのコードエディタの例は、違いを区別します。 固定フッター： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=viewport

  7. CSSスパン

    要素は、 に似た一般的なHTML要素です。 。思い出してください。divは主にウェブページのレイアウトに使用される一般的なコンテナであり、ブロックであるため、できるだけ多くのスペースを占有します。 エレメント。 スパンはインラインです エレメント。それらは必要なだけのスペースを占有し、主に何かを強調するために使用されます。 それぞれの視覚的表現は次のとおりです。 Divs vs Spans * {box-sizing：border-box;フォントサイズ：1.4rem; font-family：モノスペース; } .div-style {背景：紫;色：ブランシェダ

  8. CSS：オブジェクトフィット

    CSSプロパティobject-fitは、要素をそのコンテナの幅と高さの範囲内にスケーリングします。背景画像は、このプロパティを使用する開発者として遭遇する最も一般的な要素です。 object-fitプロパティには5つの可能な値があります。さまざまな値を説明するための例として、画像を使用します。 object-fit：contain – containsを使用すると、コンテナ（この場合は画像）に入る要素のアスペクト比が維持されます。比率が一致しない場合は、比率が一致しない側にバーが表示されます（ワイドスクリーンビデオがリリースされたとき、古いテレビでは画面の上下にバーが表示され

  9. CSSを使用してスクロールバーを非表示にする方法

    スクロールバーとユーザーエクスペリエンス ユーザーは、Webサイトをナビゲートするときに特定のエクスペリエンスに慣れています。たとえば、サイトの左上隅にあるビジネスのロゴがホームページに移動することを期待します。しかし、そうでない場合はどうなりますか？そのサイトのすべてが反対を実行した場合はどうなりますか あなたはそれが何をするだろうと思ったのですか？ スクロールバーが存在するかどうか想像してみてください。ただし、マウスのスクロールボタンを動かしたり、デバイスのトラックパッドを指でドラッグしたりしても、何も起こりませんでした。 。それは恐ろしいユーザーエクスペリエンスと見なされます 。

  10. CSSフォントカーニング、文字間隔、および単語間隔のプロパティ

    CSSの基本を学ぶとき、私たちはボックスモデル、ページ上のコンポーネントの配置方法、およびフォントファミリやフォントサイズなどのデザインシステム要素に焦点を当てる傾向があります。フォントがページ上でどのように表示されるかをさらに深く掘り下げる場合は、フォントカーニング、文字間隔、および単語間隔のプロパティを確認する必要があります。これらの細かい詳細は、ウェブサイトを平均的なものからプロフェッショナルなものに変えるものです。 フォントカーニング フォントカーニングは、2つの異なる文字間の間隔を決定する方法です。カーニングが良好であると見なされるフォントは、文字間の間隔がより均一であるため

  11. CSSのトリミングされた画像

    CSSで画像を切り抜く方法はいくつかあります。ただし、これらの中で最も単純で最も効果的なものは次のとおりです。 object-fitの使用： object-fit: coverを使用する場合 、画像を簡単にトリミングしながら、画像のアスペクト比を維持できます。 object-fitを使用できます object-position と一緒に CSSで画像をトリミングします。 object-fitを設定してみてください 画像のプロパティをnone 次に、object-position: 50% 50%を設定します 。これにより、画像がコンテナの中央に配置されます。最初の数字は画像を配置する

  12. CSSでテキストインデントを使用する方法

    text-indentプロパティとして知られるCSSインデントプロパティは、学校で書いたエッセイや論文のすべての段落の最初の行にある標準のインデントに似ています。紙を書くときに段落の最初の行をインデントするのと同じように、テキストのすべてのブロックの最初の行をインデントします。 以下のコードエディタは、ピクセル（px）でテキストインデントを作成する方法を示しています。 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <met

  13. HTMLでbrを使用せずに改行を作成する

    改行を使用せずにHTML要素に改行を追加できます<br> 疑似要素を使用する。疑似要素は、要素の特定の部分のスタイルを設定するために使用されます。ここでは、::afterを使用してHTML要素のスタイルを設定し、改行を追加します。 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <title>

  14. 基本的なCSSオーバーレイを作成する方法

    オーバーレイは、ユーザーが実行する必要のある次のアクションの正しい方向にユーザーを誘導するためにWebサイトで使用される効果です。正しい使用法には、ユーザーをWebサイトにとどまらせるポジティブなユーザーエクスペリエンスを作成する機能があります。 オーバーレイを作成する方法はいくつかあります。正しい方法は1つではありません。それは、サイトに最適な方法と必要なものを選択することです。 このガイドでは、基本的なHTMLとCSS（JavaScriptなし）を使用して、画像にカーソルを合わせたときに探しているオーバーレイ効果を得ることに焦点を当てます。 HTMLをブロックする 画像オー

  15. CSSパディングとマージン：違いを見分ける方法

    HTMLとCSSを使用してマークアップを作成する方法を最初に学び始めたとき、ボックスモデルのマージンとパディングの違いに実際に頭を悩ませるのに少し時間がかかりました。この記事では、私が最終的に2つを区別することができた方法を共有します。 マージンとパディングについて話すときは、CSSボックスモデルがどのように機能するかを確認するのが最善です。ボックスモデル（Webサイトのコンポーネントを配置するコンテナー）を、額縁に配置された画像と考えてください。 コンテンツ 写真そのものです–私たちがコンテナに入れたいものです。ちょうどそれを囲むのはパディングです 。 フレームスト

  16. CSS！重要なルール：いつ使用するか

    ！重要な ルールは、Webページのスタイルを上書きするために使用されます。正直なところ、すべきでない理由の例は他にもあります。 ！importantルールと必要な理由を使用してください。それがどのように使用されるか、そしてなぜそれが控えめにのみ使用されるべきかについて議論しましょう。 ユーザーエージェントスタイルシートのオーバーライド CSSを作成するときに、指定されたスタイルシートを上書きする必要がある場合があります。 BootstrapなどのCSSフレームワークを使用してプロジェクトを立ち上げて実行する場合は、フレームワークに組み込まれているスタイルをカスタマイズすることをお勧めしま

  17. CSSClearfixハックをいつどのように使用するか

    CSSFlexboxとCSSGridの生成におけるコーダーとプログラマーとして、CSSClearfixを考慮することはあまりありません。 CSS FlexboxとGridは、フロートを使用するよりも要素の位置を少し良く（そして少し簡単に！）解決します。 それでも、floatを使用するレガシーコードを使用していて、コードベースのより新しい処理に切り替える時間やお金がない少数のインスタンスについては、これをすべて知っておく必要があります。 この記事では、clearfixハックについて説明し、clearfixソリューションの新しい代替品としてのdisplay：flow-rootについて説

  18. CSSドロップダウンメニュー

    今日、ドロップダウンメニューは、ほとんどの最新のWebサイトに共通の機能です。これらのメニューを使用すると、よりカスタマイズされたナビゲーション機能を作成できるため、ユーザーはWebサイトで探しているコンテンツを簡単に見つけることができます。 HTMLに加えてCSSを使用して、ユーザーがドロップダウンのメニューラベルにカーソルを合わせたときにのみコンテンツを表示するドロップダウンメニューを作成できます。 このチュートリアルでは、CSSでドロップダウンメニューを作成する方法を例を挙げて説明します。このチュートリアルを読み終えると、独自のドロップダウンメニューを作成するために必要なツー

  19. CSSフォントファミリー

    Webページのテキストのスタイル設定は、Webデザインの重要な部分です。たとえば、serifを使用するために、ヘッダーを特定のフォントで表示したり、ページ上のすべてのテキストを表示したりすることができます。 フォント。 そこで、CSS font-familyプロパティが登場します。CSSfont-familyプロパティを使用すると、Webページのテキストのスタイル設定に使用される1つ以上のフォントファミリを指定できます。 このチュートリアルでは、例を参照して、CSS font-familyプロパティの基本と、このプロパティを使用してWebページのテキストのスタイルを設定する方法につ

  20. CSSボタン

    ウェブサイトをデザインするとき、特定の見方をしたいボタンがよくあります。たとえば、ユーザーの注意をボタンに引き付けるために、ボタンの背景色を他のページ要素とは異なるものにしたい場合があります。 CSSを使用して、開発者はスタイル付きボタンを作成できます。 CSSを使用すると、ボタンの色、テキストサイズ、境界線、幅、高さなどを変更できます。 このチュートリアルでは、いくつかのCSSプロパティを使用してHTMLボタンのスタイルを設定する方法を例を挙げて説明します。このチュートリアルを読み終えると、CSSを使用したボタンのスタイリングのエキスパートになります。 ボタンの概要 HTM

Total 1566 -コンピューター  FirstPage PreviousPage NextPage LastPage CurrentPage:78/79  20-コンピューター/Page Goto:1 72 73 74 75 76 77 78 79