レスポンシブデザインに、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)…

一方向データバインディングといえば、Reactを思い浮かべるかもしれない。Reactを用いたSPA開発において、入力した内容がディスプレイに反映するシーンは一般的といえる。入力によるイベントを検知したら、入力内容でstateを上書きして、再レンダリングされる。 この実装においても、さほど難しいことはないのだが、入力内容の状態管理を必要としないならば、HTMLベースで代替することができる。 このエントリーでは、データバインディングっぽいことができる「outputタグ」を紹介したい。 outputタグとは HTMLのoutputタグは、フォーム関連要素の操作した結果を表示する。数値入力における計算結果やレンジ操作値を反映を前提としているため、JavaScriptが有効でなければならない。無効の場合は、outputタグ内の内容が表示される。 outputタグを使ってみる See the Pen Untitled by Takuya Takaku (@takuya-takaku) on CodePen. formタグのinputイベントハンドラで、inputタグのvalue値をoutputタグのvalue値に代入する式を実行している。つまり入力した内容が、outputタグに表示される。 前述では、outputタグは計算結果を表示するHTML要素である述べたが、文字列型がエラーになるということはないようだ。 計算結果というのは、数値の計算を意味するものなのか、レンダリングにおける計算処理の結果という意味なのか定かではない。 しかし文字列も表示できるため、Reactのバインディングのようにインタラクティブな使い方もできなくはない。 まとめ データバインディングっぽいことができる「outputタグ」を紹介だった。HTMLの記述のみで実現はしているが、決してHTMLだけでシームレスに反映しているわけではない。ちゃんとJavaScriptも用いていることがわかる。 そしてそもそもデータバインディングとも違うのだけれど、それっぽいインタラクティブなUIにすることは、できるかもしれない。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。

CSSプロパティに順序付けする習慣があることを知っているだろうか？width,heightやmargin,paddingなどのCSSプロパティのことなのだが、実はこれらには記述する順序が存在する。 順序といってもスタイルの優先順位の話ではない。あくまでコーダーが気をつけるべき程度のことなのだが、順序付けを講じたものとそうでないものでは、可読性の良し悪しが表れる。クオリティはもちろんのこと、その後の運用にも影響を及ぼすほどにだ。 たとえば目当てのプロパティを探すとき、順序付けで定められた辺りを確認すればよいものを、セレクタごとにバラけていたら大変効率が悪い。見付けづらいし、気持ち悪い。 CSSプロパティの順序付けを遵守しているマークアップエンジニアに発見されたら、間違いなく「きたねえCSSだ」と罵られるに違いない。 そういう事態にならないためにも、最低限のポイントは抑えておきたいものだ。 このエントリーでは、CSSプロパティの順序付けに言及している記事やサイトをいくつか紹介したい。 順序付けに言及している記事一覧 https://qiita.com/akuden/items/e9c91a7a2b0596d53fd1 CSS3のプロパティ順序も言及している。 視覚整形モデル（display,position,float etc…） 視覚効果（overflow,visibility etc…） ボックスモデル/テーブル（margin,padding,border etc…） 背景（background etc…） 画像（object-position etc…） 色（color etc…） フォント/テキスト（font,text-align etc…） マルチカラム（columns etc…） 生成コンテンツ、自動番号付け、リスト（list-style,quotes etc…） ユーザーインターフェイス（cursor,outline etc…） アニメーション（transition,animation etc…） 印刷 音声 https://9elements.com/css-rule-order/ sassの@extendや@mixin、その他clearfixにも言及している。 SASS INHERITANCE（@extend,@mixin etc…） GENERATED CONTENT（content etc…） POSITION AND LAYOUT（position,float etc…） DISPLAY AND VISIBILITY（display,opacity etc…） CLIPPING（overflow etc…） ANIMATION（transition,animation etc…） BOX MODEL（margin,padding…