はじめに

ウェブサイト「くーまる工房」は、制作者のミュールが興味を持っている造形物や、その造形物から派生したネタ、オリジナルの宇宙船模型等で構成しています。

閲覧者の興味をひくものがあれば幸いです。

更新

2018年10月30日
日本の衛星打ち上げロケットの打ち上げ実績」に4基の相乗り超小型衛星を追記。
2018年10月29日
日本の衛星打ち上げロケットの打ち上げ実績」を更新。

雑文

2018年11月01日

dl要素のcompact属性の表示をCSS gridでやってみる件ですが、dt要素やdd要素をmarginで調整しborderをひくと、ブラウザではうまく表示されるものの、印刷プレビューや実際の印刷では上下方向に若干ずれました。

Firefoxの「要素の調査」にある「グリッドのオーバーレイ表示」を使って調べました。印刷プレビューと印刷時には、borderがグリッド線に沿ってひかれているみたい。

印刷も含めて考えた場合は(もしかしてgridを使う場合は単なる表示だけでも)marginで調整しないほうが良さそうな感じでした。とりあえずmarginは0にして、グリッドの間をrow-gapで調整するのが無難、なのかな。

2018年10月29日

冊子印刷で使っていた印刷用CSSが古くさくなってるんで改訂中。dl要素のcompact属性の代替をfloat使わずにCSSでできるかなというのをやってました。dtとddが千鳥に並ぶんじゃなくて横一列でコンパクトに表示されるやつです。

display: flexでやろうとしましたが、dtとddをdivで括らないと難しそうなので取りやめました。HTMl文書はできるだけシンプルにいきたいので。

display: tableとdisplay: table-cellでいけるかなと思ったのですが、これもうまくいかず。HTML文書の書き足しとか、dt、ddが連続して出てきたときうまく表示されるにはどうすればいいかってところが難しそうで。

さてどうしようかと思い、MDNのdisplayの項目を眺めてたら、display: flexの下にdisplay: gridの文字。何これって事でグリッドレイアウトの基本概念をべてみたら、なんかうまくいきそうな感じが。

<dl class="compact">
    <dt>質問1</dt>
        <dd>質問1の回答</dd>
    <dt>質問2</dt>
        <dd>質問2の回答</dd>
</dl>
--------------------------------------
dl.compact {
    display:grid;
    grid-template-columns: 12em auto;
    }
dl.compact dt {
    grid-column-start: 1;
    }
dl.compact dd {
    grid-column-start: 2;
    }

grid-template-columnsで、列トラックを2個作ります。上記のだとdtが12em幅でddがその後ろ全部と設定。

grid-column-start: 1で、dtを列の線1(一番左端)から始めるように設定。ddは列の線2から始めるように設定。この辺はMDNのグリッド線の図を参考に。これでdtやddがどれだけ連続しようがきちんと並んで表示されるはず、です。

あとはmarginやpadding、全体の幅、borderなどの装飾などを調整して完成。

Waterfox 56.2.3、Vivaldi 2.1.1337.36、Firefox63.0ではきちんと表示されてます。Microsoft Edge 41.16299.665.0も大丈夫。IE11は(11.6655.16299.0)……、ダメでした。普通のdl要素と同じく千鳥配列のように表示されます。

そのほか