CSSでdisplay:none;からアニメーションができる！ @starting-styleがすべてのブラウザにサポートされました

2024/10/01 16 users None Firefox CSS アニメーション 要素

CSSの@starting-styleが先日リリースされたFirefoxでもサポートされ、これでデスクトップ・スマホのすべてのブラウザでサポートされました。 @starting-styleはアニメーション化させる要素に対して開始時のスタイルを設定でき、display: none;からアニメーション化する要素に対して必須となります。 Now in Baseline: an... 続きを読む

display:contentsって何？どんな時に使うと便利なの？ - Qiita

2024/08/29 68 users Qiita プロパティ contents 結論 要素

先日、display:contents;というプロパティをはじめて知りました。 他のdisplayシリーズと比べるとあまり馴染みがなかったので、今回はdisplay:contents;とは何か、どんな場面で使えるのかについて紹介します。 1. 結論 display:contents;を指定した要素は、あたかも存在しないかのように扱うことができる これにより、グ... 続きを読む

タブやアコーディオンの非表示コンテンツにはhidden="until-found"を使うべし ｜ TAKLOG

2024/04/02 12 users Hidden None TAKLOG アコーディオン タブ

タブやアコーディオンの非表示コンテンツにはdisplay:noneがよく用いられますが、hidden="until-found"を利用するほうがメリットがあります。 hidden=“until-found”で非表示にしたコンテンツはページ内検索でアクセスできるhidden="until-found"はhidden属性に新たに追加された属性値です。 hidden - HTML: ハイパーテキ... 続きを読む

段ボール授乳室の件だけどさ、この記事読むといろいろ書いてあるよ。 https:/..

2023/09/28 310 users 段ボール授乳室 https 更衣室 職員 屋根

段ボール授乳室の件だけどさ、この記事読むといろいろ書いてあるよ。 https://newsdig.tbs.co.jp/articles/-/739110?display=1 「設置する場所がない」とか、「前は更衣室にあったけど利用者から使いたくないって声があって撤去した」とか、「屋根の設置や職員が周囲を警戒するなどの対策を追加予定」とか。 「日本道路... 続きを読む

CSSの「display: block;」が「display: block flow;」になる、displayプロパティで2値構文がサポートされます

2023/06/06 121 users block displayプロパティ inline Flex

CSSのdisplayプロパティはよく使用すると思います。値にflex, gridを設定したり、ブロックやインラインにしたい時にblock, inlineを設定します。 そんなdisplayプロパティで2つのキーワードを...記事の続きを読む 続きを読む

やっぱり離婚した男だった

2023/04/30 21 users newsdig.tbs.co.jp https 息子 自宅

https://newsdig.tbs.co.jp/articles/-/462956?display=1 手取り月25万円から“推し活”で投げ銭8万円…自宅を放火した53歳の男が抱えた「むなしさと不安」 こういう記事のタイトルを読んだだけで独身非モテ男だと決めつける向きがあるけど、よく読んでほしい。 離婚した妻と息子がいる。 衝動的なタイプは結婚して離婚して... 続きを読む

CSSのこの新機能、すごく楽しみ！ UI要素にさまざまなアニメーションを簡単に実装できるようになります

2023/04/27 16 users CSS アニメーション UI要素 Ｔｒａｎｓｉｔｉｏｎ 新機能

朗報です！！！ 今までJavaScriptや複雑なCSSを使用しないと実装できなかったアニメーションが、簡単なCSSだけで実装できるようなります！ たとえば現在のCSSではtransitionでdisplayは機能しませんが、CSSの新機能を使用すると、下記のようなCSSで表示・非表示のアニメーションを実装できるようになります。 このCSSの... 続きを読む

【CSS】displayプロパティに2つ値が入るってマジ！？ どゆこと！？ - Qiita

2023/01/19 12 users Qiita Flex Grid displayプロパティ 記憶

はじめに みなさんは、CSSのdisplayプロパティを知っていますか？ CSSを扱う上で、一番使うのがdisplayプロパティではないのでしょうか？ 最近では、display: flex; や display: grid; が追加され、いろいろなレイアウトが作りやすくなったのは、記憶に新しいかと思います。 そんな中で、CSS Display Module Level 3で、... 続きを読む

デベロッパツールの新機能が便利！ そのCSSがなぜ機能しないのか、どう修正すればよいのかが分かる

2022/11/02 310 users Flex デベロッパーツール Flexbox プロパティ 下記

