日本語フォントがGoogle Fontsに大量追加！すべてのフォントが商用利用も無料のフリーフォントです | コリス

2021/08/29 1620 users フリーフォント フォント ライセンス 大好物 たくさん

フリーフォントが大好物な人に朗報です！ ? 先週、Google Fontsに日本語フォントが追加されたので、紹介します。これでさらに、たくさんの日本語フォントがGoogle Fontsで使用できます。 新しく追加された日本語のGoogle Fonts 他にもたくさんある日本語のGoogle Fonts Google FontsのライセンスはほとんどがSIL Open F... 続きを読む

ピクセルフォントが大好物な人に！第1・第2水準漢字まで収録された商用無料のフリーフォント -マルモニカ | コリス

2021/07/05 559 users ライ 新作フォント フリーフォント ひらがな・カタカナ 可読性

ピクセルフォントが大好物な人に朗報です！ ピクセルフォントを多数リリースしているx0y0pxFreeFontから新作フォント「マルモニカ」がリリースされました。 可読性に優れたピクセルフォントで、ひらがな・カタカナ・英数記号文字をはじめ、JIS第1水準漢字2965字、第2水準漢字3390字が完全収録されています。さらに、ライ... 続きを読む

CSSの進化がすごすぎる！新しいレスポンシブデザインの実装方法を解説 | コリス

2021/05/27 554 users ビューポート CSS コンポーネント アニメーション 進化

現在のレスポンシブデザインは、ビューポートにもとづいてレイアウトを最適化しています。しかし、新しいレスポンシブデザインでは、アニメーションが不要なユーザーには動きを少なくしたり（無くしたり）、親コンテナの幅にもとづいてコンポーネントを最適化したり、スコープ付きスタイルやフォームファクターなど、ユ... 続きを読む

最近の実装に合わせた最新版HTMLテンプレート、基本構造に使用するすべての要素とその役割も解説 | コリス

2021/04/27 783 users プログレッシブエンハンスメント preload 実装 役割

最近の実装に合わせた、Webページ用のHTMLテンプレートを紹介します。 レスポンシブ用のHTML、ソーシャルメディア用のHTMLをはじめ、高速表示に欠かせないrel="preload"なども含まれています。IEなどの古いブラウザはプログレッシブエンハンスメントで対応しています。 HTMLテンプレートはすべての要素の役割を各行ごと... 続きを読む

HTMLのtableにクラスを加えるだけで、グラフやチャートを簡単に実装できるCSSのフレームワーク -Charts.css | コリス

2021/03/22 602 users table フレームワーク アクセシブル CSS グラフ

棒グラフや折れ線グラフ、どうやって実装していますか？ Charts.cssなら簡単です。データをtableタグで実装し、CSSのクラスをtableに加えるだけで横棒グラフ、棒線グラフ、折れ線グラフ、エリアグラフなどを簡単に実装できるCSSのフレームワークを紹介します。 HTMLは普通の表組みなのでアクセシブル、グラフやチャート... 続きを読む

2021年、HTMLやCSSやJavaScriptなどのコードを書く時に便利なVS Codeの機能拡張のまとめ | コリス

2021/03/04 524 users デベロッパー CSS HTML VS Code コミュニティ

Visual Studio Code（以下、VS Code）が素晴らしいエディタである理由の一つは、デベロッパーの生産性を向上させるコミュニティによって作成された機能拡張の巨大なライブララリがあることです。 その中から、...記事の続きを読む 続きを読む

フォントや画像の管理はこれがオススメ！シンプルで使いやすい、WinMac両対応アプリ「Eagle」が神アップデート | コリス

2021/03/02 683 users Eagle フォント フォルダ分け JPG,PNG PDF

以前当ブログで紹介した時からずっと愛用しているEagleがver.2に神アップデートしたので、改めて紹介したいと思います。 簡単に言うと、フォント（ttf,otf,ttc,woffも）、画像（jpg,png,gif,svg,webpはもちろん、raw,psd,ai,xd,sketch,clipも）、動画、音声、PDFやテキストも管理でき、タグ付けやフォルダ分けやカラーフ... 続きを読む

よく見かけるレイアウト・UIコンポーネント、それだけを実装するHTMLとCSSのシンプルなコードのまとめ | コリス

2021/02/18 748 users UIコンポーネント スニペット ナビゲーション レイアウト

Webページやスマホアプリでよく見かけるレイアウト、ナビゲーション、UIコンポーネントなど、それだけを実装するHTMLとCSSのシンプルなコードをまとめたCSS Layoutを紹介します。 それだけを実装するため、HTMLとCSSのコードは非常にシンプル、カスタマイズも簡単だと思います。スニペットに登録しておくと、便利ですね... 続きを読む

