全部、完全に商用利用無料！ UIデザインに適した400種類以上のSVG・Figma用も揃ったシンプルでかわいいアイコン素材 -Doodle Icons

2022/03/14 277 users UIデザイン かわいいアイコン素材 SVG 全部 fig

アイコン用のグリッドを使用して手描きされた、ちょっとラフなかわいい感じにデザインされたアイコン素材を紹介します。 15のカテゴリに、400種類以上のアイコンがセットになっており、個人でも商用プロジェクトでも完全に無料で使用できます。フォーマットは.png, .svg, .figが揃っているのも便利ですね。 Doodle Icons... 続きを読む

これなら分かりやすい！Webサイトのデザイン仕様書・指示書の作り方 | コリス

2021/06/17 411 users デベロッパー コリス フォント 各UIコンポーネント 指示

デザイナーがWebサイトのUIを実装する際にデベロッパーに渡すデザイン仕様書・指示書の作り方を紹介します。 仕様書を作成する基本ツール、指示に適したフォントやカラー、グリッドや要素間の距離を自動的に計算するツールをはじめ、レイアウトや各UIコンポーネントのデザイン仕様の記述例まで、デザインを仕様化する解... 続きを読む

しっかり理解しておくと便利なCSSのテクニック、minmax()関数の使い方 | コリス

2020/11/26 171 users minmax コリス UIコンポーネント CSS 関数

minmax()はCSSの関数で、要素サイズの最小値と最大値を定義することができます。カードを配置するグリッド、記事を中央配置で画像を幅いっぱいにするフルブリードなど、ページのレイアウトやUIコンポーネントの実装に非常に便利です。 CSS Gridにおけるminmax()関数の実用的で、便利な使い方を紹介します。 A Deep Dive ... 続きを読む

リズムから考えるJ-POP史　第3回：90年代末の“ディーヴァ”ブームと和製R＆Bの挑戦 - Real Sound｜リアルサウンド

2019/04/13 50 users ディーヴァ TRF J-POP史 ブーム リズム

「リズムから考えるJ-POP史」連載第3回 リズムから考えるJ-POP史　第3回：90年代末の“ディーヴァ”ブームと和製R＆Bの挑戦 前回は小室哲哉の仕事についてtrfを中心に論じ、小室を「90年代を通じて日本人の『BPM感覚』と『16ビートのグリッド』を規定した」プロデューサーと位置づけた。続いて取り上げるのは、1996年ごろ... 続きを読む

Vue.jsにも対応の優れ物！高さが異なるカードでもグリッドにレイアウトできる超軽量ライブラリ -Magic Grid | コリス

2019/01/16 166 users コリス Flexbox Vue.js 動的コンテンツ 一定

カードの高さが常に一定であれば、CSS GridやFlexboxで簡単に実装できます。しかし、ユーザーが作成したデータを使った動的コンテンツでは高さが同じになることはほとんどありません。 カードの高さがそれぞれ異なる動的グリッドを簡単に実装できる超軽量JavaScriptライブラリを紹介します。 動的コンテンツはもちろん、... 続きを読む

Chromeの新しい機能拡張が便利すぎる！デザイナーやディレクター向けの新しいデザインツール-ProjectVisBug

2018/11/29 656 users Chrome デザイナー ディレクター向け アイデア テキスト

VisBugはChromeの機能拡張で、ブラウザに表示したページのデザインやコンテンツを検証・編集できます。グリッドの確認はもちろん、要素を移動させたり、入れ替えたり、別の画像にしたり、テキストを編集したり、カラーを変更したりなど、さまざまなアイデアを実行・テストすることができます。 制作や検証時だけでなく、... 続きを読む

備えておくと便利！CSS Flexboxの各プロパティ、グリッドを実装するコードがまとめられたSassのMixin | コリス

2018/11/19 58 users Mixin Sass コリス CSS flexbox コード

