[フレーム]
はてなブックマークアプリ

サクサク読めて、
アプリ限定の機能も多数!

アプリで開く

気に入った記事をブックマーク

  • 気に入った記事を保存できます
    保存した記事の一覧は、はてなブックマークで確認・編集ができます
  • 記事を読んだ感想やメモを書き残せます
  • 非公開でブックマークすることもできます
適切な情報に変更

エントリーの編集

loading...

エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。

タイトルガイドライン

このページのオーナーなので以下のアクションを実行できます

タイトル、本文などの情報を
再取得することができます
コメントを非表示にできます コメント表示の設定

ブックマークしました

ここにツイート内容が記載されます https://b.hatena.ne.jp/URLはspanで囲んでください

Twitterで共有

ONにすると、次回以降このダイアログを飛ばしてTwitterに遷移します

362users がブックマーク コメント 36

ガイドラインをご確認の上、良識あるコメントにご協力ください

0 / 0
入力したタグを追加

現在プライベートモードです 設定を変更する

おすすめタグタグについて

よく使うタグ

CSSのinsetプロパティで上下左右の中央に配置する時の「position: fixed;」での新しい記述方法

362 users coliss.com

ガイドラインをご確認の上、良識あるコメントにご協力ください

0 / 0
入力したタグを追加

現在プライベートモードです 設定を変更する

おすすめタグタグについて

よく使うタグ

はてなブックマーク

はてなブックマークで
関心をシェアしよう

みんなの興味と感想が集まることで
新しい発見や、深堀りがもっと楽しく

ユーザー登録

アカウントをお持ちの方はログインページへ

記事へのコメント36件

  • 注目コメント
  • 新着コメント
オーナーコメントを固定しています
coliss
オーナー CSSでの中央揃えの古典的なテクニックの一つ、モーダルやメッセージなどを表示する時に適したposition: fixed;での新しい記述方法。

その他
ejointjp
CSSって簡単なことでもハックまがいなことをしないと実現できなくて、敷居高すぎるよね

その他
everybodyelse
令和の時代になっても、なぜ我々は未だに中央揃えに悩まされなければならないのか。

その他
fujis_a
"IEを除く、すべてのブラウザでサポート"

その他
coppieee
本文にも書いてあるけど、"insetプロパティは、top, right, bottom, leftの各プロパティに対応する省略形"なので、top, right, bottom, leftそれぞれに0指定していたのが楽になっただけで新しい方法ではないよね?

その他
sippo_des
一旦、何が正しいのか、ここらへんでいったん、いったん、、

その他
dazed
position: fixed; に inset: 0; ね。初めて聞くし絶対忘れそう。

その他
Funyapu
やっときた... https://caniuse.com/?search=inset

その他
diveintounlimit
大昔からmargin:autoでいけるはずだったんだが、まともに対応してるブラウザが無かったんだよな。

その他
ku__ra__ge
top:0; bottom:0; left:0; right:0; margin:auto; で中央配置になるのが直感的かというとそれもどうかと。flexのalign-self:center;みたいなのがあればいいんだが。

その他
primedesignworks
敷居が高いブコメの人って、何か CSS に対して過去に不義理なことでもしたんだろうか。

その他
オーナーコメントを固定しています
coliss
オーナー coliss CSSでの中央揃えの古典的なテクニックの一つ、モーダルやメッセージなどを表示する時に適したposition: fixed;での新しい記述方法。

2021年07月12日 リンク

その他
KoshianX
ふむ、いまはこんな書き方でいいのか。あとでこれに直してみよう

その他
yoshi-nkyma
"CSSの中央揃えで、最も万能で信頼できる実装テクニック"

その他
shinagaki
トップブコメに "ハックまがいなこと" ってあるけど、最近はほぼ改善されてシンプルになってるぞ

その他
Rishatang
わざわざこれ使わなくてもFlexでいいと思う。未だに中央揃えが難しいと思っている人はFlexを知らないだけだと思ってる。Flexが難しいと言うなら知らん。

その他
primedesignworks
primedesignworks 敷居が高いブコメの人って、何か CSS に対して過去に不義理なことでもしたんだろうか。

2021年07月13日 リンク

その他
makimakiJP
<MARQUEE>いやホント、令和3年にホッテントリ上がってんのグッとくるわ</MARQUEE>

その他
pmint
insetは位置指定。縦書きでも通用するよう上下左右の定義を見直したシンタックスシュガー。marginやwidthなども再定義されてる。やってることはwidth・height指定してるのに4隅の位置指定もする矛盾したアレで新しくはない。

その他
guldeen
今はもう、タグをポチポチ打って揃える時代じゃないのね(スマホ対応デザインとかもあるだろうから)。それにしても、CSSは何度聞いても判りづらい

その他
ywv
新しいというかIEが死んだから大手を振れるようになったプロパティがinsetだ。

その他
kuzumaji
insetは初めて聞いた...。ブラウザが可変故に令和になっても未だに中央配置は呪いのようにつきまとう問題ねぇ。

その他
bleu-bleut
css tips::centering

その他
posmoda
左右中央ぞろえはまだわかるけどなんでこれで上下中央になるのかわからん。

その他
ngmy
CSSの気持ちが全然わからなくて、何やるにしても調べてDeveloper Toolで確かめてを繰り返してハックっぽいコードが出来上がるんだけど、CSS強強になれば体系的に理解でき応用できコードから見た目が見えるようになるのか?

