【CSS】シンプルなチャートサンプル【Gist】


Office製品で、たまに見る下や右に枠を矢印でつなげていくあれです。
あれをWebで作るのが面倒だったので、gistに登録しました。
AAAA
BBB
CCC
xxxx
yyy
zzz
DDD

ポイント

  • display:flexで横並び
  • 矢印が中央になるように align-items: center;の設定
  • 矢印は例によって,borderとafter要素と ポジショニングで。
  • 階層構造を表すことも可。
  • CCCのところは縦関係にDIVグルーピングして対応
  • 矢印に柔軟性が必要であれば、position:absoluteしたほうがいいかも。

ソース

Delicious にシェア
Digg にシェア
reddit にシェア
LinkedIn にシェア
LINEで送る
email this
Pocket

21 views.



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です