[Quarto] Listingのページの表の幅をレスポンシブ対応する

Blog
Quarto
Technology

デフォルトで対応していて欲しい気もしますが。

作者

T-3

公開

2024年7月12日

ChatGPTに聞いてますが

当時のやりとりが見つかりません･･･

ChatGPT（や他の所謂AI）、使ってますか？出てきた物をそのまま使うのではなく、自分が正しいことを確認出来る物や、動作を確かめたりできる場合（プログラミングなど）は、それを自分でアレンジして使うことで生産性が上がって良いですね。

全くの素人質問だと、回答も曖昧になってしまうので、AIが全てを代替してくれるまではまだまだかかりそうだなという感じですが･･･。

Quartoで作るListingページはレスポンシブ対応していない。

スマホで表示して気づいたのですが、Topページの記事一覧のような、Listing機能で記事を並べたときに、その表はレスポンシブ対応しておらず、スマホなどの画面の狭いデバイスでは横にスクロールしないと表示が出来ません。

Listingの機能は、そのページのYAML中に例えば次のようにidをつけるように記述をすると、そのidをdivに与えることでページ中の任意の場所にリストを表示出来ます（デフォルトだとページ下部？）

listing:
  - id: listing-announce
    sort: "date desc"

このとき、Divに#listing-announce だけでなく、.table-responsive クラスを付与し、このクラスにレスポンシブ対応するために以下のようなCSSを記述すれば、Quartoで生成されるリストのレスポンシブ対応が出来ます。

  .quarto-listing-container-table {
  width: 100%;
  overflow-x: auto;
}

.table-responsive-sm {
  @media (max-width: 576px) {
    .table-responsive {
      display: block;
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
  }
}

.table-responsive-md {
  @media (max-width: 768px) {
    .table-responsive {
      display: block;
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
  }
}

.table-responsive-lg {
  @media (max-width: 992px) {
    .table-responsive {
      display: block;
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
  }
}

.table-responsive-xl {
  @media (max-width: 1200px) {
    .table-responsive {
      display: block;
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
  }
}

このcssは、listingのページにだけあれば良いですが、他の要素とぶつかることはないはずですので、全ページ共通処理として、_quarto.ymlに含めてもよいかもしれません。

書籍

Quartoの書籍はないですが、QuartoはBootstrap5を使っているため、ここで使用しているcssもBootstrapの（そしてCSSの）理解がある方が良いです。

Bootstrapはマニュアルが充実しているので、そちらを見れば大体問題ないんですが、書籍を手元に置いておきたいのであればこちらが良いかなと。私も持ってます。

CSSの基礎から･･･というとこちらかなぁ。ちょっと（10年前）古いですが、他の書籍がHTML+CSSの話題が多くて、HTMLは別にいいんだよな･･･となると、こちらかなと。最新の知識にupdateしないといけないと思うので、ざっと読んで概要を掴んで、個別にネットで検索して･･･となるのかなと思います。

トップに戻る