FM Mie website renewal 2026 - UI Style Guide blank.css preview

このページはレスポンシブ適応済です。

Typography Guide / タイポグラフィガイド

Headlines / 見出し

H1 タイトル / The quick brown fox

H2 セクションタイトル / Section Heading

H3 小見出し / Sub Heading

H4 サブタイトル / Sub Title

H5 ラベル見出し / Sub Labeling
H6 キャプション見出し / Sub Captions

Body / 本文

78.9Mhz

これは標準の本文スタイルです。ベースラインとなる文章の見え方を確認できます。

ちなみに、
私は学生時代、友人に
「ゆかは声が大きいからヒソヒソ話できないわー」と
言われたことがあります。。。
親子揃ってこしょこしょ話は苦手なようです( ̄▽ ̄;)

『つながるジカン』/21世紀のエネルギーを考える会みえ/子育てコープ

今日の放送はradikoのタイムフリーからお楽しみいただけます☆
つながるジカン | レディオキューブ FM三重 | 2025/12/04/木 17:00-18:55

https://radiko.jp/share/?sid=FMMIE&t=20251204170000

✼••┈┈┈┈••✼••┈┈┈┈••✼••┈┈┈┈••✼••┈┈┈┈••✼

みなさんこんばんは。
宮原えりかアナウンサーがお届けします『つながるジカン』
本日177回目の放送でした。


✼••┈┈┈┈••✼••┈┈┈┈••✼••┈┈┈┈••✼••┈┈┈┈••✼

さて、今日の放送内容を振り返っていきましょう~♪


proseのサンプル 記事タイトル H1

導入のパラグラフです。

セクション見出し H2

本文テキスト…

小見出し H3

  • 箇条書き1
  • 箇条書き2
注釈的な見出し H6

補足説明の段落。


これは text-muted を適用した補足テキストです。

リンクテキストの例:こちらをクリック

小さいテキスト:© 2025 Your Name. All rights reserved.

Font Style Guide

Sans Light / 300:The quick brown fox jumps over the lazy dog.

Sans Regular / 400:あいうえお 漢字テスト 日本語フォント

Sans Medium / 500:UIボタンなどに適したウェイト

Serif Regular / 400:文章や見出しに使う上質な Serif

Serif Bold / 700:強調された見出し

English Sample (Roboto Flex) ONLY: The quick brown fox jumps over the lazy dog.

段落・インライン要素

これは標準の段落テキストです。 strong(強調)em(斜体強調)リンク などを含んでいます。

text-muted クラスで、補足情報やサブテキストに使える薄い文字色を適用しています。

<code> はこのように等幅フォントで表示されます。

English / 欧文サンプル

UI Sans (Roboto Flex): The quick brown fox jumps over the lazy dog.

Bold English Sample: THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.

Lists / リスト

Unordered List(ul)

  • リストアイテム 1
  • リストアイテム 2
  • リストアイテム 3

Ordered List(ol)

  1. ステップ 1
  2. ステップ 2
  3. ステップ 3

Description List(dl)

Term 1
説明テキストがここに入ります。
Term 2
別の説明テキストがここに入ります。

Table / テーブル

基本テーブル

列1 列2 列3
データ 1-1 データ 1-2 データ 1-3
データ 2-1 データ 2-2 データ 2-3
データ 3-1 データ 3-2 データ 3-3

Forms / フォーム基本要素

基本フォーム要素

チェックボックス / ラジオボタン

フルネームで入力してください。

Cards / カード要素と並び

単体カード(card + stack)

カードタイトル

カードは情報をひとまとまりの箱として見せるためのコンポーネントです。 stack と組み合わせると、内部レイアウトも整います。

カードのグリッド並び(grid + card)

FEATURE

第1カード Card 1

サブタイトルや短い説明文

説明テキストが入ります。

FEATURE

第2カードCard 2

サブタイトルや短い説明文

説明テキストが入ります。

FEATURE

第3カードCard 3

サブタイトルや短い説明文

説明テキストが入ります。

高速な読み込み

モダンなCSS設計で、表示がスムーズです。

Layout Samples / レイアウトサンプル

Cluster ナビゲーション例

Stack セクション例

セクションタイトル

stack を使うことで、縦方向の間隔を一括管理できます。 見出し・本文・ボタンなどを上から順番に積むときに便利です。

Grid レイアウト例(2カラム)

左カラム

テキストや画像を配置できます。

右カラム

別の情報や一覧コンテンツなど。

センタリング(.center)

center クラスで中央配置

Color Showcase / カラーパレット

ブランドアクセントカラー5色のプレビューと用途のサンプルです。

Primary Main

変数名: --primary-main
用途: カードベース、ボタン(旧 --brand-blue)

Secondary Main

変数名: --secondary-main
用途: ボタン(旧 --brand-orange)

Brand Red

変数名: --brand-red
用途: リンク、アラート、注意ポジション

Brand pink

変数名: --brand-pink
用途: リンク、ハイライト

Brand Cyan

変数名: --brand-cyan
用途: バッチ、アクセント

Usage Examples / 色の使い方サンプル

NEW 新番組のお知らせ 地域情報 / ライフスタイル特集

Brand Color Showcase / FM三重 H3 タイトルデザイン

このボックスは Primary Main をアクセントにしたデザイン例です。

Red: 強調/警告/ON AIR などに使用します。

Brand Color Showcase / FM三重カラーサンプル

このボックスは Primary Main をアクセントにしたデザイン例です。

Corner UI Sample / コーナーUIサンプル

MUSIC

深夜のアーバン・ラウンジ

放送時間 毎週金曜日 24:00–25:00 パーソナリティ 山田 花子

週末前のひとときに、少しだけ照明を落として。シティポップから最新のチルアウトまで、心地よい選曲をお届けする音楽コーナーです。

NEWS

MIEトピックス・アップデート

放送時間 平日 7:20–7:30 レポーター FM三重リポーターズ

三重県内のニュースや生活情報を、通勤・通学前にコンパクトにお届け。交通情報や天気、イベント情報も合わせてチェックできます。

LIFE

週末をたのしむ、MIEライフスタイル

放送時間 毎週土曜日 10:30–10:50 ナビゲーター 佐藤 太郎

三重のカフェ、ドライブコース、週末イベントなど、暮らしをちょっと豊かにしてくれる情報をピックアップして紹介します。

Corner Compact / コーナー一覧サンプル

MUSIC

深夜のアーバン・ラウンジ

24:00–25:00 DJ 山田 花子

週末前のひとときに、落ち着いたシティポップとチルな選曲をお届けします。

NEWS

MIEトピックス・アップデート

平日 7:20–7:30 レポーター FM三重リポーターズ

三重県内のニュースと生活情報を、通勤・通学前の短い時間でチェック。

LIFE

週末をたのしむ、MIEライフスタイル

10:30–10:50 ナビ 佐藤 太郎

カフェ、ドライブ、イベント情報など、週末のヒントになる話題を紹介。

ページトップへ戻る