11月末のChrome 108でビューポートのサイズ変更動作が変更、position: fixed;は配置がずれる可能性があります

2022/11/15 100 users クロスブラウザ fixed ビューポート 挙動 配置

11月末にリリース予定のChrome 108で、ビューポートのサイズ変更動作が変更されます。簡単に言うと、Android版Chrome 108の挙動はiOS版Safariと同じになり、より一貫性のあるクロスブラウザの動作が実現されます。 サイズ変更動作の内容とサイズ変更の仕組み、Chrome 108のリリースまでに何を準備しておけばよいのかを紹... 続きを読む

モダンCSSによる絶対配置（position: absolute;）の削減 | コリス

2021/09/28 260 users absolute コリス モダンCSS 削減 配置

テキストを画像の上に配置、タグを重ねたい、ヒーローセクションで画像の上にコンテンツを配置、画像のアスペクト比を維持させたい時など、CSSの絶対配置（position: absolute;）を使用することがあります。もちろん、それでうまくいく時はありますが、なんらかの制約があったり、テキストが長いと崩れたりします。 posi... 続きを読む

CSSで上下左右の中央に配置する時の「position: fixed;」での新しい記述方法 | コリス

2021/07/12 313 users fixed モーダル コリス パーセンテージ CSS

中央揃えの古典的なテクニックの一つ、モーダルやメッセージなどを表示する時に適したposition: fixed;での新しい記述方法を紹介します。 古い記述方法では、負のパーセンテージを使用していたり、あまり直感的ではない...記事の続きを読む 続きを読む

CSSだけで実装できるとは！テーブルのヘッダと左端のセルの両方を固定させるCSSの極上テクニック | コリス

2021/03/12 183 users コリス sticky ヘッダ CSS セル

テーブルのヘッダを上部に固定するのは、position: sticky;で簡単に実装できます。ヘッダだけでなく、テーブルの左端のセルも固定させたい場合は、どう実装すればよいでしょうか？ JavaScriptがないと実装できないように思うかもしれませんが、position: sticky;を効果的に使用することで実装できます。テーブルのヘッダ... 続きを読む

JavaScriptは無し、スクロールした時にヘッダの高さを縮ませて上部に固定表示させるCSSの実装テクニック | コリス

2021/03/01 147 users コリス sticky ヘッダ CSS 汎用

スクロールした時にヘッダの高さが縮んで上部に固定表示させるWebページを見たことがあると思います。今まではJavaScriptを使用する必要がありましたが、CSSのposition: sticky;を一工夫して使用することで簡単に実装できます。 高さを縮ませるのはヘッダに限らず、パネルやバナーなど他の要素でも簡単に実装でき、汎用... 続きを読む

[CSS] position: sticky;を使用して、スクロール時に画像をズームさせるページのレイアウトを実装する方法 | コリス

2019/05/21 52 users sticky コリス CSS レイアウト オーバーレイ

CSSのposition: sticky;を使用して、スティッキーヒーローセクションを実装する方法について紹介します。 スティッキーヒーローセクションとは、画像などをスクロールした際に固定し、その固定された画像の上にスクロールさせるコンテンツ要素です。固定された画像はズームさせたり、オーバーレイにすることもできます。... 続きを読む

Web制作者が見落としがちな、ハンバーガーメニューをスマホに実装する時の注意すべきポイント | コリス

2019/03/19 194 users コリス absolute Disney ハンバーガーメニュー

スマホでWebサイトを見ると、Appleをはじめ、DisneyやWikipediaやThe New York Timesなど多くのサイトでハンバーガーメニューが採用されています。Web制作者が見落としがちなハンバーガーメニューをスマホに実装する時の注意すべきポイントを紹介します。 特に、メニューをposition:absolute;で配置している場合は注意が... 続きを読む

レスポンシブ用にfont-size, margin, paddingなど、プロパティの値を一元管理できるSassの超軽量ライブラリ -SSCSS | コリス

2019/03/10 218 users padding ブレークポイント margin Sass 一元

デスクトップ・タブレット・スマホなどの異なるスクリーンサイズに応じて設定したブレークポイントをベースに、font-size, margin, padding, positionなど各プロパティの値を一元管理できるSass...記事の続きを読む 続きを読む

position: sticky;の仕組みや実際の使い方が分かると便利！仕様から実装方法までをやさしく解説 | コリス

2019/02/07 141 users sticky コリス スティッキー ヘッダ プロパティ