ググるのはデベロッパーにとって最も重要なスキルの1つ、知っておくと便利なGoogle検索のテクニック | コリス

2021/02/09 635 users デベロッパー ツイート テクニック 下記 スキル

ググることは、すべてのデベロッパーにとって最も重要なスキルの1つです。知っておくと便利なGoogle検索のテクニックを紹介します。 完全一致の""はよく使用しますが、..や*は知りませんでした、便利ですね。他にも便利なのがあれば、ツイートなどで教えてください。 Use Google like a pro by Marko Denic 下記は各ポイ... 続きを読む

JavaScriptの基礎知識をGIFアニメで分かりやすく解説 -総まとめ | コリス

2020/12/15 956 users スコープチェーン GIFアニメ イベントループ 基礎知識 解説

JavaScript QuestionsのLydia Hallie氏の「JavaScript Visualized」シリーズすべての翻訳を完了したので、まとめて紹介します。 JavaScriptエンジンの仕組みをはじめ、イベントループ、スコープチェーン、プロトタイプ継承、非同期処理、ジェネレータ関数、Hoisting（巻き上げ）など、GIFアニメを使用して詳しく解説して... 続きを読む

フォントが大好物な人は要チェック！2020年、日本語の新作フリーフォントのまとめ | コリス

2020/12/02 644 users デザインフォント 新作フリーフォント フォント 明朝体 大好物

2020年もあと残り1ヵ月、今年リリースされたひらがな・カタカナ・漢字が使える日本語の新作フリーフォントを紹介します。 明朝体、ゴシック体、デザインフォント、手書きフォントなど、盛りだくさんです！ マメロン Hi-Regular 個人・商用サイトで無料利用可。同人誌や各種印刷物なども可。 個人的にも特にお勧めの「マ... 続きを読む

Webページ高速化に必須の知識！ブラウザがWebページをどのようにレンダリングしているか、図を用いて解説 | コリス

2020/11/12 1084 users レンダリング CSS HTML 実装時 JavaScript

ブラウザがWebページをどのようにレンダリングしているか、図を用いてやさしく解説した記事を紹介します。 レンダリングの仕組みを理解することで、HTMLやCSSやJavaScriptなど実装時にも気をつける点があります。 How the browser renders a web page by James Starkie 下記は各ポイントを意訳したものです。 ※当ブログ... 続きを読む

全部、完全に商用利用無料！さまざまなUIデザインに適した1,064種類のSVGアイコン素材 -Emblemicons | コリス

2020/10/02 642 users SVG PNG SVGアイコン プレゼン SVGアイコン素材

企業サイトやプロダクトをはじめ、オンラインショップ、アプリ、プレゼン、学術プロジェクトなど、さまざまなUIデザインに適したSVGアイコンが無料で利用できるEmblemiconsを紹介します。 先日ローンチしたばかりで、アイコンの種類はなんと1,064種類！ SVGだけでなく、各サイズのPNGも揃っており、すべてオープンソース... 続きを読む

2020年、オンラインサービスやWebアプリの開発を独学で勉強したい人に役立つ練習プロジェクトのまとめ | コリス

2020/09/17 592 users タスク 需要 スマホアプリ バックエンド プロジェクト

Webアプリやスマホアプリ、オンラインショップ、オンラインサービスなど、Web開発における一通りの需要に応えられるような知識・スキルを練習するのに役立つプロジェクトを紹介します。 8つのプロジェクトにはそれぞれ異なる課題が設定されており、開発者が行う実際のタスクが反映されています。 バックエンドが中心です... 続きを読む

Gitでよく使用するコマンドをGIFアニメで解説 | コリス

2020/04/21 652 users Git リベース コマンド フェッチ GIFアニメ

Gitでよく使用するコマンドが何を行っているかをGIFアニメで解説した記事を紹介します。 Gitのマージ、リベース、リセット、チェリーピック、フェッチ、プル、リフログなど、コマンドを実行した時にブランチはどのように相互作用し、履歴にどのような影響を与えるのか視覚的に学べます。 ?? CS Visualized: Useful Git... 続きを読む

2020年用、日本語のフリーフォント417種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記 | コリス

2019/12/12 637 users フリーフォント フォント 商用 クライアント 明記

個人でも商用でも無料利用できる、日本語のフリーフォント417種類を紹介します。 Webデザイン、アプリ、動画、紙のデザインをはじめ、クライアントのプロジェクトでも販売する同人誌まで、幅広く利用できる無料フォントが満載です！ ついにフリーフォントのまとめが、400種類を超えました！ 初紹介のフォントから既存フ... 続きを読む

管理画面用のレイアウトやUIコンポーネントがほとんどすべて揃った、商用利用無料のHTMLテンプレート -Stisla | コリス

2019/11/18 575 users スペ UIコンポーネント 商用 テンプレート レイアウト

