x-Servlet Version 2.10 開発者ガイド

Transcription

1 Version 2.10 開 発 者 ガイド - スマートフォンテンプレート 編 -

2 更 新 履 歴 2012/11/21 初 版 発 行 2013/12/25 Web マニュアルへのリンクを 修 正 2015/3/19 x-servlet Ver リリースに 伴 う 変 更 2 共 通 設 定 のファイル 内 容 に"insertHeader_FirefoxOS"を 追 加 pg. 2

3 目 次 1 はじめに 本 書 の 目 的 概 要 共 通 設 定 標 準 利 用 設 定 カラーバリエーション 指 定 方 法 サイズバリエーション( 幅 ) 指 定 方 法 半 角 カナ 変 換 指 定 方 法 注 意 事 項 リンク 指 定 方 法 複 数 行 リンク 指 定 方 法 リスト 指 定 方 法 ボタン 指 定 方 法 テキストフィールド 指 定 方 法 チェックボックス ラジオボタン 指 定 方 法 pg. 3

4 3.11 セレクトメニュー 指 定 方 法 注 意 事 項 非 表 示 指 定 方 法 簡 単 2 列 メニュー 指 定 方 法 簡 単 リスト 指 定 方 法 注 意 事 項 簡 単 並 びボタン 指 定 方 法 テーマの 変 更 設 定 適 用 イメージ カスタマイズ 設 定 カスタマイズ 項 目 フォント 角 丸 背 景 色 文 字 色 矢 印 色 サイズ 注 意 事 項 テンプレートファイルの 編 集 について jquery について 非 対 応 端 末 pg. 4

5 6.4 端 末 制 限 利 用 制 限 サンプルテンプレートとの 違 い pg. 5

6 1 はじめに 1.1 本 書 の 目 的 パッケージに 含 まれているスマートフォン 用 テンプレートの 利 用 方 法 について 解 説 します 1.2 概 要 スマートフォン 用 テンプレートは 既 存 のフィーチャーフォンサイトに 適 用 することでページをスマートフ ォンライクに 装 飾 することができます 既 存 の 資 産 であるフィーチャーフォンサイトをスマートフォン 向 けにも 活 用 することで 最 小 限 のコスト でスマートフォンサイトを 実 現 できます テンプレートには 複 数 の UI コンポーネント( 以 下 コンポーネント)が 含 まれ UI をタッチしやすくデザ インする CSS と 一 部 の UI を 制 御 する JavaScript で 構 成 されています 利 用 方 法 は 用 意 された 標 準 デザインをそのまま 利 用 する 標 準 利 用 標 準 デザインの 色 だけを 変 更 する テーマ 変 更 標 準 デザインそのものをカスタマイズする カスタマイズ があります ここでは それぞれの 利 用 方 法 について 説 明 します 参 考 ) x-servlet マニュアル:HOME > 開 発 者 向 けドキュメント > 機 能 詳 細 > スマートフォン 対 応 (Version2.10.1( ) 以 降 ) pg. 6

7 2 共 通 設 定 標 準 利 用 テーマ 変 更 カスタマイズ の 各 利 用 方 法 における 共 通 の 設 定 について 説 明 します / conf/insertheaders/ CSS と JavaScript が 定 義 さ れ て い る テ ン プ レ ー ト 本 体 と な る フ ァ イ ル 群 で す な か で も sp_template_base.xml にはほとんどのデザイン 定 義 が 集 約 されており それ 以 外 のファイルは 一 部 の 調 整 を 行 なっているのみです そのため 利 用 の 際 には 必 須 となる sp_template_base.xml と その 他 のファイルを 組 合 せて 利 用 します sp_template_base.xml 標 準 テンプレート wp_template_base.xml WindowsPhone 用 調 整 テンプレート sp_template_customize.xml カスタマイズ 用 テンプレート sp_template_customize_sample.xml カスタマイズサンプル sp_template_theme_black.xml テーマテンプレート 黒 sp_template_theme_red.xml テーマテンプレート 赤 sp_template_theme_blue.xml テーマテンプレート 青 sp_template_theme_yellow.xml テーマテンプレート 黄 sp_template_theme_orange.xml テーマテンプレート 橙 sp_template_theme_green.xml テーマテンプレート 緑 sp_template_theme_plain.xml テーマテンプレート 白 (グラデーションなし) /conf/uagroupsetting.xml テンプレートを 出 力 するスマートフォンのグループを SP1 と 定 義 しています また 古 い BlackBerry 端 末 (OS6 未 満 )は CSS3 非 対 応 なのでテンプレートの 出 力 対 象 外 とするために グル ープ BlackBerryOLD として 定 義 しています <UAGroup name="sp1"> <And> <StringCondition name="class">sp</stringcondition> <StringCondition name="servicename" negative="true">pc</stringcondition> <And negative="true"> <StringCondition name="browsername">blackberry OS</StringCondition> <NumberCondition name="browserversion" type="lt">6</numbercondition> </And> </And> </UAGroup> pg. 7