position: sticky;とは、ヘッダやナビゲーション、サイドバーなど指定した要素をスクロールした際にぴたっと指定した位置に貼り付ける（スティッキー）便利なプロパティです。 position: sticky;の基礎知識、機能の仕組み、そして実際にどのようなコードで機能し、機能しないのか、便利な使い方などを紹介します。 CSS P... 続きを読む

これは便利！CSSの指定した機能のフォールバックがうまく機能しているか確認できるツール -CSS Feature Toggle | コリス

2019/01/22 61 users Flexbox サポートブラウザ supports コリス

CSSの新しい機能は便利で魅力的なものばかりですが、ネックになるのがサポートブラウザです。レイアウトではCSS GridやFlexbox、また@supportsによる機能検出、画像をレスポンシブ対応にするためにobject-fitやスクロールコンテンツにposition: sticky;など、それぞれをサポートしていないブラウザでどのように表示され... 続きを読む

たった数行のCSSでパララックス風表現ができる「position: sticky」の使い方 - WPJ

2018/04/20 101 users WPJ sticky 草案 Working Draft CSS

短いCSSを書くだけで要素を特定の位置に固定できるCSSの「position: sticky」。ちょっとした工夫で実現できるおもしろい使い方をデモで解説します。 スクロールに応じてページ要素を固定表示できる position: sticky が便利で面白い使い方ができそうなので実験してみました。 仕様がまだ草案（Working Draft）の段階 で、将来、細かい部分に変更がないとは言い切れません... 続きを読む

CSSを使ってテキストカラーを半々に表示させる方法 | NxWorld

2017/10/02 91 users NxWorld 半々 relative CSS CodePen

CSSを使ってテキストカラーが左右または上下で異なるカラーで表示されている見栄えを実装する方法を紹介します。 ※以下でそれぞれ紹介しているCSSは必要な記述のみ抜き出した形で紹介しているので、デモと全く同じ見栄えにしたい場合はCodePenの表示を切り替えてCSSを確認してください。 また、 position: relative; と display: inline-block; の部分は使用する... 続きを読む

[CSS]レスポンシブ対応の最新版！サイズが不明な要素を天地左右の中央に配置するスタイルシートのまとめ | コリス

2017/07/31 258 users コリス transform Flex ビューポート CSS

div要素やp要素に画像やテキストなどを配置した高さや幅のサイズが分からない要素を外側の容器の高さが不明でも天地左右の中央、ビューポートの中央に配置するスタイルシートのテクニックを紹介します。 Centering horizontally and vertically in CSS float, transform, position, display:flex;などを使ったテクニックが紹介されて... 続きを読む

「position: sticky;」より便利！スクロールしたらヘッダやサイドバーがぴたっと貼り付くスクリプト -Fixed Sticky | コリス

2017/04/26 84 users sticky コリス ヘッダ スクリプト ナビゲーション

HTMLは汚さずに、ヘッダ、ナビゲーション、サイドバー、ボタンなど、さまざまな要素をスクロールした際に指定した位置にぴたっと貼り付けるスクリプトを紹介します。 IE7+からサポートされており、「position: sticky;」の代替になる便利なスクリプトです。 Fixed Sticky- GitHub Fixed Stickyの特徴 Fixed Stickyのデモ Fixed Stickyの使... 続きを読む

CSSのposition:stickyがすごく便利 | q-Az

2017/03/05 594 users sticky q-Az CSS 魔法 便利

最近新しく追加された position の新しい値 sticky が場合によってはすごく便利なので記事を書いてみます。 対応ブラウザがまだあまり多くないので実用性は乏しいかもしれませんが、今まで JavaScript の力を借りなきゃ出来なかったことがたったの2行の CSS で出来てしまう魔法みたいな position の値です。 position: sticky MDN が説明が詳しいので貼って... 続きを読む

けものフレンズのタイトルロゴをCSSだけで作ったのー？すっごーい！！ | KuzLog - クズログ

2017/02/20 100 users CSS けものフレンズ フレンズ わけ 休日

あかまる( @Kuzlog )はPureCSSでワケの分からないものを作るのが大好きなフレンズなので、けものフレンズのタイトルロゴをCSSのみで作ってみました。 ちなみに制作時間は約6時間！貴重な休日が潰れちゃったね！ しにたーい！ 参考にしたのは けもフレ公式サイト のこれ↓ この画像を参考にしながら position で無理矢理レイアウトを組み立てました。見ての通り、「の」と「ズ」の部分は 鬼... 続きを読む

CSS:難しい？意外と便利なpositionを使いこなそう | ホームページ更新倶楽部｜お気軽にサイト修正

2015/08/03 75 users プレーンテキスト CSS 酷い目 ホームページ更新倶楽部 下記

