CSS

私の場合は、セグメントの背景イメージに設定した。ボーダーが見えていたので、ボーダーを消しました。

↓こんな風に画像の周りを少しぼかして尖がった角を表示させない感じにできます。

↓こんな風に背景画像をぼかしてタイトルを表示することができます。

横の長さ に 縦の長さ を合わせるには下のようにします。こちら結構使えると思います。 ビフォー アフター

↓下のような感じの見た目のタイトルを作成できます。 ポイントは、subクラス で display:inline-block で横並びと position:relative にして、sub.after で subクラス の前に スラッシュを描いている所です。

ボーダーの基本。↓こんな感じでボーダーを作りました。 上のソース ↑「border」に幅、色、スタイルを設定していますが、順不同でOKです。 ボーダーの幅 ↑「border-width」は「上」「右」「下」「左」と上から時計回りで指定します。 四角の上のボーダー 四角の右のボーダー 四角の下のボーダー 四角の左のボーダー ボーダーの角の丸め ↑「border-radius」は「左上」「右上」「右下」「左下」で指定します。全て同じなら「border-radius:100px;」です。 丸の中に数字を入れる。

左上にアクセントで三角を表示します。 左上の三角の中に文字をを表示します。

Fomatic-UI を使ってモーダルダイヤログを表示している。確認メッセージを表示後に「OK」ボタンを押してモダールダイアログを閉じることができるが、その操作を繰り返していると BODY の右のマージンが増えていき、画面が狭くなる。 ひとまず、モーダルダイアログが非表示になるタイミングで、マージンライトを消すことで対応します。