スクリプトは必要ありません: CSS は信じています-CSSチュートリアル-php.cn

No Script Needed: CSSing is Believing

導入

CSS (Cascading Style Sheets) は、Web 開発の縁の下の力持ちです。これは、スタイルのないプレーンな HTML を、私たちが日常的に使用する視覚的に魅力的でユーザーフレンドリーなインターフェイスに変換するツールです。 HTML はコンテンツを構造化し、JavaScript はコンテンツに命を吹き込みますが、CSS はその組み合わせに美しさを吹き込みます。時間の経過とともに、CSS は単純なスタイリング言語から、以前は JavaScript を必要とした、より複雑なタスクを処理できる言語へと進化してきました。このブログでは、CSS の基本を説明した後、JavaScript への依存を最小限に抑えながら、CSS のみを使用してインタラクティブな UI 要素を作成できるいくつかの賢いトリックについて詳しく説明します。

CSSの基本

高度なテクニックに入る前に、CSS の核心をもう一度見てみましょう。これらの基本は、より複雑なテクニックの基礎となるため、理解することが非常に重要です。

セレクターとプロパティ

CSS セレクターは、スタイルを適用する HTML 要素をターゲットにする手段です。特定の要素や要素のクラスをスタイル設定する場合でも、高度なセレクターを使用して属性に基づいて要素をターゲットにする場合でも、要素を効果的に選択する方法を知ることが重要です。

たとえば、クラスセレクター (.class-name) と ID セレクター (#id-name) の違いは、子 (>)、隣接する兄弟 (+)、および一般的な兄弟 (~) セレクター。

一方、プロパティは、それらの要素に適用するスタイルを定義します。 color、font-size、background-color、border などのプロパティは最も一般的に使用されるプロパティの一部ですが、利用可能なプロパティは数百あり、それぞれに独自の癖やニュアンスがあります。

ボックスモデル

ボックスモデルは CSS における重要な概念です。すべての HTML 要素は基本的に長方形のボックスであり、ボックスモデルを理解すると、これらのボックスの周囲のスペースを制御するのに役立ちます。

ボックスモデルは次の部分で構成されます:

コンテンツ: テキストや画像などのボックスの実際のコンテンツ。
パディング: コンテンツと境界線の間のスペース。
ボーダー: パディング (およびコンテンツ) を囲むエッジ。
マージン: 要素を隣接する要素から分離する、境界線の外側のスペース。

これらのプロパティの操作方法を理解すると、レイアウトを微調整して、要素を希望通りに正確に配置して配置できるようになります。

位置決め

配置とは、要素を周囲の要素またはビューポートとの関係で配置する方法です。 CSS は、要素を配置するいくつかの方法を提供します。

静的: デフォルトの配置。要素はドキュメントの通常の流れに従います。
相対: 要素は通常の位置を基準にして配置されます。
絶対: 要素は、最も近い位置にある祖先を基準にして配置されます。
修正: 要素はビューポートを基準にして配置され、ページがスクロールされても所定の位置に留まります。
スティッキー: ユーザーのスクロール位置に基づいて、相対と固定を切り替えるハイブリッド。

これらの配置テクニックは、固定ヘッダー、フッター、または複雑なページデザインの作成など、より高度なレイアウトの基礎となります。

フレックスボックスとグリッド

Flexbox と Grid は、レスポンシブデザインに革命をもたらした 2 つのレイアウトモジュールです。導入前、開発者は float と inline-block に大きく依存していましたが、これらは管理が難しいことがよくありました。

Flexbox は、項目を行または列にレイアウトするための 1 次元のレイアウト方法です。これにより、コンテナ内でアイテムを整列させ、スペースを均等に分配し、動的なサイズを処理するプロセスが簡素化されます。

例:

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

ログイン後にコピー

Grid は、行と列を含むグリッドベースのレイアウトを提供する 2 次元レイアウトシステムです。グリッドは、複雑なレイアウトを作成する場合により強力であり、単一のコンテナーで水平方向と垂直方向の両方の配置が可能です。

例:

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

ログイン後にコピー

Flexbox と Grid はどちらも、さまざまな画面サイズにシームレスに適応するレスポンシブデザインを作成するために不可欠なツールです。

CSS で基本を超えてみる

基本を説明したので、CSS のさらに高度な機能をいくつか見てみましょう。これらのツールを使用すると、JavaScript に依存せずに Web サイトにインタラクティブ機能やアニメーションを追加できます。

Transitions and Animations

CSS transitions and animations bring your designs to life with smooth, dynamic effects. While JavaScript can also create animations, CSS does so with less overhead and often with simpler code.

Transitions allow you to change property values smoothly (over a given duration). For example, you can create a hover effect that gradually changes the background color of a button:

button {
    background-color: #3498db;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #2ecc71;
}

ログイン後にコピー

Animations take things a step further, allowing you to define keyframes that specify the start and end states of the animation, as well as any intermediate points:

@keyframes slidein {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

.element {
    animation: slidein 1s ease-in-out;
}

ログイン後にコピー

With animations, you can create complex sequences that run automatically, or trigger based on user interaction.

Hover Effects

Hover effects are a common way to indicate interactivity on web elements like buttons, links, or images. With CSS, you can create impressive effects without a single line of JavaScript.

For example, a simple zoom-in effect on an image:

.image-container img {
    transition: transform 0.3s ease;
}

.image-container:hover img {
    transform: scale(1.1);
}

ログイン後にコピー

Such effects improve user experience by making the interface feel more responsive and polished.

Responsive Design

Responsive design ensures that your website looks good on all devices, from desktops to smartphones. Media queries are the key tool in this regard, allowing you to apply styles based on the device’s screen size.

Example:

@media (max-width: 600px) {
    .container {
        flex-direction: column;
    }
}

ログイン後にコピー

By combining Flexbox, Grid, and media queries, you can create layouts that adapt seamlessly to different screen sizes, improving accessibility and user experience.

Replacing JavaScript with Clever CSS

Now for the fun part: using CSS to do things that most people think require JavaScript. With some creativity, CSS can handle many interactive elements on its own.

Checkbox Hack

The checkbox hack is a popular technique where a hidden checkbox input is used to toggle UI elements. By pairing the :checked pseudo-class with labels and other elements, you can create toggles, dropdowns, and even simple modal windows.

Example of a simple toggle:

<input type="checkbox" id="toggle">
<label for="toggle">Toggle Content</label>
<div class="content">
    <p>This content is toggled on and off with CSS only!</p>
</div>

ログイン後にコピー

.content {
    display: none;
}

#toggle:checked + .content {
    display: block;
}

ログイン後にコピー

This technique allows you to create interactive elements without writing any JavaScript, simplifying your codebase and improving performance.

CSS Tooltips

Tooltips are commonly implemented with JavaScript, but CSS can handle them elegantly using the :hover pseudo-class and the ::after pseudo-element.

Example:

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip:hover::after {
    content: 'Tooltip text';
    position: absolute;
    background-color: #333;
    color: #fff;
    padding: 5px;
    border-radius: 3px;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

ログイン後にコピー

This method creates a simple, effective tooltip that requires no extra HTML elements or JavaScript.

Dropdown Menus

Dropdown menus are another feature often implemented with JavaScript, but CSS can handle them using the :hover pseudo-class and careful positioning.

Example:

.menu {
    position: relative;
    display: inline-block;
}

.menu-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.menu:hover .menu-content {
    display: block;
}

ログイン後にコピー

This CSS-only approach to dropdowns keeps your codebase lean and avoids potential issues with JavaScript event handling.

Accordions

Accordions are a common UI element, often used in FAQs or to hide/show sections of content. With CSS, you can create an accordion using the :target pseudo-class or the checkbox hack.

Example with :target:

<div class="accordion">
    <h3 id="section1">Section 1</h3>
    <div class="content">
        <p>Content for section 1</p>
    </div>
    <h3 id="section2">Section 2</h3>
    <div class="content">
        <p>Content for section 2</p>
    </div>
</div>

ログイン後にコピー

.content {
    display: none;
}

#section1:target ~ .content:nth-of-type(1),
#section2:target ~ .content:nth-of-type(2) {
    display: block;
}

ログイン後にコピー

This approach lets users expand and collapse content sections without needing JavaScript, making for a simpler and more accessible solution.

CSS Counters

CSS counters can replace JavaScript for simple numbering tasks, such as

automatically numbering list items, sections, or figures.

Example:

ol {
    counter-reset: section;
}

ol li {
    counter-increment: section;
}

ol li::before {
    content: counter(section) ". ";
    font-weight: bold;
}

ログイン後にコピー

CSS counters are a powerful tool that can simplify your HTML structure by eliminating the need for manually adding numbers or JavaScript logic.

Real-World Examples

Let’s look at a few real-world examples where CSS has replaced JavaScript, resulting in cleaner, faster, and more maintainable code.

Example 1: Pure CSS Modal

A modal window is often implemented using JavaScript to control its visibility. However, using the checkbox hack, you can create a modal with just HTML and CSS:

<input type="checkbox" id="modal-toggle">
<label for="modal-toggle" class="modal-button">Open Modal</label>
<div class="modal">
    <label for="modal-toggle" class="modal-close">×</label>
    <p>This is a modal dialog created with pure CSS.</p>
</div>

ログイン後にコピー

.modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

#modal-toggle:checked + .modal {
    display: block;
}