8 <UAGroup name="blackberryold"> <And> <StringCondition name="browsername">blackberry OS</StringCondition> <NumberCondition name="browserversion" type="lt">6</numbercondition> </And> </UAGroup> Version2.10.1( )よりも 古 いバージョンにおけるスマートフォン 向 けの 設 定 をリセットするため 一 部 のスマートフォン 設 定 を 空 設 定 にし 古 い BlackBerry 端 末 には 既 存 の 定 義 ファイルを 適 用 していま す /conf/contentsruledefault.xml <Attribute name="insertheader_iphone"> </Attribute> <Attribute name="insertheader_android"> </Attribute> <Attribute name="insertheader_blackberry"> </Attribute> <Attribute name="insertheader_firefoxos"> </Attribute> <Attribute name="insertheader_blackberryold"> conf/insertheaders/blackberry.xml</attribute> pg. 8

9 3 標 準 利 用 標 準 テンプレートに 含 まれる 各 コンポーネントの 使 用 方 法 と 使 用 した 際 の 見 た 目 を 説 明 します 3.1 設 定 標 準 テンプレートはデフォルトで 有 効 となっており 以 下 の 設 定 で 実 現 しています この 設 定 により 既 存 ページの 適 用 させたい 要 素 に 対 して 後 述 する 特 定 の class 名 を 指 定 することでス マートフォンに 対 してのみテンプレートが 有 効 になります /conf/contentsruledefault.xml <Attribute name="insertheader_windowsphone"> conf/insertheaders/wp_template_base.xml</attribute> <Attribute name="insertheader_sp1"> conf/insertheaders/sp_template_base.xml</attribute> pg. 9

10 3.2 カラーバリエーション 全 てのコンポーネントにはカラーの 指 定 が 可 能 で 指 定 できるカラーはここで 紹 介 する 8 パターンです カラー 指 定 が 無 い 場 合 は 白 が 適 用 されます 指 定 方 法 各 カラーに 対 応 した 下 記 の 予 約 class 名 を 指 定 します 他 のコンポーネントを 指 定 する class 名 と 併 せて 指 定 します カラーバリエーション(class 名 ) 白 :xwhite 黒 :xblack 赤 :xred 青 :xblue 黄 :xyellow 橙 :xorange 緑 :xgreen 白 (グラデーションなし):xplain カラーバリエーション 記 述 例 )コンポーネント xlink とカラー xyellow を 併 記 する 場 合 <a class= xlink xyellow href= >Flex Firm</a> pg. 10

11 3.3 サイズバリエーション( 幅 ) コンポーネントによっては 横 幅 のサイズ 指 定 が 可 能 です 指 定 できるサイズはここで 紹 介 する 3 パタ ーンとなっており コンポーネント 毎 に 指 定 がない 場 合 のデフォルトサイズが 異 なります 詳 細 は 各 UI コンポーネントの 説 明 をご 覧 ください 指 定 方 法 各 サイズに 対 応 した 下 記 の 予 約 class 名 を 指 定 します 他 のコンポーネントを 指 定 する class 名 と 併 せて 指 定 します サイズバリエーション(class 名 ) 80%:xeighty 40%:xforty 20%:xtwenty ボタンにおけるサイズバリエーション 記 述 例 ) コンポーネント xlink にサイズ xtwenty を 指 定 する 場 合 <a class= xlink xtwenty href= >Flex Firm</a> pg. 11

