特にスマホで活躍する、ダイアログのように浮かび上がるモーダルウィンドウ。初心者でも1から作れるよう、解説します。
![初心者でも分かる!モーダルウィンドウの作り方](https://cdn-ak-scissors.b.st-hatena.com/image/square/113a71dfbad8b26b958bc7be21f62d6dbcd3c80a/height=288;version=1;width=512/https%3A%2F%2Fsyncer.jp%2Fstorage%2Fjavascript%2Fjquery-modal-window%2Fstatic%2Fdst%2Feyecatch_og.png)
メモです。 CSSでposition:fixedを指定した要素の左端を、ブラウザ基準ではなく親要素基準にする方法を知りました。 もしかしたら常識的な事なのかもしれないのですが、つい最近はじめて知ってビックリ。まさに目からウロコでしたw やり方は簡単で、親要素にwidthを指定してmargin:0 autoなどで中央寄せにし、子要素はposition:fixedした上でleftを指定しない(left:autoと同じ)。これだけです。親要素からの距離は、margin-leftで指定すればよいわけです。これで、ブラウザサイズに影響されないで、ある要素の隣にぴったりと追従する(ように見える)サイドバーとかボタンが作れるわけですね。こんな単純な事に今までに気づけずにいたとは。 HTML↓ <body> <div id="parent"> <p id="child">Fixed</p> </div>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く