みなさん、positionは使っていますか？ 使えるようになるととても便利、だけど理解せずに使ってしまうと酷い目に合うのがposition。 特にプレーンテキストと組み合わせる事が難しいので、敬遠している人が多いかも。 今回はそのpositionの使い方と、ちょっとしたテクニックを紹介します。 まずはpositionの基本から positionに指定できるのは下記の4つ。 static 初期値です... 続きを読む

CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 | バシャログ。

2015/06/14 972 users バシャログ いまどき CSS block要素 上下左右中央

Backjoyを買ってみたらほんとに腰が楽なminamiです。 CSSで要素を上下中央寄せする方法は古くから色々と試されてきました。 今回は海外のサイトで知って目から鱗だった方法をご紹介します。 基本的な設定 上下左右中央寄せしたい要素に以下のCSSを設定します。 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: a... 続きを読む

position: absolute; の指定で要素が上下左右中央配置になる理由 | WWW WATCH

2014/08/06 433 users CSS バシャログ いまどき block要素 上下左右中央

人様の人気エントリーに乗っかる感じで恐縮ですが、「CSSで block 要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。」 という記事が話題になっていたので、なんでその指定で上下中央配置になるのか補足してみます。 詳しい話は下記のリンク先をご覧ください。 CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。 何でこういうことを書くかというとですね、例え... 続きを読む

CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 | バシャログ。

2014/08/06 972 users バシャログ いまどき CSS block要素 上下左右中央

Backjoyを買ってみたらほんとに腰が楽なminamiです。 CSSで要素を上下中央寄せする方法は古くから色々と試されてきました。 今回は海外のサイトで知って目から鱗だった方法をご紹介します。 基本的な設定 上下左右中央寄せしたい要素に以下のCSSを設定します。 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: a... 続きを読む

CSSで作る見出しデザイン | Web’Notes

2014/02/14 413 users CSS 見出しデザイン relative bold SOLID

見出しはサイトの見た目を決める上で重要な箇所です。 印象的な見出しは、それだけでサイトを引き立ててくれます。 今回は、そんな見出しのデザインをCSSで10パターン作成してみましたので、参考にして下さい。 .heading1{ position:relative; padding-left:20px; border-bottom:2px solid #ccc; font-weight: bold; ... 続きを読む

とりあえずjQueryのプラグイン作ってみる | Web | position: absolute;

2013/12/18 81 users absolute jQuery エントリー 範囲 導入

2013年12月18日 ｜ Web とりあえずjQueryのプラグイン作ってみる このエントリーはjQuery Advent Calendar 2013の18日目になります。 jQueryのプラグインといえば何かしらお世話になっている人がほとんどだと思いますが、自分で作成するというのもできるのでとりあえずサクッと作ることができる範囲で紹介します。 という導入ですので、比較的軽い内容になりますー。 ... 続きを読む

スクロール後、ナビゲーションをページトップに固定するjQueryプラグイン「stickUp」:phpspot開発日誌

2013/11/22 66 users fixed jQueryプラグイン phpspot開発日誌

スクロール後、ナビゲーションをページトップに固定するjQueryプラグイン「stickUp」 2013年11月22日- stickUp - a free jQuery Plugin スクロール後、ナビゲーションをページトップに固定するjQueryプラグイン「stickUp」 最初からposition:fixedではなく、一定以上スクロールした段階でfixedにしてくれるプラグインです。 シームレス... 続きを読む

jQueryを使った一定以上スクロールすると上に固定される横メニュー｜Webpark

2013/03/04 244 users jQuery Webpark fixed 上部 横メニュー

最近、上部に固定された横メニューをよく見かけます。最初から一番上にあるものだと最初から「position:fixed」で問題ないと思いますが、最初は一番上にはなく、メニューがページの最上部までスクロールされた時点で固定されるものだとちょっと工夫が必要です。 今回はそんな横メニューをできるだけ親切に解説してみます。 今回のメインはjQueryで固定するところなのですが、一応今回のサンプルで使用したH... 続きを読む

[CSS]ページに美しいシャドウを加え、奥行きを与えるスタイルシート -Depth | コリス

2013/02/19 213 users コリス Depth fixed 奥行き CSS

ブラウザ上枠のすぐ下、ページの上部に、いい感じのシャドウを加えるスタイルシートを紹介します。 Chrome, Safari, Firefox, Operaでご覧ください、IEは9+で。 Depth 実装は簡単で、HTMLは特に変更することなく、下記のスタイルシートを加えるだけです。 position: fixed;なので、スクロールしてもシャドウが表示されています。 [css] body:befo... 続きを読む