Chrome 108にはCSSの新しい機能がたくさん含まれている、新機能と変更・削除された機能のまとめ

2022/12/01 15 users CSS fixed たくさん 機能 まとめ

11/30（日本時間）にリリースされたChrome 108では、CSSの新しい機能がたくさん含まれています。また、変更・削除された機能もあります。特に、Android版のChromeでposition: fixed;を使用している要素の配置が期待通りにならない可能性があります。 Chrome 108の新機能、変更・削除された機能を紹介します。 chrome-108... 続きを読む

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

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

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

【コピペ可】background-attachment: fixed;がiOSのSafariで効かない問題を完全に解決する【CSSのみ】 | セカヤサブログ

2022/02/23 12 users fixed iOS 長方形 プロパティ Safari

こんにちは。今回はパララックス表現を行うためのプロパティ、background-attachment: fixedがiOSのSafariで動かない問題を回避するための方法を書いていきます。 結論（コピペ可）なぜ動かないのか実装・解説画像とテキストを配置する画像を全て固定（position: fixed）する長方形で切り抜くまとめ 結論（コピペ可） 最... 続きを読む

CSS Gridでposition: sticky;のスティッキーが効かないときの原因とその対応方法

2021/12/07 30 users スティッキー sticky CSS Grid 2カラム メイン

CSS Gridで2カラムのレイアウト（メインとサイドバー）を実装し、サイドバーにposition: sticky;を定義したけど、機能しなかったことはありませんか？ CSS Gridでスティッキーが効かないときの原因とその対応方法を紹介します。 Using Position Sticky With CSS Grid by Ahmad Shadeed 下記は各ポイントを意訳したもので... 続きを読む

モダン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;を一工夫して使用することで簡単に実装できます。 高さを縮ませるのはヘッダに限らず、パネルやバナーなど他の要素でも簡単に実装でき、汎用... 続きを読む

tiny-console.js · GitHub

2020/06/01 14 users GitHub SOLID height Left width

tiny-console.js (function(c,b,cs,r,d){ b.frameBorder=0; b.style = 'position:fixed;bottom:0;left:0;width:100%;height:30vh;background:#fff;border-top:4px solid #bbb;box-shadow:0 0 2px #000;z-index:999;cursor:ns-resize;'; b.onpointerdown=function(e){b.setPointerCapture(e.pointerId);b.e=e;b.h=b.offse... 続きを読む

いつから、z-indexがpositionだけのものだと錯覚していた？ - Qiita

2020/02/25 10 users BLEACH Qiita z-index 親要素 タイトル

タイトルの元ネタになっている『BLEACH』は読んだことありません。 悩ましいz-index問題 CSSを学んだことある人なら一度は通るz-index問題。単純にz-indexの値で重なりが決まるのではなく、親要素との関係によって重なりが変わるので複雑です。ついz-index: 9999はやってしまいます。（一番上なんだな、っていうのが分か... 続きを読む

CSSのみでスクロール時に各セクションを固定するパララックス | かちびと.net

2019/12/15 5 users パララックス result sticky CSS 各セクション

Result タイトルでうまく説明できませんでしたけどこういうやつです パララックスの表現法が出始めた時によく見かけるようになってから今も割と見かけるのである程度定着してる感も無くはないですね で、これなんですがそう言えばposition: sticky;で出来ますよね、という内容です css .container {/*高さを画面一杯にし... 続きを読む

hrの使いやすそうなスタイリングいろいろ | かちびと.net

2019/07/01 39 users ＨＲ relative margin result net

Result いろいろなhrのスタイルです。以前書いたCSSで作るhrのスタイルいろいろを小奇麗にした的な感じになっています css .hr_b {/*シャドウ付き*/ height: 8px; border: 0; box-shadow: 0 8px 8px -8px #666 inset; } .hr_c {/*フルワイド*/ position: relative; width: 100vw; margin: 10px 0 10px -50vw; left: 50%;... 続きを読む

CSSのみでアコーディオン・2パターン | かちびと.net

2019/06/15 28 users CSS net absolute result checked

Result 今更感半端ないですが、CSSのみでアコーディオン 全部開けられるやつと1つ開けると他が自動で閉まるやつの2パターンあります 両方ともinput要素と:checkedを使います 違いはcheckboxかradioか、なので基本的には同じコードで動きます css input {/*input要素自体は非表示にしておく*/ position: absolute; opacit... 続きを読む

[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;で配置している場合は注意が... 続きを読む

【CSS】position:sticky;で簡単固定！スティッキーヘッダー6選 │ ジャングルオーシャン

2019/03/11 20 users sticky ジャングルオーシャン CSS HTML 固定

【CSS】position:sticky;で簡単固定！スティッキーヘッダー6選 2019.03.11 プログラミング CSS, HTML, position, sticky, Webデザイン, スティッキーヘッダー 続きを読む

レスポンシブ用に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スニペット：CSSで要素を斜めに2分割して境界線を透過 | かちびと.net

2018/12/21 14 users 透過 CSSスニペット net 境界線 要素

Result mask-imageとlinear-gradientを使います。 素材次第ではちょっとアーティスティックな合成写真っぽいのが作れそうですね css :root {/*境界線を斜めに*/ --direction: -45deg; } main {/*包括要素*/ position: relative; } div {/*各要素基礎設定*/ position: absolute; top: 0; left: 0; width: 100vw; height: ... 続きを読む

CSSスニペット：アニメーションエフェクト付きのtoggleボタン | かちびと.net

2018/10/04 17 users CSSスニペット absolute fff net Left

Result CSSのみで実装したアニメーションエフェクト付きのtoggleボタンです 各ボタンのスタイルはPenをご参照ください css /* Button 1 */ #button-1 .knobs:before {/*左右に移動するボタンのスタイル*/ content: 'YES'; position: absolute; top: 4px; left: 4px; width: 20px; height: 10px; color: #fff; font-size:... 続きを読む

CSSスニペット：SVGで作る非長方形なヘッダ画像いろいろ | かちびと.net

2018/07/07 13 users SVG relative CSSスニペット DDD ヘッダ画像

Result インラインに書いたSVGを画像に重ねる 背景と色を合わせれば簡単にユニークな形状のヘッダ画像を実装できる css .card { width: 32%; max-width: 100%; margin: 0 0 4rem; background-color: #ddd; } .card .wrap-image { position: relative; } .card .wrap-image img { width: 100%; height: auto; } .card .wr... 続きを読む

たった数行の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; の部分は使用する... 続きを読む

position:absoluteでタイトル横にSNSフォローボタンなどを並べる - Minimal Green

2017/08/03 13 users absolute 右横 ヘッダー Minimal Green

2017 - 08 - 04 position:absoluteでタイトル横にSNSフォローボタンなどを並べる ブログカスタマイズ CSS ブログのタイトルロゴの右横にSNSフォローボタンが並んでいるレイアウトをWordPressなどではよく見かけますよね。無料テーマなのに超優秀な人気テーマ「simplicity」などもそうですよね。 WordPressの場合は自由にHTMLでヘッダーの構造をいじ... 続きを読む