nilabのブックマーク - はてなブックマーク

Tailwind CSSが私には合わなかった理由

ここ1,2年で、Tailwind CSSを使用する人が増えてきました。Tailwind CSSはユーティリティファーストのフレームワークで、いくつかのclassを組み合わせることでUIコンポーネントやレイアウトを簡単に実装できます。 Webデベロッパーによる、Tailwind CSSが私には合わなかった理由を紹介します。 Why Tailwind Isn't for Me by Jared White Tailwind CSSについて詳しく知りたい人は、以前の記事をご覧ください。 Tailwind CSSの便利な使い方、レイアウトやUIコンポーネント用のスタイルシートが簡単にまとめて利用できる CSSを書くのが劇的に楽になる！ユーティリティファーストのCSSフレームワーク「Tailwind CSS」下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得

nilab 2023/05/27

「Tailwind CSSは汚いHTMLを推進している」「ユーティリティCSSのみのHTMLの見た目」「Webコンポーネントが存在することを忘れてしまう」

リンク

CSSの:has()疑似クラスの便利な使い方を徹底解説

先日の記事で:has()疑似クラスがSafariでサポートされ、こんなことができるというのを紹介しましたが、さらに:has()疑似クラスを掘り下げ、Webサイトやアプリでの便利な使い方を紹介します。 :has()疑似クラスは、指定した要素がある場合にのみスタイルを適用できるCSSの新機能で、これからのWeb制作に活躍するかなり便利な機能です。こういう機能を待ち望んでいた人も多いと思います。たとえば、カードに画像がある場合、ナビゲーションに子メニューがある場合、ラッパーがある場合など、複雑なCSSが必要だったものやJavaScriptが必要だったものが簡単でシンプルなCSSで実装できます。 CSS Parent Selector by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに :has

nilab 2022/04/22

「CSSに新しいセレクタ:has()が登場し、特定の要素が親の中に存在するかなど、さまざまな要素を選択できるようになります」

リンク

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

フリーフォントが大好物な人に朗報です！ 🎉 先週、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に新しく追加された日本語

nilab 2021/08/30

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

リンク

JavaScriptエンジンの仕組みをGIFアニメで分かりやすく解説

Node.jsおよびChromiumベースのブラウザで使用されるJavaScriptエンジンの仕組みについてGIFアニメーションで分かりやすく解説された記事を紹介します。 🚀⚙️ JavaScript Visualized: the JavaScript Engine by Lydia Hallie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 JavaScriptを視覚的に解説: JavaScriptエンジン JavaScriptはクールです（私はそう思います）が、あなたが書いたコードをマシンが実際に理解するにはどうすればいいのでしょうか。JavaScriptデベロッパーは通常、コンパイラを自分で扱う必要はありません。しかし、JavaScriptエンジンの仕組みを理解し、人に優しいJavaScriptコードをどのように処理

nilab 2021/08/06

JavaScriptエンジンの仕組みをGIFアニメで分かりやすく解説 | コリス

リンク

Bootstrap 5のリリースはもうすぐみたい！注目の新機能、jQueryは削除、IE10のサポートは終了へ

Bootstrap 5のリリースがいよいよ近づいてきたようです。 Bootstrap 5では、jQueryは削除され、IE10のサポート終了が予定されており、注目すべき新機能を紹介します。 Bootstrap 5 release date and what's new about it by @zolidev 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに Bootstrap 5がリリースされる日 Bootstrap 5で注目の新機能 jQueryの削除 😱 IE10のサポート終了 📺 SVGのカスタムアイコン 🚀 JekyllからHugoへ切り替え 🔝 JavaScriptとCSSのアップデートはじめに Bootstrapがリリースされてから8年が経ち、現在では世界で最も人気のあるCSSフレームワークとなり

nilab 2020/03/10

「Bootstrapがリリースされてから8年が経ち、現在では世界で最も人気のあるCSSフレームワークとなりました。約1,800万ものWebサイトで使用されており、その数は現在でも増え続けています」

リンク

スマホにおけるボタンの配置、上と下、左と右、どのように配置するのが最適なのか詳しく解説

