• はてなブックマーク
  • テクノロジー
  • CSSのinsetプロパティで上下左右の中央に配置する時の「position: fixed;」での新しい記述方法
  • Twitterでシェア
  • Facebookでシェア

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

テクノロジー カテゴリーの変更を依頼 記事元:coliss.com
適切な情報に変更
361users がブックマーク コメント 36

    記事へのコメント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は何度聞いても判りづらい

    その他
    spark7
    テーブルレイアウトの昔なら上下中央で悩まなかったのに。5つて。「現在主流の5つのテクニック」

    その他
    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 リンク

    その他

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

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

    関連記事

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

    中央揃えの古典的なテクニックの一つ、モーダルやメッセージなどを表示する時に適したposition: fixed;...

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

    • 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

    はてなのサービス

    • App Storeからダウンロード
    • Google Playで手に入れよう
    Copyright © 2005-2025 Hatena. All Rights Reserved.