デベロッパーツールの地味だけど便利な新機能が実装されるので、紹介します。CSSの非アクティブなプロパティを表示し、それがなぜ機能しないのか、どう修正すればよいのか教えてくれる機能です。 たとえば、親がdisplay: flex;ではないのにFlexboxのプロパティを設定しまった場合は、下記のように表示されます。 CSSに携... 続きを読む

これは覚えておきたい！ 左揃えの要素を中央配置にするCSSの古い書き方とモダンCSSを使用した書き方

2022/05/11 36 users CSS モダンCSS 左揃え 中央配置 要素

モダンCSSは今までの記述をよりシンプルにしたり、余分なHTMLを追加する必要なく記述することもできます。 ラッパーとしてdivなどのHTMLを追加せずに、左揃えの要素を中央配置する際に記述するCSSの古い書き方とモダンCSSを使用した書き方を紹介します。 ※display: flex;が古いということではなく、モダンCSSだとラッパ... 続きを読む

label で input[type="file"] を装飾するな

2022/02/28 50 users input Label File None type

何が問題か 上記の方法は input 要素を display: none で非表示にし、label 要素を使ってヒット領域を拡大させて「ファイルを選択」ボタンを表現するという方法ですが、この方法ではフォーカスが当たりません。また、tabindex 属性に非負の値を設定しフォーカスを当てられるようにしても label は clickable な要素では... 続きを読む

CSSでブロック要素の幅をコンテンツのサイズぴったりにしたい時のこれからの記述方法 | コリス

2021/08/04 191 users コリス section inline CSS div

sectionやdivやpなど、ブロック要素をボーダーで囲うと、全幅（親要素の幅）になります。そのブロック要素の中のコンテンツが少なく、ボーダーの幅をコンテンツのサイズに合わせたい場合は、どう実装していますか？ ブロック要素のままでは親要素の幅になってしまうので、通常はdisplay: inline;やdisplay: inline-block... 続きを読む

CSS Flexboxで実装する時に役立つチートシート、高解像度で印刷して机の脇に貼っておくと便利です | コリス

2021/06/16 22 users コリス Flex Row Flexbox チートシート

Flexboxのチートシートの一部 displayプロパティ Flexboxを使用するには親要素にdisplay: flex;（または、display: inline-flex;）を適用すると、その子要素がFlexアイテムになります。 flex-directionプロパティ FlexアイテムがFlexコンテナでどのように配置されるか明示します。方向は2種類で、横列（row）の水平、縦... 続きを読む

イシグロ氏の発言について、ある左翼かつリベラルから見た感想 - 瓢鮎庵雑記

2021/03/07 24 users 左翼 イシグロ氏 カズオ・イシグロ 発言 リベラル

このカズオ･イシグロのインタビューが注目を浴びていた。 "カズオ･イシグロ語る｢感情優先社会｣の危うさ" https://toyokeizai.net/articles/-/414929?display=b まず、私は自分が大別すれば「左翼」かつ「リベラル」の立場にあることを自覚している。左翼の定義やリベラルの定義の困難さ、特に現在の日本で「リベラル」が... 続きを読む

イシグロ氏の発言について、ある左翼かつリベラルから見た感想

2021/03/06 228 users 左翼 イシグロ氏 カズオ・イシグロ 発言 リベラル

この記事が注目を浴び、多くのブコメが集まっている。 "カズオ･イシグロ語る｢感情優先社会｣の危うさ" https://toyokeizai.net/articles/-/414929?display=b まず、私は自分が大別すれば「左翼」かつ「リベラル」の立場にあることを自覚している。左翼の定義やリベラルの定義の困難さ、特に現在の日本で「リベラル」が「... 続きを読む

ブラウザの作り方 - Speaker Deck

2021/01/25 426 users Speaker Deck ブラウザ inline block

Transcript ブラウザの作り方
 Keiya Sasaki 2021/01/25 ➔ Sasaki Keiya
 ➔ 大学4年生
 ➔ 4月からIT企業で
 フロントエンドエンジニア
 ➔ TypeScript・Rust ➔ Twitter: _keiya01
 ➔ Github: keiya01 話すこと 1. 実装状況
 2. 実装方法
 3. チュートリアル
 4. まとめ 実装状況 実装状況
 • display … block, inline • b... 続きを読む

CSSそこそこわかる人がとりあえず figma で何か作ることになった時の tips 集｜seya｜note

2019/12/24 6 users figma Flex Tips seya｜note レイアウト