12 3.4 半 角 カナ 変 換 フィーチャーフォンページで 広 く 利 用 されている 半 角 カナ 文 字 を 全 角 カナ 文 字 に 変 換 することで スマートフォンで 表 示 した 際 に 見 やすくし 違 和 感 をなくします 指 定 方 法 特 に 指 定 は 必 要 ありません 自 動 的 にページ 内 の 半 角 カナが 変 換 されます 表 示 例 ) 元 コンテンツ テンプレート 適 用 後 注 意 事 項 通 常 のセレクトメニューに 適 用 する 場 合 は 文 字 列 がメニュー 内 からはみ 出 る 場 合 がありますの でご 注 意 ください なお コンポーネント セレクトメニュー を 利 用 した 場 合 は 自 動 的 に 省 略 表 記 となり はみ 出 しま せん pg. 12

13 3.5 リンク 単 一 行 のリンクとしてブロック 化 しタップしやすくします 文 字 列 が 長 い 場 合 には 幅 に 収 まる 範 囲 で 文 字 列 が 省 略 されます 指 定 方 法 a 要 素 に 予 約 クラス 名 xlink を 指 定 します 記 述 例 ) <a class= xlink href= >Flex Firm</a> 指 定 可 能 なサイズ xeighty xforty ( 指 定 なし:100%) 表 示 例 ) 元 コンテンツ テンプレート 適 用 後 pg. 13

14 3.6 複 数 行 リンク 複 数 行 のリンクとしてブロック 化 してタップしやすくします 指 定 方 法 a 要 素 に 予 約 クラス 名 xlinkb を 指 定 します また 子 要 素 となる span 要 素 にクラス 名 xmiddle を 指 定 し 垂 直 方 向 の 中 央 寄 せを 指 定 で きます 記 述 例 ) <a class= xlinkb href= > <span class="xmiddle"> 設 備 充 実!ワイキキコント ミニアム</span> </a> 指 定 可 能 なサイズ xeighty xforty ( 指 定 なし:100%) 表 示 例 ) 元 コンテンツ テンプレート 適 用 後 pg. 14

15 3.7 リスト リストの 項 目 に 枠 線 を 設 けて 視 認 性 を 向 上 します また 内 部 に a 要 素 が 定 義 されている 場 合 はブロ ック 化 してタップしやすくします 文 字 列 が 長 い 場 合 には 幅 に 収 まる 範 囲 で 文 字 列 が 省 略 されます 指 定 方 法 ul または ol 要 素 に 予 約 クラス 名 xlist を 指 定 します 指 定 可 能 なサイズ なし 記 述 例 ) <ul class= xlist > <li>x-servlet</li> </ul> 表 示 例 ) 元 コンテンツ テンプレート 適 用 後 pg. 15

16 3.8 ボタン ボタンを 大 きくしタップしやすくします 指 定 方 法 input 要 素 の type= submit または type= reset または button 要 素 にクラス 名 xbutton を 指 定 します 指 定 可 能 なサイズ xforty xtwenty ( 指 定 なし:80%) 記 述 例 ) <input class= xbutton type= submit name= send value= 検 索 /> 表 示 例 ) 元 コンテンツ テンプレート 適 用 後 pg. 16

17 3.9 テキストフィールド テキストフィールド 内 に 余 白 を 設 けて 大 きくしタップしやすくします 指 定 方 法 input 要 素 の type= text または textarea 要 素 にクラス 名 xinput を 指 定 します 指 定 可 能 なサイズ xforty xtwenty ( 指 定 なし:80%) 記 述 例 ) <input class= xinput type= text name= age size= 3 /> 表 示 例 ) 元 コンテンツ テンプレート 適 用 後 pg. 17

18 3.10 チェックボックス ラジオボタン チェックボックス ラジオボタンにおいて スマートフォンでは 関 連 する label 要 素 がタップできません が ボックス 化 してタップできるようにします また 文 字 列 が 長 い 場 合 には 幅 に 収 まる 範 囲 で 文 字 列 が 省 略 されます 指 定 方 法 label 要 素 にクラス 名 xlabel を 指 定 します 指 定 可 能 なサイズ xforty xtwenty ( 指 定 なし:80%) 記 述 例 ) <label class="xlabel xforty" for= dom > <input id= dom type="checkbox" name="domestic" value="1" /> 国 内 </label> 表 示 例 ) 0 元 コンテンツ テンプレート 適 用 後 pg. 18

