skillup

技術ブログ

デザイン

画面系小ネタposition:sticky+datalist(プルダウン+自由入力)

投稿日:

画面系の小さい小ネタなど。

position:sticky

ヘッダーに関して画面をスクロールすると、付いてくるヘッダーを「スティッキーヘッダー」と言います。

これ実装するには通常はJS+CSSで色々書かなくてはいけないのですが、比較的新し目のブラウザではposition:stickyというプロパティを使うことで制御できます。

知っているフリーのエンジニアの方のサイトの例がもっともわかりやすかったのでリスペクトもかねてリンクを貼ります。

ヘッダー固定が簡単に設定できるCSS position:sticky

と言いつつも自力で(position:stickyを使わないで)実装する能力も大切です。

(スクロール量に応じてヘッダー部分をスライドさせます。下記のJSが一例です。)

自力型は下記のサンプルを。

https://github.com/umanari145/library/blob/master/sticky.html

datalist(プルダウン+自由入力)

これまた小ネタですが、少し前の案件でプルダウンかつ自由入力ができるフォームが欲しいとお客さんから言われました。

最初かなり難しそうだなあ・・・と思ったのですが、HTML5のdatalistというタグでディフォルトで付いた機能だと知り、いとも簡単に実装することができました。

HTML5色々な機能がありますね。

-デザイン
-

執筆者:


comment

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

関連記事

no image

cssでのmax,minや画像の配置に関して

主に画像なんかで使われるんですが、max(min)-width(height)などの使い方に関して。 えーmax(min)はどういうときに使われるかというとまず可変な要素に対して使われることが多いです …

no image

CSSのレイアウト例 その1 カラムレイアウト

本日はCSSのレイアウト例に関してよくあるものを見てみようと思います。 例によってサイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザインの大原則」を買いましょう。 …

no image

checkboxのカスタマイズ

ブラウザのディフォルトではなくcheckboxをカスタマイズしたいとき。 やったことなかったんですが、やってみると結構面白い。 Contents1 ソース2 参考リンク ソース まずはソースを。 ht …

no image

CSSのブロックとインライン、レイアウトについて

今回はCSSを組む時のブロックレベルとインラインの基本とレイアウトに関して。 Contents1 ブロックレベルとインライン1.1 ブロックレベル要素1.2 インライン要素1.2.1 参考リンク2 レ …

no image

CSSで背景画像の出力

最近はやりのWEBデザインでよくある、大きな背景画像のなかにユーザー名とパスワードを入力させるような画面の作成方法について。

基本的な …