会津ラボ

タブ切り替えは、省スペースにコンテンツを配置できるUIで、Webサイト、ネイティブアプリ問わずに実装されている。 タブをクリック、もしくはタップすれば、対象エリアがそのタブに関連する情報に切り替わる仕組みだ。そしてクリックされたタブは、アクティブ状態のスタイルが付与される。これがフィードバックとなって、ユーザーは自身がクリックしたタブを認識できるということなのだろう。 このアクティブ状態の表現はさまざまで多種多様にある。たとえば、内包するテキストやロゴの色が濃くなったり、サイズが大きくなったりする。あるいは、タブ自体に罫線が付いたり、影が付いたりする。 さらにはアニメーションで表現するものもある。 アクティブ状態のタブの上辺か下辺にボーダーがあって、タブ切り替え時に横にスライドするといったものだ。タブの横幅が不一致である場合は、ボーダーも可変する。 このエントリーでは、タブ切り替えUIにスライドするインジケータを作る方法を紹介したい。 タブ切り替えUIをコーディングする HTML <li class=”tabbar-indicator”></li>がインジケータを担っている。タブ下辺にあるボーダーを表現するためだけのタグだ。 CSS (SCSS) .tabbar-indicator {…}がインジケータのスタイルだ。ポイントはposition: absolute;で、各タブの梱包要素を基準に絶対位置に配置している。この場合は、下部だからbottom: 0;というわけだ。そしてtransition: width 225ms ease, left 225ms ease;で変化するプロパティを指定している。この場合は、widthとleftが対象になる。 JS クリックしたタブの左辺オフセット値と横幅をインジケータ要素にスタイル付与している。CSSのtransitionでwidthとleftが対象だった。つまりクリックしたタブの左辺まで移動しながら横幅がフィットするようなアニメーションが実現する。 まとめ タブ切り替えUIにスライドするインジケータを作る方法の紹介だった。 タブ切り替えUIにおいてはサンプルのとおり記述してもらえば再現はするが、コンテンツ部分は記述しなかった。理解の妨げになると思ってのことだけれど、もし上記ソースコードをカスタマイズするならば、JSのif (e.target.matches(this.element)) {…}内で展開すればよい。イベントデリゲートでタブクリックだったか否かを判定してくれるif文だ。タブ要素に、data属性でも記述してコンテンツ要素と結びつければタブ切り替え機能の完成だ。機会があれば挑戦してみてほしい。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

レスポンシブデザインに、iframeやcanvasのメディアタグ埋め込みが要求される場合、表示を維持するため縦横サイズが保たれた状態にしなければならない。きっとそのようなケースに少なくない。 そのようなときは、おそらくpadding-top: 56.25%;とかpadding-top: 75%;とかpadding-top: 66.6666%;などプロパティを目にすることもあると思う。 これは矩形要素がアスペクト比を維持するために適用するCSSプロパティのひとつなのだが、その比率によって数値が変わるわけだ。たとえば、横1920px縦1080pxの比率は「 16:9 」に該当する。横1024px縦768pxの比率は「 4:3 」に該当する。 ところが、デザインによってはこの限りではない。黄金比や白銀比だってあるし、固有の比率に調整しなければならないことだってある。 このエントリーでは、デザイン固有の縦横を維持させる方法を紹介したい。 アスペクト比とは アスペクト比は、矩形の縦横比率のこと。縦横比でも通じる。また映像デバイスの場合、画面比率と呼ばれることもある。 レスポンシブデザインがデファクトスタンダードとなった昨今では、メディアタグを可変対応するときにアスペクト比が用いられる。 埋め込みタグを可変にする それでは埋め込みタグを可変にする記述を確認してもらいたい。 HTML CSS 上記の例では、<iframe>だけれど<canvas>でも同様にすればよい。 まず埋め込みタグを梱包する要素が必要だ。上記の例では、<div class=”wrapper”>が梱包要素だ。この梱包要素でアスペクト比を維持して、埋め込みタグはそこにフィットさせるというのが作法になる。重要なのは梱包要素のpadding-top: ◯◯%;だけで、そのほかのプロパティは大概変わることがない。 さてポイントのpadding-top: ◯◯%;であるが、アスペクト比で変わる。前述したように、padding-top: 56.25%;やpadding-top: 75%;を目にしたことがあるのではないかと想像できたのは、オーソドックスなアスペクト比に準拠した％値だったからだ。 せっかくだから、そのまま覚えてしまうのがよいと思える。早見表を用意した。 アスペクト比 パーセント 16:9 56.25% 4:3 75% 3:2 66.6666% ここまでは、もっとも代表的な比率をもとに算出した結果であるが、デザイン固有のサイズだった場合は、別途アスペクト比を求めなければならない。計算しなければならないわけだ。これが面倒くさい。きっとこの対応を求められた頃には、計算式を忘れてしまっていることだろう。 だからツールを使うことをオススメする。 Googleマップを可変にする Googleマップの埋め込みタグを可変にしてみたい。この場合のアスペクト比は、「 5:3 」という世にも珍しい比率で試したい。計算したサイズは、横500px縦300pxである。 See the Pen Untitled by Takuya Takaku (@takuya-takaku) on CodePen. まとめ デザイン固有の縦横比を維持させる方法の紹介だった。一般的なアスペクト比であるならば、早見表のとおりにpadding-top: ◯◯%;を指定するとよい。デザイン固有のサイズを求められたならば、ツールを活用してみてはどうだろうか。…

