純粋な CSS3 マインドマップ スタイルの例

純粋な CSS3 マインドマップ スタイルの例

マインドマップ

彼はおそらく次のように見えるでしょう:

インターネット上の実装のほとんどは d3.js を使用して実装されており、一部は svg を使用して手動で実装されています。最近、仕事でそれが必要になり、非常に面倒なので、CSS3 を使用して実装できるかどうか疑問に思っています。

答えはイエスです。これがコードです

HTMLコード

<div class="mainBody" id="node1">
    <h1>ノード1</h1>
    <div class="oneBody">
        <div class="mainBody">
            <h1>ノード2</h1>
            <div class="oneBody">
                <div class="mainBody">
                    <h1>ノード3</h1>
                    <div class="oneBody">
                        <div class="mainBody">
                            <h1>ノード4</h1>
                        </div>
                        <div class="mainBody">
                            <h1>ノード4</h1>
                        </div>
                        <div class="mainBody">
                            <h1>ノード4</h1>
                        </div>
                    </div>
                </div>
                <div class="mainBody">
                    <h1>ノード3</h1>
                </div>
                <div class="mainBody">
                    <h1>ノード3</h1>
                </div>
            </div>
        </div>
        <div class="mainBody"><h1>ノード2</h1></div>
        <div class="mainBody"><h1>ノード2</h1></div>
    </div>
</div>

CSS3 コード

.mainBody{
    display: -webkit-flex; /* Safari */
    ディスプレイ: フレックス;
    flex-direction: 行;
    コンテンツの配置: flex-start ;
}
.sbody{

}
.oneBody{
    display: -webkit-flex; /* Safari */
    ディスプレイ: フレックス;
    flex-direction: 列;
    コンテンツの両端揃え: スペースを空ける;
}
#ノード1{
    /*高さ: 200px;*/
    上マージン: 100px;
    左マージン: 100px;
}
h1{
    行の高さ: 100%;
    display: -webkit-flex; /* Safari */
    ディスプレイ: フレックス;
    flex-direction: 列;
    コンテンツの中央揃え: 中央;
}

実際の効果は以下のとおりです。

ああ、ちょっと粗雑ですね... でも、スタイルは何でも好きなようにできます。ノードを追加するには、HTML に対応するノード コードを追加するだけです。高さと位置は適応的です。CSS3 flex のおかげで、この時代に生きているのは幸運です。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  数千万件のレコードをMySQLに素早く挿入する方法に関する実践的なチュートリアル

>>:  docker ベースで Prometheus+Grafana を構築する手順の詳細説明

推薦する

MySQLデータベースが予期せずクラッシュし、テーブルデータファイルが破損して起動できなくなる問題を解決します。

問題: MySQL データベースが予期せずクラッシュしたため、データベースを起動できませんでした。エ...

Nginxでネットワーク分離を解決した実践記録を詳しく解説

必要最近、Node オンライン サービスを移行する必要があったため、2 つの新しいオンライン サーバ...

MySQLのレプリケーションとチューニングの原則と方法を分析する

1. はじめにMySQL にはレプリケーション ソリューションが付属しており、次のような利点がありま...

トップに戻るボタンの例の JavaScript 実装

この記事では、トップに戻るボタンを実装するためのJavaScriptの具体的なコードを参考までに紹介...

MySQLクライアント認証後の接続失敗の問題に対する完璧なソリューション

MySQL 環境をローカル (192.168.1.152) にデプロイし、リモート クライアント 1...

MySQL SHOW PROCESSLISTはトラブルシューティングの全プロセスを支援します

1. SHOW PROCESSLISTコマンドSHOW PROCESSLIST は実行中のスレッド ...

虫眼鏡効果を実現するJavaScript

この記事では、虫眼鏡効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します。...

MySQLデータを復元する2つの方法

1. はじめに少し前、開発者がテスト環境や本番環境で誤った操作をし、データベースを誤って削除/更新し...

MySQL での %% のようなファジークエリの実装

1、%: 0 個以上の任意の文字を表します。あらゆるタイプと長さの文字に一致します。場合によっては、...

HTML の色に関する参考資料

HTML では、色は 2 つの方法で表現されます。 1 つは、青の場合は blue のように色の名前...

Velocity.js はページスクロール切り替え効果を実装します

今日は、複数ページのスクロール切り替え効果を備えた Web サイトを簡単かつ効率的に開発できる、小さ...

MySQLを安全にシャットダウンする方法

MySQL サーバーをシャットダウンする場合、シャットダウン方法に応じてさまざまな問題が発生する可能...

Linux でバックグラウンドで実行中のプログラムを表示して終了する方法

1. .shファイルを実行する./sh ファイルを使用して直接実行することもできますが、現在のターミ...

LinuxカーネルマクロContainer_Ofの詳細な説明

目次1. 構造体はメモリにどのように保存されますか? 2. container_ofマクロ3. 型4...

CSSの高さの崩壊問題についての簡単な説明

パフォーマンス例えば: HTML: <div class="first"&...