ログイン後にコピー

Example 2: CSS-Only Carousel

Carousels or sliders are typically powered by JavaScript, but you can create a simple one using CSS animations and the :checked pseudo-class:

<div class="carousel">
    <input type="radio" name="slides" id="slide1" checked>
    <input type="radio" name="slides" id="slide2">
    <input type="radio" name="slides" id="slide3">
    <div class="slides">
        <div class="slide" id="slide-1">Slide 1</div>
        <div class="slide" id="slide-2">Slide 2</div>
        <div class="slide" id="slide-3">Slide 3</div>
    </div>
</div>

ログイン後にコピー

.slides {
    width: 300%;
    display: flex;
    transition: transform 0.5s ease;
}

#slide1:checked ~ .slides {
    transform: translateX(0%);
}

#slide2:checked ~ .slides {
    transform: translateX(-100%);
}

#slide3:checked ~ .slides {
    transform: translateX(-200%);
}

ログイン後にコピー

These examples show how powerful CSS can be when it comes to creating interactive elements without relying on JavaScript.

結論

CSS は、単純なスタイルをはるかに超えて進化しています。基本をしっかり理解していれば、CSS を活用して、かつて JavaScript が必要だったタスクを処理し、コードを簡素化し、パフォーマンスを向上させることができます。ホバー効果からドロップダウン、アコーディオン、モーダルなどのインタラクティブな UI コンポーネントに至るまで、CSS は軽量でアクセスしやすいエレガントなソリューションを提供します。ご自身のプロジェクトでこれらのテクニックを試してみることをお勧めします。 CSS だけでどれだけのことを達成できるかに驚くかもしれません!