Webアプリ制作には、管理者ページが付き物。商品管理やユーザー管理、アプリ全体の設定など管理者が行うためのWebページ設置は必然的といえる。 その管理Webページで求められる機能のひとつに、ガントチャートがある。スケジュールやシフトを確認するための棒グラフの一種だ。 このエントリーでは、ガントチャートをCSS Grid Layoutでコーディングする方法を紹介したい。 ガントチャートを作る 以下のガントチャートは、シフト表をイメージしている。8時〜23時までの15分単位で、勤務時間を棒線で示す。棒線の色の違いは、シフトパターンやスタッフの雇用形態などを想定してのことだ。 全体に関わるスタイルの差異によってはイメージしたものにならないかもしれない。その場合は、都合よく調整してほしい。 HTML SCSS まとめ 以上が、ガントチャートを構成するHTML,CSSだ。 ご覧のとおりHTMLには、インラインスタイルばかりで気になるかもしれないが、動的にフレーム数が増減したり、grid-columnの開始,終了地点が変動したりを考慮して、やむを得ずだ。ちゃんと分離する方法があるなら、そうするとよい。 インラインスタイルのプロパティで-msから始まるものは、IE用のベンダープレフィックスだ。IE10,11に適用されるはずだが、確認はしていない。IE対応が必要なら必ずチェックするように！ このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

カード型UIは、情報をグループ化することでユーザーの視認性を高めてくれる。さらに領域自体がクリッカブルになることで、操作性の向上が見込め、ユーザビリティ観点からみても魅力的なインターフェースであることは間違いない。 カード型UIの構造としては、画像、要約、リンク、シェアボタンなどで組まれることが多い。画像は、円形でアバター写真だったり、カード背景全面に表示したり、アレンジしたものも見受けられる。リンクは、詳細ページへの誘導を目的としていて、遷移先にさらにボリュームをもった情報があることを感じさせる。 柔軟なレイアウトをもつカード型UIであるが、レスポンシブデザインで勝手がよい。要約文が増えればカードが伸びるし、表示幅が変わればカード幅が可変する。またカルーセル式に配置して省スペースを有効活用する場合にも効果的だ。 そんなカード型UIがいかにしてコーディングされているのか、いくつかcodepen.ioのサンプルを紹介したい。 カード型UIのコーディング Bumble Card See the Pen Bumble Card by Dave Kwiatkowski (@davekwiatkowski) on CodePen. Awesome Profile Card See the Pen Awesome Profile Card by SercaN (@iZMiRLy) on CodePen. Visit Card See the Pen Visit Card by Slavko (@djoga98) on CodePen. Card [WIP] See the Pen Codepenchallenge: Card by Travis John (@travis_john)…