タグ グリッド
新着順 10 users 50 users 100 users 500 users 1000 usersUI要素をグリッドではなく、サークル・放射状、曲線状にレイアウトできるCSSのフレームワーク -Orbit
ラジアルUIとは、従来のグリッドベースまたは線形のレイアウトとは異なり、要素がサークル・放射状のパターンでレイアウトされたUIです。 このラジアルUI、あらゆる要素をサークル・放射状、または曲線状のパターンでレイアウトできるCSSのフレームワークを紹介します。 Orbit Orbit -GitHub Orbitの特徴 Orbitのデモ Or... 続きを読む
Reactで使えるヒートマップライブラリ3選
7月27日、Reactのための最高のヒートマップライブラリについて紹介します。 ヒートマップは、データを色分けされたグリッドで可視化するための強力なツールです。 この記事では、Reactでヒートマップを作成および操作するために使用できる3つの人気のあるライブラリ、react-heat-map、D3.js、およびSyncfusionを紹介しま... 続きを読む
AI最大の課題「フレーム問題」解決の糸口をグリッドが開発!強化学習とアンサンブル学習を連携 米国物理学協会発刊学術誌が掲載 - ロボスタ ロボスタ - ロボット情報WEBマガジン
シェア 0 ツイート 0 はてブ 0 株式会社グリッドは、エネルギー分野における「不確実な環境における深層強化学習による最適化」の開発に成功した。これは現在のAIにとって最大の課題のひとつとされている「フレーム問題」を解決する糸口になる、と言う。そして、その成果を、米国物理学協会が発刊する「Journal of Renew... 続きを読む
全部、完全に商用利用無料! UIデザインに適した400種類以上のSVG・Figma用も揃ったシンプルでかわいいアイコン素材 -Doodle Icons
アイコン用のグリッドを使用して手描きされた、ちょっとラフなかわいい感じにデザインされたアイコン素材を紹介します。 15のカテゴリに、400種類以上のアイコンがセットになっており、個人でも商用プロジェクトでも完全に無料で使用できます。フォーマットは.png, .svg, .figが揃っているのも便利ですね。 Doodle Icons... 続きを読む
ビル・ゲイツ氏「2、3年以内にバーチャル会議の大半がメタバースに移行」と予測 | Mogura VR
マイクロソフトの共同創業者であるビル・ゲイツ氏は、働くことの未来がメタバースの台頭によってどのように変化するかを予測しています。個人ブログの中で、「今後2、3年のうちに、ほとんどのバーチャルミーティングは、2Dのカメラ画像のグリッドから、デジタルアバターによる3D空間であるメタバースに移行するだろう」... 続きを読む
グリッドをロボットが走り回る近未来感あふれる倉庫。釣具のハヤブサが公開
レスポンシブ対応のレイアウトやコンポーネントだけを実装するCSSのシンプルなコードのまとめ -SmolCSS | コリス
Webサイトでよく使用するレスポンシブ対応のシンプルなグリッドやサイドバー、フレキシブルなパディングの実装、ギャラリーやカード型レイアウトなど、レイアウトやコンポーネントを実装するCSSのコードを紹介します。 CSSの実装は年々進化しており、さまざまなプロジェクトで使用できるシンプルで最小限のコードをまと... 続きを読む
これなら分かりやすい!Webサイトのデザイン仕様書・指示書の作り方 | コリス
デザイナーがWebサイトのUIを実装する際にデベロッパーに渡すデザイン仕様書・指示書の作り方を紹介します。 仕様書を作成する基本ツール、指示に適したフォントやカラー、グリッドや要素間の距離を自動的に計算するツールをはじめ、レイアウトや各UIコンポーネントのデザイン仕様の記述例まで、デザインを仕様化する解... 続きを読む
最新版、レスポンシブ対応のレイアウト・グリッドデザイン徹底解説 | コリス
レスポンシブ対応のグリッド設計、レイアウトのバリエーション、デスクトップやスマホやタブレットの最近の状況に合わせたデザイン方法を紹介します。 グリッドの基礎知識をはじめ、最近主流のレイアウト、デザイナーがワークフローでグリッドをどのように適用させるかなど詳しく解説されています。 Responsive Grid Des... 続きを読む
Webページやスマホアプリでよく使用される代表的な5つのレイアウトをCSS Gridで実装するテクニック | コリス
Webページやスマホアプリでよく使用される代表的な5つのレイアウトをCSS Gridで実装するテクニックを紹介します。 ヘッダ・コンテンツ・フッタを積み重ねたもの、12カラムのグリッド、メディアクエリなしのレスポンシブなど、実際によく使用されるレイアウトばかりです。 CSS Gridを使用すると、今まで少し複雑だったレ... 続きを読む
しっかり理解しておくと便利なCSSのテクニック、minmax()関数の使い方 | コリス
minmax()はCSSの関数で、要素サイズの最小値と最大値を定義することができます。カードを配置するグリッド、記事を中央配置で画像を幅いっぱいにするフルブリードなど、ページのレイアウトやUIコンポーネントの実装に非常に便利です。 CSS Gridにおけるminmax()関数の実用的で、便利な使い方を紹介します。 A Deep Dive ... 続きを読む
F1 Topic:クラッシュしたフェルスタッペンがガレージに戻らず、グリッドで修理を試みた理由 | F1 | autosport web
ガレージを出て、ダミーグリッドへ向かうためにコースを1周するレコノサンスラップでタイヤバリアにクラッシュしたレッドブル・ホンダのマックス・フェルスタッペン。なんとか自力でマシンを再走行させたものの、フロントウイングは脱落し、左フロントサスペンションにダメージを負った姿を見て、多くのファンがピットイ... 続きを読む
Bootstrap 5 alphaがついにリリース!注目すべき新機能、jQueryは削除、IEすべてのバージョンのサポート終了 | コリス
先日の記事で春後半の夏前にリリースされるとお伝えした通り、Bootstrap 5のalpha版がついにリリースされました! IEすべてのバージョンのサポート終了、jQueryの削除をはじめ、注目すべき新機能を紹介します。 Bootstrap v5 Bootstrap v5の特徴 Bootstrap v5のダウンロード・インストール Bootstrap v5のグリッドやコン... 続きを読む
水彩調の島を作るSLG『Townscaper』6月にSteam早期アクセス配信開始へ。ブロックを置くだけで生まれていく美しい島 | AUTOMATON
『Townscaper』は、極めてシンプルな島づくりシミュレーションゲームだ。「たくさんの建物とたくさんの美しさ。以上」とストアページで説明されているように、課題が与えられるわけでも、ゴールが設定されているわけでもない。プレイヤーはグリッドの設定された水面に土台を敷き、自由に建物を建築することができる。公... 続きを読む
CSSでノートの罫線やグリッドなど、さまざまな要素の背景にパターンを簡単に実装できるライブラリ -pattern.css | コリス
ページ全体、テキストやボックスなどのさまざまな要素の背景に美しいパターンを簡単に実装できるスタイルシートのライブラリを紹介します。 ノートみたいな罫線、ドット、チェック、グリッド、ジグザグなど、要素にclass名を与える...記事の続きを読む 続きを読む
【1分で読める書評】 『GRIT やり抜く力』 アンジェラ・ダックワース | 1分で読める書評サイト 本のび教室
この記事は約1分で読めます。 「自分には才能がない・・・」と嘆いているあなたにオススメです。 紹介する本はこちら。 『GRIT やり抜く力』 アンジェラ・ダックワース ダイヤモンド社 やり抜く力 GRIT(グリット)――人生のあらゆる成功を決める「究極の能力」を身につける created by Rinker Amazon この本を読めば、才能... 続きを読む
さくらインターネット社長が語る、「電力は止まるを前提に、将来は自立したグリッドを」 | 日経 xTECH(クロステック)
2018年9月6日の北海道胆振東部地震によって約60時間のブラックアウトを乗り越えたデータセンターがある。さくらインターネットの石狩データセンターだ。クラウド時代となった今、データセンターは生活の生命線ともいえる重要な社会インフラとなった。地震だけなく、極地的な豪雨や繰り返される台風被害など自然災害によ... 続きを読む
ダークモードもサポート!シンプルで拡張性も備えた超軽量のプログレッシブCSSフレームワーク -Cutestrap | コリス
シンプルなHTMLにclassを加えるだけで、さまざまなUIコンポーネントやグリッドが実装できる超軽量(2.7Kb)のCSSフレームワークを紹介します。 プログレッシブ・エンハンスメントが採用されており、新旧ブラウザの見え方を最適化して表示されます。 Cutestrap Cutestrap -GitHub Cutestrapの特徴 Cutestrapのデモ Cutest... 続きを読む
イラストを使わずに、Webページに斜めから俯瞰したアイソメトリックをつくりだすCSSライブラリ -IsometricSass | コリス
アイソメトリックの斜めから俯瞰したイラストなどをよく見かけますね。そのアイソメトリックをWebページにつくりだすCSSのライブラリを紹介します。 HTMLは非常にシンプルで、要素をアイソメトリックにしたり、斜めのグリッドを配置したり、アニメーションさせたりできます。 IsometricSass IsometricSass -GitHub Isome... 続きを読む
「GRIT」とは? 成功者に共通するやり抜く力の伸ばし方 | ライフハッカー[日本版]
「GRIT(グリット)」という言葉を聞いたことはありますか? 日本語では「やり抜く力」と訳され、後天的に身につけられるライフスキルです。 世界で成功をおさめている、マイケル・ジョーダン、スティーブ・ジョブズもこの力を身につけていたと言われています。 今回は、このやり抜く力「GRIT」の意味と伸ばす方法を、英語講師... 続きを読む
目標は“Indeedのレコメンド版”、AI転職エージェント「GLIT」が6300万円を調達 | TechCrunch Japan
AIエージェントサービス「GLIT(グリット)」を提供するCaratは5月16日、複数の投資家を引受先とした第三者割当増資により、6300万円を調達したことを明らかにした。 プレシリーズAとなる今回のラウンドに参加したのは求人サイトなどを展開するキャリアインデックスのほか、杉山慎一郎氏、高梨大輔氏、マイナースタジオ... 続きを読む
リズムから考えるJ-POP史 第3回:90年代末の“ディーヴァ”ブームと和製R&Bの挑戦 - Real Sound|リアルサウンド
「リズムから考えるJ-POP史」連載第3回 リズムから考えるJ-POP史 第3回:90年代末の“ディーヴァ”ブームと和製R&Bの挑戦 前回は小室哲哉の仕事についてtrfを中心に論じ、小室を「90年代を通じて日本人の『BPM感覚』と『16ビートのグリッド』を規定した」プロデューサーと位置づけた。続いて取り上げるのは、1996年ごろ... 続きを読む
Vue.jsにも対応の優れ物!高さが異なるカードでもグリッドにレイアウトできる超軽量ライブラリ -Magic Grid | コリス
カードの高さが常に一定であれば、CSS GridやFlexboxで簡単に実装できます。しかし、ユーザーが作成したデータを使った動的コンテンツでは高さが同じになることはほとんどありません。 カードの高さがそれぞれ異なる動的グリッドを簡単に実装できる超軽量JavaScriptライブラリを紹介します。 動的コンテンツはもちろん、... 続きを読む
Chromeの新しい機能拡張が便利すぎる!デザイナーやディレクター向けの新しいデザインツール-ProjectVisBug
VisBugはChromeの機能拡張で、ブラウザに表示したページのデザインやコンテンツを検証・編集できます。グリッドの確認はもちろん、要素を移動させたり、入れ替えたり、別の画像にしたり、テキストを編集したり、カラーを変更したりなど、さまざまなアイデアを実行・テストすることができます。 制作や検証時だけでなく、... 続きを読む
備えておくと便利!CSS Flexboxの各プロパティ、グリッドを実装するコードがまとめられたSassのMixin | コリス
CSS Flexboxの各プロパティ、レスポンシブ対応のグリッドや垂直・水平の揃えなど、便利なコードがまとめられたSassのMixinを紹介します。 CSS Flexboxの各プロパティがまとめられたSass Mixin CSS Flexboxでグリッドを実装するコードがまとめられたSass Mixin CSS Flexboxの各プロパティがまとめられたSass Mixin flexbo... 続きを読む