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



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

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

iPhone SE 2020 の商品ページ(LINK

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

目次
  1. Webデザイン志望の方必見!CSSの「sticky」を使いこなそう
  2. stickyとは
  3. stickyサンプルコード(表)
  4. stickyサンプルコード(広告)
  5. stickyとSEO
  6. まとめ

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

stickyとは

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

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

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

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

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

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

stickyサンプルコード(表)

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

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

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

途中表のヘッダーが変わったと思います。しかし、もし途中 "空白" の行が表示されていたら、それはブラウザ: Sarafi をお使いのことでしょう。Google Chrome や FireFox はある程度 HTML について寛容で、一つの表内に2つ <thead> があっても表示してくれます。しかし、 Safari は ❌。 Safari の場合に、2つ以上 <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 を組んだ方が ◎ ということですね。

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

CodeCampの無料体験はこちら

まとめ

CSS の sticky、 自由に使えると Web デザインの幅も広がりそうだなとイメージしていただけましたか?

「stickyを自分のブログサイトにも導入してみたいけど難しそう」「CSS できたら良さそうだけど、さっぱりわからない...」という方は、 ぜひCodeCamp の無料体験レッスンへ! マンツーマンの丁寧なレッスンで、効率よく着実にスキルが身につきます。

少しだけ勇気を出して一歩を踏み出してみませんか? CodeCamp の公式ページから無料体験の空き状況をチェックできます。 また LINE 無料相談も随時行っていますので、あわせてご利用ください。

オシママサラ
この記事を書いた人
オシママサラ
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp