Google Fontsには日本語フォントや英語フォントをはじめ、さまざまな言語のフォントをすべて無料で使用できます。いやー、いい時代ですね。 そんなGoogle Fontsの中からリーダビリティ、レジビリティに優れた、テキストを読みやすくするためにデザインされたアクセシブルなフォントを紹介します。教育機関で教材に使用されていたり、指導用として承認されているフォントをあります。
WebページのURLを入力するだけで、編集可能なFigmaデザインに変換できる無料プラグインを紹介します。 AppleなどのWebページを1クリックで変換するのはもちろん、日本語のWebページでも問題なく動作しました。Webデザインの勉強用に、既存サイトをリニュアールする用にも便利ですね。 html.to.design -Figma URLを入力するだけでFigmaに変換 html.to.designの利用方法 html.to.designの使い方 URLを入力するだけでFigmaに変換 html.to.designは、URLを入力するだけでFigmaに変換できる無料のプラグインです。さまざまなWebページを編集可能なFigmaデザインに変換します。 すべてをゼロから作成することなく、別のWebサイトを使用して独自のデザインのインスピレーションを得られます。 既存のWebサイトをリデザイン
1,500種類以上のアイコンが揃った、Webサイトやスマホアプリにぴったりなシンプルにデザインされた無料アイコンを紹介します。 オープンソースで個人でも商用でも無料で利用できます。また、SVGアイコンとアイコンフォントで利用できるので、サイズやカラーの変更はCSSでできます。アイコンはリスト、固定幅、アニメーションにも対応しており、かなり便利だと思います。 Boxicons Boxicons -GitHub Boxiconsの特徴 Boxiconsの使い方 Boxiconsを実際に使ってみた Boxiconsの特徴 Boxiconsはオープンソースのプロジェクトで、1,500+種類のSVGアイコン・アイコンフォントが簡単に利用できます。シンプルなデザインは、さまざまなWebサイトやスマホアプリにぴったりです。 けっこう前にも紹介しましたが、アップデートされ続け、アイコンの種類や機能がだいぶ
フリーフォントが大好物な人に朗報です! 🎉 先週、Google Fontsに日本語フォントが追加されたので、紹介します。これでさらに、たくさんの日本語フォントがGoogle Fontsで使用できます。 新しく追加された日本語のGoogle Fonts 他にもたくさんある日本語のGoogle Fonts Google FontsのライセンスはほとんどがSIL Open Font Licenseで、商用プロジェクトでも無料で利用できます。他に採用されているライセンスはAPACHE LICENSE, VERSION 2.0です。 フリーフォントが大好物な人には、下記もお勧めです! 2021年用、日本語のフリーフォント523種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記 新しく追加された日本語のGoogle Fonts まずは、先週Google Fontsに新しく追加された日本語
現在のレスポンシブデザインは、ビューポートにもとづいてレイアウトを最適化しています。しかし、新しいレスポンシブデザインでは、アニメーションが不要なユーザーには動きを少なくしたり(無くしたり)、親コンテナの幅にもとづいてコンポーネントを最適化したり、スコープ付きスタイルやフォームファクターなど、ユーザーの好みや環境に合わせて最適なコンテンツを提供できるようになります。 これらの新しいレスポンシブデザインのコンセプト・実装方法を紹介します。CSSがこれまで以上に進化します。 The new responsive: Web design in a component-driven world by Una Kravets 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 レスポンシブデザインの現状 ユーザーでレスポンシブ コンテナでレス
現在のWeb制作だと、既存のReset.cssやNormalize.cssには不足を感じると思います。それらの代替手段として制作された新しいCSSリセットを紹介します。 Reseter.cssは各ブラウザの最後から5つ前までのバージョンをサポートし、アクセシビリティにも配慮されており、CSSのテクニックや学びも満載です。 Reseter.css Reseter.css -GitHub Reseter.cssの特徴 Reseter.cssの使い方 Reseter.cssの中身 Reseter.cssの特徴 Reseter.cssは現在のWeb制作に合わせて制作された新しいCSSリセットで、ブラウザによって事前に作成されたすべてのスタイルをリセットします。クロスブラウザのエクスペリエンスを向上させるために、ブラウザのスタイルシートを正規化します。 Reseter.css バグやブラウザの不整合
棒グラフや折れ線グラフ、どうやって実装していますか? Charts.cssなら簡単です。データをtableタグで実装し、CSSのクラスをtableに加えるだけで横棒グラフ、棒線グラフ、折れ線グラフ、エリアグラフなどを簡単に実装できるCSSのフレームワークを紹介します。 HTMLは普通の表組みなのでアクセシブル、グラフやチャートはレスポンシブにも完全対応した優れものです。 Charts.css Charts.css -GitHub Charts.cssの特徴 Charts.cssのデモ Charts.cssの使い方 Charts.cssの特徴 Charts.cssはtableで実装した表組みにシンプルなCSSのクラスを加えるだけで、さまざまなグラフやチャートを実装できるフレームワークです。カスタマイズも簡単で、ユーティリティのクラスも豊富に用意されています。 HTMLとCSSだけで実装 セマ
CSSやHTMLやJavaScriptをはじめ、カラーやフォントやアクセシビリティなど、Web制作時に役立つオンラインツールをまとめたTiny Helpersを紹介します。 無料で利用できるツールがまとめてあるので、非常に便利です。
以前当ブログで紹介した時からずっと愛用しているEagleがver.2に神アップデートしたので、改めて紹介したいと思います。 簡単に言うと、フォント(ttf,otf,ttc,woffも)、画像(jpg,png,gif,svg,webpはもちろん、raw,psd,ai,xd,sketch,clipも)、動画、音声、PDFやテキストも管理でき、タグ付けやフォルダ分けやカラーフィルターなどで整理も簡単できるアプリです。 Windows, macOS(M1対応)に対応したアプリで、1ライセンスで2つ使用でき、サブスクではなく買い切り、しかもバージョンアップの追加料金なしです。 ver.2が先日リリースされ、ver.1の人は無料でアップデートできます! Eagle Eagleとは Eagle ver.2の神アップデート Eagleのダウンロード・インストール Eagleの使い方 Eagleとは Eag
ググることは、すべてのデベロッパーにとって最も重要なスキルの1つです。知っておくと便利なGoogle検索のテクニックを紹介します。 完全一致の""はよく使用しますが、..や*は知りませんでした、便利ですね。他にも便利なのがあれば、ツイートなどで教えてください。 Use Google like a pro by Marko Denic 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 以下に紹介する方法は、それぞれを組み合わせて使用することもできます。 "what is javascript" Google検索でキーワードをダブルクォーテーション("")で囲むと、完全一致検索をします。
レスポンシブの確認ツールやサービスをいろいろ紹介してきましたが、ついに本命とも言える無料ツールの登場です! Windows, macOS, Linux対応で、しかもオープンソース、快適にレスポンシブの確認ができるResponsively Appを紹介します。5つのデバイスを同時にすれば、制作時間は5倍速くなります。 無料とは思えないほど高性能で、すべてのWeb制作者にお勧めです! Responsively App Responsively App -GitHub Responsively Appの特徴 Responsively Appのダウンロード Responsively Appの使い方 Responsively Appの特徴 Responsively Appは、レスポンシブのWeb制作に役立つElectronで構築されたブラウザです。 ユーザーインタラクションは、すべてのデバイス間でミ
フリーフォントが大好物な人に朗報です! 日本語のフリーフォント、英語のフリーフォント、そして多言語のフリーフォントが大量に収録されたフォント集の書籍を紹介します。 フォントを探すのが手間、各サイトからダウンロードするのが面倒な人にぴったりな一冊だと思います。また、配布中止になってしまうってこともあるかもしれません。 本書の書籍版にはDVDが付録としてあり、再配布可能な(または許諾を得たもの)フリーフォントのファイルとフリーフォントのリンクがデータとして収録されています。 紙面ではフォントすべての文字サンプルとライセンスが記載されており、インストール方法、フォントを使用したデザイン、フォント管理ツールなどが解説されています。
サーバーサイドのレンダリング(SSR)を使用して、数分の1秒以内にページが高速に表示されるWordPressのフロントエンドを構築するテクニックを紹介します。 バックエンドのキャッシュと組み合わせることで、非常に高速になり、しかも安価にWordPressサイトを構築できます。 Zero-latency WordPress Front-end -GitHub 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様のライセンスを元に翻訳しています。 デモページ サーバーサイドのレンダリング(SSR) バックエンドのサービス 非キャッシュページのアクセス キャッシュページのアクセス キャッシュのパージ 始めてみよう Nginxの設定 バックエンドのJavaScript フロントエンドのJavaScript Cordova 終わりに デモページ サンプルのコードで何ができるのか
2018年12月7日にWordPress 5.0がリリースされ、Gutenberg(グーテンベルグ)が投稿エディタとして新しく登場しました。 WordPressの創始者で、現役の開発者でもあるMatt Mullenweg氏による、Gutenbergについてよくある質問集を紹介します。 Gutenbergの準備を確認する方法、導入手順、今後のアップデート予定、特定のユーザーだけが利用できるようにするには、次のメジャーバージョンアップはどうなるのか、など気になる情報が満載です。 WordPress 5.0: A Gutenberg FAQ 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Gutenberg(グーテンベルグ)とは何ですか? なぜGutenbergが必要ですか? なぜブロックが使用されるのですか? なぜエディタが変更され
フリーフォントとは思えないほどかっこいい!ミニマルにデザインされたPhotoshopとIllustrator用のロゴ素材
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く