19 3.11 セレクトメニュー ボタンのようにしてタップしやすくします 文 字 列 が 長 い 場 合 には 幅 に 収 まる 範 囲 で 文 字 列 が 省 略 さ れます 指 定 方 法 select 要 素 にクラス 名 xselect を 指 定 します 指 定 可 能 なサイズ xforty xtwenty ( 指 定 なし:80%) 記 述 例 ) <select class="xselect" name="from"> <option value="h">ハワイ</option> <option value="n">ニューヨーク</option> <option value="o"> 沖 縄 </option> <option value="d"> 北 海 道 </option> </select> 表 示 例 ) 0 元 コンテンツ テンプレート 適 用 後 注 意 事 項 このコンポーネントを 適 用 すると 子 要 素 が 追 加 されます その 影 響 により CSS のセレクタによっ ては CSS が 無 効 となる 場 合 があるのでご 注 意 ください pg. 19

20 3.12 非 表 示 スマートフォンに 対 してのみ 非 表 示 とすることができます 絵 文 字 や 改 行 などをスマートフォンでは 出 力 したくない 場 合 に 使 用 します 指 定 方 法 削 除 したい 要 素 にクラス 名 xinvisible を 指 定 します 指 定 可 能 なサイズ なし 記 述 例 ) <a href="#top"> <span class="xinvisible"> </span><span>ご 利 用 ガイド</span> </a> 表 示 例 ) 絵 文 字 の 削 除 に 利 用 0 元 コンテンツ テンプレート 適 用 後 pg. 20

21 3.13 簡 単 2 列 メニュー 複 数 並 んだリンクを 2 列 のブロックメニューに 整 形 します 複 数 のリンクは div 要 素 の 子 である 必 要 が あります また 文 字 列 が 長 い 場 合 には 幅 に 収 まる 範 囲 で 文 字 列 が 省 略 されます 指 定 方 法 リンクの 親 要 素 である div 要 素 にクラス 名 xto2column を 指 定 します ヒント br 要 素 を 使 ってリンクを 改 行 させてリスト 風 にデザインしている 場 合 br 要 素 に 前 述 の 非 表 示 指 定 xinvisible を 指 定 し スマートフォンでは 改 行 させないようにします 指 定 可 能 なサイズ なし 記 述 例 ) <div class="xto2column"> <a href="#top"> ご 利 用 ガイド</a> <br class="xinvisible"> <a href="#top"> 会 社 概 要 </a> <br class="xinvisible"> <a href="#top"> 対 応 機 種 一 覧 </a> </div> 表 示 例 ) 0 元 コンテンツ テンプレート 適 用 後 pg. 21

22 3.14 簡 単 リスト 複 数 並 んだリンクをリストに 整 形 します 複 数 のリンクは div 要 素 の 子 である 必 要 があります また 文 字 列 が 長 い 場 合 には 幅 に 収 まる 範 囲 で 文 字 列 が 省 略 されます 指 定 方 法 リンクの 親 要 素 である div 要 素 にクラス 名 xtolist を 指 定 します ヒント br 要 素 を 使 ってリンクを 改 行 させてリスト 風 にデザインしている 場 合 br 要 素 に 前 述 の 非 表 示 指 定 xinvisible を 指 定 し スマートフォンでは 改 行 させないようにします 指 定 可 能 なサイズ なし 記 述 例 ) <div class="xtolist"> <a href="#top "> ご 利 用 カ イト </a> <br class="xinvisible"> <a href="#top "> 会 社 概 要 </a> <br class="xinvisible"> <a href="#top "> フ ライハ シーホ リシー</a> </div> 表 示 例 ) 0 元 コンテンツ テンプレート 適 用 後 pg. 22

23 注 意 事 項 このコンポーネントを 適 用 すると 子 要 素 が 追 加 されます その 影 響 により CSS のセレクタによっ ては CSS が 無 効 となる 場 合 があるのでご 注 意 ください pg. 23

24 3.15 簡 単 並 びボタン 複 数 並 んだリンクを 複 数 横 並 びのボタンとして 整 形 します 複 数 のリンクは div 要 素 の 子 である 必 要 があります また 文 字 列 が 長 い 場 合 には 幅 に 収 まる 範 囲 で 文 字 列 が 省 略 されます 指 定 方 法 リンクの 親 要 素 である div 要 素 にクラス 名 xtobutton を 指 定 します ヒント br 要 素 を 使 ってリンクを 改 行 させてリスト 風 にデザインしている 場 合 br 要 素 に 前 述 の 非 表 示 指 定 xinvisible を 指 定 し スマートフォンでは 改 行 させないようにします 指 定 可 能 なサイズ なし 記 述 例 ) <div class=" xtobutton"> <a href="#top "> ご 利 用 カ イト </a> <br class="xinvisible"> <a href="#top "> 会 社 概 要 </a> <br class="xinvisible"> <a href="#top "> フ ライハ シーホ リシー</a> </div> 表 示 例 ) 0 元 コンテンツ テンプレート 適 用 後 pg. 24

