増えてきたフルスクリーンでオーバーレイの検索ボックスだが、まだこれといった無難な実装方法はないように見える。今だとvw/vh/vmin/vmax単位を使ってレイアウト、:target擬似クラスを使ってトグルという形にすれば、ほぼCSSで実現できそうだ。 Demo: Fullscreen Overlay Searchbox デモではShow Searchboxというリンクをクリックすると検索ボックスが表示され、検索ボックスの左上にある✖をクリックすると閉じることができる。実際のウェブサイトではリンクの代わりに虫眼鏡のアイコンでも使ってやれば良いだろう。 マークアップ <aside id="search" class="searchbox"> <h1>Search this site</h1> <form> <input class="query" placeholder="Enter sea
![フルスクリーンでオーバーレイの検索ボックス](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f24675c7f16460c0137c4a89ec4dcd551c10669/height=288;version=1;width=512/https%3A%2F%2Fhail2u.net%2Fimg%2Fblog%2Ffullscreen-overlay-searchbox.png)