メインコンテンツだよ長いタイトルだよテストテストテストテスト

新CMS開発中です。これはデモです。

静的部品

静的部品は、HTMLとCSSのみで構成された、見た目を作るための要素です。

見出し

↑これも見出しです。

h1見出しはタイトルで使用しているため、また小さな見出しは使用頻度が低いため、メインコンテンツ内では主にh2～h4を使用します。

テキスト装飾

テキストの装飾は、強調などのために文章中の一部のみに対して使用することが可能です（インライン要素）。

デフォルトの強調はstrongタグを使用します。これだけでは、太字になるのみで色などの装飾はありません。

マーカー風の装飾はclassにhighlightを設定すると実現できます。class属性ですので、spanだけでなくstrongタグに使用(太字と併用)できます。デフォルトではサイトカラーになります。

highlightの色は、classにredを設定で赤色、yellowを設定で黄色、blueを設定で青色になります。

カード

カードは、重要な情報を見やすく表示する場合に適しています。本CMSでは色違いの4種類が利用可能で、いずれもclass属性にcardを指定します。cardのみではデフォルトカードが表示されます。cardとともにerror・warning・infoのいずれかを指定することで、異なる種類のカードを表示できます。

スペーサー

スペーサーは、段落や各種部品などの要素間の空きの調整に使用します。

スペーサーを使用せずとも、marginにより空きは生まれますが、読みやすくするために間(ま)を取ることでコンテンツの密集を防ぎ画面が見やすくなります。この段落と前の段落の間にはスペーサーが挿入されています。

スペーサーのデフォルトは10pxですが、style属性を用いてheightを調整すれば、希望の高さに設定できます。前の段落との間に20pxに設定したスペーサーを挿入しています。

5pxだとこんな感じです。もともとmarginがあるため、5px程度で良いかもしれません。

テーブル

テーブルははみ出る場合スクロール可能になります。

table-container（テーブルの外側のdiv）にlimitedクラスも追加することで、高さ制限のあるテーブルを作成できます。縦に長い表を画面に収まるサイズに縮小できます。theadはstickyで固定されるため見やすくなります。

画像

画像は、いくつかのサイズから選択できます。

動的部品

動的部品はなんたってこのCMSの特徴。ちょっとしたツールやAPI連携など、スクリプトで構成されています。

投票

投票を使用すると、閲覧者がいくつかの選択肢から選び、結果を集計することができます。

機能詳細は検討中です。投票期間の設定や複数選択も可能にしたいところです。

IoT連携

ESP32デバイスとの通信を想定した機能です。

バスコム連携

バスのリアルタイム接近情報や、特定の停留所の時刻表の表示が可能です。あるお店の紹介など、地域性のあるページで使えるかもしれません。