スマホでボタンをどこに配置するとユーザーは操作がしやすいのか？上部と下部、水平に並べたボタン、垂直に並べたボタン、3つ以上のボタンなど、ボタン配置について包括的な分析を行い、ボタンをどのように配置するのが最適なのか解説した記事を紹介します。 The Optimal Placement for Mobile Call to Action Buttons by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめにグーテンベルクの原則上部と下部のボタン水平に並んだボタン垂直に並んだボタン水平と垂直のハイブリッドスティッキーボタンまとめはじめにボタンをどこに配置するかによって、ユーザーがタスクを完了する時間に影響を与えることを知っていますか？タスクを素早く完了することで、より満足のいくエ

nilab 2019/09/04

スマホにおけるボタンの配置、上と下、左と右、どのように配置するのが最適なのか詳しく解説 | コリス

リンク

[CSS]ネコ好きにはたまらない！紐につかまった猫がぶらぶらするプリローダー -Cat Swinging on String

画像は一切無し、CSS+HTMLで実装された、紐につかまった猫がぶらぶらするCSSアニメーションを紹介します。ページが読み込まれる時のプリローダーで、こんなのがあったらずっと見ちゃいますねｗ

nilab 2019/02/01

「画像は一切無し、CSS+HTMLで実装された、紐につかまった猫がぶらぶらするCSSアニメーション」

リンク

スゴイのが登場！アニメーションの原則に基づいた自然な動きが実装できるReactのアニメーションライブラリ -React Spring | コリス

最近のWebサイトやスマホアプリのUIにアニメーションを実装する際、CSSだとeasingやdurationなどが欠かせません。しかし現状CSSだとそこが限界です。アニメーションの原則に基づき、パフォーマンスにも優れたアニメーションをシンプルなコードで実装できるReactのアニメーションライブラリを紹介します。 React Spring -GitHub React Springはanimatedのフォークで、物理シミュレーションベースのanimatedやReact-Motionとは異なり、アニメーションの原則に基づいて構築されています。フレーム単位でコンポーネントをレンダリングするのではなく、DOMに直接コミットしアニメーションさせるので、一見複雑そうな動きでも非常にシンプルなコードで実装でき、パフォーマンスにも非常に優れています。 WebサイトやスマホアプリのUIにぴったりなReac

nilab 2018/05/30

アニメーションの原則に基づいた自然な動きが実装できるReactのアニメーションライブラリ -React Spring | コリス

リンク

日本語フリーフォントの作者様に感謝！最近リリースされた日本語の無料フォントのまとめ

最近リリースされたひらがな・カタカナ・漢字が使える日本語のフリーフォント、文字数を増やしてバージョンアップされた日本語のフリーフォントを紹介します。活版印刷風のレトロなフォントから、映画やアニメの字幕風フォント、ネコっぽいかわいいフォント、古代生物の不思議系フォントまで、たくさんのフォントがリリースされています。

nilab 2016/05/31

日本語フリーフォントの作者様に感謝！最近リリースされた日本語の無料フォントのまとめ | コリス

リンク

javascript-best-2016-may.html

最近のWebサイトで見かける便利な機能や面白い仕掛けのコンテンツ、気持ちいいアニメーションを伴ったインタラクションやエフェクトを実装できるCSS、スクリプトやjQueryのプラグインを紹介します。

nilab 2016/05/17

最近のWebサイトで見かける便利な機能や仕掛け、気持ちいいアニメーションを実装するCSSやスクリプトのまとめ | コリス

リンク

CSS Flexboxで実装されたマンガのコマ割り風にデザインされたレスポンシブ対応のレイアウト

CSS Flexboxで実装されたマンガのコマ割り風にデザインされたカード型レイアウトを紹介します。しかもレスポンシブ対応で、スクリプトは使用されていません。マンガだとコマの位置に意味があるので、変化してしまうのはダメですが、カード型レイアウトにコマ割り風のデザインを適用と考えるといろいろと使えそうです。コマ割り風レイアウトの実装実装はシンプルです。 HTML 各カードは「<div class="panel"></div>」で実装されており、その中に画像やテキストや吹き出しを自由に配置できます。 <article class="comic"> <div class="panel"> <p class="text top-left">Suddenly...</p> <p class="text bottom-right">...something amazing happened</p

nilab 2016/05/11

