【こういうときどうすればいいんだっけ】HTML/CSS逆引きTips【個人用/随時追記】

個人的にHTMLやCSSって、既存のものをちょっといじるとかシンプルなものであれば問題無くできるけど、「1からページを実装」とかになると意外と分からないことも多くて意外と時間がかかってしまう…
最近はChatGPTとかで聞けば色々すぐ教えてくれるけど、毎回調べているようでは時間もかかってしまう。
「こういうデザイン、配置にしたいんだけど、どうすればいいんだっけ？」といったときにすぐに確認できるような、逆引きのTipsみたいなのを自分用に蓄積していくようにする。
(1から調べるより、ある程度アタリがついている方が調べる時間も短縮できると思う)

要素を横並びにしたい(display: flex)

display: flex; を指定すると、すべての子要素が横並びになる。子要素がフレックスアイテムとして扱われるため、ブロック要素も横並びになる。

<div class="container">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
</div>

<style>
  .container {
    display: flex;
  }
  
  .container p {
    margin-right: 10px; /* 各段落の間にスペースを追加する場合 */
  }
</style>

中央寄せにする(justify-content: center)

justify-content は、flexアイテムの配置方法を指定するためのプロパティ。 justify-content: center; を指定すると、flexアイテムを中央寄せで表示できる。

<div class="container container__center">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
</div>

<style>
.container {
  display: flex;
}

.container__center {
  justify-content: center;
}

.container p {
  margin-right: 10px; /* 各段落の間にスペースを追加する場合 */
}
</style>

要素を縦に並べたい場合(flex-direction: column)

要素を縦に並べたい場合は、 flex-direction: column; を使う。

<style>
.container {
  display: flex;
}

.container p {
  margin-right: 10px; /* 各段落の間にスペースを追加する場合 */
}

.container__flex-direction-column {
  flex-direction: column;
  align-items: center;
}
</style>

<div class="container container__flex-direction-column">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
</div>

リスト(ul, li)を横並びにする

• display: flex;
  • 要素が横並びになる
• flex-wrap: wrap;
  • フレックスアイテムが複数行に分割される
• widthでそれぞれの要素の幅を指定する
  • 1行に収まらない場合は改行されるようになる

<style>
.list-container {
  background-color: #a8e6ff;
}

.flex-wrap-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}

.flex-wrap-list li {
  width: 30%;
  padding: 30px;
  margin: 20px;
  background-color: #ffffff;
}
</style>

<div class="list-container">
  <ul class="flex-wrap-list">
    <li>1つ目</li>
    <li>2つ目</li>
    <li>3つ目</li>
    <li>4つ目</li>
  </ul>
</div>

ヘッダを画面上部に固定したい(position: fixed)

<style>
.header {
  position: fixed; /* 要素を画面に固定 */
  top: 0; /* 画面の上部に配置 */
  width: 100%; /* ヘッダーを画面幅いっぱいに広げる */
  display: flex; /* ロゴとボタンを横並びにする */
  justify-content: space-between; /* ロゴを左側に、ボタンを右側に配置 */
  align-items: center; /* 垂直方向に中央揃え */
  padding: 10px 20px; /* ヘッダーの内側に余白を追加 */
  background-color: rgba(255, 255, 255, 0); /* 透明度を持たせた白い背景 */
  z-index: 1000; /* 他の要素より前面に表示するためにz-indexを設定 */
  /* 要素に余白ができてしまうときは以下のような指定で調整できる */
  left: 0;
  top: 0;
}
</style>

<header class="header">
  <div class="logo">
    <img src="logo.png" alt="企業ロゴ">
  </div>
  <button class="contact-button">問い合わせ</button>
</header>

最初または最後の要素だけにスタイル適用する

<style>
.first-child-last-child-list li {
  font-size: 14px;
}

.first-child-last-child-list li:first-child {
  font-size: 20px;
}

.first-child-last-child-list li:last-child {
  font-size: 30px;
}
</style>

<ul class="first-child-last-child-list">
  <li>1番目</li>
  <li>2番目</li>
  <li>3番目</li>
  <li>4番目</li>
</ul>

カーソルを合わせたときにスタイルを変化(:hover)

<style>
.contact_button {
  background-color: black; /* 通常時の背景色を黒に設定 */
  color: white; /* 通常時の文字色を白に設定 */
  border: none; /* ボタンの枠線を削除 */
  padding: 10px 20px; /* ボタンの内側に余白を追加 */
  cursor: pointer; /* カーソルをポインタに変更 */
  transition: background-color 0.3s ease, color 0.3s ease; /* 背景色と文字色の変化にアニメーションを追加 */
}

.contact_button_text {
  margin: 0; /* pタグのデフォルトのマージンを削除 */
  color: inherit; /* ボタンの文字色を継承 */
}

.contact_button:hover {
  background-color: white; /* ホバー時の背景色を白に変更 */
  color: black; /* ホバー時の文字色を黒に変更 */
}
</style>

<button class="contact_button">
  <p class="contact_button_text">お問合せはこちら</p>
</button>

CSSアニメーション

@keyframes でアニメーションの定義を行い、それぞれのクラスの animation-nameプロパティで指定することで、そのアニメーションを適用する感じ。

フェードイン(スライド)

<style>
@keyframes slide {
  0% {
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

.slide {
  opacity: 0;
  animation-name: slide;
  animation-fill-mode: forwards;
}

.slide__down {
  transform: translateY(-50px);
  animation-duration: 1s;
}

.slide__up {
  transform: translateY(50px);
  animation-duration: 1s;
}
</style>

<div class="animation_container slide slide__up">
  <p class="text">
    アニメーション(下から)
  </p>
</div>
<div class="animation_container slide slide__down">
  <p class="text">
    アニメーション(上から)
  </p>
</div>

浮かび上がってくる(blur)

<style>
@keyframes fade_in_blur {
  0% {
    filter: blur(20px);
  }
  100% {
    opacity: 1;
    transform: translate(0);
    filter: blur(0px);
  }
}

.fade_in_blur {
  animation: fade_in_blur 0.5s ease-in-out forwards;
  opacity: 0;
  animation-fill-mode: forwards;
}
</style>

<div class="animation_container fade_in_blur">
  <p class="text">
    アニメーション(blur)
  </p>
</div>

スクロール時にアニメーションを適用する

スクロールしたときにアニメーションを適用するには、jQueryを使った実装が必要。
最初は要素を隠しておき(is_hidden)、スクロール時に計算してアニメーションのクラスを適用し(slide)、 is_hiddenクラスを削除することで画面に現れるようにする。

$(function () {
    $(window).scroll(function () {
        const wHeight = $(window).height();
        const wScroll = $(window).scrollTop();
          $(".slide__up").each(function () {
              const bPosition = $(this).offset().top;
          if (wScroll > bPosition - wHeight + 100) {
              $(this).addClass("slide").removeClass("is_hidden");
          }
        });
    });
  });