Chrome 123で、divなどのブロック要素で垂直方向の中央にalign-contentプロパティで配置できるようになります

2024/03/07 14 users div Chr 垂直方向 ブロック要素 中央

間もなくリリースされるChrome 123（リリース情報）で、ブロックやテーブルレイアウトでのalign-contentプロパティがサポートされます。 これにより、div要素内に簡単に垂直方向の中央に配置できるのは嬉しいニュースです。しかし、既存サイトでalign-contentプロパティをflexやgridコンテナ以外に使用している場合、Chr... 続きを読む

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

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

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

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

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

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

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

2022/11/02 310 users デベロッパーツール Flexbox display CSS

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

UIデザイナーは要チェック！ 新しくなったMaterial Design 3は可変フォントやアイコン、アクセシブルで使いやすいカラーに

2022/05/17 14 users パーソナライズ アクセシビリティ アクセシブル ガイドライン

5/11,12に開催されたGoogle I/O 2022に伴い、Material Design 3のガイドラインが大幅アップデートされたので紹介します。 注目すべきキーワードは、アクセシビリティとパーソナライズ。 アクセシブルなコントラストを備えたダイナミックカラー、可変フォントRoboto FlexとRoboto Serif、可変アイコンフォントを使用した... 続きを読む

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

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

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

gapの余白指定が便利！ gridとflexでできる新しいCSSレイアウト手法 - ICS MEDIA

2021/06/28 20 users GAP Grid ICS MEDIA

CSSのgapプロパティーは余白を指定できる新しめの手法です。余白といえば、marginプロパティーやpaddingプロパティーを思い浮かべる方が多いと思いますが、CSS GridやFlexboxでgapプロパティーを使うと柔軟にレイアウトを組めます。もともとgapプロパティーはCSS Gridでのみ利用できていましたが、macOS Safari 14.1およ... 続きを読む

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

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

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

Template Literal Types で「単位を持つ数値」の文字列型をきれいに扱いたい

2021/03/10 10 users Template Literal Types 単位 数値

(この記事には一部うまくいってない部分が残ってるので、解決し次第追記します) ブラウザの二次元上の座標を計算するコードを書いていると、 px, rem, flex などの数値が入り乱れて、それらを文字列で管理してると扱いが難しくなります。また、ブラウザの DOM API は、コンテキスト次第で string | number みたいなノリ... 続きを読む

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

2019/12/24 6 users figma Tips display seya｜note 思考

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

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

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

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

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

2019/04/28 25 users justify jQueryスニペット Flexbox 応用

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

「出会えたことに感謝したいCSSベスト3」まとめ - Togetter

2018/04/08 540 users Togetter None border-box block

box-sizing: border-box; →出会えた時の感動 content: “”; →::before ::afterとの組み合わせ display: none; →blockとのコンビネーションが好き flexは殿堂入りぽいからそれ以外にしてみました #出会えたことに感謝したいCSSベスト3 続きを読む

Silex の役割の終焉 (the end of silex) - ぷぎがぽぎっとな

2018/02/12 16 users Silex 意訳 終焉 ぷぎがぽぎ google翻訳

2018 - 02 - 12 Silex の役割の終焉 (the end of silex) symfony.com 以下は 上記 ブログの意訳です。( google翻訳 結果の日本語の不自然さを修正程度) --- ここから --- Fabien Potencier Symfony 4の世界でSilexはどうですか？ここ数ヶ月、 Flex *1 で作業する際の練習として私はこれまでにSilexで構... 続きを読む

文字下げを考慮したリストマークはflexと疑似要素で作るのが良いと思う | q-Az

2017/10/29 30 users text-indent q-Az CSS ul class

CSS の li 要素にあるリストマークプロパティは現状使いにくいのですが、リストマーク的なものを疑似要素とflexを使って作る方法です。 text-indent を駆使して昔はやってましたが使わずとも文字下げ可能です。 flexと疑似要素を用いたリストマークのサンプル まずはサンプルです サンプル1 テスト文章 テスト文章 テスト文章 テスト文章 HTML <ul class="markList... 続きを読む

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

2017/07/31 258 users コリス transform ビューポート CSS 天地左右

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

さよならIE9！CSSアニメーションでシンプルなスライドショーを作ってみた | それいけ！フロントエンド

2017/05/09 24 users CSSアニメーション フロントエンド スライドショー つっち

こんにちは。フロントエンドエンジニアのつっちーです。 2017年4月12日、ついにWindows Vistaのサポート終了しましたね。これによってInternet Explorer 9のサポートも終了（※1）となりました。CSSアニメーションも、display:flexもやっと遠慮なく使える！（※2） ということで今回は、クロスフェード式のスライドショーを、IE9を切り捨てることでよりシンプルに実... 続きを読む

