100%);background:#EFEFEF}パソコン、スマホ、アプリ、ゲーム、ウェブのニュースや記事などをお伝えします。sticky;」なる便利なCSSを知り、見出しに適用してみました。目次style.css表示確認PCモバイルブラウザの対応状況まとめstyle.css子テーマの「style.css」で下記の記述をしました。h2」として、各プロパティを指定します。sticky;」でh2の親の範囲まで追従させます。0;」でスクロール時に画面のトップにぴったりつけます。Highlighter」など、z-indexを使用しているプラグインの要素と重なる場合でも高い値を指定することによって、見出しを前面に表示するようにしています。100という値は環境によって変わります。#FFF;」でスクロール時に見出しと内容が重なった場合に、見出しの方を見やすくしています。h2見出し追従PC、モバイル共に、h2の位置までスクロールした時にh2が画面トップに固定されています。sticky;」のブラウザの対応状況は現在下記のようになっています。sticky;」は指定した要素まで移動した時に固定、追従を行い、自身の親の範囲外になった時に非表示をする。sticky;」を指定した要素以外に「z-index」を使用している要素がある場合は、その要素より高い値を指定する。見出しと他の要素が重なった時に見やすくするために、背景指定をする。sticky;」は固定と追従を手軽に出来るのでとても便利です。これをJSなどでやろうとした場合は、要素の高さを計算したりと、なかなか大変になってきます。見出しを固定する意味としては、スマホ表示の時に、今自分がどのセクションを読んでいるのかがわかりやすくなる、といったメリットがあると思います。h2だけでなく、h3からh6で101、102といったように見出しのレベルが下がるごとにz-indexの値を高くすると表示が上書きされ、より見出しと内容との関係を具体的に把握することできるようになります。※現在stickyの実装はしていません。実装と記事の作成にあたっては、下記のサイトを参考にさせていただきました。場合によってはすごく便利なので記事を書いてみます。html・cssスポンサーリンクシェアするTwitterFacebookはてブPocketLINEボヘミアンをフォローするこの記事が気に入ったらいいね!しよう最新情報をお届けします。コメントをキャンセルメールアドレスが公開されることはありません。date*日本語が含まれない投稿は無視されますのでご注意ください。コメントデータの処理方法の詳細はこちらをご覧ください。アプリ相互リンクWebGeekers自由空間。SPACEオールフリーソフトフリーソフトラボ.com最近のコメントボヘミアン2020.01.22当サイトへお越しいただきありがとうございます。NTTに連絡をして再度おくっていただけるように、お願...NTT東日本からレンタル機器の返却用キットが届いたので、返送の準備をしてみた多田和弘2020.01.21返却no.301000042104084です。スペシャルエディションをプレイしてみたボヘミアン2019.07.29申し訳ありませんが、記事の執筆などは受け付けておりません。