25 4 テーマの 変 更 テーマを 変 更 することによって 標 準 利 用 で 用 意 してある 全 てのコンポーネントに 対 してデフォルトカラーを 一 括 して 変 更 できます テーマの 種 類 は 下 記 7 種 類 を 用 意 しており 各 テーマは 以 下 の 設 定 ファイルで 定 義 されています 黒 :sp_template_theme_black.xml 赤 :sp_template_theme_red.xml 青 :sp_template_theme_blue.xml 黄 :sp_template_theme_yellow.xml 橙 :sp_template_theme_orange.xml 緑 :sp_template_theme_green.xml 白 (グラデーションなし):sp_template_theme_plain.xml 4.1 設 定 テーマを 変 更 するためには 以 下 の 設 定 を 行 います /conf/uagroupsetting.xml 標 準 テンプレート と テーマ 用 テンプレート 双 方 を 適 用 させるため テーマ 用 テンプレート の グループ SP2 が 定 義 されています テンプレートファイルは 読 み 込 む 順 序 が 影 響 するため 標 準 テンプレート のグループ 名 を SP1 テーマ 用 テンプレート のグループ 名 を SP2 としてください <UAGroup name="sp1"> <And> <StringCondition name="class">sp</stringcondition> <StringCondition name="servicename" negative="true">pc</stringcondition> <And negative="true"> <StringCondition name="browsername">blackberry OS</StringCondition> <NumberCondition name="browserversion" type="lt">6</numbercondition> </And> </And> </UAGroup> <UAGroup name="sp2"> <And> <StringCondition name="class">sp</stringcondition> <StringCondition name="servicename" negative="true">pc</stringcondition> pg. 25

26 <And negative="true"> <StringCondition name="browsername">blackberry OS</StringCondition> <NumberCondition name="browserversion" type="lt">6</numbercondition> </And> </And> </UAGroup> /conf/contentsruledefault.xml 上 記 で 追 加 したグループ 定 義 に 対 して それぞれ 適 用 するテンプレートファイルを 指 定 します テーマファイルは 読 み 込 まれる 順 序 が 重 要 なため グループ SP2 に 対 してテーマファイルを 指 定 します ここでは 例 としてテーマ 黒 を 指 定 しています <Attribute name="insertheader_windowsphone"> conf/insertheaders/wp_template_base.xml</attribute> <Attribute name="insertheader_sp1"> conf/insertheaders/sp_template_base.xml</attribute> <Attribute name="insertheader_sp2">conf/insertheaders/sp_template_theme_black.xml</attrib ute> pg. 26

27 4.2 適 用 イメージ 各 テーマの 適 用 イメージは 以 下 の 通 りです 黒 赤 青 黄 橙 緑 白 (グラデーションなし) pg. 27

28 5 カスタマイズ テンプレートを よりサイトに 適 したデザインへカスタマイズすることができます カスタマイズは カスタマイ ズ 用 のテンプレートファイル conf/insertheaders/sp_template_customize.xml を 編 集 し 標 準 のテン プ レ ー ト に 上 書 き し て 適 用 し ま す な お カ ス タ マ イ ズ の 例 と し て conf/sp_template_customize_sample.xml を 同 梱 しておりますので 参 考 にしてください 5.1 設 定 カスタマイズ 用 のテンプレートファイルを 有 効 にするには 以 下 の 設 定 を 行 います /conf/uagroupsetting.xml カスタマイズ 用 に スマートフォンを 表 すグループ SP3 が 定 義 されています <UAGroup name="sp3"> <And> <StringCondition name="class">sp</stringcondition> <StringCondition name="servicename" negative="true">pc</stringcondition> <And negative="true"> <StringCondition name="browsername">blackberry OS</StringCondition> <NumberCondition name="browserversion" type="lt">6</numbercondition> </And> </And> </UAGroup> /conf/contentsruledefault.xml 上 記 のグループ 定 義 に 対 して カスタマイズ 用 のテンプレートファイルを 指 定 します <Attribute name="insertheader_windowsphone"> conf/insertheaders/wp_template_base.xml</attribute> <Attribute name="insertheader_sp1"> conf/insertheaders/sp_template_base.xml</attribute> <Attribute name="insertheader_sp2">conf/insertheaders/sp_template_theme_black.xml</attrib ute> <Attribute name="insertheader_sp3">conf/insertheaders/sp_template_customize.xml</attribut e> pg. 28