Flexboxでレイアウトを作成する時に覚えておきたい、子要素がどのようにサイズ変更されるかアニメーションで解説 | コリス

2017/03/03 96 users Flexbox コリス float アニメーション レイアウト

普通にレイアウトするのであれば、FlexboxでもFloatでもそんなに変わりなく利用できます。Flexboxは、flex（収縮する）の名の通り、収縮してサイズ変更できることが大きな特徴です。 Flexboxを使ってレイアウトを作成する時に役立つ、Flexboxのプロパティがどのように収縮して機能するかアニメーションで分かりやすく解説します。 Even more about how Flexbox... 続きを読む

【登壇レポート】AWSを使うサーバーサイドレシピ #gbfukuoka ｜ Developers.IO

2017/02/11 33 users Twitter iPhone Facebook Azure

絞り込むカテゴリーを選択 iPhone (916) Android (404) Windows Phone (39) Facebook (21) Twitter (4) AWS (3414) Azure (5) Flex (54) Silverlight (1) HTML5 (187) AIR (46) 言語 (131) OS (43) サーバー (163) ネットワーク (69) 言語 (118... 続きを読む

あなたはCSSプロパティ”display”をどのぐらい知っているだろうか？ | デザイン | POSTD

2016/08/05 579 users POSTD display プロパ inline Grid

CSSプロパティの1つであるdisplayはCSSレイアウトに用いるプロパティの中でも極めて重要なものです。block、inline、none、さらにtableやinline-blockは今ではかなり一般的になってきました。一方新たに登場したflexやgridはレイアウト用に作られたものです。これらについて紹介します。CSSプロパティの1つである display は、CSSレイアウトに用いるプロパ... 続きを読む

KJC KRINNER クリナー 太陽光(日本) - 茨城県常総市 856kW

2015/09/12 10 users 架台 太陽電池モジュール メガソーラー 基礎 太陽光

茨城県常総市　856kW 架　台　 FLEX-Ⅲ　　 太陽電池モジュール：255W 設置枚数：3,360枚 設置角度：10度　横4段14列 (株)ケイジェイシー KRINNER （クリナー）　　太陽光　メガソーラー　 架台　基礎 　グラウンドスクリュー杭 クリナー　FLEX-Ⅲ　ドイツ架台 続きを読む

フォード、分割収納できる電動自転車 MoDe:Flex 発表。マルチモード通勤を提案 - Engadget Japanese

2015/06/25 21 users mode サドル フォード トランク 郊外

フォード、分割収納できる電動自転車 MoDe:Flex 発表。マルチモード通勤を提案 BY Munenori Taniguchi 2015年06月25日 11時00分 0 フォードが、電動アシスト自転車 MoDe:Flex を発表しました。サドルの下の部分でフレームが2つに分かれ、車のトランクに簡単に収納が可能。フォードは郊外から職場へ向かう途中で、自動車から自転車へと乗り換える「マルチモード」通... 続きを読む

AWSとGCPの対応表 ｜ Developers.IO

2015/05/11 115 users Twitter iPhone Facebook GAE GCP

絞り込むカテゴリーを選択 iPhone (347) Android (274) Windows Phone (29) Facebook (18) Twitter (3) AWS (1420) Azure (5) GAE (3) Flex (53) Silverlight (1) HTML5 (177) AIR (45) 言語 (90) OS (19) サーバー (130) ネットワーク (41) ... 続きを読む

ワイモバイルが最後に出した変態端末「Heart 401AB」に端末交換してきた - 深夜2時の珈琲タイム

2015/03/21 70 users ワイモバイル 端末 変態端末 最後 Heart 401AB

2015-03-20 ワイモバイルが最後に出した変態端末「Heart 401AB」に端末交換してきた ガジェット どうも、変態端末をこよなく愛す管理人です！ MEDIAS Wを出したNECは撤退し、F-07Cを出した富士通にかつての勢いはなく、G Flexを出したLGは日本では無難な端末しか出さなくなりましたねえ。 寂しさを感じていた今日この頃、とんでもないものがぶちこまれましたよ、あのエイビット... 続きを読む

EIZO、4K/31.5型IPS液晶ディスプレイ「FlexScan EV3237」。デジタル入力4系統 - AV Watch

2014/07/31 14 users EIZO オープンプライス ブラック 4K解像度 税込

ニュース EIZO、4K/31.5型IPS液晶ディスプレイ「FlexScan EV3237」。デジタル入力4系統 （2014/7/31 15:00） EIZOは、4K解像度の31.5型液晶ディスプレイ「FlexScan EV3237」を9月19日に発売する。価格はオープンプライスで、EIZOダイレクト価格は199,800円(税込)。カラーはブラック(BK)とセレーングレイ(GY)の2色。 Flex... 続きを読む