CSS Flexboxの各プロパティ、レスポンシブ対応のグリッドや垂直・水平の揃えなど、便利なコードがまとめられたSassのMixinを紹介します。 CSS Flexboxの各プロパティがまとめられたSass Mixin CSS Flexboxでグリッドを実装するコードがまとめられたSass Mixin CSS Flexboxの各プロパティがまとめられたSass Mixin flexbo... 続きを読む

Vue.jsベースのオープンソースUIコンポーネントフレームワーク・「Vuesax」 | かちびと.net

2018/09/07 54 users スライダー コンポーネント タブ Vue.js カラースキーム

Vuesax VuesaxはVue.jsベースのUIコンポーネントフレームワークです。Vue.jsを使ったアプリケーション開発をサポートしてくれます。カラースキームやグリッド、フォーム、タブなどの基本UIはもちろん、スライダーやカード、ページネーションなども用意されており、それぞれのコンポーネントではさらに細かなスタイルを選... 続きを読む

現役レースクイーン 「女性差別じゃなくて職業差別」 【 F1-Gate.com 】

2018/02/02 353 users F1-Gate.com 職業差別 女性差別 グリッドガール

F1関連のF1最新情報、ニュースを掲載しています。F1ドライバーのコメントやF1チームの情報、レース結果などを随時更新しています。 F1が2018年から“グリッドガールを廃止する”と発表し、日本における“レースクイーン”にも波紋が広がっている。 F1では伝統的に各国の美女たちがドライバーのネームボードを持ってグリッドに花を添えてきた。しかし、近年ではグリッドガールが女性差別を助長するとして廃止を求... 続きを読む

新しくなったBootstrap 4の基本テンプレート、ナビゲーション、コンポーネントのまとめ | コリス

2018/01/30 162 users コリス コンポーネント rem ナビゲーション Sass

2018年1月18日、Bootstrap 4の安定版がようやくリリースされました。 Bootstrap 4ではFlexboxが採用され、それに伴いFloatは取り除かれ、CSSのソースはLessからSassに変更され、CSSの主要な単位はpxからremに変わり、デフォルトのフォントサイズは大きくなり、サポートブラウザからIE8,9は外れました。 ※pxはメディアクエリとグリッドのみ。 新しくなった... 続きを読む

CSS Gridで、Webページでよく使うレイアウトを実装したシンプルなHTML/CSSのテンプレートのまとめ | コリス

2017/11/26 81 users コリス Flexbox 全幅 ヘッダ CSS

CSS Gridを使って、ヘッダ・フッタ付きの2カラム、3カラム、カード型といったレイアウトをはじめ、テキストはグリッドに揃えて画像は全幅で表示など、Webページでよく使うレイアウトを実装するシンプルなテンプレートを紹介します。 来年からは、CSS Gridで実装するのが主流になりそうですね。 CSS Grid Starter Layouts CSS GridとFlexbox、それぞれどう使いこな... 続きを読む

Webデザインで使う数値をすぐに算出！マージンやフォントサイズのバリエーションを導き出すオンラインツール | コリス

2017/09/15 87 users 見出し コリス レイアウト フォントサイズ さい

レイアウトのベースになるグリッドのサイズ、パネルやカードやボタンなどのサイズ、要素間に与えるスペースの段階ごとのサイズ、見出しや本文などテキストの階層ごとの文字サイズなど、Webデザインを設計する際に必要となる数値をサイ ...記事の続きを読む 続きを読む

CSSリセットの新しい考え方、リセットと有用なコンポーネントだけのスタイルシート -Shoelace.css | コリス

2017/08/09 67 users コリス Flexbox float コンポーネント リセット

レイアウトにfloatを使用していた頃はグリッドを構築するために、複雑なHTMLやテクニックが必要になることがありました。しかし、flexboxやCSS Gridの登場で、レスポンシブ対応の柔軟なグリッドを簡単に利用できるようになりました。 そんな時代に合わせて、グリッドは無し、有用なコンポーネントが簡単に利用できるリセット用のスタイルシートを紹介します。 Shoelace.css Shoelac... 続きを読む

