CSS

 Computer >> コンピューター >  >> プログラミング >> CSS
  1. CSSでcontenteditable要素の境界線（枠線）を削除する方法

    HTMLのcontenteditable属性を指定した要素は、ブラウザ上で直接テキストを編集できます。しかし、要素をクリックして編集モードにすると、多くのブラウザではデフォルトで青い枠線（アウトライン）が自動的に表示されます。この境界線を非表示にしたい場合は、CSSのoutlineプロパティを使用します。[contenteditable]セレクターに対してoutline: 0px solid transparent;を指定することで、編集時の枠線をきれいに取り除くことができます。コード例<!DOCTYPE html> <html> <head> <st

  2. CSSでプレースホルダーの色を変更する方法｜::placeholder疑似要素の使い方

    CSSで入力フォームのプレースホルダー（placeholder）の文字色を変更するには、::placeholder 疑似要素を使用します。ただし、ブラウザによって対応状況が異なるため、Internet Explorer や旧 Microsoft Edge 向けのベンダープレフィックスも併せて指定しておくと、より多くの環境で意図した色が反映されます。それぞれのセレクタの役割は以下の通りです。::placeholder … 標準的な疑似要素（Chrome・Firefox・Safari などの主要ブラウザに対応）:-ms-input-placeholder … Internet Explorer 1

  3. CSSとJavaScriptでスクロール時にヘッダーを縮小させる方法

    CSSとJavaScriptを組み合わせることで、ページのスクロール量に応じてヘッダーのサイズを動的に変更できます。この手法は、ナビゲーションバーを画面上部に固定しながら、スクロール中はコンテンツの表示領域をできるだけ広く確保したい場合に非常に効果的です。ここでは、window.onscrollイベントとCSSのtransitionプロパティを活用し、スクロールするとヘッダーがスムーズに縮小される実装例を紹介します。実装例<!DOCTYPE html> <html> <head> <meta name="viewport" cont

  4. CSSでレスポンシブ対応の価格表を作成する方法【サンプルコード付き】

    CSSを使えば、画面サイズに応じてレイアウトが自動的に切り替わるレスポンシブ対応の価格表（料金テーブル）を簡単に作成できます。本記事では、メディアクエリとfloatレイアウトを組み合わせた実装方法を、実際に動作するサンプルコードとともに分かりやすく解説します。レスポンシブ価格表のサンプルコード以下は、無料プランと上位プランの2つの価格表を並べて表示し、画面幅が狭くなると自動的に縦積みレイアウトへ切り替わる完全なHTML・CSSコードです。<!DOCTYPE html> <html> <head> <meta name="viewport&qu

  5. CSSだけで作る視差スクロール（パララックス）効果の実装方法

    CSSだけで視差スクロール（パララックス）効果を実現するには、background-attachment: fixed; を使用します。このプロパティを指定すると、背景画像がブラウザの表示ブラウザの表示領域（ビューポート）に固定され、ページをスクロールしても背景だけが動かなくなります。その結果、前景のコンテンツと背景との間に速度の違いが生まれ、奥行きのある視差効果を演出できます。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=

  6. CSSで要素のアスペクト比を維持する方法｜padding-topとaspect-ratio徹底解説

    Web制作において、画像・動画・カード型レイアウトなどで要素の縦横比（アスペクト比）を固定したい場面は非常に多くあります。ウィンドウサイズが変わってもレイアウトが崩れないようにするには、CSSの工夫が必要です。 基本の考え方：padding-topを使った手法 最も広く知られているのが「padding-top」を活用したテクニックです。paddingのパーセント指定は親要素の幅を基準に計算されるため、これを利用して高さを幅に連動させることができます。 例えば4:3の比率を維持したい場合は、padding-topに「75%」（3÷4×100）を指定します。同様に16:9なら「56.25%」、正方

  7. CSSとJavaScriptでダークモード／ライトモードを切り替える方法を解説！

    ダークモードとは？導入のメリット ダークモードは、夜間や暗い場所での閲覧時に目への負担を軽減できるうえ、有機EL（OLED）ディスプレイ搭載のスマートフォンやPCではバッテリー消費を抑えられる効果も期待できる、近年多くのWebサービスで標準となっている機能です。この記事では、CSSとJavaScriptを組み合わせて、ボタン操作ひとつでダークモードとライトモードを切り替える方法を、実際に動くサンプルコード付きで解説します。 切り替えの仕組み 実装の考え方は非常にシンプルです。まず、ライトモード（白背景・黒文字）のスタイルをbody要素のデフォルトとして定義し、ダークモード（黒背景・白文字）用の

  8. CSSとJavaScriptで作るツリービューの実装方法【サンプルコード付き】

    CSSとJavaScriptを組み合わせることで、Windowsのエクスプローラーのような、クリックで開閉できるツリービューを簡単に実装できます。本記事では、フォルダ構造を表現するツリービューを、実際に動くサンプルコードとともに解説します。 実装例 ポイントとなるのは、::before 疑似要素で▶アイコンを表示し、JavaScriptの classList.toggle() を使って子要素の表示・非表示を切り替える仕組みです。 <!DOCTYPE html> <html> <head> <meta name="viewport"

  9. CSSでホバー時に要素をズーム（拡大）表示する方法

    CSSで要素にマウスカーソルを合わせたとき（ホバー時）に、その要素をズーム・拡大表示するには、transformプロパティとtransitionプロパティを組み合わせて使用します。以下に具体的なコード例を示します。コード例<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> * { box-sizing: bo

  10. CSSで作る3Dフリップボックスの実装方法をわかりやすく解説

    CSSだけでも、マウスオーバー（ホバー）したときに表裏が反転する「フリップボックス」を簡単に実装できます。この記事では、perspective や transform などのCSSプロパティを使った3D反転カードの作り方を、実際のコード例とともに詳しく解説します。 フリップボックスの仕組み フリップボックスを実現するためには、主に以下のCSSプロパティが重要になります。 perspective：親要素に指定することで、3D空間の奥行き（遠近感）を生み出します。 transform-style: preserve-3d：子要素が3D空間内に配置されるようにします。 backface-visib

  11. CSSで要素を垂直方向・水平方向に中央揃えする方法

    CSSで要素を垂直方向と水平方向の両方に中央揃えしたい場合、最も簡単で推奨される方法はFlexbox（フレックスボックス）を使うことです。親要素に display: flex を設定し、justify-content: center と align-items: center を指定するだけで、子要素を中央に配置できます。 Flexboxを使った中央揃えの実装例 <!DOCTYPE html> <html> <head> <style> body { font-family: Segoe UI, Tahoma, Genev

  12. CSSでボタンを上下左右の中央に配置する方法【Flexbox活用】

    CSSでボタンを垂直方向・水平方向の中央に配置するには、Flexbox（フレックスボックス）を使うのが最も簡単で確実な方法です。親要素にdisplay: flex;を指定し、justify-content: center;で水平方向の中央揃え、align-items: center;で垂直方向の中央揃えを実現できます。 コード例 <!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Ve

  13. CSSで光るテキスト（グロー効果）を作成する方法

    CSSで光るテキスト（グロー効果）を作成するには、text-shadowプロパティと@keyframesによるアニメーションを組み合わせます。複数の影を重ねて光の輪を表現し、それをアニメーションで明滅させることで、文字が脈動するように輝く演出が可能です。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body {

  14. CSSで固定フッター（スティッキーフッター）を作成する方法

    CSSを使えば、スクロールしても常に画面下部に表示され続く「固定フッター（スティッキーフッター）」を簡単に作成できます。固定フッターの基本原理固定フッターを実現するポイントは、position: fixed; を使用することです。以下の3つのプロパティを組み合わせることで、要素を画面の最下部に固定できます。position: fixed; — 要素をビューポートに対して固定配置にしますbottom: 0; / left: 0; — 画面の左下の端に位置合わせしますwidth: 100%; — フッターを画面幅いっぱいに広げます実装例以下は、CSSで固定フッターを作成する具体的なコード例です。&

  15. CSSでスティッキー要素を作成する方法｜position: stickyの使い方を解説

    CSSでスティッキー（sticky）要素を作成するには、positionプロパティにstickyを指定し、topプロパティで画面上部からの固定位置を設定します。以下に具体的なコード例を示します。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> body { font-family: "

  16. CSSで高さの揃ったカラム（列）を作成する方法

    Webページのレイアウトでは、複数のカラム（段組み）の高さを揃えたい場面がよくあります。各カラムに入るコンテンツ量が異なっても、背景色やボーダーがきれいに揃っていると、デザイン全体の見栄えが大きく向上します。CSSで等しい高さのカラムを作成するには？もっともシンプルで確実な方法のひとつが、display: table と display: table-cell を使う手法です。HTMLのテーブルセルは同じ行内で高さが自動的に揃うという特性を持っているため、この仕様をレイアウトに応用できます。コード例<!DOCTYPE html> <html> <head>

  17. CSSのclearfixハックでフロート（float）を解除する方法をわかりやすく解説

    CSSで画像や要素にfloatを指定すると、親要素がフロートした子要素の高さを正しく認識できなくなり、レイアウトが崩れてしまうことがあります。このような問題を解決するために使われるのが「clearfixハック」です。 clearfixとは？ clearfixは、フロート（回り込み）を設定した子要素の影響を親要素が受けないようにするためのテクニックです。代表的な方法の一つとして、親要素に overflow: auto; を指定する手法があります。これにより、親要素はフロートした子要素も含めて高さを計算するようになり、レイアウトの崩れを防げます。 実装例 以下のコードでは、clearfixを使

  18. CSSでレスポンシブなフローティング要素を作成する方法【初心者向け解説】

    CSSでレスポンシブ対応のフローティング（回り込み）要素を作成するには、float プロパティと @media（メディアクエリ）を組み合わせます。これにより、画面幅に応じて要素の左右配置を動的に切り替えることができます。 サンプルコード 以下のコードは、画面サイズに応じてfloatの方向が入れ替わるレスポンシブなレイアウトの実装例です。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale

  19. CSSでスムーズなスクロール効果を実現する方法【scroll-behavior活用】

    CSSだけでスムーズなスクロール（スムーススクロール）を実現したい場合、scroll-behaviorプロパティを使用します。このプロパティにsmoothを指定すると、ページ内リンクをクリックした際に、瞬時にジャンプするのではなく、滑らかにアニメーションしながら目的のセクションへ移動できるようになります。実装方法基本的には、html要素に対して以下の1行を追加するだけです。html { scroll-behavior: smooth; }サンプルコード実際に動作する完全なコード例は以下の通りです。<!DOCTYPE html> <html> <head>

  20. CSSでスクロールに連動して変化するグラデーション背景を実装する方法

    Webページをスクロールしたときに、背景のグラデーションが自然に変化していく演出は、サイトに動きと深みを与えてくれる効果的なテクニックです。CSSだけでこの効果を実現するには、linear-gradient()を使ったグラデーション背景と、十分な高さを持つbody要素を組み合わせます。 仕組みのポイント この手法の鍵となるのは、以下の2点です。 bodyの高さを250vhなど画面より大きく設定する: ページ全体が長くなることでスクロールが発生します。グラデーションはbody全体に描画されるため、スクロールに応じて見えている部分が変化し、まるでグラデーションが「動いている」ように見えます。 l

Total 1579 -コンピューター  FirstPage PreviousPage NextPage LastPage CurrentPage:9/79  20-コンピューター/Page Goto:1 3 4 5 6 7 8 9 10 11 12 13 14 15