UI・UX・CSS

テーブルヘッダーを固定で、画面サイズに合わせて可変伸縮させる

投稿日:2017年11月15日 更新日:

技術要素

ウインドウサイズが変わったとき

$(window).on('load resize', function(){
    // 処理を記載
 });

ウインドウの幅を取得

$(window).width()

ウインドウの幅(スクロールバーを除く)を取得

window.innerWidth   
最低サイズ
min-width は width%指定とセットで使うと便利。

参考サイト
https://saruwakakun.com/html-css/basic/max-min-width

-UI・UX・CSS

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

業務システムにBootstrapは多分いらない

「モダンな画面が簡単にできるんですよ」なんて誰が言った? 俺が言った。誤りだった。取り消したい。 div地獄 試しに作っていて驚いた。divが10階層くらいになっている。 多分、自分の使い方が悪い。で …

no image

業務システムの管理画面でBootstrapを使う

業務システムでBootstrapを使う理由 レスポンシブ対応(モバイル対応) HTML5対応 洗練されたデザインを簡単に作れる である。 なんとなく「ゆくゆくはモバイル(ipadなど)でも見れるように …

no image

業務システムに使える基本的なHTML5レイアウトのテンプレート

デザインが軽視されがちな業務システムの管理画面。モック作成も担当範囲であれば、どのようなテンプレートを使うべきだろうか。 HTMLテンプレ―トによって見た目の制御が容易になるので、ぬかりなくやっておこ …

no image

ブロック要素は縦に並び、インライン要素は横に並ぶ

CSS3にdisplay要素がある。 display:block → 次要素は下に来る(縦並び) display:inline → 次要素は右に来る(横並び) このようになる。

no image

業務システムのUIデザイン設計は質素でよいのか?

業務システムだからと言って 業務要件を満たせる項目が並んでいればいいのでしょうか? そういう人は成功しませんね。 UX(ユーザー体験)もしっかり設計しないと、良いサービスは生まれませんよ。 「一般人が …