動画撮影時の構図の取り方がよくわかる「The Night Of - Framing a Crime Drama」 - GIGAZINE

2017/07/16 202 users フレーミング GIGAZINE 構図 フリーランス ゴールデン

ゴールデン・グローブ賞3ノミネートの犯罪サスペンス「 The Night Of( ナイト・オブ・キリング　失われた記憶 ) 」は フレーミング を利用して視聴者に視覚的なアプローチを行っています。そこで、フリーランスで映像制作を行うZackery Ramos-Taylor氏はドラマ画面に 三分割法 のグリッドを入れ、映像がどのような構図になっているのかをわかりやすくしたムービーを公開。写真とは違い... 続きを読む

Bootstrap 4のさまざまなコンポーネント・レイアウトの実装方法がすぐ分かる便利なチートシート | コリス

2017/06/26 95 users コリス カルーセル Bootstrap コンポーネント 作り方

Bootstrap 4のグリッドの作り方、カード型コンポーネント、ナビゲーション、カルーセル、フォームなどの実装コードとどのように実装されるかが一枚のページにまとめられた、Bootstrap 4のチートシートを紹介します ...記事の続きを読む 続きを読む

CSSの関数はどんどん便利になっている！minmax()を使うとMedia Queries無しでレスポンシブが簡単に実装できる | コリス

2017/06/14 917 users minmax コリス Calc CSS 関数

CSSの関数には便利なものがたくさんあります。例えば、div要素に「width: calc(100% - 50px);」と指定することで、幅いっぱいから50pxを引いた値を幅に適用できます。 minmax()関数はcalc()関数のように数字やキーワードを使って、要素の最小値と最大値を指定でき、簡単なCSSの記述でレスポンシブ対応の高度なレイアウトを作成できます。 下記のレスポンシブ対応のグリッド... 続きを読む

2017年にチェックしておきたい、CSSの軽量フレームワークのまとめ | コリス

2017/04/27 171 users コリス アクセシブル CSS 軽量フレームワーク 軽量

Flexboxで実装されたグリッドのみをはじめ、さまざまなコンポーネントが利用できるもの、ファイルがモジュール化されたもの、アクセシブルに特化されたものなど、2017年にチェックしておきたいCSSの軽量フレームワークを紹介します。 mini.css -GitHub mini.css テンプレート一覧 モバイルデバイスと最新のブラウザを考慮して設計された軽量（7KB）CSSフレームワーク。ほとんどの... 続きを読む

モバイルオンリー、グリッドの使い方の変化、ボタンに使われるアニメーションなど、Web制作者が備えておきたい現状とトレンドを解説 | コリス

2017/02/16 70 users コリス 人工知能 レイアウト ローディング時 WEB業界

モバイルファーストからモバイルオンリーへ、レイアウトのグリッドやローディング時のアニメーション、ボタンに使われるアニメーションも少しずつ変化し、人工知能によるデザインなど、Web業界は着実に進化しています。 Webデザイン、そしてグラフィックデザインで今起きている現状と知っておきたいトレンドを紹介します。 2016年は「モバイルファースト」の年でした。そして、2017年はついに「モバイルオンリー」... 続きを読む

[CSS]「calc()」を使うとスゴイ便利！ページのレイアウト、要素やフォントのサイズ指定など実装テクニックのまとめ | コリス

2017/02/09 322 users Calc rem メジャーブラウザ コリス センタリング

pxでも、%, em, rem, vw, vhなどの相対単位でも、異なる単位の計算式で値を指定できる「calc()」がどのように機能し、どのように使うのか、「calc()」を使うと便利になる要素のセンタリング、フォントサイズ、グリッドの作成などの実装例を紹介します。 Opera Miniを除くすべてのメジャーブラウザに「calc()」はサポートされており、レスポンシブとも非常に相性のよいCSSの関... 続きを読む

