🐕

【Dart】Jasprで横並び表示を実現する

2025/12/24に公開

JasprというDartのwebフレームワークを使用してFlutterライクな静的なwebページが作成できるのですがcomponentを横並び表示するための方法を書いていきます。
FlutterではRow(children:[])widgetを使用することで横並びが簡単に実現できます。
しかしjasprは少し複雑だったので忘れないように書いておきます。

CSSを利用して横並び

jasprでは/webディレクトリの下にstyle sheetを記述できます。これを使用することでcssを使用してサイトのコンテンツを横並びにできます。
divタグのclasses:に指定した文字列がclassとなります。
今回はhorizontalというクラスを指定します。

import 'package:jaspr/jaspr.dart';

class MyComponent extends StatelessComponent {
  const MyComponent({super.key});

  @override
  Component build(BuildContext context) {
    return div(
      classes: 'horizontal',
      [
        div([text('Item 1')]),
        div([text('Item 2')]),
        div([text('Item 3')]),
      ],
    );
  }
}

styles.css

.horizontal {
  display: flex;
  gap: 1rem;
  align-items: center;
}

まとめ

cssを使用すれば実現できることが分かりました。
jasprはFlutterライクに静的ページが楽に構築できるのが利点だと思います。

CSSを利用して横並び

まとめ

Discussion