ミギムキ

[CSS] 要因の掘り下げに使える矢印付きの図をCSSで描きたい

深堀りの図

サンプルコード

html

<div class="dig"> <dl> <dt>なぜベストを<br>尽くさないのか</dt> <dd>だるい</dd> <dd>めんどう</dd> <dd>「どんとこい」<br>と思えない</dd> </dl> </div>
スポンサー広告

CSS

.dig { display: table; position: relative; margin: 0px auto; font-size: 1.5vw; } .dig > dl { display: flex; justify-content: center; align-items: center; position: relative; padding: 4em 0px 0px; margin: 0px; } .dig > dl > dt, .dig > dl > dd { display: flex; justify-content: center; align-items: center; padding: 0.5em; width: 10em; height: 3em; border: 0.2em solid currentColor; box-sizing: border-box; text-align: center; line-height: 1; } .dig > dl > dt { position: absolute; top: 0px; left: 50%; transform: translateX(-50%); } .dig > dl > dd { position: relative; padding: 0px; margin: 2em 1em 0px; } .dig > dl > dd::before { position: absolute; top: -2.8em; left: 0px; width: 100%; height: 2.3em; background: linear-gradient(to right, #000 0%, #000 100%) top center / 0.2em calc(100% - 0.3em) no-repeat, linear-gradient(to top right, transparent 50%, #000 50%) bottom -0.2em left calc(50% - 0.2em + 1px) / 0.4em 1em no-repeat, linear-gradient(to top left, transparent 50%, #000 50%) bottom -0.2em left calc(50% + 0.2em - 1px) / 0.4em 1em no-repeat; overflow: hidden; content: ""; } .dig > dl > dd:first-of-type:nth-last-of-type(2)::before { transform: translateX(25%) rotate(45deg); } .dig > dl > dd:first-of-type:nth-last-of-type(2) ~ dd:last-of-type::before { transform: translateX(-25%) rotate(-45deg); } .dig > dl > dd:first-of-type:nth-last-of-type(3)::before { transform: translateX(50%) rotate(45deg); } .dig > dl > dd:first-of-type:nth-last-of-type(3) ~ dd:last-of-type::before { transform: translateX(-50%) rotate(-45deg); } .dig .dig { position: absolute; top: -0.2em; left: 50%; transform: translateX(-50%); margin: 0px; }
  • 各要素のサイズは「em」単位で指定しています。「dig」クラスの「font-size」を変更することで、図全体のサイズ感を調整することができます
  • 矢印の元になる枠は「dt」タグを使って、矢印の先になる枠は「dd」タグを使っています
  • 「dd」タグは「display: flex;」で横並びにしています。「dt」タグは「position: absolute;」で位置を指定することで、横並びの対象にならないようにしています

矢印の描画について

.dig > dl > dd::before { position: absolute; top: -2.8em; left: 0px; width: 100%; height: 2.3em; background: linear-gradient(to right, #000 0%, #000 100%) top center / 0.2em calc(100% - 0.3em) no-repeat, linear-gradient(to top right, transparent 50%, #000 50%) bottom -0.2em left calc(50% - 0.2em + 1px) / 0.4em 1em no-repeat, linear-gradient(to top left, transparent 50%, #000 50%) bottom -0.2em left calc(50% + 0.2em - 1px) / 0.4em 1em no-repeat; overflow: hidden; content: ""; } .dig > dl > dd:first-of-type:nth-last-of-type(2)::before { transform: translateX(25%) rotate(45deg); } .dig > dl > dd:first-of-type:nth-last-of-type(2) ~ dd:last-of-type::before { transform: translateX(-25%) rotate(-45deg); } .dig > dl > dd:first-of-type:nth-last-of-type(3)::before { transform: translateX(50%) rotate(45deg); } .dig > dl > dd:first-of-type:nth-last-of-type(3) ~ dd:last-of-type::before { transform: translateX(-50%) rotate(-45deg); }

段を増やす場合

段数を増やした深堀りの図 <div class="dig"> <dl> <dt>なぜベストを<br>尽くさないのか</dt> <dd>だるい</dd> <dd>めんどう</dd> <dd> <div class="dig"> <dl> <dt>「どんとこい」<br>と思えない</dt> <dd>出口</dd> <dd>ブラジル</dd> </dl> </div> </dd> </dl> </div>
スポンサー広告
スポンサー広告