World Hacker（ぎょうざブログ）

みなさんどうも、こんばんみ～。ぎょうざです。

Webページなどのスタイルを指定する際にお世話になる

CSS（）を使う際にぎょうざが躓いたところを備忘録的に記録しておきます。

同じような現象で困っている方の参考になれば幸いです。

【目次】

• 効果：他のCSSプロパティでタグ要素を指定していたとしても「!important」がついているプロパティを最優先してスタイルに使用してくれる
• ポイント：CSSでは、スタイルが適用される優先順位がどうなっているか理解できていますか？
• 注意点：

• 効果：
  Copy

  position: sticky; /* ←固定 */
  top: 20px; /* ←配置する要素:bodyタグなどの最上部から、固定したい要素までのマージン */
  background: rgb(199, 199, 255);/* ←要素の背景色（：グレー） */

• ポイント：
  • サイドバーの高さがメインコンテンツよりも短くなっているか確認！

  ▶︎追従したい要素(sidebar)に背景を塗ってみる
  background: rgb(199, 199, 255);

  ▶︎横並びの他の要素と同じ幅以上になっていたらstickyは効かない！

  ▶︎今回はcontainerにalign-items: flex-start をつけているのでarticle より sidebarの方が短くなっている

  ▶︎ align-items: flex-start を外した状態だとこのようになるので、実質効いていない状態になる！

  (align-items: flex-start や height: 100%などで高さを可変に)

• 注意点：

  親要素にoverflow: hiddenを指定していないか確認！

  ▶︎ containerにoverflow: hidden を入れてみるとstickyが効いていないのが確認できると思います。

• 効果：リストなどの羅列する要素に、任意のテキストやマークを付けたいときに使ってみましょう！
  💡

  CSS3では、::after ::beforeのようにコロンを2つ付けます。
  CSS2では、コロン1つでOKです。
  • これを使うとなにが嬉しいの？

    beforeは、適用するCSS要素の先頭、afterであれば末尾に、スタイルを適用できます。

• ポイント
  • 対応ブラウザ

    Chrome	○
    Edge	○
    Safari	○

• 注意点：

ここまで読んでいただきありがとうございます。

以上、ぎょうざでした。