商用のプロジェクトでも無料で利用できる、管理画面・ダッシュボードのレイアウトやUIコンポーネントが揃ったテンプレートを紹介します。 このテンプレートを使用すると、管理画面・ダッシュボードで必要なコンテンツを簡単に作成できます。 Stisla 管理画面・ダッシュボードに特化されたUIコンポーネントがほとんどすべ... 続きを読む

UIのデザインでよく見かける、目の錯覚による違和感を取り除くデザインテクニックのまとめ | コリス

2019/10/31 803 users Visu 均整 錯覚 違和感 テクニック

WebページやスマホアプリのUIをデザインした時に、数値上は均整がとれているのに、人の目の錯覚で違和感を感じることがあります。ちゃんと揃えて配置したのに、同じサイズなのに、同じ色なのに、なんだか違和感があることはありませんか？ この目の錯覚による違和感を取り除くUIデザインのテクニックを紹介します。 Visu... 続きを読む

ReactとVueの比較、全く同じアプリを作成してみて分かった相違点 2019年Edition | コリス

2019/10/17 507 users React Vue Edition フック 工程

日常的にVueを使用している開発者が、ReactとVueで全く同じアプリを作成した時のそれぞれの工程を比較して分かった相違点を紹介します。 特に、Reactのフックについて具体的な使い方が解説されています。 I created the exact same app in React and Vue. Here are the differences. [2019 Edition] by Sunil Sandhu 下... 続きを読む

Adobe系ソフトの代替ソフトウェアのまとめ、Photoshop, Illustrator, Lightroom, After Effectsなど | コリス

2019/09/24 999 users Lightroom Illustrator animate

Photoshop, Illustrator, InDeign, Animate, Lightroom, Dreamweaver, After Effects, Auditionなど、Adobe系ソフトの代替ソフトウェアを紹介します。 有名なものからあまり知られていないものまで、買い切り、オープンソースで無料、日本語対応のものなどいろいろあります。 Photoshopの代替ソフトウェア Illustratorの... 続きを読む

VSCodeでコードを書く時に役立つ設定・テーマ・機能拡張、知っておくと便利なテクニック | コリス

2019/08/08 536 users vscode extensions Theme テクニック

Visual Studio CodeでWeb制作・開発のコードを書く時に役立つ設定・テーマ・機能拡張、知っておくと便利なテクニックを紹介します。 My Web Development VS Code Settings, theme, Extensions, tips and tricks br lampewebdev(@lampewebdev) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様... 続きを読む

実はHTMLだけで多くのことが実現できる！知っておくと便利なHTMLの使い方 | コリス

2019/07/23 779 users CSS 一昔前 コード JavaScript かなり

HTMLだけで多くのことが実現できるのは素晴らしいことです。一昔前までは、CSSやJavaScriptを使用しなければできなかったこと、かなり複雑なコードを書かなければできなかったことが、実はHTMLだけで多くのことが実現できます。 知っておくと便利なHTMLの使い方をまとめて紹介します。 HTML can do that? by Ananya Neog... 続きを読む

フリーフォントの作者様に感謝！最近リリースされた日本語フリーフォントのまとめ -2019年上半期 | コリス

2019/07/05 572 users フリーフォント 日本語フリーフォント 感謝 作者様

最近リリースされたものを中心に、ひらがな・カタカナ・漢字が使える日本語の新作フリーフォントを紹介します。 レトロなフォント、漫画や同人誌にぴったりなアンチック書体、プログラミング向けの等幅フォント、タイトルやコピーに使えるデザインフォントなど、たくさんのフォントがリリースされています。 最近のだけ... 続きを読む

これは便利すぎる！1クリックで画像から背景だけを切り抜く「Remove.bg」がついにPhotoshopに対応 | コリス

2019/05/13 518 users エクステンション 切り抜き remove.bg 背景 下記

画像から1クリックで簡単に背景だけを切り抜くオンラインサービス「Remove.bg」がPhotoshopに対応したので紹介します。しかも無料で利用できます！ Photoshopのエクステンションとして利用でき、1クリックで背景だけを画像から切り抜くことができます。下記の切り抜きも1クリックだけです。 写真: ぱくたそ Remove.bg fo... 続きを読む

キャンセルボタンに色をつけてはいけない理由 | コリス

2019/04/16 549 users ユーザー カラー アクションボタン デザイン キャンセルボタン

キャンセルボタンをデザインする時に、カラーで悩むことはありませんか？ キャンセルボタンに色をつけてはいけない理由、ニュートラルなグレーが適している理由を紹介します。 キャンセルボタンのデザインがアクションボタンと同じだと、ユーザーは迷ってしまいます。キャンセルできることを明確にすることで、認知速度... 続きを読む