はじめに テーブルのヘッダー（上部と左部）を固定してスクロールさせる実装でプラグインなどを比較したため、備忘録を含めまとめたいと思います。 position:stickの実装方法 まず、大前提として本来であればposition:stickyを使用することが望ましいかと思いました。 こちらの方の記事が大変わかりやすいです。 https://qiita.com/s0tter/items/14fb4ec2600828a21a22 CSSのみで完結するため上記手法が望ましいかと考えておりますが、2019年7月7日時点でIEに対応しておりません。IEのユーザーもアプリを活用されることが予想されるため、採用を見送りさせていただきました。 https://caniuse.com/#search=position%3A%20sticky position:sticky対応状況 可能であれば、position:stickyを使用したいのですが、今回はIEの関係で採用が難しいため、以下のプラグイン等を比較いたしました。 プラグインを比較してみました。 当方Macしかパソコンを持ち合わせていないため、virtualBoxでIEを立ち上げて 動作状況を確認してみました。 ・DataTable Github:https://github.com/DataTables/DataTables https://datatables.net/extensions/fixedcolumns/examples/initialisation/two_columns.html 最終更新:2018年6月23日 IEでの動作状況 ・fixedTblHdrLftCol Github:https://github.com/nkmrshn/fixedTblHdrLftCol http://nkmrshn.com/fixedTblHdrLftCol/samples/sample_3_sync.html 最終更新:2014年6月13日 IEでの動作状況 ・FixwdMidashi http://hp.vector.co.jp/authors/VA056612/fixed_midashi/manual/index.html 最終更新:2018年12月3日 IEでの動作状況 ・Grid （まだまとめている最中です。） IEで最も綺麗に動作しているのが、FixwdMidashiだったように思えます。 他に良い方法などございましたら、一声かけていただけますと幸いです。 少しずつ追加させていただきます。 ご参考になれば幸いです。
テーブルのヘッダー（上部と左部）を固定してスクロールさせる実装でプラグインなどを比較したため、備忘録を含めまとめたいと思います。
まず、大前提として本来であればposition:stickyを使用することが望ましいかと思いました。 こちらの方の記事が大変わかりやすいです。 https://qiita.com/s0tter/items/14fb4ec2600828a21a22 CSSのみで完結するため上記手法が望ましいかと考えておりますが、2019年7月7日時点でIEに対応しておりません。IEのユーザーもアプリを活用されることが予想されるため、採用を見送りさせていただきました。 https://caniuse.com/#search=position%3A%20sticky
position:sticky
可能であれば、position:stickyを使用したいのですが、今回はIEの関係で採用が難しいため、以下のプラグイン等を比較いたしました。
当方Macしかパソコンを持ち合わせていないため、virtualBoxでIEを立ち上げて 動作状況を確認してみました。
Github:https://github.com/DataTables/DataTables https://datatables.net/extensions/fixedcolumns/examples/initialisation/two_columns.html 最終更新:2018年6月23日
Github:https://github.com/nkmrshn/fixedTblHdrLftCol http://nkmrshn.com/fixedTblHdrLftCol/samples/sample_3_sync.html 最終更新:2014年6月13日
http://hp.vector.co.jp/authors/VA056612/fixed_midashi/manual/index.html 最終更新:2018年12月3日
（まだまとめている最中です。）
IEで最も綺麗に動作しているのが、FixwdMidashiだったように思えます。 他に良い方法などございましたら、一声かけていただけますと幸いです。
少しずつ追加させていただきます。 ご参考になれば幸いです。
目的 入れ子について簡単にまとめる。 ※予備知識が増え次第追記を行う予定。 ※本記事は主にHTMLの入れ子について記載する。 入れ子 要素を要素で囲むこと HTMLでのリストの記載を抜粋した画像で説明を行う。 赤枠の部分がul要素である。 黄枠の部分がli要素である。 このときul要素がli要素を包み込んでいることになる。 このような状態を「入れ子」という。 入れ子の関係を見た目で分かりやすくするためにインデントを用いる。 HTMLでのリストの記載を抜粋した画像を記載する。 親要素と子要素 入れ子での各要素の名称。 HTMLでのリストの記載を抜粋した画像で説明を行う。 赤の部分がul要素である。 黄の部分がli要素である。 このときul要素がli要素を包み込んでいることになる。 外側の要素を「親要素」と呼ぶ。 内側の要素を「子要素」と呼ぶ。 HTMLでのリストの記載を抜粋した画像を記載する。
HTMLでのリストの記載を抜粋した画像で説明を行う。 赤枠の部分がul要素である。 黄枠の部分がli要素である。 このときul要素がli要素を包み込んでいることになる。 このような状態を「入れ子」という。 入れ子の関係を見た目で分かりやすくするためにインデントを用いる。
HTMLでのリストの記載を抜粋した画像を記載する。
HTMLでのリストの記載を抜粋した画像で説明を行う。 赤の部分がul要素である。 黄の部分がli要素である。 このときul要素がli要素を包み込んでいることになる。 外側の要素を「親要素」と呼ぶ。 内側の要素を「子要素」と呼ぶ。
目的 HTMLでリスト(箇条書き)の作成方法をまとめる。 押さえるポイント リストで箇条書きにしたい内容をliタグで囲む。 liタグをulタグで囲む。 ulタグとliタグにはインデントを用いて入れ子の関係をわかりやすくする。 書き方の例 <ul> <li>(リストとして記載したい内容を記入する-1)</li> <li>(リストとして記載したい内容を記入する-2)</li> <li>(リストとして記載したい内容を記入する-3)</li> </ul> 〜実際の表示〜 (リストとして記載したい内容を記入する-1) (リストとして記載したい内容を記入する-2) (リストとして記載したい内容を記入する-3) 注意するポイント liタグはデフォルトだと内容の前に黒点が自動で追加される。 ulタグが親要素、liが子要素。 入れ子の関係を見た目でわかりやすくするため、インデントを利用する。 より具体的な例 挨拶に関するリストを作成する。 リストに箇条書きする内容は、おはようございます。こんにちは。こんばんは。とする 〜サンプルコード〜 <ul> <li>おはようございます。</li> <li>こんにちは。</li> <li>こんばんは。</li> </ul> 〜プレビュー画面〜 おはようございます。 こんにちは。 こんばんは。
<ul> <li>(リストとして記載したい内容を記入する-1)</li> <li>(リストとして記載したい内容を記入する-2)</li> <li>(リストとして記載したい内容を記入する-3)</li> </ul>
〜実際の表示〜
挨拶に関するリストを作成する。 リストに箇条書きする内容は、おはようございます。こんにちは。こんばんは。とする
〜サンプルコード〜
<ul> <li>おはようございます。</li> <li>こんにちは。</li> <li>こんばんは。</li> </ul>
〜プレビュー画面〜
はじめに 今後、新しいプロジェクトで、Vue,Nuxtを使いそうなので、調べたところ今時のフロントエンドはいい感じのライブラリーがたくさんあることを知りました。 どれが、どのようにいいとかが正直わからかったので、とりあえず公式サイトまとめを作ってみました。 対象読者 Vue(Nuxt)を始めるよって人 フレームワークたくさんあるので、ドキュメントをまとめたものをみたいって人 フレームワークたち Boostrap 言わずと知れた。 その昔、サイトのデザインを見ればこれはBootsrapでできているってわかったなぁ。 公式サイト Bulma Flex Box レスポンシブ対応 公式サイト Tachyins 軽量cssフレームワーク 公式サイト 参考記事 手軽にコーディングするならやっぱりBootstrapよりTACHYONSだなぁ Element UI デスクトップ用のフレームワーク(レスポンシブではない) 公式サイト iView 中華製のフレームワーク Element UI と似ている 公式サイト 参考記事 Vue.jsのUIデザインフレームワークにiViewを導入する Who's using iView vuetify 日本語記事が多い印象 公式サイト 参考記事 Vueでもっと幸せになりたいあなたへ。VueのUIコンポーネントライブラリVuetifyのススメ Buefy Bulma をベースにした、vue用のフレームワークらしい Bulmaと何が違うのかな？軽量なのかな？ 公式サイト Ant desing 管理画面用のフレームワーク https://ant.design/docs/spec/introduce Tailwind CSS UIをコンポーネントで提供するのではなく、classで提供している いい感じのを作って欲しいという、ふんわりとした要件に使いやすいかも 参考サイト Nuxt.js + Tailwind CSS で爆速コーポレートサイト作成 終わりに パッとみ、簡素な記事になってしまった。。。 もっとUIを考えたいと思った記事でした。
今後、新しいプロジェクトで、Vue,Nuxtを使いそうなので、調べたところ今時のフロントエンドはいい感じのライブラリーがたくさんあることを知りました。 どれが、どのようにいいとかが正直わからかったので、とりあえず公式サイトまとめを作ってみました。
言わずと知れた。 その昔、サイトのデザインを見ればこれはBootsrapでできているってわかったなぁ。
公式サイト
Flex Box レスポンシブ対応 公式サイト
軽量cssフレームワーク 公式サイト
参考記事 手軽にコーディングするならやっぱりBootstrapよりTACHYONSだなぁ
デスクトップ用のフレームワーク(レスポンシブではない)
中華製のフレームワーク Element UI と似ている 公式サイト
参考記事 Vue.jsのUIデザインフレームワークにiViewを導入する Who's using iView
日本語記事が多い印象
公式サイト 参考記事 Vueでもっと幸せになりたいあなたへ。VueのUIコンポーネントライブラリVuetifyのススメ
Bulma をベースにした、vue用のフレームワークらしい Bulmaと何が違うのかな？軽量なのかな？ 公式サイト
管理画面用のフレームワーク https://ant.design/docs/spec/introduce
UIをコンポーネントで提供するのではなく、classで提供している いい感じのを作って欲しいという、ふんわりとした要件に使いやすいかも
参考サイト Nuxt.js + Tailwind CSS で爆速コーポレートサイト作成
パッとみ、簡素な記事になってしまった。。。 もっとUIを考えたいと思った記事でした。
なんてことない土曜日の話 新しいサイトのレイアウトの参考にと、にじいろクリップを眺めていた時のことでした。 なんかこう、ビビッ!!とくるサイトないかなぁ…… そう、某「いつでも、どこでも、誰とでも」なハイブリッドゲーム機のHD振動みたいに 心の芯が揺さぶられるような……ん？ そう、見つけてしまったのです。シノビリフレのサイトを！ こ、こいつは……下端固定メニューだと！？ そこに書かれていたのは、衝撃的な事実でした。 なんと810円にプライスダウンされていた！ 上端のメニューを一部だけ固定するのは比較的簡単にできます。 body header nav div#body footer といったタグ構成（header+navでヘッダー）の場合 nav { position: sticky; top: 0; } だけで大体終わります。 一定位置までスクロールしたらfixedのnavを表示するとかは必要ありません。 IEユーザは文句を言う前に、対応ブラウザへ移行しましょう。 今回の下端固定メニューの場合も実際には、 body header div#body nav footer nav { position: sticky; bottom: 0; } だけで済む話なんです。ええ。 それではシノビリフレのタグ構成を見てみましょう。 body header div#body footer nav others (最下部にした時に表示されるもの) そこに書かれていたのは、衝撃的な事実(タグ構成)でした。 ちなみにnavのみ表示されている時は、footerに.fixedが付いています。 さて、貴方ならどうやって実装しますか？ 少しだけ考えてみてください。 特定の条件を満たすと「裏オプション」も どう実装されているかを確認するより、どう実装するかを考えた方が勉強になります。 というわけで、タグ構成はこのままでチャレンジしてみました。 とりあえずCSSだけで頑張った footer.fixed { position: sticky; bottom: 0; } footer.fixed > :not(nav) { display: none; } 見た目上と表示上はいい感じに再現されたものの、最下部に来るとスクロール領域が増えてスクロールバーがぴょこぴょこします。 シノビリフレはそんなことしない！ 仕方なくjsでも手を加えた ぴょこぴょこしない方法は分かっているのです。 footer.fixed { position: sticky; bottom: XXXX; // -(othersのheight)px } とすれば良いのですが、XXXXは決め打ち以外にcssで当てようがありません。 どうせ.fixedの着脱時にDOMやwindowのサイズを使用しているので、js側で直接footerにbottomだけstyle付与しました。 これで大体シノビリフレと同じ挙動になってくれます。 ところで、.fixedなのにposition: sticky;ってどんな裏仕様ですか？ 実際のところどうなのか 詳細までは見る気が起きなかったですが、以下の特徴を見るにサイズは決め打ちでしょうね。 footerにposition:absolute; footer.fixedにposition:fixed; bodyにfooter用のpadding-bottom指定 無駄に勉強させてもらった感じとなりました。 CSSが思い通りに当たらない場合は、HTMLのタグ構成から見直すべき 途中にも書きましたが、stickyを使えば上端固定メニューも下端固定メニューも結構簡単に実装できます。 ですが、適当に書いたHTMLと、それを無理矢理デザインに寄せたCSSの場合は、大体うまく行かずにどこかが崩れます。そんな場合は、どんなに詳しくてもCSSだけで対処するのではなく、HTMLのタグ構成から見直してはどうでしょう？ それくらいサイトデザインとHTMLは密接な関係にあるんですよ！というお話でした。 あるいは全タグにidを振ってデザイン管理しましょう！(ﾏﾃ 体形を見ただけで３サイズを当てられる特技は無くてもいいですから、 適当なサイトを眺めるだけで、おおよそのタグ構成が想像できるようになると良いですよね！
新しいサイトのレイアウトの参考にと、にじいろクリップを眺めていた時のことでした。
なんかこう、ビビッ!!とくるサイトないかなぁ…… そう、某「いつでも、どこでも、誰とでも」なハイブリッドゲーム機のHD振動みたいに 心の芯が揺さぶられるような……ん？
そう、見つけてしまったのです。シノビリフレのサイトを！
こ、こいつは……下端固定メニューだと！？
そこに書かれていたのは、衝撃的な事実でした。
上端のメニューを一部だけ固定するのは比較的簡単にできます。
body header nav div#body footer
といったタグ構成（header+navでヘッダー）の場合
nav { position: sticky; top: 0; }
だけで大体終わります。 一定位置までスクロールしたらfixedのnavを表示するとかは必要ありません。 IEユーザは文句を言う前に、対応ブラウザへ移行しましょう。
今回の下端固定メニューの場合も実際には、
body header div#body nav footer
nav { position: sticky; bottom: 0; }
だけで済む話なんです。ええ。
それではシノビリフレのタグ構成を見てみましょう。
body header div#body footer nav others (最下部にした時に表示されるもの)
そこに書かれていたのは、衝撃的な事実(タグ構成)でした。 ちなみにnavのみ表示されている時は、footerに.fixedが付いています。
.fixed
さて、貴方ならどうやって実装しますか？ 少しだけ考えてみてください。
どう実装されているかを確認するより、どう実装するかを考えた方が勉強になります。 というわけで、タグ構成はこのままでチャレンジしてみました。
footer.fixed { position: sticky; bottom: 0; } footer.fixed > :not(nav) { display: none; }
見た目上と表示上はいい感じに再現されたものの、最下部に来るとスクロール領域が増えてスクロールバーがぴょこぴょこします。 シノビリフレはそんなことしない！
ぴょこぴょこしない方法は分かっているのです。
footer.fixed { position: sticky; bottom: XXXX; // -(othersのheight)px }
とすれば良いのですが、XXXXは決め打ち以外にcssで当てようがありません。 どうせ.fixedの着脱時にDOMやwindowのサイズを使用しているので、js側で直接footerにbottomだけstyle付与しました。 これで大体シノビリフレと同じ挙動になってくれます。 ところで、.fixedなのにposition: sticky;ってどんな裏仕様ですか？
XXXX
position: sticky;
詳細までは見る気が起きなかったですが、以下の特徴を見るにサイズは決め打ちでしょうね。
footerにposition:absolute; footer.fixedにposition:fixed; bodyにfooter用のpadding-bottom指定
position:absolute;
position:fixed;
padding-bottom
無駄に勉強させてもらった感じとなりました。
途中にも書きましたが、stickyを使えば上端固定メニューも下端固定メニューも結構簡単に実装できます。 ですが、適当に書いたHTMLと、それを無理矢理デザインに寄せたCSSの場合は、大体うまく行かずにどこかが崩れます。そんな場合は、どんなに詳しくてもCSSだけで対処するのではなく、HTMLのタグ構成から見直してはどうでしょう？ それくらいサイトデザインとHTMLは密接な関係にあるんですよ！というお話でした。 あるいは全タグにidを振ってデザイン管理しましょう！(ﾏﾃ
体形を見ただけで３サイズを当てられる特技は無くてもいいですから、 適当なサイトを眺めるだけで、おおよそのタグ構成が想像できるようになると良いですよね！
