計画をCSSで

こんにちは。N本ノック31日目ですね。旅行で計画より遅いと発狂する静カニです。 今回の旅行はmarginをかなり確保したので計画より早く行動できたので発狂しませんでした。 margin…css…marginとpadding …ぬわ! ということで計画をうまくmarginとpaddingで表せないかと思ったので書いてみたいと思います。

計画の要素

計画にどういう要素があるのかを考えたうえで、CSSと対応つけてみます。 一旦列挙してみましょう。

• 場所
• 到着時間
• 出発時間
• 滞在時間
• 現地でやること
• 移動方法

滞在時間はdiv要素、到着時間はborder-top、出発時間はborder-bottomのそれぞれの場所で表現できそうです。 数値型で表せないものは一旦置いておきましょう。

コードで考えてみる

ということで一旦HTMLにしてみます。

<main>
  <div class="spot" id="home"></div>
  <div class="move" id="home-near-station"></div>
  <div class="spot" id="near-station"></div>
  <div class="move" id="near-station-foo-station"></div>
  <div class="spot" id="foo-station"></div>
  <div class="move" id="foo-station-foo-shrine"></div>
  <div class="spot" id="foo-shrine"></div>
  <!-- … -->
</main>

これに対応するCSSを書くとこんなんでしょうか。 px=分、移動は出発地点のheightに含むことにします。

.spot #home {
  height: 0;
}
.move #home-near-station {
  height: 10px;
  padding-bottom: 5px;
}
.spot #near-station {
  height: 0px;
}
.move #near-station-foo-station {
  height: 50px;
}
.spot #foo-station {
  margin-top: 10px;
  height: 0px;
}
.move #foo-station-foo-shrine {
  height: 10px;
  padding-bottom: 5px;
}
.spot #foo-shrine {
  height: 30px;
  padding-bottom: 5px;
}
/* … */

まとめ

何がしたかったのかよく分からなくなったのでそもそも発狂しないように修行しに行った方がいい気がしてきました。