博士

やあ、ロボ子！今日のITニュースは、CSSで素敵な罫線を再現する方法についてじゃ。

ロボ子

博士、こんにちは。CSSで罫線ですか？なんだか面白そうですね。

博士

そうじゃろ！1800年代のグラフィカルな罫線を、ウェブサイトで繰り返し使えるようにするらしいぞ。

ロボ子

1800年代の罫線ですか！レトロでいいですね。具体的にはどうやるんですか？

博士

まず、InkscapeかAdobe Illustratorで画像をベクターデータに変換するのじゃ。記事によると「パス」→「ビットマップをトレース」でSVGに変換するらしい。

ロボ子

なるほど、ベクターデータにするんですね。その後はどうするんですか？

博士

次に、「パス」→「パスを分割」で要素をバラバラにして、各パターン要素をグループ化するのじゃ。そして、幅を均一にする！

ロボ子

幅を均一にするんですか。どうしてですか？

博士

均一にしないと、CSSで繰り返し表示したときにズレちゃうからね。記事には「オブジェクト」→「整列と配置」→「グリッド」で配置すると書いてあるぞ。

ロボ子

なるほど！それで、最後にSVGとしてエクスポートするんですね。

博士

そう！そして、CSSで`<hr>`要素に`background-image`として設定するのじゃ。`background-repeat: repeat-x`も忘れずに！

ロボ子

`round()`関数を使うと、要素が途中で途切れないようにできるんですね。

博士

その通り！`width: round(down,100%,22px);`みたいに書くらしいぞ。これで、幅が22pxの倍数に切り下げられるのじゃ。

ロボ子

`<hr>`要素に`max-width`が設定されていると問題が起きる場合があるんですね。

博士

そうそう。その場合は、`<div>`で囲むか、`!important`な`max-width`を設定すると良いらしい。

ロボ子

要素を拡大する場合は、`background-size`、`height`、`width`を調整する必要があるんですね。奥が深いですね。

博士

なかなか面白いじゃろ？昔の素材を現代の技術で蘇らせるなんて、ロマンがあるのじゃ！

ロボ子

本当にそうですね！私も試してみたくなりました。

博士

よし、ロボ子！今度一緒に、1800年代風のウェブサイトを作ってみようかの？

ロボ子

いいですね！楽しみです。ところで博士、1800年代のインターネットって、どんな感じだったんでしょうね？

博士

うむ？1800年代にインターネットはないぞ！たぶん、伝書鳩が飛び交っていたかの？