tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:モバイルデザインテンプレートをつかってできること -Part1-

モバイルデザインテンプレートを使うことでできることを調べてみました。今回はheaderタグとNavタグについてです。

ヘッダーのCSS

headerタグ内で使用できるcssです。

main-menu-button

ヘッダータグ内でボタンアイコンを表示できます。「main-menu-button-left」、「main-menu-button-right」と組み合わせて使用します。

main-menu-button-left

左寄せ表示できます。

f:id:tyoshikawa1106:20140201110455p:plain

f:id:tyoshikawa1106:20140201110356p:plain

main-menu-button-right

右寄せ表示できます。

f:id:tyoshikawa1106:20140201110638p:plain

f:id:tyoshikawa1106:20140201110708p:plain

Menu Link

メニューアイコンを表示できます。

f:id:tyoshikawa1106:20140201110455p:plain

f:id:tyoshikawa1106:20140201111222p:plain

left-arrow Link

左矢印を表示できます。

f:id:tyoshikawa1106:20140201111455p:plain

f:id:tyoshikawa1106:20140201111500p:plain

gear Link

歯車アイコンを表示できます。

f:id:tyoshikawa1106:20140201111917p:plain

f:id:tyoshikawa1106:20140201111944p:plain

h1タグ

h1タグで表示するとヘッダータイトルとして中央寄せ表示されるようになっています。
h2タグ以降は特に効果ないみたいです。

f:id:tyoshikawa1106:20140201112226p:plain

f:id:tyoshikawa1106:20140201112256p:plain

ナビのCSS

navタグ内で使用できるCSSです。モバイルアプルでよくあるメニューを表示することが可能です。

main-menu

f:id:tyoshikawa1106:20140201113152p:plain

f:id:tyoshikawa1106:20140201113229p:plain


このメニューはclass="menu"が指定されたaタグリンクから表示することができます。

f:id:tyoshikawa1106:20140201113545p:plain


<header>と<nav>で使えるCSSはだいたいこんな感じだと思います。