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

pcサイトのコーディングに関しての注意点。

PCサイトのコーディングをしていて気づいたことなど。 最近スマホばっかりやっててPCサイトのコーディング自体ものすごい久しぶりでした・・・ 幅が縮むということを常に意識する。 縮めた時にページが崩れた …

no image

boostrapでのヘッダーナビ作成

昔から私の作るWEBアプリはデザインがめちゃくちゃなことが多かったんですが、最近は多少デザインにも気を配るようになってきました。 実はCSSがあまり得意ではなくて、うまく組むためにかなり苦戦していまし …

no image

CSSデザインネタリンク集

デザインモックがないとき用のリンク集なもの Contents1 管理画面テンプレート1.1 一般系1.2 Bootstrap系の管理画面テンプレート2 ワンポイント系2.1 ワンポイント系のリンク集2 …

no image

レスポンシブデザインの作成ポイント

本日はレスポンシブデザインの表現方法について。 スマホでは何も指定しなければブラウザはウェブサイトの幅が980pxと仮定しています。 要は通常の980px分をそのままiPhoneの画面に収まるよう縮小 …

no image

Bootstrapまとめ 主に段組み関連の知識について

自分はデザインセンスが壊滅的なので、Bootstrapにいろいろと頼っております。 最初は仕事でちょこっと使う機会があり、見よう見まねでやっていましたが、理屈がわからないと応用がきかないこともあるため …

アーカイブ