Google Fontsには日本語フォントや英語フォントをはじめ、さまざまな言語のフォントをすべて無料で使用できます。いやー、いい時代ですね。 そんなGoogle Fontsの中からリーダビリティ、レジビリティに優れた、テキストを読みやすくするためにデザインされたアクセシブルなフォントを紹介します。教育機関で教材に使用されていたり、指導用として承認されているフォントをあります。
![全部、商用利用も無料! Google Fontsの中でも可読性・判別性に優れたフォントのまとめ、UIデザインにも最適](https://cdn-ak-scissors.b.st-hatena.com/image/square/f8937d5254920460c71024c040949e178b51f187/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202303%2F2023090210%402x.png)
HTML, CSS, JavaScript, PHPなどさまざまな言語に対応、コードのネストされたブロックを枠で囲って強調表示するVS Codeの機能拡張を紹介します。 さっそくインストールして使用してみましたが、これは見やすくなりますね! 枠のボーダーや背景、ネストの深さを自由に変更もできるので、自分が見やすいようにカスタマイズできます。 Blockman -GitHub Blockmanの特徴 Blockmanのインストール Blockmanの使い方 Blockmanの特徴 Blockmanは、コードのネストされたブロックを強調表示するためのVS Code拡張機能です。 サポートしている言語は、JavaScript, JSX, TypeScript, TSX, C, C#, C++, Java, Ruby, PHP, R, Go (Golang), Dart, Rust, Swift,
フリーフォントが大好物な人に朗報です! 🎉 先週、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に新しく追加された日本語
Chromeに新しく実装された「CSS Overview」が非常に便利なので、紹介します。 表示しているページのCSSの概要、カラー、フォント、メディアクエリ、未使用の宣言が一覧でき、制作したページの検証やスタイルガイドとしても役立ちます。 Chromeの新機能「CSS Overview」 Fyi: New in Chrome: CSS Overview Chromeの新機能「CSS Overview」の準備 Chromeの新機能「CSS Overview」の使い方 Chromeの新機能「CSS Overview」の準備 まずは、Chrome デベロッパーツールを開き、右上の歯車アイコン(Settings)をクリックします。
商用のプロジェクトでも無料で利用できる、管理画面・ダッシュボードのレイアウトやUIコンポーネントが揃ったテンプレートを紹介します。 このテンプレートを使用すると、管理画面・ダッシュボードで必要なコンテンツを簡単に作成できます。 Stisla 管理画面・ダッシュボードに特化されたUIコンポーネントがほとんどすべて揃ったテンプレート。 30以上のサードパーティのライブラリと統合、多くのコンポーネントを簡単に利用できます。 HTML5とCSS3で記述されており、すべてのモダンブラウザでサポートされています。 Bootstrap 4をベースに、Flexboxでレイアウトされています。 一部のコンポーネントにはより簡単にやり取りするために、JavaScript APIを使用。 MITライセンスで、商用プロジェクトでも無料で利用できます。
フローチャート ※依存関係・フローチャートはJavaScriptのみです。 対応言語は、下記の通り。 JavaScript TypeScript Python PHP Java C++ 望む言語が他にあればIssueにどうぞ、とのことです。 Code Crumbsのデモ デモでは、JavaScriptのコードでその動作を確認できます。 デモページ 依存関係はDependenciesをオンに、フローチャートはFlowChartタブをクリックします。 Code Crumbsの使い方 セットアップ codecrumbをインストールします(yarn global add codecrumbs)。 codecrumbs -d project-src-dir -e project-src-dir/index.jsを実行し、プロジェクトに合わせてパラメータを変更します。-dはソースコードを含むディレクト
サーバーサイドのレンダリング(SSR)を使用して、数分の1秒以内にページが高速に表示されるWordPressのフロントエンドを構築するテクニックを紹介します。 バックエンドのキャッシュと組み合わせることで、非常に高速になり、しかも安価にWordPressサイトを構築できます。 Zero-latency WordPress Front-end -GitHub 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様のライセンスを元に翻訳しています。 デモページ サーバーサイドのレンダリング(SSR) バックエンドのサービス 非キャッシュページのアクセス キャッシュページのアクセス キャッシュのパージ 始めてみよう Nginxの設定 バックエンドのJavaScript フロントエンドのJavaScript Cordova 終わりに デモページ サンプルのコードで何ができるのか
CSSの相対的な単位(em, rem)を使って、Webページで使われるUIコンポーネントのさまざまなサイズを変化させるスタイルシートのテクニックを紹介します。 em, remは文字の大きさだけでなく、画像やアイコンのサイズ、背景、フォーム、ボタン、配置など、さまざまな指定に利用できます。 Building Resizeable Components with Relative CSS Units 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 フォントのサイズを変化 縦と横の比率を維持したボタン 縦と横の比率を維持した画像 box-shadowを使ったボーダーの幅と高さ アイコンの幅と高さ、そして間隔も キャプション付き画像 装飾された背景 アイコン付き検索フォーム チェックボックスで実装されたトグル ブロックの一行の長さ ボタ
ひと昔前に、小さいドットを上からアニメーションで落として雪とか桜とかありましたが、これはそれらとは異なり、かなりリアルに雨を堪能できるスクリプトを紹介します。 ぼっーと見てると、音まで聞こえてきそうです。 Demo 2 雨はCanvasを使って再現しており、実装は下記のようになります。 <head> ... <script src="rainyday.js" type="text/javascript"></script> <script type="text/javascript"> function demo() { var engine = new RainyDay('canvas','demo1', window.innerWidth, window.innerHeight); engine.gravity = engine.GRAVITY_NON_LINEAR; engine.t
Microsoft公式のIEのデベロッパサイト「modern.IE」から、古いブラウザをサポートしつつモダンブラウザ用のサイトを制作する時に役立つアドバイスをクロスブラウザの観点や、HTML, CSS, JavaScriptの実装時ごとに紹介します。 20 tips for building modern sites while supporting old versions of IE 下記は、各ポイントを意訳したものです。 クロスブラウザ HTML CSS JavaScript クロスブラウザ ウェブサイトはすべてのブラウザで同じように見える必要はありません。 例えば、最新のブラウザではよりリッチなUIを提供し、古いブラウザではソリッドに機能させます。 開発をシンプルにするために、堅実なテンプレートを利用しましょう。 動作が安定しているスタンダードにフォーカスを合わせて制作する。 スタ
jQueryなどに依存せず単体で動作し、スクリプトがオフでも機能し、実装も非常にシンプルで、デスクトップやタブレット・スマフォそれぞれで最適な状態で表示し、IE6にさえ対応し、しかも超軽量のスクリプトを紹介します。 シンプルで、セマンティックなマークアップ 1.8KBの超軽量スクリプト 外部ライブラリは不要 CSS3アニメーションを使った美しいエフェクト タッチイベントをサポート クリックとタップの違いを調整 スクリプトがオフでも機能 MITライセンス 対応ブラウザ IE6をはじめ、デスクトップ・タブレット・スマフォの主要なブラウザ全て。 以下は、テスト済みのプラットフォームです。 iOS 4.2.1+ Android 1.6+ Windows Phone 7.5+ Blackberry 7.0+ Blackberry Tablet 2.0+ Kindle 3.3+ Maemo 5.0+
ウェブページを逆さまにしたり、傾けたり、クリック禁止にしたりなど、ちょっとしたイタズラをブログなどに仕込むjQueryのプラグインを紹介します。 Fool.jsの「Pranks」にイタズラの一覧があります Pranksの各アイテムをクリックすると、次のイタズラを実行します。 fallingScrollbar スクロールバーの消失 rick リック・アストリーの動画をスクリーン外で再生 hiddenVideos 意味不明な動画を再生 vanishingElements 任意の要素を消失 questionTime 米のアニメスポンジ・ボブのテーマソングを歌う upsideDown ページ表示を逆さまに h4xx0r ページを編集可能に wonky ページを傾ける flash ページをチカチカ表示 crashAndBurn エンドレスなループを実行 ※ブラウザクラッシュっぽいけど、実行しないよう
僕も常時使用しているOS X用のメモリ解放アプリ「Memory Magic」が一週間だけ無料です、「Memory Magic」の他にも4種類ほどご紹介。 メモリ解放アプリは数多くありますが、このアプリのUIが一番美しいと思います。そして美しいだけでなく、実用的! Memory Magic -App Store ツールバーに小さいアイコンが表示されるだけって、いいですよね。 今回の期間限定無料はOS Xの12周年とAppleの37周年を祝うもので、Memory Magicは通常250円のアプリ、リリース時に無料セールをしていましたが、その時以来のチャンスです。 他のメモリ解放アプリを使用している人も、この機会に一度試してみてはいかがでしょうか。 使い方は簡単で、アプリを起動しておくだけで、メモリを解放し最適化を行います。 起動するとメニューバーにアイコンが表示され、クリックするとメモリの状況
カフェで作業をすると捗る人も多いと思いますが、クリエイティブを引き上げるには、静かすぎても騒々しすぎてもダメで、中程度の騒音がよいそうです。 確かに、適度に騒音がある方が作業が捗りますよね。 会社でも自宅でも、カフェ気分になれるオンラインBGMサービスを紹介します。
HTML, CSSが使えるようになり、jQueryのプラグインを利用している人、専門用語ばかりでなく実制作に役立つ知識を基本からしっかり学びたい人にオススメの一冊「jQueryデザイン入門 改訂新版」を紹介します。 jQueryの入門書を買う時は、必ずこの本と比較することをオススメします。 通称「ドーナツ本」が3年ぶりに改訂新版としてでました。 改訂はjQuery1.9の対応だけではありません。 jQueryは1.3.2から、1.9.0に。 サンプルは全てXHTMLから、HTML5に。 IE6のテクニックは減らし、スマフォ向けテクニックを追加 お値段も3,500円から、2.980円(税別)に! ※値段変更は情報量はそのまま、レイアウトの密度をあげページ数削減でがんばったそうです。 サンプルは全て商用利用OKで、著作権表記の必要もなく、改変も自由です 購入者用のダウンロードページも用意されて
jQueryは1.9から大きく仕様がかわり、プラグイン開発者やウェブ制作者は今まで以上に各バージョンの互換性に苦労するようになりました。 たった一行加えるだけで、jQueryの複数のバージョンでのプラグインやウェブサイトの動作テストを簡単にできるスクリプトを紹介します。 ※jQuery以外のスクリプトにも対応しています。 デモページ version.jsの使い方 使い方は簡単! テストページに一行加えるだけです。 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <script src="version.js" data-url="google" data-lib="jquery" data-ver="1.5.0"></script> Step 2: スクリプトの実行 あとはjQueryのバージョンをパラメータに付与し、ページをロードするだけです。 http://
ウェブサイトをデスクトップ・タブレット・スマートフォンなど、クロスデバイス対応のレスポンシブデザインにする際、サイズを小さくしたりシンプルにするだけでなく、ユーザーの使い勝手を考慮した一歩先に進むためのUIデザインのガイドラインを紹介します。 UI Design Guidelines for Responsive Design 下記は各ポイントを意訳したものです。 はじめに デスクトップ タブレット スマートフォン おわりに はじめに レスポンシブデザインが誕生した時、ウェブ制作のコミュニティではそれを解決するための方法をすぐに考えだしました。多くのウェブサイトがレスポンシブに対応した今、そこから一歩先に進む時です。コーディングに注意を払うことは簡単ですが、いくつかのスクリーンサイズのためにデザインが犠牲になることがあります。 レスポンシブデザインの多くのリソースは基本をカバーするだけで、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く