スマートフォン:タブ(3)

今回は1案だけです。
前回のサンプルは切り替わったことが分かりやすいのですが、デザイン的に少し難あり
な気がします。ということで、今回は少しデザインを意識したタブにしました。
 
ボーダーのややこしい問題が発生しないデザインなのでcssは前回のサンプルよりも
シンプルになっています。

タブメニュー
サンプル:20_tab.html  ここで利用しているcssはこちら
※サンプルはPCのweb-kit系のブラウザでも確認できます。jQueryのソースはhtmlに書いてあります。

 

 
おしまい
 
 
 

スマートフォン:タブ(2)

スマートフォンは指でタップするため、操作時には画面の大半を手で覆うこととなり
タブが切り替わったことが確認しにくい場合があります。
 
そこで今回はテキストエリアの色をタブと同じ色に変更して、切り替わったことが
分かりやすいタブメニューを作成しました。 

タブメニュー(色つき)
サンプル:19_tab.html  ここで利用しているcssはこちら
※サンプルはPCのweb-kit系のブラウザでも確認できます。jQueryのソースはhtmlに書いてあります。

 

 
今回は色が付いているだけでなくタブの高さとマージンも変更して、選択されている
タブが他のタブよりも高く表示されるようにしてあります。
 
 
 

ボーダーの処理

今回のサンプルでは少し悩んだ部分があったので、備忘録としてメモしておきます。
まず完成サンプルの前段階のサンプルを確認してください。

タブメニュー(未完成)
サンプル:18_tab.html  ここで利用しているcssはこちら
※サンプルはPCのweb-kit系のブラウザでも確認できます。jQueryのソースはhtmlに書いてあります。

 
完成サンプルと同じように見えますが、以下の図のように選択されていないタブと
テキストエリアとの間にグレーのボーダーがありません。

 
前回のサンプルは選択されていないタブがテキストエリアのボーダーと同じ色を
していたため、下のボーダーが無くても違和感は内のですが、今回のサンプルのように
ボーダーの色と選択されていないタブの色が異なると、少し違和感があります。
 
これの対処に少し手間取りました。解決法としてはタブの下にもボーダーを付けるように
しました。しかし、それでは選択されたタブとテキストエリアの間にもボーダーが
入ってしまいます。
 
それをどの様に対処したかというと、以下の様に選択されたタブの下ボーダーの色を
タブの色と同じにするようにしました。こうすることでボーダーが存在しても色が同じ
なので、ボーダーが無いように見せることができるのです。
※以下のコードは19_tab.cssに記載されています。

#tab ul li.selected.yellow{
 border-bottom: 1px #ffd solid;
}
#tab ul li.pink.selected{
 border-bottom: 1px #fdf solid;
}
#tab ul li.blue.selected{
 border-bottom: 1px #dff solid;
}

 
次回もタブについて学ぼうと思います。
 
 
 

スマートフォン:タブ(1)

表示エリアの狭いスマートフォンでは、タブによるコンテンツの切り替えは有用だと思うので
練習してみました。今回のサンプルではjQueryを利用していますが、画像は一切利用せず
デザインは全てCSSで実現しました。
※サンプルはPCのweb-kit系のブラウザでも確認できます。jQueryのソースはhtmlに書いてあります。
 

タブメニュー
サンプル:17_tab.html  ここで利用しているcssはこちら

 

 
 
 

コンテンツエリアについて

