カテゴリー: css3

  • CSSレスポンシブレイアウト(アダプティブレイアウト)

    CSSレスポンシブレイアウト(アダプティブレイアウト)

        アダプティブ レイアウトとも呼ばれる CSS レスポンシブ レイアウトは、2010 年 5 月に Ethan Marcotte によって提案された概念です。このコンセプトは、モバイル端末での Web ブラウジング […]

  • CSS resize (要素のサイズを調整)

    CSS resize (要素のサイズを調整)

        ユーザーエクスペリエンスを向上させるために、非常に便利な resize 属性が CSS3 に追加されました.これにより、ユーザーは要素のサイズをドラッグして自由にスケーリングできます.それ以前は、同様の効果を実現 […]

  • CSS フレックス レイアウト (エラスティック レイアウト / エラスティック ボックス)

    CSS フレックス レイアウト (エラスティック レイアウト / エラスティック ボックス)

        Flex は Flexible Box の略で、「elastic layout」または「flexible box」を意味します. CSS3 の新しいレイアウト モードで、さまざまなページ レイアウトをシンプルで完 […]

  • 詳細CSSフィルター(フィルター)

    詳細CSSフィルター(フィルター)

        フィルターといえば、真っ先に思い浮かぶのは、PhotoShop などの描画ソフトで、写真を美しくすることができます。 CSS では、ぼかし効果、透明効果、色のコントラスト調整、色の反転など、さまざまな種類のフィル […]

  • CSS box-sizing: ボックスモデルの変更

    CSS box-sizing: ボックスモデルの変更

        デフォルトでは、Web ページ内の要素の実際の幅または高さは、要素のコンテンツ領域の幅または高さ、パディング、および border プロパティのサイズに依存するため、要素のパディングの内容も考慮する必要があります […]

  • 詳細CSSトランジション(トランジション効果)

    詳細CSSトランジション(トランジション効果)

        通常、CSS のプロパティ値が変更されると、ブラウザーは対応するスタイルをすぐに更新します。たとえば、マウスが要素の上に置かれると、:hover セレクターによって定義されたスタイルが要素にすぐに適用されます。ト […]

  • CSS 3D トランジション (5 フォーム)

    CSS 3D トランジション (5 フォーム)

        CSS では、ページ上の要素の2D 変換に加えて、オブジェクト要素に対して 3D 変換を実行することもできます (ページを 3 次元空間と見なして、ページ上の要素を移動、回転、スケーリング、傾斜させます)。 . […]

  • CSS 2D 変換 (5 フォーム)

    CSS 2D 変換 (5 フォーム)

        CSS の 2D 変換を使用すると、移動、回転、拡大縮小、変形など、2 次元空間でいくつかの基本的な変換操作を実行できます。変換された要素は絶対配置要素に似ており、周囲の要素には影響しませんが、周囲の要素の重なり […]

  • CSS シャドウ効果 (2 つの方法)

    CSS シャドウ効果 (2 つの方法)

        影の効果は Web デザインでよく使用され、要素を非常にうまく強調することができます.CSS3 が登場する前は、画像を使用してテキストや要素に影の効果を追加する必要があり、非常に不便でした. CSS3 の登場後、 […]

  • CSS gradient (カラー グラデーション) 10 分で始める

    CSS gradient (カラー グラデーション) 10 分で始める

        CSS のグラデーションとは、2 つ以上の色の間の滑らかな遷移を指します. 過去には、グラデーション効果を実現するために事前に定義された画像を使用する必要がありました. CSS3 の登場後、それははるかに簡単にな […]