最後に笑うのは「グリット」を持った人だ：日経ビジネスオンライン

2016/11/30 290 users 忍耐 根性 天賦 容姿 情熱

米国ではここ数年、成功を収めるための最も重要な要素として「グリット」が注目を集めている。その意味は、努力・根性・忍耐・情熱。人生で成功するには、IQの高さや天賦の才よりも、グリットのほうが重要であることが、科学的にも裏付けられている。米国でも（日本でも）、かつては、グリットが尊重されていたが、つい最近まで、天賦の才や優れた容姿、富を持った人が称賛され、努力や忍耐は軽んじられる傾向にあった。しかし、... 続きを読む

全米エリートが絶賛する究極の能力「グリット」を身につけよう｜Career Supli

2016/11/02 816 users Grit Career Supli 究極 ホワイトハウス 見地

全米から引っ張りだこの心理学者が明かす「究極の能力」 私たちが人生で成功するために必要な「究極の能力」とは何か。そう問われてどんな答えを返しますか？その答えを科学的な見地から「やり抜く力（GRIT）」だと結論づけたのは、この研究でアメリカで「天才賞」とさえ呼ばれる「マッカーサー賞」を受賞したアンジェラ・ダックワースさんでした。 ここではビジネス、スポーツ界のみならずホワイトハウスや米国陸軍士官学校... 続きを読む

Photoshopで1クリックの時代がきた！Webページ用のグリッドも簡単に作成できる便利すぎる無料の機能拡張 -Bootcomp 2.0 | コリス

2016/08/10 332 users コリス デザインカンプ Bootstrap 時短 インストール

Webページやスマホアプリのデザインカンプを作成する時に、大幅な時短になる便利な機能がたくさん詰まったPhotoshop CC2015.5対応の機能拡張を紹介します。 Bootstrapでつくる時はもちろん、それ以外のデザイン作業でも強力な機能を発揮します。 Web制作に携わるすべての人が、入れておいて損はない機能拡張です。 Bootcomp Bootcompの特徴 Bootcompのインストール... 続きを読む

Bootstrap 3からBootstrap 4に移行する時に知っておく必要がある注意点のまとめ | コリス

2016/03/17 412 users コリス Bootstrap Flexbox class 単位

Bootstrap 4ではそのインストール方法をはじめ、グリッドの単位やレスポンシブ用のclassが変わり、そしてカードやツールチップなどの新しいコンポーネントやレイアウトにFlexboxも利用できるようになりました。 Bootstrap 3からBootstrap 4に移行する時に知っておく必要がある注意点をまとめたリストを紹介します。 How to Migrate from Bootstrap ... 続きを読む

[CSS]レスポンシブ対応ページに役立つ機能がまとめられたFlexboxを使ったスタイルシート(Sass対応) -Ocssipital | コリス

2015/11/26 51 users GitHub Flexbox コリス ひな形 CSS

レスポンシブ対応の柔軟なグリッドをシンプルに、そして簡単に実装することを目的に制作されたひな形として利用できるスタイルシートを紹介します。 レイアウトのベースに最適で、グリッドの設計、デバイスごとに異なるレイアウトや表示・非表示など、レスポンシブ対応ページに役立つ機能が揃っています。 Ocssipital Ocssipital -GitHub 補足: Flexboxの各プロパティの使い方は、以前の... 続きを読む

Webデザインの基本が身につく！ページのグリッド・レイアウト・要素配置の効果的な使い方のまとめ | コリス

2015/11/20 184 users コリス リソー レイアウト インフォグラフィック 縦長ページ

最近のWebサイトで見かけるさまざまなレイアウト、レスポンシブ対応のレイアウトの構成、縦長ページ・横長ページでグリッドの効果的な使い方、ランディングページの要素の配置など、デザインの勉強になるインフォグラフィック・リソー...記事の続きを読む 続きを読む