29 5.2 カスタマイズ 項 目 カスタマイズはカスタマイズ 用 テンプレートファイル sp_template_customize.xml に 定 義 されてい る 以 下 の 項 目 に 対 して 行 うことができます フォント 対 象 コンポーネント リンク 複 数 行 リンク リスト ボタン テキストフィールド チェックボックス ラジオボタン セ レクトメニュー 簡 単 並 びボタン 角 丸 対 象 コンポーネント リスト ボタン テキストフィールド チェックボックス ラジオボタン セレクトメニュー 簡 単 リ スト 簡 単 並 びボタン 背 景 色 文 字 色 対 象 コンポーネント リンク 複 数 行 リンク リスト ボタン テキストフィールド チェックボックス ラジオボタン セ レクトメニュー 簡 単 2 列 メニュー 簡 単 リスト 簡 単 並 びボタン 矢 印 色 対 象 コンポーネント リンク 複 数 行 リンク リスト セレクトメニュー 簡 単 リスト サイズ 対 象 コンポーネント リンク 複 数 行 リンク リスト ボタン テキストフィールド チェックボックス ラジオボタン セ レクトメニュー 簡 単 2 列 メニュー 簡 単 リスト 簡 単 並 びボタン pg. 29

30 6 注 意 事 項 6.1 テンプレートファイルの 編 集 について 各 テンプレートファイルは 弊 社 にて 実 機 テストを 実 施 しております お 客 様 にて 修 正 を 行 った 場 合 の 動 作 保 証 は 致 しかねます 必 要 に 応 じてお 客 様 による 実 機 テストを 行 なってください 6.2 jquery について 一 部 のコンポーネントでは jquery を 利 用 しており Google の CDN(Content Delivery Network) か ら フ ァ イ ル を 取 得 し て い ま す 取 得 元 を 変 更 す る 場 合 は /conf/insertheaders/ sp_template_base.xml を 編 集 してください 6.3 非 対 応 端 末 BlackBerry の OS6 未 満 は CSS3 に 対 応 していないため 非 対 応 です 6.4 端 末 制 限 WindowsPhone にはグラデーションによる 装 飾 は 行 いません 6.5 利 用 制 限 端 末 の 横 向 き 表 示 については 実 機 テストを 行 なっておりません 必 要 に 応 じてお 客 様 による 実 機 テストを 行 なってください 同 一 サイズを 指 定 しても コンポーネントの 種 類 が 異 なる 場 合 はデザインの 都 合 上 若 干 サイズ が 異 なる 場 合 があります 6.6 サンプルテンプレートとの 違 い Version2.10.1( )よりも 古 い 製 品 パッケージに 含 まれていたサンプルテンプレートファイル conf/sp_template_sample.xml との 相 違 点 は 下 記 の 通 りです xlabel を 指 定 する label 要 素 の 記 述 構 成 が 単 独 要 素 から input 要 素 の 親 要 素 へ 変 更 にな りました WindowsPhone のグラデーション 表 示 を 廃 止 としました xbutton および xinput のデフォルトの 横 幅 がわずかに 変 更 になりました ページ 全 体 の font-size 指 定 150% を 廃 止 し コンポーネント 毎 に medium を 指 定 するよ うに 変 更 しました pg. 30

31 ページ 内 全 てのリンクに 対 する font-size 指 定 115% を 廃 止 しました コンポーネントのクラス 指 定 を 行 ったリンクに 対 して 表 示 リセットを 追 加 しました xlinkb の 右 矢 印 が 上 部 からの 固 定 位 置 から 垂 直 方 向 の 中 央 寄 せになりました デフォルトのグラデーション 色 がやや 濃 くなりました テキストフィールドの 角 が 角 丸 となりました pg. 31