CSS Flexboxで実装されたマンガのコマ割り風にデザインされたレスポンシブ対応のレイアウト | コリス

リンク

Lightroomに絶対入れておきたい！すごい無料プリセットのまとめ

プロのカメラマンが写真画像をレタッチする時に使用しているものから、カメラスクールで提供しているものなど、写真画像が見違えるLightroomの無料プリセットを紹介します。どんなアングルで撮影した写真でもOKです！

nilab 2016/02/29

「プロのカメラマンが写真画像をレタッチする時に使用しているものから、カメラスクールで提供しているものなど、写真画像が見違えるLightroomの無料プリセットを紹介」

リンク

[CSS]古いバージョンのIEがサポート終了したので、どんどん使っていきたいCSSのテクニックのまとめ

IE8がサポート外になり、喜んでいる制作者の人も多いと思います。正式版がリリース予定のjQuery 3もBootstrap 4もIE8はサポート外です。古いバージョンのIEをサポート外にすると、CSSで使えるテクニックも広がります。これからどんどん使っていきたいCSSのテクニックを紹介します。

nilab 2016/01/27

_[CSS]古いバージョンのIEがサポート終了したので、どんどん使っていきたいCSSのテクニックのまとめ | コリス

css

リンク

デザインは基本が大切！ひとつ一つをしっかり見直しておきたい20のデザインテクニック

文字の扱い方、レイアウト、カラー、エフェクトなど、プロのデザイナーがこだわっているデザインの基本となるルールと、ついやってしまう間違いとその解決方法まで、ワンランク上のデザイナーになるためにひとつ一つをしっかり見直したい20のデザインテクニックを紹介します。カーニングとはフォントの文字間のスペースを調整することです。カーニングの最終目的は、それぞれの文字の間が不自然な空白にならないように字面間のスペースを均等にし、テキストを美しく整然とした一つのまとまりにデザインします。カーニングがされていない、カーニングがいいかげんな仕事は、デザインの世界において大罪の一つです。カーニングはデザイナーが早い段階で身につけるべき重要なスキルです。 20 Typography Mistakes Every Beginner Makes 基本的だけど大切なタイポグラフィのシンプルな14のルールリーダビリ

nilab 2015/06/24

デザインは基本が大切！ひとつ一つをしっかり見直しておきたい20のデザインテクニック | コリス

リンク

[JS]なにこれ楽しい！インタラクション満載の路線図を実装するスクリプト -transitive.js

路線図の入り組んでいるところって、分かりにくいですよね。そんな問題を解決するCanvasで実装するインタラクション満載の路線図のスクリプトを紹介します。 ↓くっついてて分かりにくい箇所も、こんな感じに移動できます。デモページ上のアニメーションgifみたいに移動させることだけでなく、ホイール操作での拡大縮小やドラッグ操作などもできます。路線図は各要素（駅やルートなど）のテキストファイルを元に、Canvasで描画されています。各要素のデータ（オレンジのルート）はこんな感じです。 "route": "ORANGE", "from": "12488", "to": "7588", "fromName": "COURTHOUSE METRO STATION", "toName": "METRO CENTER METRO STATION", "routeShortName": "Orange

nilab 2014/05/23

_[JS]なにこれ楽しい！インタラクション満載の路線図を実装するスクリプト -transitive.js | コリス

リンク

[JS]設置も超簡単、あなたのウェブページのスクロールを慣性スクロールにするスクリプト -NiceScroll

live demo: IFrame iframeを使ったデモです。 div要素と同様にスクロールバーのカスタマイズ、コンテンツのズームが可能です。 NiceScrollの特徴既存のコードの修正無しで、簡単に設置ができます。ページのスペースを必要としないスクロールバーを設置できます。スクロールバーのデザインを変更できます。すべてのブラウザでマウス・キーボードでスクロールができます。スクロールは慣性スクロールに対応しており、スピードは調整可能。コンテンツのズーム機能。対応ブラウザ IE6を含めたデスクトップブラウザだけでなく、iPhone, iPadなどモバイルブラウザ、タッチデバイスに対応しています。 Firefox 4+ Chrome 5+ Safari 4+ (win/mac) Opera 10+ IE 6+ iPhone, iPadなどのiOSデバイス [ad#ad-2]