
ブログやるなら SWELL × ConoHa WING がおすすめ!ルイログはこの構成で運営しています

ルイログも愛用中!
画面の上部に固定させるメニューバーや、ECサイトだったら右端に小さくクーポンバナーを固定させていたりするサイト、ありますよね。
そういった、メニューバーや画像などのコンテンツを画面内に固定させる方法をCSSのコピペだけで簡単に実装する方法を紹介します。
ガジェットブロガー
R.U.I
プロフィール
ガジェットやモノで生活に刺激を「ルイログ」。当サイトではAppleデバイスやその周辺機器、使えるソフト・アプリ、さまざまなガジェットや生活家電・モノをレビューしています。他にもWEBをデザインのコピペで簡単に使えるコードを紹介したりも。WEBエンジニアの方やPCが趣味・PCを使って仕事をしている方にとって役立つ情報を発信しています。カメラ・写真が好きなのでレビュー商品も写真を多め撮影し掲載することでより商品の魅力や細かいが伝わるよう心がけています。 プロフィール詳細やレビューガイドライン
メニューバーでも画像でもテキストエリアでもOK!その他何にでも適用できるような形で紹介します。
<header class="fix-01">LOGO</header>
今回はLOGOというテキストを、画面上部に固定させます。htmlはこれだけ!
実際には固定させたい内容をdivの中に入れてあげてください。
.fix-01{
background:#fff; /背景を白色に/
box-shadow:0 2px 8px rgba(30,30,80,.3); /影。不要なら削除/
left:0;
line-height:1;
position:fixed;
top:0;
width:100%;
z-index:100;
text-align:center;
padding:1rem;
}
表示したときにわかりやすくするため、影を入れたりの調整をしています。
設置場所により適宜調整してください。
実際に固定表示させているのは「position:fixed;」で、「top:0;」にて画面上部に固定させています。
センタリングが必要なければ「text-align:center;」を、余白が必要なければ「padding:1rem;」を消してくださいね。
これでヘッダーへの固定ができます。
次に簡単な応用となりますが、画面右への固定も紹介しておきます。
上記画像内iPhoneXの右側に表示されている「右fix」という部分。それも固定させています。
<div class="fix-02">右<br>fix</div>
fix-01とほとんど一緒です。先程のcssのclass名をfix-01としたので、今回はfix-02としました。
.fix-02{
background:#fff; /背景を白色に/
box-shadow:0 2px 8px rgba(30,30,80,.3); /影。不要なら削除/
right:0;
line-height:1;
position:fixed;
top:50%;
z-index:100;
padding:1rem;
}
変わったところといえば、
ですね。
「top/right/left/bottom」 の配置指定で、上に固定、右に固定、下に固定等と変化させることができます。
ブログでも、ランディングページでも、ECサイトでも、かなり重宝されるメニューバーや画像を画面に固定する方法をコピペで簡単に利用できるよう紹介しました。
今回の肝は「position:fixed;」で固定すること。
ルイログでは「bottom」の配置で、メニューを下部へ固定していますね。
かなり便利で簡単に実装できるテクニックなので、是非利用してみてください!
良きWEBデザインをっ!
関連:こちらもおすすめ
この記事が気に入ったら
フォローしてね!