その他
basseyboost
何度も同じネタを見てる気がするけどこれをスタンダードにしてほしい!わかりやすい!

その他
marony0109
これは良いことを聞いた

その他
ku__ra__ge
ku__ra__ge top:0; bottom:0; left:0; right:0; margin:auto; で中央配置になるのが直感的かというとそれもどうかと。flexのalign-self:center;みたいなのがあればいいんだが。

2021年07月12日 リンク

その他
Falky
え?全然わからん。insetがtop, right, bottom, leftのショートハンドだとして、inset使うとtranslate()が不要になる理屈が謎。あとで仕様書読むか。。。//個別に書くと、4方向が書いた順番に適用されるからズレるってことか...?

その他
everybodyelse
everybodyelse 令和の時代になっても、なぜ我々は未だに中央揃えに悩まされなければならないのか。

2021年07月12日 リンク

その他
coppieee
coppieee 本文にも書いてあるけど、"insetプロパティは、top, right, bottom, leftの各プロパティに対応する省略形"なので、top, right, bottom, leftそれぞれに0指定していたのが楽になっただけで新しい方法ではないよね?

2021年07月12日 リンク

その他
GiveMeChocolate
なるほどー

その他
iww
毎年新しい方式ができてるけど、平均で何年くらい持つものなんだろうか。 今はもう崩れてしまう方式とかどのくらいあるのかな

その他
aliliput
素晴らしいじゃん

その他
kudakurage
便利そう

その他
ejointjp
ejointjp CSSって簡単なことでもハックまがいなことをしないと実現できなくて、敷居高すぎるよね

2021年07月12日 リンク

その他
strawberryhunter
insetでtop, right, bottom, left を一括で指定できるのか。そこに0を指定して、margin: autoで上下左右中央になるのは直感的なのか?

その他
fujis_a
fujis_a "IEを除く、すべてのブラウザでサポート"

2021年07月12日 リンク

その他
Funyapu
Funyapu やっときた... https://caniuse.com/?search=inset

2021年07月12日 リンク

その他
diveintounlimit
diveintounlimit 大昔からmargin:autoでいけるはずだったんだが、まともに対応してるブラウザが無かったんだよな。

2021年07月12日 リンク

その他
sippo_des
sippo_des 一旦、何が正しいのか、ここらへんでいったん、いったん、、

2021年07月12日 リンク

その他
Shinwiki
普通にコードで書かせてくれるだけでいいですもう...見通しのいい変数と四則演算だけでも

その他

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

プレビュー
アプリのスクリーンショット
いまの話題をアプリでチェック!
  • バナー広告なし
  • ミュート機能あり
  • ダークモード搭載
アプリをダウンロード

関連記事

usersに達しました!

さんが1番目にブックマークした記事「CSSのinsetプロパ...」が注目されています。

気持ちをシェアしよう

ツイートする

CSSのinsetプロパティで上下左右の中央に配置する時の「position: fixed;」での新しい記述方法

中央揃えの古典的なテクニックの一つ、モーダルやメッセージなどを表示する時に適したposition: fixed;... 中央揃えの古典的なテクニックの一つ、モーダルやメッセージなどを表示する時に適したposition: fixed;での新しい記述方法を紹介します。 古い記述方法では、負のパーセンテージを使用していたり、あまり直感的ではないCSSでしたが、新しい記述方法ではそれらが解消されています。 CSSの中央揃えのいろいろな方法は、以前の記事をご覧ください。 現在主流の5つのテクニックからそれぞれの特徴と最も万能で信頼できるテクニックを評価しています。

ブックマークしたユーザー

  • akira_maru2023年06月08日 akira_maru
  • cyber_snufkin2023年06月08日 cyber_snufkin
  • Toge2023年02月01日 Toge
  • montdsichel2022年12月04日 montdsichel
  • clea00002022年08月17日 clea0000
  • gazza0692022年07月24日 gazza069
  • kariyushi232022年07月19日 kariyushi23
  • shibu_t2021年09月06日 shibu_t
  • ManhattanCafe2021年07月26日 ManhattanCafe
  • matea2021年07月17日 matea
  • hush_in2021年07月14日 hush_in
  • strozw2021年07月13日 strozw
  • kaki_k2021年07月13日 kaki_k
  • KoshianX2021年07月13日 KoshianX
  • yoshi-nkyma2021年07月13日 yoshi-nkyma
  • shinagaki2021年07月13日 shinagaki
  • tabbyz2021年07月13日 tabbyz
  • masakuma08122021年07月13日 masakuma0812
すべてのユーザーの
詳細を表示します

ブックマークしたすべてのユーザー

同じサイトの新着

同じサイトの新着をもっと読む

いま人気の記事

いま人気の記事をもっと読む

いま人気の記事 - テクノロジー

いま人気の記事 - テクノロジーをもっと読む

新着記事 - テクノロジー

新着記事 - テクノロジーをもっと読む

同時期にブックマークされた記事

いま人気の記事 - 企業メディア

企業メディアをもっと読む

はてなブックマーク

公式Twitter

はてなのサービス

Copyright © 2005-2025 Hatena. All Rights Reserved.
設定を変更しましたx

AltStyle によって変換されたページ (->オリジナル) /