地味だけど嬉しい新機能！ フォームのセレクトボックスで区切り線にhrを使用できるようになりました
先日リリースされたChrome 119に地味だけど嬉しい新機能が実装されていたので、紹介します。 フォームのセレクトボックスで区切り線にhrを使用できるようになりました。すでにSafariでもサポートされており、これでChorme, Edgeでも使用できます。 Select element: now with horizontal rules by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 select要素内で区切り線（hr）を使用できるようになりました select要素内の区切り線（hr）の実装方法 select要素内の区切り線（hr）のデモ select要素内で区切り線（hr）を使用できるようになりました 11/1にリリースされたChrome 119では、
【保存版】心地よいWeb遷移アニメーションの基本ルール6個まとめ
※この記事は、Mediumで公開された「Transition animations: a practical guide」の著者Dongkyu Leeから許諾を得て、日本語翻訳しています。 Webサイトやスマホアプリにおいて、アニメーションと動きの重要さは年々高まっており、今では必須と言われるまでになっています。 ユーザー エクスペリエンスの権威ニールセン・ノーマン・グループは、「アニメーションは注目を集めるだけでなく、ユーザーの楽しみを高め、製品を新鮮でモダンなものに感じさせてくれる」と述べています。 アニメーションが十分に洗練されていれば、ユーザーにはっきりとしたフィードバックを与えることができ、インターフェイスをより直感的にすることができます。 特に遷移アニメーション（Transition Aniatiions）は、ユーザーをある段階から次の段階へとスムーズに誘導するため、重要な役割
Figmaのチームとプロジェクトの違いって？ 料金体系を含めわかりやすく解説 - ICS MEDIA
ブラウザ上で共同編集ができるデザインツールのFigma。今回は、Figmaのワークスペース（チーム、プロジェクト、ファイル、ページ等）の関係性を説明します。 Figmaのワークスペースは、課金の仕組みにも大きく関わっているため、しっかりと理解しておきましょう。デザイナーだけでなく、マネージャーなど決裁権を持つような役職の方にとっても役に立つ内容です。 全体のワークスペースイメージ Figmaのワークスペースは、チーム（Team）を中心に構成されています。チームは、複数のプロジェクト（Project）を持ち、プロジェクトは複数のファイル（File）を持ちます。さらに、ファイルの中には複数のページ（Page）を持ちます。 無料のスタータープランを利用している場合、プロジェクトは1つしか作れず、ファイルやページは3つまでしか作れません。 有料のプロフェッショナルプランを利用している場合、このよう
WordPressのプラグイン・ACF Extendedの充実した機能を紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
はいさい！ エンジニアのうーまーです。沖縄からフルリモートでLIGでお仕事しています。 今回は、WordPressのカスタムフィールドプラグインとしてデファクトスタンダードなACFを拡張する、ACFのアドオンプラグインのご紹介です。 ACFはそれだけで神的な存在ですが、たまに「こういう機能もあったらいいなー」と思うこともあります。そういうかゆいところに手が届くようにしてくれるのがこのACF Extendedです。 機能があまりにも多すぎてすべては紹介しきれないのですが、個人的にすごいと思う機能をいくつかピックアップして紹介したいと思います。 ACFとは？その拡張とは？ Advanced Custom Fields (ACF) とは、WordPressの投稿ページや固定ページ、カテゴリ、コメント欄など任意の箇所へ入力欄を追加できるWordPressの追加機能（プラグイン）です。 テキストや画
少しのコードで実装可能なHTML小技集
2023年2月7日 HTML これまで「少しのコードで実装可能な10のCSS小技集」シリーズでCSSのちょっとしたTipsを紹介していましたが、今回はHTMLバージョン！知っていると使い勝手がちょっとよくなる小技を集めました！ ↑私が10年以上利用している会計ソフト！ 目次 セレクトメニューの選択肢をグループ化 type 属性値によって入力欄が変化 スマートフォンでエンターキーのテキストを変える 画像の遅延読み込み テキストの折り返し位置を指定する 番号付きリストの順番を変更する 簡単アコーディオン 任意のテキストを自動翻訳させない リンク先のテキストを指定してスクロールさせる 1. セレクトメニューの選択肢をグループ化 複数の選択肢を用意できるおなじみの select タグ。項目は option タグを利用しますが、さらに optgroup タグで囲むことでグループ化できます。選択肢が多
メールの見落とし防止！Gmailの自動振り分け機能の設定方法を紹介します！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れ様です。LIGディレクターのほそです。 LIGでは主な業務はSlackで行っているのですが、クライアントやパートナーとのやりとりや、Googleカレンダーからインビテーションが来たりなど、まだまだメールでの連絡も発生しています。 主な業務はSlackで済ませているので、メールの確認はつい優先度が下がってしまうのですが、重要な内容ほどメールで来てたりするんですよね……。 そんなとき、Gmailの自動振り分け機能を使うとクライアントからの重要な連絡や、パートナーのメールを色分けして分類できるので、わかりやすくサクッとチェックできます。さっそく見ていきましょう。 こんな感じの分け方になります 早速ですが、自分はこんな感じに設定しています。色分けがポイントなのですが、クライアント=赤 / LIG社内=青 / パートナー=緑でそれぞれ分類しています。誰からのメールなのかがが一目瞭然ですね！ 左
ページ上のあらゆる要素をドラッグ・リサイズ・スケール・回転・ワープ・グループ化・スナップ操作を可能にする万能JavaScriptライブラリ -Moveable
ページ上のあらゆる要素をドラッグ・リサイズ・スケール・回転・ワープ・グループ化・スナップ操作できるようにするJavaScriptライブラリを紹介します。 単体で利用でき、React, Preact, Angular, Vueにも対応しています。 Moveable -GitHub Moveableの特徴 Moveableのデモ Moveableの使い方 Moveableの特徴 Moveableはページ上のあらゆる要素をドラッグ・リサイズ・スケール変更などを可能にするTypeScriptで実装されたライブラリです。MITライセンスで、商用のプロジェクトでも無料で利用できます。 Draggable ターゲットをドラッグおよび移動する機能 Resizable ターゲットの幅と高さを増減する機能 Scalable ターゲットのx軸・y軸のスケールを増減する機能 Rotatable ターゲットを回転さ
Tabulator - これはすごい。HTMLテーブルを高機能に MOONGIFT
テーブル表示はWebシステムのデファクトとも言えます。業務システムはいうに及ばず、管理者画面などでも必ず求められる表示です。そしてただ表示すればいいという訳ではなく、ソートやフィルタリング、インラインでの編集など様々な機能が求められるものです。 そんな多機能なテーブル表示を実現してくれるのがTabulatorです。多くのニーズを満たしてくれることでしょう。 Tabulatorの使い方 てんこ盛りなデモテーブル。ざっと見てもフィルタ、ページネーション、グラフ表示、ソートなどの機能が確認できます。 インライン編集もサポートされています。 データに合わせて幅を自動調整。 行をクリックして展開する機能。 カラムをグループ化。 カラムを縦に。これはカラムが多い時に便利そうです。 ドリルダウン。 テーブルを入れ子にもできます。 スパークライン表示。 フッターで集計。 HTMLテーブルを変換する機能もあ
話題のデザインシステムって何？積極的に取り入れたいデザイン要素14個まとめ
ここ数年、デザインシステム（英: Design System）がデザイナーの間で話題となっています。この記事では、デザインシステムが重要な理由と、何を含む必要があるのか、人気ブランドから公開されているデザインシステムのサンプル例と一緒に、まとめてご紹介します。 多くの企業やビジネスにおいて、デザイン設計により投資するようになってきています。デザインシステムをきちんと作成することは、成長を続けていて、すべてを把握する必要がある企業やチームにとってとても有益で、良いユーザー体験には不可欠と言えます。デザインシステムは、デザインのミスを削減したり、デザインプロセスを高速化、またさまざまなチーム間でのやりとりにも役立ちます。 01. グリッド グリッド（英: Grid）は、ページレイアウトを理解し、統一するために必須のコンポーネントです。たとえば、MailChimpのデザインシステムの最初に記述さ
Tabbie - Google Chromeのタブをグルーピングして管理
タブブラウザが主流になって、一つのウィンドウで多くのタブを開くのが当たり前になっています。そうした中では作業を切り替えようと思っても開いていたタブが多すぎて目的のタブがどこにいったか分からなくなってしまいます。 そこで使ってみたいのがTabbieです。タブをグループで管理できるGoogle Chrome機能拡張です。 Tabbieの使い方 タブを幾つか開いた状態で名前をつけて保存します。 そうすると名前が表示されます。後はこれのopenをクリックすればタブが再現されます。 Tabbieはそのウィンドウだけ（他のウィンドウは無視されます）保存してくれます。なので仮想デスクトップのように開発用、ニュースチェック用、プロジェクト毎にタブを分けて管理しても良さそうです。 TabbieはGoogle Chrome用のオープンソース・ソフトウェア（MIT License）です。 Tabbie - Ch
NooBoss - ボスのようにGoogle Chrome機能拡張を管理する
Googleの機能拡張は便利ですが、一旦インストールした後のメンテナンスは意外と面倒です。簡素な一覧画面しかなく、そこにたどり着くのも探すのも大変です。そのため機能拡張が増える一方という人もいるのではないでしょうか。 そこで使ってみたいのがNooBossになります。機能拡張を分かりやすく管理できるChrome機能拡張です。 NooBossの使い方 インストールすると、Chromeのアイコンメニューから機能拡張一覧が表示できるようになります。 停止や削除も簡単です。 検索で絞り込みもできます。 オプションです。 さらにインストール/アンインストール履歴も取れます。 NooBossを使うと機能拡張に素早くアクセスできますし、インストール/アンインストール履歴を見ることで不用意なインストールを避けられるようにもなるでしょう。企業などで導入しておいても便利そうです。 NooBossはGoogle
Photoshopを使ってる人に今年一番の朗報！カラーのグループ化ができるようになる便利なスウォッチパネル -Swatchoos
Photoshopのデフォルトのスウォッチはカラーが選択できるシンプルなツールですが、すこし物足りないと感じませんか？ 例えば、カラーをグループ化したり、指定したカラーを混色したり、複数のカラーの明度を変更したり、形を丸にしてみたり、そんなことが全部できるSwatchoosを紹介します。 SwatchoosはPhotoshop CC2014.2以降、Win/Mac両対応です。
divとsectionとarticle要素それぞれの特徴、使い分けと組み合わせ方 -HTML5のセクショニング コンテンツ
HTML5は、ドキュメントを構造化する際に用いるセマンティックなコードです。あなたがどんなタグを使うかによって、ユーザエージェントにその意味を伝えます。 HTML5のタグにはさまざまなものがあり、中でもsectionとarticle要素は、div要素より有意義な方法でコンテンツを区分する手段として導入されました。これら3つをどのように使い分けるか確認しておきましょう。 Sectioning Content in HTML5 -Div or Section or Article 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 divとsectionとarticle、それぞれの特徴 divとsectionとarticle、どれを使う？ sectionとarticleの組み合わせ方 divとsectionとarticle、それぞれの特徴 d
「Google Apps」のグループメールアドレスを送信者として設定する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、tetsuです。 今回は「Google Apps」で作成したグループのメールアドレスを、Gmail（ブラウザ）の送信者メールアドレスとして利用する方法を紹介します。 グループのメールアドレスを用意 「Google Apps」のグループ管理画面から、上図のようにグループを作成します。 ここではグループのメールアドレスを「liglig@liginc.co.jp」と仮定して、話を進めます。 Gmailに送信者として追加 Gmailにログイン後、ブラウザ右上にある「設定」をクリックします。 設定画面が開かれたら「アカウント」タブをクリックし、赤枠の「メールアドレスを追加」をクリックします。 「名前」と「メールアドレス」を入力して次へ進みます。（※画面は入力例です） 所有者確認のための「確認メールの送信」というボタンをクリックして次へ進むと、「確認コード」を入力する画面となります。 設定
【WordPress】ユーザーグループごとに投稿カテゴリーを制限する方法 | バシャログ。
来年のお正月は姪っ子にお年玉をあげて、「倍返しだ！」と言われたい Latin でございます。 さて、WordPress運用の中で、 ユーザーグループ（権限）を細分化して、ユーザーグループごとに投稿カテゴリーを制限したいケースなんかがたま～にあったりするかと思います。 そんな時に役立つ方法を備忘録がてらにまとめていきます。 想定する要件 投稿ユーザーを自由にグルーピングしたい ユーザーグループに応じて、投稿カテゴリーを制限させたい User Role Editor と User Access Manager の二つのプラグインを用いる まずはこの2つのプラグインをインストールします。 User Role Editor http://wordpress.org/plugins/user-role-editor/ User Access Manager http://wordpress.org/
ワンクリックでさまざまなサービスにログインでき、ひとつのアカウントを複数人で安全に共有することも可能なパスワードマネージャー「Meldium」
TwitterやGmailなどを含む1924種類ものウェブアプリのログイン情報が保存可能なパスワードマネージャーが「Meldium」です。ログイン情報を入力すればワンクリックであらゆるサービスにログインできるようになるだけではなく、アカウントのログインパスワードを相手に教えることなく、相手がサービスにログインできるようにすることも可能なので、複数人でひとつのアカウントを管理したり一時的にアクセス権を与えたりが簡単にできるようになります。 Meldium | Team Password Manager, Cloud Identity & Access Management https://www.meldium.com/ Meldiumを利用するには、上記リンクから公式ページのトップへ移動して「GET STARTED」をクリック。 続いて上からユーザー名・メールアドレス・パスワードを入力して
コンテンツグループを利用した行動フロー活用方法 | アユダンテ株式会社
今年、Google アナリティクスの新しい機能としてコンテンツグループがリリースされたことは記憶に新しいことかと思います。ですが、そのコンテンツグループで行動フローを活用できるようになったことはご存じでしょうか？ 今回は、ひっそりとリリースされたコンテンツグループでのフロー活用方法について解説いたします。 コンテンツグループとは いまいち使いきれない機能だった!? 行動フローでもコンテンツグループが利用可能に グループごとにより評価しやすくなる アクションに結びつけよう コンテンツグループとは コンテンツグループとは、それぞれのページ単位(またはURL単位)であるコンテンツをグルーピングし、１つのグループとして、数値を計測することができる機能です。 設定方法等は下記の過去記事を参照ください。 保存版！コンテンツグループ機能の設定方法と使い方｜コラム アユダンテ株式会社 いまいち使いきれない
A more robust equal heights library
matchHeight makes the height of all selected elements exactly equal (2014) Modern browsers This library was developed before related functionality became available in the browser. Therefore it's now strongly recommended to use more modern CSS techniques in place of this library. For some alternatives see CSS Flexbox and CSS Grid. Features match the heights for groups of elements automatically use
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
あなたがまだ知らないReactのテクニック10選 - Qiita
オープンソースとして提供されているセキュリティ重視の超シンプルなビデオチャットアプリ・「Jitsi Meet」
