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つのキーワードを...記事の続きを読む 続きを読む

Web制作に役立つ超便利ツールが登場！ HTMLやCSSやJavaScriptのさまざまなツールがひとまとめになったツールボックス -He3

2023/03/16 195 users ひとまとめ デコード Flexbox CSS diff

HTMLやCSSやJavaScriptの軽量化・整形、FlexboxやGridやbox-shadowのジェネレーター、各種エンコード・デコード、データの暗号化、ダミーテキスト・ダミーデータ・ファビコン生成、テキスト比較（Diff）など、Web制作に役立つさまざまなツールがまとめて利用できる『He3』を紹介します。 Windows, macOS, Linux対応の無... 続きを読む

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

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

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

コピペ一発！便利なCSSレイアウト生成ツールおすすめ12選（Grid ＆ Flexbox編） - PhotoshopVIP

2022/06/28 137 users PhotoshopVIP コピペ一発

あなたが、いま実装しようとしているレイアウトは、おそらくCSSで実現できるでしょう。 ただし日常の業務をこなしながら、日々進化するCSSの最新テクニックを習得するとなれば、話はまったく別です。 仕事で使えるCSSの技術を、時間をかけて学ぶよりも、ボタンやドラッグ＆ドロップ操作で、思い通りのレイアウトを自動で... 続きを読む

CSSでメディアクエリはもう必要ないかも -メディアクエリなしで実装するテクニックのまとめ

2021/11/18 385 users CSS メディアクエリ テクニック ブレークポイント まとめ

Webサイトやアプリをレスポンシブ化するためにメディアクエリに頼っているのであれば、CSSの機能を見直して、昔ながらのブレークポイントを新しい流動的なアプローチで実装ができないか検討する時期かもしれません。 CSSの実装はデバイスベースからコンテンツベースに移行しているのが現状です。grid, flexbox, vh, vw, ... 続きを読む

プログラムによるレイアウト制御のための CSS Grid を考える

2021/10/13 21 users CSS Grid プログラム 文脈 SPA CSS

この記事は、既存のCSSのレイアウトの文脈ではなく、「プログラムから制御されるレイアウト」をいかに綺麗に制御・生成するか、です。 複雑なSPAや何らかのオーサリング環境で、主に JavaScript の視点からレイアウトを扱うのに Grid をどう活かしていくか、という話。 grid-template-areas の視覚的な対応 IEがない世界... 続きを読む

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

2021/06/28 20 users GAP Flex ICS MEDIA

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

Web制作の面倒な作業をラクにするCSS便利ツール59個まとめ - PhotoshopVIP

2020/07/07 368 users PhotoshopVIP ニューモーフィズム 配色 ラク 作業

この記事では、Webデザイン制作の面倒な作業をラクにするCSS便利ツール59個をまとめています。 CSS FlexboxやGridをつかったレイアウト生成ツールや、レスポンシブ対応の画像ツール、配色に困ったときに便利なツール、多彩なCSSアニメーション、話題のニューモーフィズムなど、CSSスタイリング時間節約や、さまざまな問... 続きを読む

CSSのプロパティ値「auto」を使ったテクニックのまとめ、マージンやサイズや配置やFlexboxなど | コリス

2020/04/14 22 users Flexbox コリス auto height width

CSSの「auto」は非常に便利な値で、マージンやサイズ（width, height）や配置などのプロパティに使用することができます。「auto」がどのように機能するのか、「auto」を活用したテクニックを紹介します。 自動マージン、autoを使った要素のサイズ指定、中央配置に使用するautoの仕組み、FlexboxやGridで知っておくと便... 続きを読む

CSSで実装したレイアウトの構造や階層を簡単に確認できる、私のお気に入りのCSSハック -My favorite CSS hack | コリス

2019/09/10 86 users コリス Flexbox 階層 CSS float

flexboxで実装したレイアウトはもちろん、floatでもgridでもCSSで実装したレイアウトの構造や階層を確認できるスタイルシートを紹介します。 ページ上の各要素のサイズ・マージン・パディングなどに不整合がないか簡単に確認でき、スニペットやブックマークレットに登録しておくと便利です。 My favorite CSS hack by Ga... 続きを読む

【2019年版】バックエンドエンジニアが React でモダンなフロントエンド開発を始めるまで - Feedforce Developer Blog

