検索
ホームページウェブフロントエンドCSSチュートリアル誰でも使える決定版 CSS ガイドで CSS をマスターする |パート2
誰でも使える決定版 CSS ガイドで CSS をマスターする |パート2
Mary-Kate Olsen
Mary-Kate Olsen
Jan 03, 2025 pm 03:09 PM

Mastering CSS in The Definitive CSS Guide for Everyone | Part-2

目次

No. Section Link
1 Responsive Design Principles Link
2 CSS Variables and Custom Properties Link
3 Animations and Transitions Link
4 Best Practices and Organization Link

レスポンシブデザインの原則

今日のマルチデバイスの世界では、レスポンシブ デザインはオプションではなく、不可欠です。あなたのウェブサイトは、スマートフォンで見ても、デスクトップの大きなモニターで見ても、見栄えが良くなければなりません。

メディアクエリ

メディア クエリはレスポンシブ デザインのスーパーパワーです:

/* Mobile-first approach */
.container {
    width: 100%;
    padding: 10px;
}

/* Tablet and larger */
@media screen and (min-width: 768px) {
    .container {
        width: 750px;
        padding: 20px;
    }
}

/* Desktop */
@media screen and (min-width: 1024px) {
    .container {
        width: 960px;
    }
}

対応ユニット

相対単位を使用すると、デザインが自然に応答性の高いものになります:

  • rem: ルート要素のフォント サイズとの相対値
  • em: 親要素のフォント サイズを基準
  • vw/vh: ビューポートの寸法を基準
  • %: 親要素のサイズに対する相対値

実践演習: レスポンシブ サービス セクション

メディア クエリと柔軟なユニットを使用して、さまざまな画面サイズにシームレスに適応する応答性の高いサービス セクションを作成します。

HTML:

<section>



<p>CSS:<br>
</p>

<pre class="brush:php;toolbar:false">/* Mobile First Approach */
.services {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

h2 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
}

