2018年12月10日(月)
CSSで横向きのフローチャート
Result
See the Pen CSS Horizontal Family Tree by kachibito (@kachibito) on CodePen.
横向きのフローチャートです。家系図とかにも使えそう
コードは固定的で現在の環境下ではやや汎用性に欠けるかもしれませんcss
.branch { position: relative; margin-left: 250px; } .branch:before { content: ""; width: 50px; border-top: 2px solid #eee9dc; position: absolute; left: -100px; top: 50%; margin-top: 1px; } .entry { position: relative; min-height: 60px; } .entry:before { content: ""; height: 100%; border-left: 2px solid #eee9dc; position: absolute; left: -50px; } .en...
0
1
9
27author:
かちびと.net
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログ
‹ PREV
「Instagram」の最適なハッシュタグ提案ツール「BuzzSpreader #AI」の無料提供開始
NEXT ›
WordPress：Gutenbergをカスタム投稿で有効化する方法／有効化されないときの確認ポイント
Ads
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログかちびと.netの記事『CSSで横向きのフローチャート』についてまとめています。
この記事は特にアニメーション・CSS3・jQuery・LINEについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のかちびと.netで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとかちびと.netの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
Ads