2019/09/04 520 users hooks React CSS 教材 あっという間

id:daido1976 です。入社してからあっという間に1年が経っていました。 直近3ヶ月ほどプライベートでフロントエンド開発の勉強をしていたのですが、ここ数年で CSS の Grid や React の Hooks が新しく導入されたことなどもあり、少し古いコンテンツだと教材として役立たない1 と感じることが多かったので、本記事では私... 続きを読む

これで分かった！CSS GridとFlexboxの使い方を習得できるチートシート、ゲームまとめ - PhotoshopVIP

2019/07/12 456 users Flexbox CSS flexbox チートシート お好み

この記事では、CSS FlexboxとGridをつかってお好みのレイアウトを作成するコツやポイントをまとめた使い方ガイドやチートシート、ゲームなどをまとめて紹介しています。 ゲーム感覚で新しいCSSプロパティを学習することができたり、記述方法をど忘れしてしまったときなどにも便利で、お好みのレイアウトをオンラインで作... 続きを読む

【TEAC】ティアック X-2000R オープンリールデッキは ブランドの黄金期を支え 約30年以上経っても中古市場で高額に取引される隠れた人気モデル – Φ-GRID

2017/11/14 15 users TEAC 黄金期 中古市場 ブランド 人気モデル

オープンリール式テープレコーダの老舗ブランド、現在ではギブソン傘下におさまる 日本の音響機器メーカの老舗であり、デジタルオーディオ勃興期、Hi-Fiオーディオ衰退期を生き延びた数少ない日本の音響メーカの一つである。民生音響機器製品としてはテープデッキ、殊に往年の オープンリール式テープレコーダ （Aシリーズ、Xシリーズ） に人気があり 、総じて「 ごつい 」 機器を作るブランドイメージ があり、高... 続きを読む

【Φ-GRID CONTENT_HACKS】専門性の高いハウツーコンテンツをつくる簡単な 3 つの手法 – Φ-GRID

2017/11/09 20 users REVIEW 知人 手法 コメント 新しいブログ

【Φ-GRID CONTENT_HACKS】専門性の高いハウツーコンテンツをつくる簡単な 3 つの手法 磯守 航史郎 3分 ago Blog , Lifehack , Review 【Φ-GRID CONTENT_HACKS】専門性の高いハウツーコンテンツをつくる簡単な 3 つの手法 は コメントを受け付けていません。 1,103 Views 今回は、知人が新しいブログをはじめ、記事を作ったは良い... 続きを読む

【HAMILTON】ハミルトン カーキ フィールド オートマは 青島モデルとして取り上げられた リーズナブルで実用的なミリタリーウォッチ – Φ-GRID

2017/10/27 17 users Hamilton ハミルトン パルサー オートマ カーキ

HAMILTON ハミルトン カーキ フィールド H70455863 1892年に創業後、米国鉄道網の発達にともない、高精度懐中時計レイルウェイ・スペシャルが大ブレイク。その後軍用時計として出発したフィールドウォッチの傑作カーキや、世界初の電池式時計で３角形状が個性的なベンチュラ(1957年)。世界で初めてLEDを使用したパルサー(1970年)など、ユニークな実用時計を生み出してきた。1980年代... 続きを読む

[CSS]ワンランク上に！Webページのレイアウトを美調整するスタイルがまとめられたスタイルシート -fractures | コリス

2017/07/10 94 users コリス パディング Flexbox 矩形 CSS

float, flexbox, gridのレイアウトでよく使うスタイル、マージンやパディングを調整するスタイル、矩形・角丸・円形を実装するスタイル、幅や高さを調整するスタイル、要素を配置するdisplayやpositio ...記事の続きを読む 続きを読む

デザインとビジネスの微妙な関係【DFI2017より】 | freshtrax | デザイン会社 btrax ブログ

2017/06/07 22 users freshtrax 永田町 役割 事例 デザイン思考

デザイン思考 や サービスデザイン など、経営や商品企画においてのデザインの重要性が高まる中で、海外の事例に習い、日本企業でもデザインをビジネスに活用する取り組みが進んでいる。では、経営にデザインを取り込む事で果たして実際どのようなメリットがあるのであろうか？そして、ここでいう”デザイン”とはどのような役割のことを指すのであろうか？ これから紹介するのは、5月24日に永田町のGRIDで開催された、... 続きを読む

CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する | Webクリエイターボックス

2017/04/13 706 users CSSグリッドレイアウト display レスポンシブ 複数

大きさの異なる複数のボックスを隙間なく並べてタイル状に表示したい！そんな時もありますよね。モザイクレイアウト、Masonryレイアウト、Windows 8 Metroスタイルレイアウト…などなど、さまざまな呼び方のあるこのレイアウト。今回は display: grid という新しい配置方法を使ってレイアウトを組んでみますよ！もちろんレスポンシブにも対応させたいと思います！ 1. どんなレイアウトに... 続きを読む

CSS Grid Layoutを使う前に知っておきたい、floatやflexboxなど既存の実装にどのような影響を与えるか | コリス

2017/03/29 58 users Flexbox コリス float inline-block

CSS Grid Layout は先日リリースされたChrome 57がサポートし、デスクトップ用のすべてのブラウザで利用できるようになりました。 floatやflexbox、vertical-alignやinline-blockなど、Webページでよく使用するレイアウトの実装に、CSS Grid Layoutがどのような影響を与えるかについて紹介します。 Grid “fallbacks” and... 続きを読む

「Google Chrome 57」安定版リリース、レスポンシブデザインに適した「CSS Grid Layout」をサポート - GIGAZINE

2017/03/14 20 users GIGAZINE display レスポンシブデザイン 格子

By ｍｅｒａ ウェブブラウザ「Google Chrome」の最新安定版となる「57.0.2987.98」がWindows・Mac・Linux向けにリリースされました。このバージョンではCSSで要素ごとに区切った格子を制御できる「CSS Grid Layout (display: grid;)」をサポートするほか、JavaScriptを補完することで動的コンテンツをスペックの低いマシンでも高速に動... 続きを読む

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

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

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

グリッドって万能！デザインがグンと良くなる15の理由まとめ - PhotoshopVIP

2015/11/09 99 users グリッド 万能 格子状 グラフィックデザイナー デザイン

海外デザインブログCanva Design School Blogで公開された「15 Reasons Why A Grid Based Approach Will Improve Your Designs」より許可をもらい、日本語抄訳しています。 グラフィックデザイナーの基礎テクニックのひとつとして、格子状または方眼状のグリッド（英: Grid）は重要なデザインツールと言えます。 ではなぜデザイン... 続きを読む

センチ単位の精密GPSをモバイルで実現する『GRID』、サムスンが製品化へ - Engadget Japanese

2015/05/11 38 users レシーバ サムスン Engadget Japanese 通り

センチ単位の精密GPSをモバイルで実現する『GRID』、サムスンが製品化へ BY Ittousai 2015年05月11日 12時30分 0 米テキサス大学オースティン校の研究者グループが、モバイル機器でセンチメートル単位の精密なGPS測位を可能にするレシーバ 『GRID』を発表しました。 一般的なモバイル機器用GPSの精度はせいぜい数メートルで、地図に現在地を表示しても通りのどちら側に居るのか分... 続きを読む

R {ggplot2} で独自の geom を手軽に作りたい - StatsFragments

2015/03/27 12 users StatsFragments ggplot2 WIKI 実態

2015-03-28 R {ggplot2} で独自の geom を手軽に作りたい R はじめに {ggplot2} を使っていると、新しい描画図形 (geom) を作りたいなという場合がたまにある。その方法は {ggplot2} の Wiki に書いてあり、手順は、 描画図形の実態を grid::Grob として定義する (リンク先の例では fieldGrob ) 定義した Grob を 呼び出... 続きを読む

NVIDIA、199ドルのAndroid TV/Tegra X1搭載ゲーム機「SHIELD」 ～独自のクラウドゲームストリーミングサービス「GRID」も開始 - PC Watch

2015/03/04 29 users Shield ゲーミ NVIDIA CEO 基調講演

ニュース NVIDIA、199ドルのAndroid TV/Tegra X1搭載ゲーム機「SHIELD」 ～独自のクラウドゲームストリーミングサービス「GRID」も開始 （2015/3/4 15:06） SHIELDを掲げるジェンスン・ファン氏 NVIDIAは3日(米国時間)、GDC 2015で基調講演を開き、CEOであるジェンスン・フアン氏が、同社で初めてOSにAndroid TVを採用したゲーミ... 続きを読む