こんにちは。こちらはLinc'wellアドベントカレンダーの24日目です。 最近 figma を使い始めたのですが、私はキャリアとしてはフロントエンドエンジニアとしての歴が長く、何か実現したいデザインが頭に思い浮かんだ時、思考としては 「display:flex の justify-content:space-between なレイアウト作りたいんだけどな〜... 続きを読む

CSSだけでマウスホバー時にtableの行と列とセルを別の色でハイライトさせる | かちびと.net

2019/10/13 29 users table CSS セル overflow result

Result こういうの。項目が多いほどセルは小さくなりがちだし何のデータを見ているかユーザーは混乱しがちなので閲覧してるデータの可視性を高めよう、みたいなやつです CSSだけで実装しています css table { overflow: hidden; display: inline-block; border-collapse: collapse; } td, th { border: 1px solid #999; ... 続きを読む

Apple、10.2型Retina Displayに刷新した34,800円の「iPad」 - PC Watch

2019/09/10 264 users iPad Apple PC Watch

続きを読む

ねこ吸い on Twitter: "omni7のパスワード再設定の送付先メールアドレス。やっと消えたっていうけど、どうせコメントアウトしてるとかだろう？って思ったらまさかのCSSでdisplay:none;にしてたｗ

2019/07/04 27 users None ｏｍｎｉ７ https ｗｗｗ t.co

omni7のパスワード再設定の送付先メールアドレス。やっと消えたっていうけど、どうせコメントアウトしてるとかだろう？って思ったらまさかのCSSでdisplay:none;にしてたｗｗｗ こ　れ　は　大　草　原　が　広　が　るｗｗｗ… https://t.co/Cj4QSOjvz6 続きを読む

リストにCSSカウンターで数字を表示して全体的にグラデーションカラーにする | かちびと.net

2019/06/10 8 users グラデーションカラー padding Flex center

Result CSSカウンターで加えた数字をグラデーションに、というもの スクロールしても色が変わらず維持できます だからどうしたと言われたらまぁ言い返す言葉も無いんですが css /* リストのスタイル*/ li { counter-increment: index; display: flex; align-items: center; padding: 12px 0; box-sizing: border-box; } ... 続きを読む

Appleの新型ディスプレイ発表、32インチRetina 6Kのモンスター！でも我々が思っていたのとナンカチガウ？ #WWDC19 | ギズモード・ジャパン

2019/06/03 13 users image 小暮ひさ ギズモード Apple WWDC19

Appleの新型ディスプレイ発表、32インチRetina 6Kのモンスター！でも我々が思っていたのとナンカチガウ？ #WWDC192019.06.04 04:02 小暮ひさのり Image: Apple AoD（Apple おろし金 Display）？ 出るぞ出るぞ！と噂されていたAppleの新型ディスプレイ｢Pro Display XDR｣が発表されました。 Image: Apple32インチ、6016x33... 続きを読む

Chrome, Safari, Firefox, Edge 各ブラウザごとのデフォルトのスタイルシート、user agent stylesheetのまとめ | コリス

2019/05/28 58 users block コリス Edge Safari Firefox

Webページを実装する際、そのページを表示するブラウザが各HTML要素にデフォルトでどのようなスタイルが適用されているか知っておくのは大切なことです。 Chrome, Safari, Firefox, Edge 各ブラウザごとのデフォルトのスタイルシート、user agent stylesheetを紹介します。 例えば、p要素にはdisplay: block;が定義され... 続きを読む

display=swapとはなにか - MOL

2019/05/17 53 users MOL swap

Shipped! @GoogleFonts now let's you control web font loading using font-display. Say hello to the display parameter What's font-display? https://t.co/Q7RDeESwkm pic.twitter.com/sn27ySza1B — Addy Osmani (@addyosmani) May 15, 2019 Google I/0 2019に参加してきたのだが、Google Fontsがfont-display: sw... 続きを読む

jQueryスニペット：FlexboxとJavaScriptで、異なる文字数の行の幅を自動で一律にそろえる | かちびと.net

2019/04/28 25 users justify jQueryスニペット Flex span

Result text-align: justify;が使えれば楽だけどそうもいかないのでJavaScriptで揃える、というのはかなり昔からある方法ですが、最近はflexboxが普通に使えるようになったので、spanで文字を囲ってdisplay:flex;で揃えれられるし、いろいろ応用も効きそうですね 他ライブラリに依存せず、バニラなコードとなっています ... 続きを読む