CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSだけで作る！画面に固定表示されるソーシャルメディアアイコンバーの実装方法

Webサイトのサイドに常時表示されるソーシャルメディアアイコンバーは、訪問者をSNSへ誘導するための効果的な手段です。CSSのposition: fixed;を使えば、ページをスクロールしても画面上の同じ位置に固定されたアイコンバーを簡単に実装できます。

以下に、Font AwesomeのアイコンフォントとCSSを組み合わせて、固定型ソーシャルメディアアイコンバーを作成するコード例を紹介します。

コード例

<!DOCTYPE html>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
    integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" />
<style>
*,
*::before,
*::after {
    box-sizing: border-box;
}
main {
    margin-left: 300px;
}
.SocialBar {
    position: fixed;
    display: block;
    top: 30%;
    font-size: 0;
    width: 200px;
    border: 2px solid darkgreen;
    box-shadow: 5px 10px 18px rgb(55, 173, 39);
}
button {
    display: block;
    width: 100%;
    margin: 0px;
    border: none;
    padding: 15px;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-weight: bold;
    font-size: 20px;
}
button:not(:last-child) {
    border-bottom: 2px solid rgb(6, 134, 49);
}
button:hover {
    background: black;
    box-shadow: 5px 10px 18px rgb(20, 20, 20);
}
</style>
</head>
<body>
<div class="SocialBar">
<button><i class="fa fa-facebook-f" style="color:#3B5998"></i></button>
<button><i class="fa fa-hashtag" style="color:#55ACEE"></i></button>
<button><i class="fa fa-linkedin" style="color:#007bb5"></i></button>
</div>
<main>
<h1>ソーシャルメディアリンク</h1>
<h2>上のリンクにマウスを乗せると、ホバー効果を確認できます</h2>
<h2>ぜひ各SNSからご連絡ください</h2>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In fringilla, enim a fringilla semper,
neque eros aliquam massa, ut porta arcu justo et metus. In aliquet justo non lorem condimentum,
in rutrum lorem vestibulum. Aliquam et ornare tellus. Mauris eu nisi ac ante vestibulum fermentum
ac nec enim. Integer sed aliquet nisi. Nullam semper lorem sed sem gravida, in euismod urna posuere.
Cras porta neque non sapien maximus placerat. Morbi imperdiet faucibus orci. Maecenas eu ipsum metus.
</h3>
</main>
</body>
</html>

実行結果

上記のコードを実行すると、次のような表示になります。

CSSだけで作る！画面に固定表示されるソーシャルメディアアイコンバーの実装方法

ポイント解説

  • position: fixed; — アイコンバーを画面左端（top: 30%の位置）に固定し、スクロールしても常に表示されるようにしています。
  • font-size: 0; — ボタン間の不要な余白（インライン要素の隙間）を防ぐテクニックです。
  • :hover 擬似クラス — マウスオーバー時に背景色を黒に変更し、影を加えることで視覚的なフィードバックを与えます。

ページをスクロールしてもアイコンバーは固定されたまま表示され、いずれかのアイコンにマウスを乗せるとホバー効果が現れます。

CSSだけで作る！画面に固定表示されるソーシャルメディアアイコンバーの実装方法

  1. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>

  2. CSSで作る！スクロール時に画面上部へ固定されるナビゲーションバーの実装方法

    CSSでスクロール時に固定されるナビゲーションバーを作成する方法Webサイトでページをスクロールしても画面上部に固定され続けるナビゲーションバーは、メニューへのアクセス性を保ち、ユーザビリティを大きく向上させる定番のUIテクニックです。CSSのpositionプロパティとJavaScriptを組み合わせることで、誰でも簡単に実装できます。この記事では、スクロールするとナビゲーションバーが画面上部にピタッと固定される仕組みを、実際のコード例とともにわかりやすく解説します。positionプロパティの基本構文CSSにおけるpositionプロパティの基本構文は次のとおりです。セレクタ {