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はまりやすいポイント ※随時更新予定

CSSにてよく確認するのネタに関して Contents1 中央寄せ2 命名3 テーブル 中央寄せ vertical-alignを指定できるのは「インライン要素」と「テーブルセル」だけ text-ali …

no image

css写経学習で感じたこと

こっちのブログでも書いてますが、CSSを最近写経してて気づいたことがいろいろあるんでメモリます。 常時追加予定。 Contents1 全体2 レスポンシブ3 レイアウト4 list系5 display …

no image

CSSのレイアウト例 その3 固定+リキッドレイアウト

本日は固定レイアウト+リキッドレイアウトについて。 リキッドレイアウトとはブラウザの幅に合わせて表示を変える方法でして、スマホが一般的となった現在では非常によく使われています。 今回解説するのは例えば …

no image

レイアウトカラム落ち対策

自分のPCでは大丈夫なんだけど、別PCで見るとカラム落ちするケースがあり、ちょっと対策を。 もちろん幅調節とかそういうのはなし。 Contents1 flex-wrap:nowrap2 display …

no image

スマホサイト対策全般

スマホ対策のデザインに関するチェックリスト。 Contents1 viewport2 横のはみ出しチェック3 メディアクエリ viewport まずは横幅などがおかしくないかの確認 [crayon-6 …

アーカイブ