Css

【Css、JavaScript】モーダルウィンドウ作成|コピペ可能

モーダルウィンドウとは、ウィンドウ内で表示された操作を完了するまで(またはキャンセルするまで)他の操作をさせないようにするウィンドウのことです。
モーダルウィンドウは、主にユーザーに重要な操作や確認を促したい時に利用されます。今回は、CssとjQueryでモーダルウィンドウを作成する方法をサンプルコードを提示しながら説明します。

  1. 下準備(Html)
  2. モーダルウィンドウが開いているデザイン作成(Css)
  3. モーダルウィンドウ開閉(jQuery)
続きを読む

【Css】ヘッダーを上部に固定するレイアウト

ヘッダーが画面上部に固定されているWebサイトをよく見かけます。今回は、上記の図のような、画面をスクロールしてもヘッダーを画面上部に固定させる方法をサンプルコードを提示しながら説明します。

  1. ヘッダーの役割
  2. 下準備
  3. 【Css】position: fixed を利用
  4. 【Css】position: stickyを利用(※2021/01/29 追記)
続きを読む