Esri スライダー CSS 調整

ReneRubalcava

<\/HEAD>

<\/P>

かっこいいウェブマップを作りましたね。あなたのウェブマップは素晴らしい成果を上げています<\/EM>。カスタムツールも見栄えが良いかもしれません。カスタム検索ツールや属性データの見栄えの良い表示を作ったかもしれません。しかし、こう考え始めます。アプリケーション全体にテーマを付けたいなあ<\/EM>と。水資源に焦点を当てているか、森林密度分析のようなものをしているかもしれません。でも、すべてのマップで同じに見えるものがあります…それはズームスライダーです。<\/P><\/P>うーん。悪くはないけど、もっと良くできそうです。<\/P><\/P>CSS クラスについて<\/SPAN><\/H2>CSS を使ってスライダーを簡単にカスタマイズできることがいくつかあります。あまり手間はかかりませんが、アプリケーションにちょっとした魅力を加えることができます。<\/P>ここにスライダーに関連するクラスのリストがあります。役立つでしょう。<\/P>.esriSimpleSlider<\/SPAN><\/LI>.esriSimpleSlider div<\/SPAN><\/LI>.esriSimpleSliderVertical .esriSimpleSliderIncrementButton<\/SPAN><\/LI>.esriSimpleSliderVertical .esriSimpleSliderDecrementButton<\/SPAN><\/LI>.esriSimpleSliderHorizontal .esriSimpleSliderIncrementButton<\/SPAN><\/LI> .esriSimpleSliderHorizontal .esriSimpleSliderDecrementButton<\/SPAN><\/LI>.esriSimpleSliderDecrementButton:hover,.esriSimpleSliderIncrementButton:hover<\/SPAN><\/LI>.esriSimpleSliderDecrementButton:active,.esriSimpleSliderIncrementButton:active<\/SPAN><\/LI>.esriSimpleSliderDisabledButton,.esriSimpleSliderDisabledButton:active,.esriSimpleSliderDisabledButton:hover<\/SPAN><\/LI><\/UL><\/P>リストは多く見えるかもしれませんが、すべてを変更する必要はありません。これは ArcGIS JS API のデフォルト CSS に記述されているものです。ページ上のスライダーの位置に基づくオフセットに関係するものもさらにあります。ブラウザの開発者ツール（例えばChrome Dev Tools<\/A>）で CSS を試してみることから始めると良いでしょう。これはアプリケーションで実験する簡単な方法です。<\/P>

<\/P>

試してみよう<\/H2>いくつか面白いことができます。ボックスシャドウを追加したり、ボーダーを取り除いたり、モバイルデバイスで指が太くても押しやすいようにボタンのサイズを大きくしたりできます。<\/P>.esriSimpleSlider {
  border: 0 solid #57585A;
  /*shadow*/
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.12), 5px 5px 5px rgba(0, 0, 0, 0.12);
}

.esriSimpleSlider div {
  width: 50px;
  height: 50px;
  line-height: 50px;
} <\/PRE><\/P>結果はこのようになります。<\/P>**ヒント：ボタンサイズを変えたら、line-heightも変えて±中央揃えを保ちましょう。<\/EM><\/SPAN><\/P>大きな違いではありませんが、かなり控えめで、それでもあなたのアプリケーションを他と差別化します。このデモはこちら<\/A>で見ることができます。または、アプリケーション全体のテーマに合わせて色を更新したい場合もあります。その場合は次のように CSS を調整できます。<\/P>

.esriSimpleSlider {
  border: 0 solid #57585A;
  background-color: #02a7f8;
  color: #FFF;
}

.esriSimpleSlider div {
  width: 50px;
  height: 50px;
  line-height: 50px;
}

.esriSimpleSliderVertical .esriSimpleSliderIncrementButton {
  border-bottom: 0 solid #57585A; /*区切り線をなくすために0に設定*/
} <\/PRE><\/P>結果はこのようになります。<\/P>**ヒント：ボタン間の区切り線をなくすためにボーダーを0に設定しました。<\/EM>もしあなたのアプリケーションが別のアプリケーションに埋め込まれていて、ユーザー体験をよりシームレスにしたい場合、このような調整をすると良いでしょう。この

デモはこちら<\/A>です。<\/P>

位置を変える

マップコンストラクターにはスライダーの位置を変えるためのoptionsもあることを忘れないでください。必要に応じてsliderOrientation と sliderPosition を使ってスライダーの位置や向きを変えられます。左下隅や右上隅に水平配置など自由に試してみてください。この小さなデモはこちらです。

CSS をいじってマッピングアプリケーションのあまり触れられていない部分に少し工夫を加えてみましょう。それによってマップやアプリ全体のテーマ性が高まり、他と少し差別化できます。