When it comes to finding the right class name, it can quickly drive you to despair. Even the most experienced CSS developers don't always find the right class name right away. This tool aims to help you to not get lost in the BEM cosmos by giving you naming-suggestions for some of the most common web components. If you still have no idea what BEM means, we have added some helpful links below. For

イージングなしとあり 画像ではイージングがわかりやすいようにグラフを入れてあります。 横が時間、縦がスケール、点がキーが打たれていることを表しています。 UIごとのイージング UI素材ごとにどのような緩急の付け方が良いのか迷うかと思います。 ダイアログアニメーション以外に、画面遷移時のUIの動きやクエスト開始演出など様々なアニメーションを入れるたびにどのイージングが正解なのか、それについては正解はありません。 ゲームの色味やデザイン、世界観を知らずにアニメーションは付けられません。 また、UIがどこまで世界観を踏襲するのかで、システムのような動きにするのか、世界観に合わせた動きにするのかも変わってきます。 こういった部分は関係部署にコミュニケーションをとってどんなゲームを作りたいのかを把握し、イージングはどうするのかを考えていきます。 そして、予備動作やオーバーシュートが必要なのか不要なの

🦠🦠🦠このスライドの内容の更新して記事にしたので、ICS MEDIAのほうを参照ください🦠🦠🦠 2020年に最適なfont-familyの書き方 - ICS MEDIA https://ics.media/entry/200317/ --- OSやブラウザのアップデートによりウェブサイトのフォントは影響を受けてきました。最近だとiOS 13 Safariでフォントが激太りを起こしたり、macOS CatalinaとChromeの組み合わせで明朝体化するウェブサイトが多発しました。 他にも「ＭＳ Ｐゴシック」の呪縛、「游ゴシック」の薄さ問題、アンチエイリアスの変化など問題はつきません。このライトニングトークでは、現代の最適解としてのフォント指定を紹介します。 Website fonts have been affected by OS and Browser updates. R

CSSにおけるブラウザによる互換性の問題はWeb制作でモダンブラウザをターゲットにした場合、以前に比べるとはるかに少なくなりました。昔から使用している無理なリセットCSSやすべてをリセットする必要は全くありません。 IE11のサポート終了から2年が経ち、現在はモダンブラウザの時代です。Chromeをはじめ、chromiumベースのEdge、Safari、Firefoxはエバーグリーンブラウザ（最新版に自動アップデートするブラウザ）と呼ばれています。 現在の制作環境に合わせて制作された新しいリセットCSSの中から特に注目すべきリセットCSSを紹介します。CSSのテクニックや知見も満載です！ リセットCSSとは リセットCSSの使い方・書く順番 どのリセットCSSが適しているかの選び方・カスタマイズ方法 A (more) Modern CSS Reset -モダンブラウザに最適化された新しいリ

面倒なpxからemへの変換や、line-heightの計算、レスポンシブを考慮した横幅可変の計算など、コーディング時に計算機が必要になる値の変換をまとめて行えるツールです。

Flexboxも、margin: auto;も、CSSでよく使うプロパティです。 このFlexboxとオートマージン（margin: auto;）を組み合わせると、さまざまなレイアウト・配置ができます。例えば、ナビゲーションのアイテムを配置する際に、ロゴだけ左端に、検索を右端に、といった配置もオートマージンが活躍します。 オートマージン（margin: auto;）の仕組み、CSS Flexboxとオートマージンの効果的な使い方を紹介します。 Flexbox: Aligning with Auto Margins by Samantha Ming 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Flexboxにおけるオートマージンの役割 マージンについて理解する オートマージンが常に優先される オートマージンの効果的な使い方 F

ApiFlashは任意のWebサイトのスクショを撮れるシンプルなAPIです。使い方も非常に簡単です URLとAPIキー、任意のパラメーターのみで完結できる仕様となっていてレスポンシブWebデザインにも対応可能です レンダリングはChromeが使われており、パラメーターを自動で付与してくれる簡単なURL生成ツールも備わっています 使ってみる動作サンプルは記事冒頭のSSです。本記事のスクショはApiFlashで作ってみました 流れとしてはユーザー登録し、管理画面に入るとAPIキーが発行されるので以下のように使えばOK https://api.apiflash.com/v1/urltoimage?access_key=【APIキー】&url=https://example.com/更にパラメーターを付ける事も出来ます https://api.apiflash.com/v1/urltoimage

