全部、完全に商用利用無料！ 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 ... 続きを読む

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

現役レースクイーン 「女性差別じゃなくて職業差別」 【 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はメディアクエリとグリッドのみ。 新しくなった... 続きを読む

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

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

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

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フレームワーク。ほとんどの... 続きを読む

[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 ... 続きを読む

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

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

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

CSSでよく使うコードのまとめ、ブレイクポイントの定義・Flexboxのグリッド・ボタン・フォーム・ユーティリティなど -Corpus | コリス

2015/10/15 243 users corpus コリス ユーティリティ CSS スニペット

Webサイトやブログを作成する時にCSSでよく使うコード、ブレイクポイントの定義・Flexboxのグリッド・ボタン・フォーム・画像周り・ライン・ユーティリティ・アニメーションなどがまとめられたCorpusを紹介します。 スニペットに登録したり、ブックマークしておくと便利ですね。 Corpus Corpusでは、作者自らが新しいプロジェクトを始める時によく使用するコードのセットをまとめており、汎用的... 続きを読む

2015年、Web制作者が押さえておきたいCSSの各種リセット、アニメーション、フレームワーク、アイコンのまとめ | コリス

2015/04/22 323 users ポパー コリス フレームワーク フレンドリー CSS

制作時に欠かせないリセット用のCSS、ページのグリッドやレイアウト・コンポーネントが用意されたフレームワーク、クリック・タップやホバーやスクロールを楽しませるアニメーション、モバイルにもフレンドリーなCSSでつくられたアイコンなど、ゼロから用意するのはかなり大変なCSSの便利なフレームワークを紹介します。 リセット用のCSSはこの3種類 レスポンシブ対応の定番フレームワーク Material De... 続きを読む

Webクリエイター専用定規「Web型定規」　手描きラフを美しく仕上げるために - ITmedia ニュース

2015/04/13 281 users ITmedia ニュース 目盛り エス ショッピングカート

テイ・デイ・エス リプラグ事業部は4月13日、Webページの構成案を美しく描くためのWebクリエイター向け「Web型定規」を発売した。価格は1500円と2000円（いずれも税別）。 Web制作で使用頻度の高い「4：3」「16：9」の基本的な画面比率や、「ホーム」「ショッピングカート」などよく使うアイコンなどのテンプレート、画面をグリッド分けするのに便利な12分割用の目盛りが入っている。 手描きでも... 続きを読む

Web制作に役立つ便利すぎるブックマークレットのまとめ | コリス

2015/04/02 306 users コリス ブックマークレット フォント ピクセル単位 構造

Webサイトの制作に役立つ便利なブックマークレットを紹介します。 ブラウザの機能拡張も便利ですが、入れすぎると重くなったり、Chromeで使えるけど他で使えないなどあるので、ブックマークレットもなかなか重宝します。 ページにグリッドを表示した確認 レスポンシブWebデザインの確認 デザインの確認をピクセル単位でできる ページで使用しているフォントをチェック ページをワイヤーフレーム化 ページの構造... 続きを読む

生まれつきの才能や、IQは一切関係ない。成功者に共通する「グリット」という能力とは？ | TABI LABO

2015/03/22 741 users Grit TED スピーチ ペンシルベニア大学 意志

あなたはグリット（Grit）という言葉を知っているだろうか？不屈の精神や意志の力と訳されることが多く、その力が成功と密接に結びついていると話題になっている。才能や、IQの高さとは違うグリットという能力。 ペンシルベニア大学の心理学者、Angela Duckworth氏がこの能力こそが成功の鍵だと発見した。彼女がTEDで語った、グリットと成功の関係性。彼女のスピーチの内容を簡単にまとめると、 1 成... 続きを読む

レスポンシブ対応の変化するグリッドを各デバイスの見え方を確認しながら設計できるオンラインツール -Shoelace | コリス

2015/03/19 172 users Shoelace コリス タブレット 設計 デスクトップ

スマホ・タブレット・デスクトップ、それぞれで変化するレスポンシブ対応のグリッドを確認しながら設計ができるオンラインツールを紹介します。 Shoelace 使い方は簡単、まずはページにアクセス！ 登録とかの面倒なことはあり...記事の続きを読む 続きを読む

Flexboxの勉強にも実務にも役立つ！レスポンシブ対応の柔軟なグリッドが簡単に実装できる -Flexbox Grid | コリス

2015/03/05 116 users Flexbox コリス カラム ネスト 天地

企業サイトやブログなどで使われるシンプルなグリッドをはじめ、オフセットのカラム、ネストのグリッド、左・右・天地揃えと中央揃え、逆順配置など、柔軟なグリッドが簡単に実装できるスタイルシートを紹介します。 Flaxboxを勉...記事の続きを読む 続きを読む

Bootstrap以外のCSS Frameworkを知らない人必見！CSSフレームワーク４４選 | エンジニア転職求人情報×IT人材紹介@SAK

2015/02/03 527 users CSS Framework Bootstrap 人必見 沢山

CSS Framework 2015年になったので、現状のCSSフレームワークをまとめてみました。Bootstrap以外にも沢山あります。 かなりの量があるのですが、単一機能のみ（グリッドだけとか）などもあります。 一通り見てみると、やはりBootstrapが良いなとは思うのですが、個人的にはSemantic UIが良いなと思いました。 名前空間の考え方や、設定はBootstrapが一番洗練されて... 続きを読む

成功者が共通して持つ「グリット」という能力--才能でも、努力でもない第3の要素とは？ | ログミー[o_O]

2014/12/22 849 users ダックワース ログミー 才能 スピーカー TED

成功に必要なのは努力か、才能か？　長年にわたり議論されるこの問いに対して、心理学者のAngela Lee Duckworth（アンジェラ・リー・ダックワース）氏は、新たな説を提唱します。彼女が語った、第３の成功因子「グリット」とは？（TEDより） 【スピーカー】 ペンシルバニア大学　心理学教授　Angela Lee Duckworth（アンジェラ・リー・ダックワース） 氏 【動画もぜひご覧くださ... 続きを読む