更新日: 2020年07月10日
公開日: 2020年05月31日

【Webデザイン】CSSの『sticky』を使いこなそう

2020年新しく生まれ変わった iPhone SE の Web ページでも採用されている CSS の sticky。

iPhone SE 2020 の商品ページ（LINK）

今回は実際にいくつかの sticky のサンプル・プログラムを交えて、 sticky 体験を行っていきたいと思います。

Webデザイン志望の方必見！CSSの「sticky」を使いこなそう
stickyとは
stickyサンプルコード（表）
stickyサンプルコード（広告）
stickyとSEO
まとめ

Webデザイン志望の方必見！CSSの「sticky」を使いこなそう

stickyとは

sticky は CSS position: の値の一つで、 .〇〇 { position : sticky; } という書き方をします。 2014年ぐらいからブラウザ：Sarafi がサポートし、2017年に Chrome がサポートしたことで広まった CSS の一つ。

sticky の効果としては、画面スクロールに対して要素を重ねて表示できる、というメリットがあります。

例えば上図の場合では <h2> タグを画面上部で固定するようにセット。最初は「Stickyサンプル①」と表示されていたのが、下にスクロールしていくと「Stickyサンプル②」に変わったことが確認できます。これは CSS で .〇〇 { position : sticky; } とした要素が HTML コード内に２つあるためで、２つ目の要素が１つ目の要素の上に覆いかぶさるような形でセットされます。

従来こうした要素の固定表示というと CSS の .〇〇 { position : fix; } が使われてきましたが、 sticky の方がスクロールに対して固定できるため表現に幅が持てます。活用例としては以下のような項目が挙げられるでしょう。

タイトルの固定に
表のヘッダー固定に
目次に
広告に

上図のサンプルは「タイトルの固定に」の例で、 <h2> タグを固定しています。

stickyサンプルコード（表）

こちらは sticky を表のヘッダーにセットした例。よく仕様書や商品リストで縦長に表示されているデータで、スクロールしてみている内に「あれ、この項目なんだっけ」ということあると思います。 sticky を使うとヘッダーが固定さているので何の項目をみているか一目で分かりますね。

また表が終わった後は、 sticky に関連する表は消え、従来通りあとのコンテンツを表示することができます。

ただし、一つの表で複数のヘッダー（sticky）を使うのは禁物。通常表のヘッダーである <thead> は、１つの表に１つですが、 HTML的には一つのテーブル内に２つ <thead> があっても表示されます。試しに下のサンプルを下に下にスクロールダウンしてみてください。

途中表のヘッダーが変わったと思います。しかし、もし途中 "空白" の行が表示されていたら、それはブラウザ： Sarafi をお使いのことでしょう。Google Chrome や FireFox はある程度 HTML について寛容で、一つの表内に２つ <thead> があっても表示してくれます。しかし、 Safari は ❌。 Safari の場合に、２つ以上 <thead> を固定したい場合は、別途 <table> 要素を用意して、一つの表に一つの <thead> 、sticky を用意する必要がありますね。

stickyサンプルコード（広告）

スマホで Webページを見ていると画面下や上に広告が固定表示されていたり、文章の途中に広告が登場するケースがあると思います。

どういう形が効果的かというのはサイト毎に異なると思いますが、中には「途中から広告表示、そして途中で違う広告に切り替え」というパターンを望むケースもあるでしょうか？

「固定」「途中で変更」このキーワードの処理、 CSS の sticky ならシンプルに処理できるかもしれません。

上図左は sticky を使用した場合、上図右は sticky を使っていない場合を用意しました。画面を下にスクロールしていくと途中オレンジの広告枠が登場し、そしてさらにスクロールダウンすると右側の広告は消え、左側の広告は表示されたままになります。

そしてもっとスクロールダウンすると左側の固定広告は次の広告に切り替わり、右側の2番目の広告はスクロールダウンと共に消えていきます。少し複雑そうな「固定」「変更」という処理、 JavaScript を使わなくても CSS　の Sticky だけで処理可能。 HTML要素に対して「固定」「変更」を行っていますので、端末環境を気にすることなくレイアウトできる特徴もありますね。

ただし、画面下に広告を固定する場合は広告の切り替えが上図のようにはいかず、工夫が必要。

stickyとSEO

sticky のサンプルコードをいろいろ見ていくと、 sticky を HTML の thead にセットしたり、 dt にセットしたり、div にセットしたりいろいろ。また sticky の使用目的もいろいろで、例えば「見出しを固定したい」という理由で sticky の採用を考える方もいらっしゃると思います（私がそうでした）。

しかし、この見出しで sticky を使う場合は少し注意が必要で、例えば <dt> に対して sticky して、内容は見出しタグ <h2> とすると、見た目は良いのですが、 HTML的には ❌ となります。その悪いといいますか、失敗の事例が下記サイト。

私が作成した Web App のページ　https://pythonchannel.com/twitter_search_bot/

こちらは sticky という CSS を初めて知り、とりあえず安直に使った例で <dt> に sticky をセット。そして <dt><h2> </h2></dt> と <dt> 内に見出しをセット。見た目は確かに見出しと sticky が効いて良さそうにも見えますが、 HTML の構造判定的には ❌ 。

【コード一部抜粋】
<body>
    <h2>Hello Sample</h2>
    <dl>
         <dt> <h2>見出し</h2> </dt>
         <dd> コンテンツ </dd>
    </dl>
</body>

見出しタグの取り扱いについて HTML チェッカー（リンク）にかけてみると、最初の <h2> はエラーが出ていないのに対して、あとの <dt> タグ内の <h2> についてはエラーが出ています。

これがどこまで SEO に影響してくるかというのは分かりませんが、どちらかというとエラーはない方が良いですよね。つまり見出しを sticky で固定する際は、 <dt> や <thead> に sticky をセットするのではなくて、 <h2> タグに CSS で sticky を組んだ方が ◎ ということですね。

＼一流デザイナーのスキルが身に付く／

無料カウンセリングはこちら