Webサイトやスマホアプリでよく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのコードがまとめられたコレクションを紹介します。 フレームワークなども便利ですが、それだけを実装するためのコードなので、非常にシンプルでカスタマイズも簡単だと思います。 CSS Layout CSS Layout -GitHub CSS Layoutの特徴 CSSで実装するレイアウト・UIコンポーネント CSS Layoutの特徴 CSS Layoutはよく使われるレイアウトやUIコンポーネントだけを実装するためのHTMLとCSSのコードがまとめられたコレクションです。 MITライセンスで、商用プロジェクトでも無料で利用できます。

スクロールで全画面がスライドのように切り替わるウェブサイトの表現があります。手軽にこの表現を実装するJSライブラリ、fullPage.jsを使ったことのある方もいるのではないでしょうか？　かつては無料で使えたこのライブラリですが、現在はGPLライセンスのプロジェクト以外では使用料がかかります。 その一方、CSSとJavaScriptの進化により、このような表現をライブラリを使わずとも比較的簡単に実装できるようになりました。本記事では、基本的な機能をおさえた、全画面スクロールの実装方法を紹介します。 この記事を通じて以下の技術も学べます。 スクロールをピタッと止めるCSSプロパティscroll-snap-type 画面と要素の交差を検知するIntersection Observer API スムーススクロールが実装できるJavaScriptメソッドscrollIntoView() デモを別ウ

彼のこの記事を読んで、使い始めました。 タスク管理ツールって、過去いろいろと使っているんですけど、なかなかしっくり来るものがないんですよね。結果的に、Googleカレンダーにタスクを登録したり、メモ帳にToDoを記載したり……。 ただ、このRemember The Milkを使うと、なんかテンションが上がって抜け漏れなくタスク管理ができる。いやいや、絶対褒めすぎでしょって思ってたんですけど、いや、便利っすね。これはマジで。 詳細はここでは説明しません。もう、まさくにの記事を読んでください。 私は、無料プランを使っているんですけど、たしかにこれは有料プランを契約しても良いレベル。 Transmit https://panic.com/jp/transmit/ 続いて、FTP/SFTPクライアントのTransmitです。 今までは、Forkliftを使っていたんですけど、ここ一年くらいでこのソ

Get a transparent backgroundSlide to see how the background is removed with precision. More than a background eraserCreate amazing images. Add unique backgrounds to create outstanding designs. Make something beautiful 😍Print your images on stickers, buttons, coasters and more, starting at $9. Sign in to get started

「この Mac について」を使って、Mac にインストールされている Mac オペレーティングシステム (macOS) のバージョンを調べて、最新バージョンかどうかを確認できます。 画面の左上にある Apple メニュー  から「この Mac について」を選択します。ここで開くウインドウの見た目は、下の画像とは若干違うかもしれませんが、必ず macOS の名前に続いてバージョン番号が表示されます。ビルド番号も調べる必要がある場合は、バージョン番号をクリックすると、ビルド番号が表示されます。 この例では、「この Mac について」に macOS Sonoma 14.0 を搭載した Mac mini が表示されています。

カリグラフィ、ラインアート、ペインティングなど、さまざまなインクの質感で描けるPhotoshopのブラシ素材を紹介します。 ペンの描画から、水墨画のようなものまで、多くの絵画スタイルを模倣しています。 Free Inktober 2019 Photoshop Brushes ブラシ素材はInktober 2019に合わせて制作されたもので、個人でも商用でも無料で利用できます。詳しくはダウンロードファイルの「Rules.pdf」をご覧ください。 感圧対応、44種類のブラシ素材 よりリアルに見せるための15種類のテクスチャ素材 Photoshopのすべてのバージョンをサポート さまざまなインクをはじめ、スプレー、ウェットエッジ、グランジなどの特殊効果も含まれています。また、それらの質感をよりリアルに見せるためのテクスチャ素材も含まれています。

男性的 女性的 子どもっぽい レトロ アンティーク オールド モダン 伝統的 渋い 和風 丸い カクカク カジュアル フォーマル 存在感 インパクト 繊細 美しい 上品 高貴 元気 陽気 明るい 親しみ すっきり かわいらしい クール ポップ やさしい なごやか シンプル おしゃれ ホラー アニメ ゲーム 個性的 面白い くせある

スマホ、スマートウォッチ、タブレット、コンピュータ、ディスプレイなど、ほとんどすべてのデバイスが網羅されたモックアップ素材を紹介します。 iPhone 11 Pro, Google Pixel 3などの最新機種をはじめ、古い機種のモックアップ素材も揃っています。