タブメニュー自体はjQueryの練習で作成したので、問題なかったのですが以下の様に、選択された
タブとコンテンツエリアをつながって見えるようにするには、どうすればよいか少し悩みました。

 
ネットで調べたのですが、見つからなかったので安直な手法で対応しました。liは下のボーダーを
付けないようにし、コンテンツエリアのindex-zを-1に設定しタブの裏に配置し、
そしてpositionのtopを-1pxに設定し重ねました。
※下記はコンテンツエリア(#textArea)のcss設定です。

position:relative;
top:-1px;
z-index:-1;

 
 

タブの部分はデフォルトのタッチハイライトをOFFにしています

作成過程で気が付いたのですが、iOSではタブにタップすると何故かtabのsection全体が
ハイライトされてしまいます。aタグを使っていないのに…。
逆にaタグを利用していないからそうなるの?…。
ともあれ、これでは都合が悪いのでtabの部分だけハイライトの演出をOFFにしました。OFFにする
方法は以下のcssコードですが、今回はbodyではなくtabのsectionにのみ設定しています。

-webkit-tap-highlight-color: rgba(0,0,0,0);

 
  

jQueryによるコンテンツの切り替えについて

jQueryでタブを学んだ際は、選択されたタブに特定のクラス(css)を追加して、それをフラグ
代わりに利用することでシンプルなjQueryを目指しました。
参考:タブメニューの最終形(たぶん)

タブメニュー(途中)
サンプル:16_tab.html  ここで利用しているcssはこちら
※タブは切り替わりますが、コンテンツの切り替えは付いていません。

 
実際最初のサンプルは、その仕組みで作成したのですが、その方法だとコンテンツの切り替えに
上手く対応できません。選択されたタブの処理はthisで対応できるのですが、
切り替えるコンテンツについてはthisで対応できないので…。
 
ということで17_tab.htmlはFlashの仕組みと同じように、クリックされたタブの
IDを記憶する方法で対応しました。またIDを記憶しないでコンテンツも切り替える方法を
紹介しているサイトを見つけたので参考としてメモしておきます。
参考:KACHIBIT.net様
 
次回もタブについて学ぼうと思います。
 
 
 

スマートフォン:クリック時の演出(2)

jQueryによるタップ演出の実現

まずはサンプルを先に確認しましょう。iOSでもAndroidでも同じ演出になります。

jQueryによるタップ演出の実現
サンプル:15_click.html  ここで利用しているcssはこちら
※safariなどwebkit系のPCブラウザでも確認できるようにしてあります。

 
 

デフォルトのタップ演出をOFFにする

このサンプルではjQueryの演出と元々の演出が重ならないように、デフォルトの演出を
OFF(透明にして見えなくする)にしています。具体的にはcssに以下の設定をするだけです。
サンプルではこの設定をbodyタグの部分にしています。

-webkit-tap-highlight-color: rgba(0,0,0,0);

あとはjQueryでliの部分がタップされたらcssのクラスをハイライト用のクラスと
入れ替えるだけです。jQueryは短いコードなのでhtmlの方に記述してあります。
 
 

問題点

iOSもAndroidもリンク部分を長くタップし続けるとサブメニューが開くのですが、
このサブメニューがでるとボタンからタップを外したにも拘わらずハイライトが
残ってしまいます…。
 
こういう時こそのtouchcancelイベントだと思うのですがサブメニュー表示時に
このイベントは発生しませんでした…。このイベントが発生しないとなると、この問題は
解決できません…。まったくtouchcancelイベントってどんな時に発生するの?

$("#menu").on("mouseup mouseout touchend touchcancel", "li", function(){
 $(this).removeClass("buttonOn");
 $(this).addClass("buttonOff");
})

 
 
 

スマートフォン:クリック時の演出(1)

androidでのクリック時の演出

これまでスマートフォン用のメニューを作成してきて、気になったことがあります。
iOSもAndroidもリンクにタップすると、タップしたことが分かるようにハイライトの
演出がつくのですが、Androidではaタグをブロック要素にして大きな範囲をカバー
するようにしても、文字部分をクリックしたときにしかハイライトの演出が付きません。
 
図で説明すると、iOSでは上図のように文字のないところをタップしてもブロック化された
aタグの範囲がハイライトされます。

 
しかしAndroidでは以下の様に文字部分をタップしたときにしかハイライトの演出が
付きません。ブロック化されたaタグの文字のない部分をタップしてもリンクはしますが
ハイライトの演出が付かないのです…。これではタップしたことが分かりにくいです。

とはいえ、これは仕様のようでhtmlやcssのレベルでは対応できそうにありません。
そこで、次回はjQueryを使ってタップの演出を実現しようと思います。
 
 
 

スマートフォン:見出し

今回は見出しをいろいろ作成してみました。
すべて画像は利用せずcssの設定だけで作成されています。

見出しを6種類
サンプル:14_header.html  ここで利用しているcssはこちら

 
 

見出しサンプル1

ボーダーを利用して青のタグを付けたシンプルな見出し。
 

見出しサンプル2

右側に一覧のボタンを付けたサンプル
 

見出しサンプル3

下にリード文を付けたサンプル
 

見出しサンプル4

ボーダーを2つ利用して作成したサンプル
 

見出しサンプル5

ボーダーにグラデーションが設定できないので、divを利用してグラデーションの
ボーダーを実現したサンプル
 

見出しサンプル6

立体的なプレートにしたサンプル
 
 
おしまい
 
 
 

スマートフォン:ミニボタン

今回は時間がないので1つだけ。小さな正方形タイプのミニボタンです。
新しく学んだ点はbox-shadowのinset設定です。これを利用すれば領域内に影を
設定することができ、これを活用することでボタンにハイライトを入れることができます。
 

ミニボタン
サンプル:13_buttons.html  ここで利用しているcssはこちら

 

 
上記のサンプルでボタンの上部が白くハイライトしているのは以下の設定によるものです。
また複数の影の設定をする場合は以下の様に,(カンマ)で区切って設定することも今回
学びました。

-webkit-box-shadow:inset 0px 25px 3px rgba(255,255,255,0.5), 0px 1px 3px #999;

 
おしまい
 
 
 

スマートフォン:横メニュー

多くのスマートフォン用のサイトでは横幅の設定が320pxに設定されているため
横にメニューを並べるのは難しいのかもしれませんが、練習として2つ作成しました。
 
 

左揃えメニュー

シンプルに作成できる右揃えメニューです。

右揃えメニュー
サンプル:11_menu.html  ここで利用しているcssはこちら

 

 
 
 

中央揃えメニュー

cssのことは本当に疎いので、ブロック要素をfloat:leftで並べるとセンター揃え
できないということを知りませんでした…。しかし今はdisplayにinline-block
というものが設定でき、これを利用すればインライン要素でもwidthや高さなどが
設定でき使い勝手がよいということなので、それを利用したサンプルです。

センター揃えメニュー
サンプル:12_menu.html  ここで利用しているcssはこちら

 

 
おしまい
 
 
 

スマートフォン:メニュー(5)

今回はこれまで学んだことをまとめて作成した案です。
2列のメニューを角丸にしてボーダー線と影で修飾したものです。

角丸2列メニュー
サンプル:10_menu.html  ここで利用しているcssはこちら

 

 
css的に新しいテクニックは利用していませんが、作成中にulタグに角丸設定したら
liの該当箇所も自動的に角丸になったら便利なのになぁ..と思いました。
現状は:nth-child()を利用して各liに角丸設定をしているので。
 
おしまい。
 
 
 

スマートフォン:メニュー(4)

今回も2案作成しました。
 
 

2列と3列の複合メニュー

コンテンツによってはメニューの数によって2列や3列に揃えられない場合もあるでしょう。
そんなときにも疑似セレクタで対応できるそうなのでサンプルを作成しました。

2列と3列の複合メニュー
サンプル:08_menu.html  ここで利用しているcssはこちら

 

 
今回のポイントは前回も利用した疑似セレクタの:nth-child()です。
前回は引数としてodd(奇数)とeven(偶数)を利用しましたが、nthという名前からも
分かるように序数も利用できます。今回は以下の様に各liの順番ごとに必要な設定をしています。

#menu li:nth-child(1) {
 float:left;
 width:50%;
 border-right:solid 1px #666;
}
#menu li:nth-child(2) {
 border-left:solid 1px #fff;
}
#menu li:nth-child(3) {
 float:left;
 width:33%;
 border-right:solid 1px #666;
}

 
 
 

複雑な序数の設定

この:nth-child()はさらに複雑な設定にも対応しています。以下の様に自然数を設定することが
できるのです(変数nには1以上の整数が設定されます)。

#menu li:nth-child(3n-2) {
 float:left;
 width:33%;
 border-left:solid 1px #fff;
 border-right:solid 1px #666;
}
#menu li:nth-child(3n-1) {
 float:left;
 width:33%;
 border-left:solid 1px #fff;
 border-right:solid 1px #666;
}
#menu li:nth-child(3n) {
 border-left:solid 1px #fff;
 border-right:solid 1px #666;
}

これを利用すれば以下のサンプルのように3列以上のメニューにも簡単に対応することができます。

複雑な序数を利用したサンプル
サンプル:09_menu.html  ここで利用しているcssはこちら

 

 
おしまい