Author
R.U.I(ルイ)
ガジェットブロガー
ECサイト運営会社でWEBエンジニア&マーケター・WEBコーダーとして日々従事しており、会社ではWindows、お家ではMacの両刀遣い。iPad Proは毎日持ち歩いています。PCデスク周りを快適にすることやWEBデザインが好き。ガジェットやモノで生活に刺激を与えたいという想いで人におすすめしたいモノの紹介記事を軸にブログ運営をしているガジェットブロガーです。写真撮影が趣味になりました。
ルイログをGoogleニュースで読む
この記事の目次
CATEGORY

2次元のルイ

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

ルイログ愛用ブログテーマSWELL

今選ぶBESTサーバー ConoHa WING

ルイログも愛用中!

YouTubeチャンネル開設しました!
ステマ規制への対応と記事内広告について

本サイト内のコンテンツはルイログが独自に制作しています。 メーカー等から商品提供を受けることもありますが、その場合は記事内にPR表記と提供を受けている旨を明記しています。 また、コンテンツの内容や評価に関する決定にも一切関与されていません。 アフィリエイトプログラムにより記事内で紹介する商品を購入することで当サイトに売り上げの一部が還元されることがあります。 詳しくはサイト運営ポリシーをご覧ください。

【コピペで簡単】CSSだけでメニューバーや画像を固定させる方法

cssだけでメニューバーを固定表示させる方法

画面の上部に固定させるメニューバーや、ECサイトだったら右端に小さくクーポンバナーを固定させていたりするサイト、ありますよね。

そういった、メニューバーや画像などのコンテンツを画面内に固定させる方法をCSSのコピペだけで簡単に実装する方法を紹介します。

もくじ
この記事の著者
R.U.I

ガジェットブロガー

R.U.I ルイ

詳しいプロフィール

プロフィール

ガジェットやモノで生活に刺激を「ルイログ」。当サイトではAppleデバイスやその周辺機器、使えるソフト・アプリ、さまざまなガジェットや生活家電・モノをレビューしています。他にもWEBをデザインのコピペで簡単に使えるコードを紹介したりも。WEBエンジニアの方やPCが趣味・PCを使って仕事をしている方にとって役立つ情報を発信しています。カメラ・写真が好きなのでレビュー商品も写真を多め撮影し掲載することでより商品の魅力や細かいが伝わるよう心がけています。 プロフィール詳細やレビューガイドライン

コピペで簡単!CSSだけでメニューバーや画像を固定する方法

メニューバーでも画像でもテキストエリアでもOK!その他何にでも適用できるような形で紹介します。

メニューバーを上部へ固定する方法 : コピペ用HTMLサンプル

 <header class="fix-01">LOGO</header>

今回はLOGOというテキストを、画面上部に固定させます。htmlはこれだけ!

実際には固定させたい内容をdivの中に入れてあげてください。

メニューバーを固定する方法 : コピペ用CSSサンプル

.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;」を消してくださいね。

これでヘッダーへの固定ができます。

cssだけでメニューバーを固定表示させる
ヘッダーと、右側に固定バーを用意しました

画像などコンテンツを右に固定する方法

次に簡単な応用となりますが、画面右への固定も紹介しておきます。

上記画像内iPhoneXの右側に表示されている「右fix」という部分。それも固定させています。

画像などコンテンツを右に固定する方法 : コピペ用HTMLサンプル

<div class="fix-02">右<br>fix</div>

fix-01とほとんど一緒です。先程のcssのclass名をfix-01としたので、今回はfix-02としました。

画像などコンテンツを右に固定する方法 : コピペ用CSSサンプル

 .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:0; → right:0;」で一番上に固定ではなく、右端に固定とさせたこと
  • top:50%;」で上から50%の位置に配置させたこと。「width:100%;」の指定を消したこと

ですね。

top/right/left/bottom」 の配置指定で、に固定、に固定、に固定等と変化させることができます。

コピペで簡単!CSSでメニューバーや画像を固定する方法についてまとめ

cssだけでメニューバーを固定表示させる方法

ブログでも、ランディングページでも、ECサイトでも、かなり重宝されるメニューバーや画像を画面に固定する方法をコピペで簡単に利用できるよう紹介しました。

今回の肝は「position:fixed;」で固定すること。

ルイログでは「bottom」の配置で、メニューを下部へ固定していますね。

かなり便利で簡単に実装できるテクニックなので、是非利用してみてください!

 

良きWEBデザインをっ!

関連:こちらもおすすめ

あわせて読みたい
【コピペで簡単】ハンバーガーメニューをCSSだけで作る方法 タップすると横からメニューが出てくる、通称ハンバーガーメニュー。CSSのコピペだけで簡単に実装!書籍にも紹介されました。レスポンシブ対応もOK。追記で”ページ内リンク”にも対応しました。ページ内リンクの挙動もjQueryをコピペするだけで簡単に実装できます。
cssだけでメニューバーを固定表示させる方法

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
もくじ