.services-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.service-card {
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

button {
    width: 100%;
    padding: 10px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Tablet */
@media (min-width: 768px) {
    .services-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .service-card {
        flex: 0 1 calc(50% - 20px);
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .service-card {
        flex: 1;
    }

    button {
        width: auto;
        padding: 10px 20px;
    }
}

CSS: サービス セクションのより具体的なブレークポイントを見てみましょう。

/* Base styles - Mobile First (320px and up) */
.services {
    padding: 15px;
    max-width: 1200px;
    margin: 0 auto;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

h2 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
    font-size: clamp(1.5rem, 5vw, 2.5rem); /* Fluid typography */
}

.services-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.service-card {
    padding: 15px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease; /* Smooth transitions for responsive changes */
}

button {
    width: 100%;
    padding: 8px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

/* Small phones (375px and up) */
@media (min-width: 375px) {
    .services {
        padding: 20px;
    }

    .service-card {
        padding: 20px;
    }
}

/* Large phones (480px and up) */
@media (min-width: 480px) {
    .services-container {
        gap: 20px;
    }

    button {
        padding: 10px;
        font-size: 16px;
    }
}

/* Small tablets (600px and up) */
@media (min-width: 600px) {
    .services-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .service-card {
        flex: 0 1 calc(50% - 10px); /* Two cards per row with gap consideration */
    }
}

/* Tablets (768px and up) */
@media (min-width: 768px) {
    .services {
        padding: 30px;
    }

    .service-card {
        padding: 25px; /* Improved spacing for larger screens */
    }

    button: hover {
        /* Add hover effect for non-touch devices */
        background: #0056b3;
        transform: translateY(-2px);
    }
}

/* Small laptops (1024px and up) */
@media (min-width: 1024px) {
    .service-card {
        flex: 1; /* Three cards per row */
        transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add subtle hover effect */
    }

    .service-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }

    button {
        /* Change to inline button */
        width: auto;
        padding: 10px 20px;
    }
}

/* Desktops (1200px and up) */
@media (min-width: 1200px) {
    .services {
        padding: 40px;
    }

    .services-container {
        gap: 30px;
    }

    .service-card {
        padding: 30px;
    }
}

/* Extra large screens (1440px and up) */
@media (min-width: 1440px) {
    .services {
        max-width: 1400px; /* Max width to maintain readability */
    }

    .service-card {
        padding: 35px; /* Larger padding for extra large screens */
    }
}

/* Print styles */
@media print {
    .services {
        padding: 0;
    }

    .service-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }

    button {
        display: none;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .service-card,
    button {
        transition: none;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .service-card {
        background: #2a2a2a;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    h2 {
        color: #fff;
    }
}

参考文献:

  • MDN Web ドキュメント - レスポンシブ デザインの基礎 - ビューポート、ブレークポイント、柔軟なレイアウトをカバーする、レスポンシブ デザインの概念への優れた入門書です。
  • FreeCodeCamp - レスポンシブ Web デザイン認定資格 - レスポンシブ デザインの原則、グリッド、メディア クエリ、アクセシビリティをカバーする完全なコース。
  • 使用できますか - メディア クエリやフレックスボックスなどのレスポンシブ デザイン機能に対するブラウザの互換性を確認します。
  • レスポンシブ デザインのチートシート - レスポンシブ デザインの主要なプロパティとテクニックを理解しやすい形式でカバーしています。

CSS 変数とカスタム プロパティ

CSS 変数 (カスタム プロパティ) は、スタイルシートにプログラミングのような柔軟性をもたらします。メンテナンスが容易になり、ダイナミックなスタイリングが可能になります。

:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --spacing-unit: 1rem;
}

.button {
    background-color: var(--primary-color);
    padding: var(--spacing-unit);
}

実践的な演習: テーマと再利用性のための CSS 変数 

    <header>
        <h1 id="CSS-Variables-amp-Custom-Properties">CSS Variables & Custom Properties</h1>
    </header>

    <main>
        <section>





<pre class="brush:php;toolbar:false">/* Define CSS variables (custom properties) in the :root selector */
        :root {
            --primary-color: #3498db; /* Main theme color */
            --secondary-color: #2ecc71; /* Accent color */
            --text-color: #333; /* Default text color */
            --font-size: 16px; /* Base font size */
            --padding: 10px; /* Base padding */
        }

        /* General styles using variables */
        body {
            font-family: Arial, sans-serif;
            font-size: var(--font-size);
            color: var(--text-color);
            margin: 0;
            padding: 0;
            background-color: #f9f9f9;
        }

        header {
            background-color: var(--primary-color);
            color: white;
            text-align: center;
            padding: var(--padding);
        }

        .card {
            background-color: white;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin: 20px;
            padding: var(--padding);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .card h2 {
            color: var(--primary-color);
        }

        .card p {
            color: var(--text-color);
        }

        button {
            background-color: var(--secondary-color);
            color: white;
            border: none;
            border-radius: 5px;
            padding: calc(var(--padding) / 2) calc(var(--padding) * 2);
            cursor: pointer;
            font-size: var(--font-size);
        }

        button:hover {
            background-color: var(--primary-color);
        }

        /* Dark mode example by overriding variables */
        body.dark-mode {
            --primary-color: #1abc9c;
            --secondary-color: #e74c3c;
            --text-color: #f9f9f9;
            background-color: #333;
        }

参考文献:

  • MDN Web ドキュメント - CSS カスタム プロパティ (変数) の使用 - CSS 変数の定義、使用、更新に関する例を示した、初心者向けの徹底した説明です。
  • W3Schools - CSS 変数 - 簡単な練習用のライブ コード例を使用して CSS 変数の基本をカバーします。
  • CSS のトリック - カスタム プロパティの完全ガイド - 実際の使用例と高度な変数の使用に関するヒントを紹介する包括的なガイドです。
  • Freecodecamp - CSS 変数フル ハンドブック - カスケード効果、メディア クエリベースの変数、スコープ管理などの強力なテクニックを探ります。

アニメーションとトランジション

Web サイトに動きを加えると、魅力的なユーザー エクスペリエンスが生まれます。 CSS では、アニメーションを作成する主な方法が 2 つあります:

トランジション

単純な状態変更に最適:

/* Mobile-first approach */
.container {
    width: 100%;
    padding: 10px;
}

/* Tablet and larger */
@media screen and (min-width: 768px) {
    .container {
        width: 750px;
        padding: 20px;
    }
}

/* Desktop */
@media screen and (min-width: 1024px) {
    .container {
        width: 960px;
    }
}

キーフレームアニメーション

より複雑な複数ステップのアニメーションの場合:

<section>



<p>CSS:<br>
</p>

<pre class="brush:php;toolbar:false">/* Mobile First Approach */
.services {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

h2 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
}

.services-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.service-card {
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

button {
    width: 100%;
    padding: 10px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Tablet */
@media (min-width: 768px) {
    .services-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .service-card {
        flex: 0 1 calc(50% - 20px);
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .service-card {
        flex: 1;
    }

    button {
        width: auto;
        padding: 10px 20px;
    }
}

高度なアニメーション技術

アニメーションの CSS カスタム プロパティ:

/* Base styles - Mobile First (320px and up) */
.services {
    padding: 15px;
    max-width: 1200px;
    margin: 0 auto;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

h2 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
    font-size: clamp(1.5rem, 5vw, 2.5rem); /* Fluid typography */
}

.services-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.service-card {
    padding: 15px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease; /* Smooth transitions for responsive changes */
}

button {
    width: 100%;
    padding: 8px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

/* Small phones (375px and up) */
@media (min-width: 375px) {
    .services {
        padding: 20px;
    }

    .service-card {
        padding: 20px;
    }
}

/* Large phones (480px and up) */
@media (min-width: 480px) {
    .services-container {
        gap: 20px;
    }

    button {
        padding: 10px;
        font-size: 16px;
    }
}

/* Small tablets (600px and up) */
@media (min-width: 600px) {
    .services-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .service-card {
        flex: 0 1 calc(50% - 10px); /* Two cards per row with gap consideration */
    }
}

/* Tablets (768px and up) */
@media (min-width: 768px) {
    .services {
        padding: 30px;
    }

    .service-card {
        padding: 25px; /* Improved spacing for larger screens */
    }

    button: hover {
        /* Add hover effect for non-touch devices */
        background: #0056b3;
        transform: translateY(-2px);
    }
}

/* Small laptops (1024px and up) */
@media (min-width: 1024px) {
    .service-card {
        flex: 1; /* Three cards per row */
        transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add subtle hover effect */
    }

    .service-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }

    button {
        /* Change to inline button */
        width: auto;
        padding: 10px 20px;
    }
}

/* Desktops (1200px and up) */
@media (min-width: 1200px) {
    .services {
        padding: 40px;
    }

    .services-container {
        gap: 30px;
    }

    .service-card {
        padding: 30px;
    }
}

/* Extra large screens (1440px and up) */
@media (min-width: 1440px) {
    .services {
        max-width: 1400px; /* Max width to maintain readability */
    }

    .service-card {
        padding: 35px; /* Larger padding for extra large screens */
    }
}

/* Print styles */
@media print {
    .services {
        padding: 0;
    }

    .service-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }

    button {
        display: none;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .service-card,
    button {
        transition: none;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .service-card {
        background: #2a2a2a;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    h2 {
        color: #fff;
    }
}

高度なキーフレーム アニメーション: 

:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --spacing-unit: 1rem;
}

.button {
    background-color: var(--primary-color);
    padding: var(--spacing-unit);
}

実践演習: インタラクティブカード

ホバー効果のあるインタラクティブなカードを作成します:

HTML:

/* Mobile-first approach */
.container {
    width: 100%;
    padding: 10px;
}

/* Tablet and larger */
@media screen and (min-width: 768px) {
    .container {
        width: 750px;
        padding: 20px;
    }
}

/* Desktop */
@media screen and (min-width: 1024px) {
    .container {
        width: 960px;
    }
}

参考文献:

  • MDN Web ドキュメント - CSS トランジション - CSS トランジションの明確な入門書であり、スタイルを変更するときにスムーズな効果を作成する方法を説明しています。
  • MDN Web ドキュメント - CSS アニメーション - キーフレーム、アニメーション プロパティ、複雑なアニメーションの作成に関するステップバイステップ ガイド。
  • W3Schools - CSS トランジション - トランジションとアニメーションをインタラクティブに練習できるライブ コード エディターを備えた初心者向け。
  • W3Schools - CSS アニメーション - キーフレームとトランジションを使用して Web サイトにアニメーションを追加するためのわかりやすいガイドです。
  • CSS トリック - アニメーション - 応答性の高いアニメーション、アクセシビリティのためのモーションの削減、メディア クエリの統合について説明します。
  • Animate.css - プロジェクトに簡単に追加できる、事前に構築されたアニメーションを提供する人気の CSS ライブラリです。

ベストプラクティスと組織

CSS アーキテクチャ

  • 一貫した命名規則を使用する
  • コンポーネント/機能ごとに CSS ファイルを整理します
  • 可能な限り特異性を低く保ちます
  • コードを効果的にコメント化する 
<section>



<p>CSS:<br>
</p>

<pre class="brush:php;toolbar:false">/* Mobile First Approach */
.services {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

h2 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
}

.services-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.service-card {
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

button {
    width: 100%;
    padding: 10px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Tablet */
@media (min-width: 768px) {
    .services-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .service-card {
        flex: 0 1 calc(50% - 20px);
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .service-card {
        flex: 1;
    }

    button {
        width: auto;
        padding: 10px 20px;
    }
}

実践的な演習: CSS アーキテクチャのベスト プラクティス 



    
    <meta name="viewport" content="width=device-width、initial-scale=1.0">
    <title>CSS アーキテクチャ演習</title>
     <!-- デフォルトのブラウザスタイルをリセットします -->
     <!-- レイアウト関連のスタイル -->
     <!-- ヘッダーコンポーネントのスタイル -->
     <!-- カード コンポーネント スタイル -->
     <!-- クイックフィックス用のユーティリティ クラス -->


    



<h3>
  
  
  参考文献:
</h3>
  • BEM - Block Element Modifier - CSS クラスに名前を付け、スタイルを構築して再利用性と保守性を向上させるための一般的な方法論。
  • SMACSS - CSS のスケーラブルなモジュラー アーキテクチャ - CSS を論理的で保守可能なカテゴリに編成するための詳細なフレームワーク。
  • CSS ガイドライン (Harry Roberts 著) - 論理ファイル構造と命名規則を備えた、スケーラブルで保守可能な CSS を作成するための高品質なガイド。

構築する時間です! ?

今度はあなたが学んだことを実践する番です!あなたの課題は次のとおりです:

  • 新しい CodePen を作成します (codepen.io で無料です)
  • これまでに取り上げた例と演習を構築します
  • あなたの作品を共有してください! 以下のコメントに CodePen のリンクをドロップしてください

ボーナスポイント: デザインに独自のクリエイティブなひねりを加えましょう!コメントで共有されたすべての CodePen を個人的に確認して返信します。

? プロのヒント: 自分の考えを説明するために、CSS にコメントを忘れずに追加してください。他の人があなたのコードから学ぶのに役立ちます!

次は何ですか? ?

これは CSS Zero to Hero シリーズのパート 2 です。今後の投稿では、さらにエキサイティングな CSS の概念をさらに詳しく掘り下げていきます。お見逃しのないようにご注意ください:

  1. ? この投稿をブックマークすると、コーディング時にすぐに参照できます
  2. ❤️ 役に立ったと思ったら、この記事にいいね! (他の人も見つけやすくなります!)
  3. ? フォローしてください シリーズの次の部分をご覧ください

つながろう！ ?

エクササイズは試しましたか？ご質問がありますか?コメントであなたの経験を共有してください！私はすべてのコメントに返信し、あなたの進歩を見るのが大好きです。

パート 3 でお会いしましょう!コーディングを楽しんでください! ?‍??‍?

以上が誰でも使える決定版 CSS ガイドで CSS をマスターする |パート2の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
関連記事
スクリーンリーダーの分解：アクセス可能なフォームとベストプラクティススクリーンリーダーの分解：アクセス可能なフォームとベストプラクティスMar 08, 2025 am 09:45 AM

これは、フォームアクセシビリティについて行った小さなシリーズの3番目の投稿です。 2番目の投稿を逃した場合は、「ユーザーフォーカスの管理：Focus-Visible」をご覧ください。で

Smart Forms Frameworkを使用してJavaScript連絡フォームを作成するSmart Forms Frameworkを使用してJavaScript連絡フォームを作成するMar 07, 2025 am 11:33 AM

このチュートリアルでは、Smart Formsフレームワークを使用して、プロフェッショナルなJavaScriptフォームの作成を示しています（注：使用できなくなりました）。 フレームワーク自体は利用できませんが、原則とテクニックは他のフォームビルダーに関連しています。

WordPressブロックと要素にボックスシャドウを追加しますWordPressブロックと要素にボックスシャドウを追加しますMar 09, 2025 pm 12:53 PM

CSS Box-Shadowおよびアウトラインプロパティは、WordPress 6.1でTheme.jsonサポートを獲得しました。実際のテーマでどのように機能するか、そしてこれらのスタイルをWordPressブロックと要素に適用するために必要なオプションのいくつかの例を見てみましょう。

5つの最高のPHPフォームビルダー（および3つの無料スクリプト）を比較する5つの最高のPHPフォームビルダー（および3つの無料スクリプト）を比較するMar 04, 2025 am 10:22 AM

この記事では、Envato Marketで入手可能なPHPフォームのビルダースクリプトを説明し、機能、柔軟性、デザインを比較します。 特定のオプションに飛び込む前に、PHPフォームのビルダーが何であるか、そしてそれを使用する理由を理解しましょう。 PHPフォーム

GraphQLキャッシングの使用GraphQLキャッシングの使用Mar 19, 2025 am 09:36 AM

最近GraphQLの作業を開始した場合、またはその長所と短所をレビューした場合、「GraphQLがキャッシュをサポートしていない」または

最初のカスタムSvelteトランジションを作成します最初のカスタムSvelteトランジションを作成しますMar 15, 2025 am 11:08 AM

Svelte Transition APIは、コンポーネントがカスタムSVELTE遷移を含むドキュメントを入力または離れるときにアニメーション化する方法を提供します。

ショー、Don＆＃039; t Tellショー、Don＆＃039; t TellMar 16, 2025 am 11:49 AM

あなたのウェブサイトのコンテンツプレゼンテーションの設計にどれくらいの時間に費やしますか？新しいブログ投稿を書いたり、新しいページを作成したりするとき、あなたは考えていますか

上品でクールなカスタムCSSスクロールバー：ショーケース上品でクールなカスタムCSSスクロールバー：ショーケースMar 10, 2025 am 11:37 AM

この記事では、Scrollbarsの世界に飛び込みます。私は知っています、それはあまりにも魅力的ではありませんが、私を信じてください、よく設計されたページは手をつないで行きます

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
2週間前By尊渡假赌尊渡假赌尊渡假赌
レポ：チームメイトを復活させる方法
1 か月前By尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー：巨大な種を手に入れる方法
4週間前By尊渡假赌尊渡假赌尊渡假赌
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？
3週間前ByDDD
R.E.P.O.ファイルの保存場所：それはどこにあり、それを保護する方法は？
4週間前ByDDD
もっと見る

ホットツール

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？
7355
15
Java チュートリアル
1628
14
CakePHP チュートリアル
1353
52
Laravel チュートリアル
1265
25
PHP チュートリアル
1214
29
もっと見る