HTMLとCSSで画面の左下に追従するブロックを作成する方法

管理者

1年前

ウェブデザインにおいて、コンテンツの配置は見た目と使いやすさに大きな影響を与えます。
今回は、画面の左下に追従するブロックを作成する手法を紹介します。
このスタイリッシュなデザインは、ブログやウェブサイトのアクセントとして素晴らしいものになることでしょう。

追従するブロックを作成

追従するブロックは様々な利用方法があります。
よく使われるのは、ページトップに戻るボタンや広告のバナーを表示さたりします。
それでは、ブロックを作成していきましょう。

HTMLをセットアップ

まずは、HTMLの基本的な構造を整えましょう。

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <div class="sticky-block">
    <!-- ここにコンテンツを入れる -->
  </div>
</body>
</html>

CSSでスタイルを追加

CSSを使用して、ブロックを画面の左下に追従させ、見た目を整えます。

body {
  margin: 0;
  padding: 0;
}

.sticky-block {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 50%; /* ブロックの横幅を調整 */
  background-color: #f1f1f1;
  padding-top: 25%; /* アスペクト比を設定 */
  border-top-right-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

ブロックにコンテンツを追加

ここでは、.sticky-block内にコンテンツを追加する方法を見ていきましょう。
以下はテキストとボタンを追加する例です。

<div class="sticky-block">
  <p>最新のニュースをチェック！</p>
  <a href="#" class="button">詳細を見る</a>
</div>

上記のコードでは、<p>要素を使ってテキストを追加し、<a>要素を使ってボタンを追加しています。
ここではクラス名がbuttonとされたボタンスタイルがあると仮定します。

【おまけ】カスタマイズする

ブロックをカスタマイズして、あなたのウェブサイトに合ったデザインに変更することができます。
以下はカスタマイズの例です。

.sticky-block {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 40%; /* 横幅を調整 */
  background-color: #2a2a2a; /* 背景色を変更 */
  color: #ffffff; /* テキスト色を白に変更 */
  padding-top: 20%; /* アスペクト比を調整 */
  border-top-right-radius: 5px;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
}

.sticky-block p {
  font-size: 18px;
  margin: 0;
}

.button {
  display: inline-block;
  padding: 8px 16px;
  background-color: #ff9800;
  color: #ffffff;
  text-decoration: none;
  border-radius: 3px;
  margin-top: 10px;
}

上記のカスタマイズ例では、.sticky-blockの背景色やテキストの色を変更し、ボタンのデザインもカスタマイズしています。
また、テキストのスタイルやボタンの余白も微調整しています。
このようにして、デザインをカスタマイズして独自のスタイルを加えることができます。

こちらが、詳細なコンテンツの追加とカスタマイズの例です。
これらのステップを踏んで、あなたのウェブサイトに最適なデザインを作り上げてみてください！