相手に誠実に、わかりやすい文章を書くための心がけをまとめました。 どういう思考プロセスからどんな表現が生まれるのか、参考として実例を紹介しています。実際に読み比べ、SmartHRの従業員として何かを伝えようとするときの、参考にしてください。 伝わる文章のガイドライン何を伝えるかによって、必要な情報の量や説明の粒度は異なります。 情報が不足していたり、逆に情報が多すぎたりすると、読者が意図を読み取れないことがあります。 読み手となる相手の状況（読む場面、事前知識など）を踏まえ、言葉にする内容や表現を厳選することが大切です。 目的に合わせて情報を取捨選択する読者の目線に立ち、コンテンツの目的に合わせて情報を取捨選択しましょう。 実例1：法律や業務に関わる記事目的業務に関係する「厚生年金保険」について正確に知りたいと思っている人に、わかりやすく内容を伝える。 Before日本の年金制度は、全国民
あるメーカーで技術職をしてるオッサンなんだけどけど聞いてくれ。 先日会社のマーケティング主導の製品企画のキックオフミーティングに呼ばれたんだけど、非エンジニアの文化にはじめて接していろいろ面食らっている。 なんていうか、普段馴染みのあるエンジニアだけで動いている会議って論点が割と明確なのよ。工業デザイナーの製品イメージがあって、筐体サイズや電力の制約があって、納期やコスト、開発リソースから実現可能性を考えてという具合に、製品の要素を実装可能な状態に落とし込むために要件を絞り込んでいく的な感じ。 一方、この前初めて参加したマーケ主体のミーティングはソフトバンクの決算で孫正義がやってるような感じのポエミーなプレゼン資料がポンポン飛んできて頭がくらくらした。「プロジェクトに対する私の思い」だとか、「製品のコードネームを決めよう！(提案者は製品コンセプトが抽象画なのでピカソ推し)」とかエンジニア目
追記: 10/11 ハテブでバズっているようで、色々指摘があったので追記 getElement*は動作が早いのでIDやクラス名が自明の場合はgetElement*を使う方がいいと言う意見もあり、また、ページの表示で大量に呼び出されるわけではないからボトルネックにはならないと言う意見もある。 getElement*で返されるオブジェクトは動的な変化に対応しており、querySelector*は動的な変化に対応していないため、場合によってはgetElement*を使うといい。このサイトで遊んでみよう。 https://ja.javascript.info/searching-elements-dom#ref-263 for await ... ofは非推奨なので Promise.allを現代的な書き方にした 顧客先のブラウザが古い場合も考慮して、あえてレガシーな書き方もする場合があるらしい。現
はじめに まず↓の記事を見てない方はぜひ見てください！ 自分にとってはこの記事には「えっ、ナニコレ！」なテクニックが多く、特に解説もなかったのでいろいろ調べてたら休日が消えてました... なのでその時間の供養もかねて、自分が知らなかった部分を中心に、僭越ながら元記事の解説を書いてみたいと思います。 ちなみに、以下が元記事のコードそのままを実装したものです。たしかに掲載コードだけで要素がグリグリ動きますね。 See the Pen js-drag-move-original by www-tacos (@www-tacos) on CodePen. 初耳1: $img まずコードのここ
そうなんです。 2020年夏、ページの読み込み中にレイアウトがシフトしないように、img要素にはwidthとheight属性を記述するのがいいらしいんです。 <img src="link/to/image.jpg" width="300" height="400" alt="画像の説明"> その昔、これが普通の時代もあったんですけどね。レスポンシブな時代にはwidthとheight属性を書かないのが一般的（？）になっていました。また、widthとheight属性が記述してあってもCSSでwidth: 100%; height: auto;が指定されているとレイアウトシフトが発生してしまっていました。 参考： img要素のサイズ属性の記述の有無についてのTwitterのアンケート なんでいまさら？ なぜなら、2019年の後半にブラウザにレイアウトシフトを回避するための新たな機能が実装されたか
この数日でバズっていた一連の記事を読んで自分も試してみることにした。 【発端】音声入力とAIの組み合わせが強力だという骨しゃぶり氏の記事 https://honeshabri.hatenablog.com/entry/talk2ai 【音声入力】SuperWhisperが良いよというお話 https://umiyosh.hatenablog.com/entry/2025/02/26/215102 【テキストエディター】Cursorはコード書くだけじゃなく、AIを使った文章作成にもいいよというお話 https://ascii.jp/elem/000/004/253/4253872/ 結論から言うと骨しゃぶり氏の言ってることがよくわかった。めっちゃ便利というかちょっとしたイノベーション感じてる。 音声入力自体は以前にも試したことあるけど、そこから先が人力編集なのと、間にAIをかますのとではまっ
掛井一徳 @yurayura1992 学校で二重跳びのやり方について、脇にハンカチを挟んで縄跳びを飛ぶ手を開かせないための練習と、ジャンプしてる間に2回手を叩くリズムの練習を別々にやると、ほとんどの子が跳べるようになるとある先生に教えていただいた。運動が苦手な子もやる気を無くさないように、いろんなやり方を調べたと。 掛井一徳 @yurayura1992 縄跳び苦手なので、子供の頃にこんな指導を受けたかった！と思いました。 今現在できないことは、要素ごとに分けて、難易度を下げること、それぞれで「出来た！」の体験をしやすくすることって大事ですよね。 大きな階段を小さな階段に分割していく、スモールステップを作るという話です。 掛井一徳 @yurayura1992 そして、カウンセリングもそうですが、たくさんの要素が混ざり合った複雑な技術を、要素ごとに割りすぎると、全体とのつながりがわからなくなっ
安全なパスワードの設定・管理 企業・組織におけるパスワードは、ユーザ名と組み合わせることで企業・組織内の情報資産へのアクセスの可否を決める重要なものです。パスワードの重要性を再認識して、適切なパスワード管理を心がけましょう。 他人に自分のユーザアカウントを不正に利用されないようにするには、推測されにくい安全なパスワードを作成し、他人の目に触れないよう適切な方法で保管することが大切です。 安全なパスワードの設定 安全なパスワードとは、他人に推測されにくく、ツールなどの機械的な処理で割り出しにくいものを言います。 理想的には、ある程度長いランダムな英数字の並びが好ましいですが、覚えなければならないパスワードの場合は、英語でも日本語（ローマ字）でもよいので無関係な（文章にならない）複数の単語をつなげたり、その間に数字列を挟んだりしたものであれば、推測されにくく、覚えやすいパスワードを作ることがで
HTMLページのhead内に記述する最小限の構成、そしてmeta要素やlink要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素などがまとめられた「HEAD」を紹介します。 HEAD: A simple guide to HTML <head> elements 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 以前の版からいろいろと変更されています。 2016年版: head内に記述する要素の総まとめ 2018年版: head内に記述する要素の総まとめ head内に記述する最小限の構成 head内の要素 meta要素 link要素 ソーシャル関連のhead内の要素 ブラウザ・プラットフォーム関連のhead内の要素 メモ head内に記述する最小限の構成 下記はシンプルなWebサイトで必須となるhead内に記
最近のWebサイトで見かける、ページのレイアウトをはじめ、ナビゲーション、フォームのさまざまな入力要素、インタラクション要素、UI要素などのCSSでの実装コードをまとめたCSS Layoutを紹介します。 すべてシンプルなコードで実装されており、外部ファイルやフレームワークは一切必要ないので、簡単に利用できます。 ブックマークや、スニペットに登録しておくと便利ですね。 CSS Layout CSS Layout -GitHub CSS Layoutの特徴 CSS Layoutの使い方 CSS LayoutのレイアウトやUI要素91種類 CSS Layoutの特徴 CSS Layoutは、CSSで作成された一般的なレイアウトとパターンのコレクションです。 依存は一切なし フレームワークも必要なし CSSハックもなし すべて実際の使用例 MITライセンスで、商用プロジェクトでも無料で利用できま
今回はChatwork株式会社のデザイナー向けに行なったHTML勉強会で使用した解説資料をお伝えします。私は3年ほど前からChatwork株式会社の開発のサポートやデザイン基盤活動のアドバイザーとして参画しており、その活動の一環で会を開催しました。 開催の意図と目的開催概要は@emimさんが、UI設計はHTMLの理解からというタイトルでnoteに書いてくれています。企画の意図は下記のとおりです。 企画の意図 根本としては、情報整理（情報設計）の基礎概念にHTMLがとてもマッチしている、と考えているからです。 ところが、業界的にも昨今よく聞く話ではありますが、最近意外にHTMLに触れる機会がなくプロダクト開発の現場に入る人が多いのが現実です。これは、デザイナーだけでなく、なんならフロントエンドの開発者であっても。 個人的には、HTMLはマークアップ言語であること以上に、構造化のフレームワーク
CSSで美しいシャドウをつけるbox-shadowの書き方を紹介します。 少し大きめのシャドウを適用し、ネガティブに縮小させることで、通常のシャドウより少しだけ彩度が高くなり、要素がくっきり見えます。
Gmailの二要素認証がまもなく大きく変わる。GoogleはSMSで認証コードを送付する方式を廃止し、パスキーやQRコードに切り替える方針だ。 このニュースはForbesが最初に報じた。 SMSによる二要素認証は悪用されるケースが報告されている。Google セキュリティ・プライバシー広報担当のロス・リッチェンドルファー氏はCNETの取材に対し、「パスキーなどでパスワードの時代を終わらせたいのと同様に、認証にSMSを使う方法からも脱却したい」と述べた。 Googleは今後数カ月以内に電話番号認証の方法を一新する予定だ。Gmailやその他のGoogleサービスは、SMSで6桁のコードを送る方式から、ユーザーが手元の端末でスキャンできるQRコードを表示する方式に変わる。 この変更は、ユーザーが詐欺師にSMSコードを教えてしまうリスクをなくし、通信事業者が侵入経路となる可能性を排除するためだ。ま
正規表現は文字列の検索や置換を行うための強力で便利なツールです。基本をマスターすれば開発から日常の事務作業までさまざまな場面でラクをできる魔法の道具ですが、見た目がちょっと分かりづらいので、避けている方もいるのではないでしょうか？ 筆者の個人的観測ですが、とりわけフロントエンドのエンジニアには正規表現に苦手意識を感じている方が多いようです。 この記事では正規表現の基本と、正規表現がどこで使えてどれだけ便利になるのかを紹介します。 正規表現の基本：正規表現ってそもそも何？ 正規表現（regular expression）は、ごく簡単にいえば「さまざまな文字列のバリエーションをひとつの文字列で表現したもの」です。たとえば、郵便番号の7桁の数字には（実際に使われていないものも含めれば）一千万通りのバリエーションがありますが、正規表現を使えば次のようにひとつの文字列で表現できます。 ▼「7桁の数字
ハイどうもお久しぶりです。 今日はX (Twitter)で少し書いてみたものの、これはnoteにまとめた方がいいんじゃね？と途中で気がついた「ハウスDJって普段どんな感じで選曲してるの？」をテーマに書いてみたいと思います。 主に自分なりのやり方とか方法論になるので、これが正解！とかじゃなくて何か参考になるところがあれば、位で読んでもらえると助かります。 なお後半は有料記事になっていますが、実際にDJしてる方向けの実践的な内容となっていますので、興味のある方はぜひ最後まで読んでください。 曲単位だとめっちゃいいの持ってるんだけど、全体的な流れがあっちこっち行って微妙やな…みたいになる人は、曲の持つ要素をしっかり分析して見極めるのと、同じ要素を持つ曲で繋いで行く意識を持つと良くなると思います ただ流れがスムーズになったからDJとして良くなるのかは何とも言えない🫠 — coolsurf (@c
中央揃えの古典的なテクニックの一つ、モーダルやメッセージなどを表示する時に適したposition: fixed;での新しい記述方法を紹介します。 古い記述方法では、負のパーセンテージを使用していたり、あまり直感的ではないCSSでしたが、新しい記述方法ではそれらが解消されています。 CSSの中央揃えのいろいろな方法は、以前の記事をご覧ください。 現在主流の5つのテクニックからそれぞれの特徴と最も万能で信頼できるテクニックを評価しています。
これを読んで欲しい人のターゲット像や前提について Web版開発の話をしています ITのソフトウェアエンジニアの話をしています ある程度チームのやり方に対して影響を与えられる権限がある人 マネージャーかメンバーかはあまり気にしないです 「発言するのは自由だが聞き流されるだけ」ならこの記事を読む意味はないです ある程度裁量権があり、ビジネスサイドとも話ができるチームのメンバーを想定しています 作業の流れの前提について チケットがあって 作業者がそれを取って（自分で取るのか他人にアサインされるのかは問わない） PullRequestの形でレビュー依頼をかけてレビュワーがレビューする OKならmergeしてそのうち本番デプロイ 間にQAが入るかもしれないけどそこは問わない 手が遅いとは何か？ ある作業者のサイクルタイムが他の作業者に比べて長いこと 100の大きさの作業があるチケットを渡した際に、ほ
CSSでよく使用する単位といえば、px, em, remをはじめ、最近ではvh, vwなどだと思います。特にレスポンシブ対応のレイアウト・コンポーネントを実装する時には、ビューポート相対単位のvh, vwが非常に便利です。 CSSはメディアクエリの登場で進化したように、コンテナクエリの登場でさらに進化しようとしています。新しい単位「コンテナ単位（qh, qw）」は、コンテナのサイズをベースにする相対単位です。 コンテナ単位を使用すると、下記のようにコンテナの幅をベースにした値でfont-sizeを定義したり、同一ページ内で異なる幅のカラム（コンテンツとサイドバー、2カラムと3カラム）に同じコンポーネントやテキストを異なるサイズで配置したり、異なる幅のカラムでスペースの量を変えたりできます。 ビューポート単位では、同一ページだとビューポートの基準値は同じなので、こういうことはできません。 C
ブラウザーで新たにインタラクションやアニメーションを作る時、皆さんはどのようにして使う技術を選んでいますか？ 使い慣れたライブラリに機能がないかドキュメントを調べてみたり、流行りのキーワードであればGoogle等で検索してみることも多いでしょう。一方、独自のビジュアル表現やアニメーションの場合、そもそも検索するキーワードがわからないことも多いのではないでしょうか？ この記事では、webのビジュアル表現・アニメーションを実現するベースの技術であるCSS・SVG・Canvas（WebGL）の3つについて、それぞれのできること・できないこと（得意・不得意）を作例とともに紹介します。 クイズ：どうやって実現する？ webでできるさまざまな表現 下の図はこの記事で紹介する9つのサンプルを並べてみたものです。すべてのサンプルはCSS・SVG・Canvas（WebGL）のいずれかを中心に実装されています
Webページのパフォーマンスを向上させることは、CSSでも可能です。去年の暮れからChromeで利用できるようになったCSSの新しいプロパティで、2021年現在Edge, Operaにもサポートされています。 読み込みパフォーマンスを向上させるために最も効果があるCSSの新しいプロパティcontent-visibilityについて紹介します。 content-visibility: the new CSS property that boosts your rendering performance by Una Kravets, Vladimir Levin 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに content-visibilityのサポート状況 CSS Containmentとは content-visi
First, we need to constrain the element's width; by default, elements in Flow layout will expand horizontally to fill the available space, and we can't really center something that is full-width. I could constrain the width with a fixed value (eg. 200px), but really what I want in this case is for the element to shrinkwrap around its content. fit-content is a magical value that does exactly this.
もう全部OpenAIでいいんじゃないかな はじめに 月間技術革新です。 ということで、昨日OpenAIから発表された新しい動画生成AI「Sora」が非常に話題となっていますね。 圧倒的な一貫性の保持と1分間に及ぶ長時間動画が生成可能という事で、現状の動画生成技術を圧倒的に凌駕する性能を持っているようです。 在野エンジニアの小手先テクニックなど一笑に付すような圧倒的性能を Soraの凄さは色んなエンジニアやインフルエンサーがたくさん語っているのでそちらを見てもらうとして、この記事ではSoraを構成する各技術について簡単に解説していければと思います。 Soraの技術構成 論文が公開されているわけではないですが、OpenAIが要素技術の解説ページを公開してくれているため、そのページを参考にしていきます。 原文を見たい方はこちらからどうぞ 全体構成 Soraは以下の技術要素で構成されているとのこと
先日アップデートされたSafari 15とSamsung Internet 15により、すべてのエバーグリーンブラウザでaspect-ratioプロパティがサポートされました。 ※エバーグリーンとは、最新版に自動アップデートされるブラウザのことです。 aspect-ratioプロパティを使用することで、レスポンシブ対応の画像をアスペクト比を維持したまま簡単に実装できます。 CSSでアスペクト比を実装する今までとこれからの実装方法を紹介します。 CSS ways to Create Fixed Aspect Ratio aspect-ratioプロパティとは 1. Padding Hack 2. Viewport width solution 3. aspect-ratioプロパティ デモ aspect-ratioプロパティとは aspect-ratioプロパティは名前の通り、アスペクト比を
今まであまり使用されていなかったけど、現在の環境では有用であるHTML5の便利な機能、要素や属性を紹介します。 10 useful HTML5 features, you may not be using by Tapas Adhikary 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに details要素 contenteditable属性 map要素 mark要素 data属性 output要素 datalist要素 値range meter要素 input要素 次に学ぶべきこと はじめに HTML5は、新しいものではありません。すでにわたし達は最初のリリース（2008年1月）からいくつかの機能を使用してきました。#100DaysOfCodeの取り組みの一環として、HTML5の機能リストを詳しく調べました。私が見つ
はじめに あなたは "擬似クラス" 何個言えますか？ 擬似クラスには、:hover や :active、:focusといったよく使うものから、 :is()や:where()、:has()といったこれからサポートされていくものまで たくさん種類があるのは、ご存知ではないでしょうか？ でも、"擬似クラス" 何個言えますか？と聞かれると数個くらいしか思い出せないと言う方は多いのではないでしょうか？ もしかしたら、15個以上言えたら、CSS玄人と言えるかも知れません。 この記事では、たくさん種類があるのは知っているけど、詳しくはわからない "擬似クラス" が、 何種類あるか、どんな擬似クラスがあるかをまとめました。 知らなかった "擬似クラス" の数を数えながら、読んでいただけると嬉しいです。 擬似クラス 擬似クラスとは？ 擬似クラスとは、セレクタのあとにつけることで、 指定した要素の状態に応じて
Webページやアプリの実装に役立つ、知っておくと便利なHTMLの属性を紹介します。すでに使用されているものあると思いますが、いくつはこんな属性もあったのか、と発見があるかもしれません。 24 Lesser-Known HTML Attributes You May Want to Use ✨📚 by Madza (@madzadev) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 私は少し前に、HTMLのタグについての記事を公開しました。今回はその続編として、知っておくと便利なHTMLの属性を紹介したいと思います。 この記事で紹介する属性はすべて簡単に使用でき、外部ライブラリを使用しなければできないようなタスクを実現するのに役立ちます。 HTMLで特に便利な各属性の使用例と構文を理解しやすいように、コードスニペット
ソフトウェアエンジニアリング関連の書籍を読んでいると、「コンウェイの法則（Conway's law）」によく出会う。その引用元は、1968年4月に発表されたメルヴィン・コンウェイ（Melvin E. Conway）の論文 "How do committees invent?" で、例の有名な一文は結論（conclusion）に書かれている。 （前略） organizations which design systems (in the broad sense used here) are constrained to produce designs which are copies of the communication structures of these organizations. （広義での）システムを設計する組織は、自らのコミュニケーション構造を真似た設計を生み出すという制約
<button></button>は最も使用されている要素の一つです。フォームの送信、モーダルを開く時、データを表示する時など、インタラクションのトリガーとして使用されています。button要素の詳細とすべてのブラウザで機能するようにスタイルを完璧に定義する方法について紹介します。 さらに、よく使用されるボタンのスタイル方法をはじめ、ボタンの実装時にある落とし穴の解決方法についても明らかにします。 Styling The Good Ol' Button Element by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 button要素のデフォルトのスタイル button要素の基本的なデザイン アイコン付きのボタン 複数行のボタン アンカーリンクとしてのa要素とbutton要素 アウトラインボタンの
sectionやdivやpなど、ブロック要素をボーダーで囲うと、全幅（親要素の幅）になります。そのブロック要素の中のコンテンツが少なく、ボーダーの幅をコンテンツのサイズに合わせたい場合は、どう実装していますか？ ブロック要素のままでは親要素の幅になってしまうので、通常はdisplay: inline;やdisplay: inline-block;を加えると思います。 しかし、ブロック要素のwidthにfit-content値を使用すると、ブロック要素のまま（displayの値を変更せずに）コンテンツのサイズに合わせることができます。 「古い方法」「より良い方法」としたのは、上記画像の直訳です。古いからダメということではなく、より良い方法が使えるようになり、ケースバイケースで使用するのがお勧めです。 古い方法
モダンCSSは今までJavaScriptが必要だったことやできなかったことを可能にしてきましたが、今までの記述をよりシンプルにすることもできます。 コンテナ・ラッパーを定義する際に記述するCSSの古い書き方とモダンCSSを使用した書き方を紹介します。 CSSの古い書き方 モダンCSSを使用した書き方 CSSの古い書き方 まずは、CSSの古い書き方。 ぱっと見で、何が設定されているのか分かるのがよいところです。コンテナの幅を100%にし、最大幅をmax-widthで設定し、paddingが上下左右に2remあって、margin: 0 auto;で中央に配置します。
複数のセレクタを1つにまとめられる:is()、セレクタの詳細度を0にする:where()、CSSの新しい疑似クラスが、SafariとFirefoxで利用できるようになりました。 そんな:is()と:where()の便利な使い方を紹介します。 CSS :is() and :where() are coming to browsers 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSの新しい疑似クラス「:is()」「:where()」がブラウザに登場 :is()を使用すると、繰り返しを減らせる :where()を使用すると、詳細度を低くキープできる CSSの新しい疑似クラス「:is()」「:where()」がブラウザに登場 CSSの新しい疑似クラス「:is()」「:where()」が、Safari（Tech Preview 1
レイアウトシフトとは、Webページがロードされる時に画像のスペースが確保されず、画像が表示された時にその分レイアウトがずれてしまうことです。 このレイアウトシフトを回避するために10年以上もの間、アスペクト比を手動で適用する必要がありました。しかし、現在ではそんな馬鹿げたハックは必要ありません。最近登場した2つの優れた解決方法を紹介します。 Avoiding <img> layout shifts by Jake Archibald (@jaffathecake) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 レイアウトシフトとは aspect-ratioプロパティによるレイアウトシフトの回避方法 widthとheightによるレイアウトシフトの回避方法 どちらの方法を使用すべきか レイアウトシフトとは デフォルトでは、<im
<search>要素がHTML Standardに追加されました。私も初めて出会う要素になるわけですが、とても良い機会なので、私が要素を調べる際にどうやって調べて学んでいるのかを共有したいと思います。これは新しい要素に限らず、既存の要素の調査に応用できると思います。また、初学者はもちろん、マークアップを生業としている方にも参考になると思います。 新要素追加の経緯を調べる まずはHTML StandardのGitHubのPRからスタートするとよいでしょう。議論や更新はGitHubで行われています。たとえば、今回の<search>はAdd the <search> element #7320というPRによって更新されました。 そもそも更新自体のキャッチアップ方法はクローズされたPRを更新順にして確認してもいいですし、更新のみをツイートしている@htmlstandardのTLを確認してもいいと思
CSSの疑似クラス「:focus-within」を使用して、フォームの入力時にハイライト表示させるテクニックを紹介します。 :focus-withinは適用した要素の子孫要素にフォーカスに当たった時に起動するセレクタで、効果的に使用すると非常に便利です。 Why CSS :focus-within is amazing by Chris Bongers 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLの構造 CSSの疑似クラス「:focus-within」 :focus-withinの効果をより素晴らしいものにする :focus-withinのサポートブラウザ はじめに ここでお話するのは、フォーカスされた要素にスタイルする:focusセレクタのことではありません。:focus-withinは、その中の子孫要素
C/C++ の「ポインタ」は、難しいとか、実は簡単だとか、色々言われます。 ポインタについては規格に書かれています。この記事は、ポインタをより正確にイメージするため、規格に私の解釈を追加したものです。区別のため、C++23 草案 (N4950) の内容には節番号を付け、私の解釈は 斜体 で書きます。 私の解釈は以下の記事の影響を受けています。 ポインタとは、IDとオフセットの組 まず、ヌル以外のポインタは、以下の ID とオフセットの組 です。 ID：新しいオブジェクトが作られるたびに振られる、ユニークな値。 オフセット：オブジェクト先頭からのバイト数。 詳しく話していきます。 ID の割り振り 変数を定義するとオブジェクトが作られ (6.7.2)、各オブジェクトに固有の ID が割り振られます。たとえば、 と書くと整数 x と配列 arr が作られるので、x と arr にそれぞれ ID
2023年もCSSとUIの進化がすごいです！ 先日開催されたGoogle I/O 2023から、各ブラウザにサポートされたモダンCSSの新機能をはじめ、まもなくサポートされる機能まで、CSSの新しい機能を紹介します。 コンテナクエリ、スタイルクエリ、ダイナミックビューポート単位、カスケードレイヤー、ネスト、三角関数、広色域のカラースペースなど、これからのWebサイトやスマホアプリのUI制作に役立ちます。 What's new in CSS and UI: I/O 2023 Edition by Una Kravets, Bramus, Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。 はじめに モダンCSSの新しいレスポンシブ モダンCSSの基礎機能の強化 カスタマイズ可能なコンポーネント CSSによるインタラクション 終わり
画像を実装するには、以前はimg要素にsrcで画像を指定するだけで簡単でしたが、レスポンシブ対応、Retina対応、遅延読み込み、そしてさまざまな画像フォーマットの登場により、HTMLのコードが複雑になっています。 レスポンシブ対応のwebp画像を実装するHTMLのコードの完全版を紹介します。非サポート用のフォールバックにも対応しており、コピペで簡単に使用できます。 A picture element to load correctly resized webp images in HTML by Stefan Judis 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 2021年現在、画像の主要フォーマット 新しい画像フォーマットを読み込むための取り組み 最初のステップ: picture要素でwebp画像を読み込むには 完全版
Webページやスマホアプリに使用される一般的な定番レイアウトをCSS Flexboxで実装したシンプルなコードを紹介します。 ヘッダ・コンテンツ・フッタがあるレイアウトをはじめ、サイドバーがあるレイアウト、スマホに対応したカードの配置、高さを揃えたカード、異なる高さのカードを使用した価格表など、コピペで簡単に使用できます。 Evergreen CSS Flex Layouts With Live Demos by Miroslav Nikolov 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. Flexboxで実装するスマホに対応したカードのレイアウト 2. Flexboxで実装する高さが等しい複数のカード 3. Flexboxで実装したカードの高さをコンテンツベースにする 4. Flexboxで実装するコンテン
CSSのサブグリッド（subgrid）がChrome 117でサポートされ、Safari, Firefoxではすでにサポートされていたので、これで主要ブラウザのすべてで利用できるようになりました。 先日の記事でもお伝えしたように、subgridを使用するとカード内の見出しやテキストの水平グリッドを簡単に揃えることができます CSSのサブグリッド（subgrid）の基礎知識と使い方、プログレッシブエンハンスメント、デベロッパーツールによるデバッグ方法などを紹介します。 CSS Subgrid by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに サブグリッド（subgrid）の基礎知識 ページレベルの「マクロ」グリッドを共有する サブグリッドのサポートをチェ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く