サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
参考記事：『次世代画像形式のWebP、そしてAVIFへ。変わり続ける技術に対応するweb制作の黄金解』HTMLでの実装方法HTMLページでは、imgタグでHDR画像を配置するだけです。 <img src="photo_HDR.avif" alt="" /> 先ほどの写真の書き出し時に［互換性を優先］を選択しましたが、ファイルがSDR・HDRの両方のデータをもつので、ブラウザが自動的に対応した写真を表示してくれます。CSSでの制限方法 HDR画像は輝度が強く、ページ内で浮きやすい存在です。一覧画面では控え、詳細表示するときだけHDR表示するのが無難です。CSSで明るさの上限を切り替えられます。CSSのdynamic-range-limitプロパティはHDRの“伸び”をどこまで許容するかを要素ごとに指示できます。次のように画面によって、HDR可否を制御するのがいいでしょう。 /* 一覧
本ガイドラインは、世の中のシステム開発プロジェクトのために無償で提供する。 ただし、掲載内容および利用に際して発生した問題、それに伴う損害については、フューチャー株式会社（以下、フューチャー）は一切の責務を負わないものとする。 また、掲載している情報は予告なく変更する場合があるため、あらかじめご了承いただきたい。 免責事項: 有志で作成したドキュメントである フューチャーには多様なプロジェクトが存在し、それぞれの状況に合わせて工夫された開発プロセスや高度な開発支援環境が存在する。本ガイドラインはフューチャーの全ての部署／プロジェクトで適用されているわけではなく、有志が観点を持ち寄って新たに整理したものである相容れない部分があればその領域を書き換えて利用することを想定しているプロジェクト固有の背景や要件への配慮は、ガイドライン利用者が最終的に判断すること本ガイドラインに必ず従うことは求めて
Intro 4 月末にリリースされるChrome 136 からは、一部のケースで「閲覧履歴があってもリンクの色が変わらない」状態が発生する。 もしこの挙動に依存して閲覧をしているユーザがいれば、多少不便に感じるかもしれない。 しかし、これは長年問題視されてきた、ユーザのプライバシー保護のための更新だ。 ユーザ側でも、「サイトが壊れたのでは?」と思う人もいるだろうため、前半は技術用語を少なめに解説し、エンジニア向けの解説は後半で行う。 従来の挙動 例えば、Wikipedia では、リンクをクリックして閲覧先を確認すると、閲覧済みのリンクの色が変わる。 これは、ブラウザに保存された閲覧履歴に該当するリンクの色を、訪問済みとして変えるブラウザの機能だ。 多くのリンクがある場合、確認済みかどうかがわかるために、便利に使われることもあるだろう。 (最近では、閲覧済みでもリンクの色を変えないように実
SPF レコードで許可されているIPアドレスの実態がクラウドやプロキシ等の共用サービスのものであるケースは多く、それらのIPアドレスが第三者によって利用できる可能性があることを悪用し、SPF 認証を pass、結果的に DMARC 認証まで pass して詐称メールを送信できてしまうことを指摘した論文が公開されています。 この論文では、上記のような SPF の脆弱な展開に対する攻撃手法をBreakSPF と呼び、関連するプロトコルや基盤の実装に対する分析と共に、その内容が体系的にまとめられています。本記事では、その論文を参照しながら、簡単に概要をまとめておきます。本記事につきまして、(当サイトとしては) 多くのアクセスいただいているようで (ちょっとビビってま) す。まことに大変ありがたいことに色々とシェアいただいたりしたようです。 そこで、記事の内容と一部重複しますが、できるだ
メルカリで値段の「¥マーク」を小さくしたら購入率が伸びた理由、ペイディがサービス名を「カタカナ表記」にする理由など、プロダクトのマーケ施策まとめ30(2023)2023年に取材した記事から、長く参考になりそうな施策をまとめました。※ 数値等はあくまで取材当時のものです。 1、商品ページの「¥マーク」を小さくしたら購入率アップ（メルカリ）メルカリでは、商品詳細ページの「値段の¥マーク」を小さくしたところ、購入率が大きく上昇した。 理由としては、¥マークを小さくしたほうが、心理的な「価格の圧迫感」が減って、心理的にすこし安く感じるためと考えられている。例えば、¥マークが大きいと桁数が多く感じたり、価格を高めに感じやすい。 この案があがったときには、社内でも懐疑的だったそうだが、テストすると小さな開発コストで大きなリターンを得られる施策になった。 元記事：https://markelabo.c
CSSだけでスクロールアニメーションが作れる！？ 新技術Scroll-drivenAnimationsとは Scroll-drivenAnimations（スクロール・ドリブン・アニメーション）を使うと、今まではJavaScriptを使わなければ実装できなかったスクロールと連動するようなアニメーションがCSSだけで実現できるようになります。 以下は、CSSだけを使って作成したスクロールアニメーションのデモです。一切JavaScriptは使用していません。 Scroll-drivenAnimationsはJavaScriptでも使うこともできますが、本記事では、実装の手軽さを一番にお伝えしたいため、CSSだけを使ったスクロール駆動アニメーションの作り方をご紹介します。 スクロールアニメーションとは 作り始める前に、まずはスクロールアニメーションについて整理しておきましょう。 メリットと
あなたのWeb制作をサポートしてくれるWebツール13選Update2023.05.24Release2023.04.28ToolsHatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録するWeb制作をサポートしてくれるツールを10個紹介します。mix-blend-modeやgridレイアウト、transformなどのコードの他にもフォントチェックや背景画像を作成できるツール、VSCodeのテーマ作成ツールもあります。あなたのWeb制作を快適に進めるためにチェックしてみてください。 Fuze –CSS Gradient AnimatorFuzeグラデーションアニメーションのCSSジェネレーター。色を複数指定するだけでCSSアニメーション用のコードを作成してくれます。背景色やテキストカラーなどに使えます。 ちなみに、テキストカラーは当サイトのト
マイクロソフトは、Webブラウザ上で2Dや3Dモデルの高速なレンダリングなどを可能にするオープンソースのJavaScriptライブラリ「Babylon.js」の最新版「Babylon.js 6.0」正式版をリリースしました。 We are thrilled to officially announce the release of Babylon.js 6.0! The webjustgot a WHOLE lot more exciting!https://t.co/q0JVsQaTSd#babylonJS6 #gamedev #indiedev #webdev #Metaverse #3D #webgl #gamedevelopment #IndieGameDev #webdeveloper pic.twitter.com/owV6YLp1zc — Babylon.js (@bab
サマリCookieやlocalStorage等でセッション管理しているウェブサイトがクリックジャッキング対策していない場合、どの条件で被害を受けるかを説明する。SameSite属性のないCookieでセッション管理しているウェブサイトは、主要ブラウザのデフォルト設定ではクリックジャッキングの影響を受けない。一方、loaclStorageにトークン類を格納するウェブサイトでは、GoogleChrome等のブラウザでクリックジャッキングの影響がある。また、ブラウザの設定を変更した場合の影響についても説明する。 クリックジャッキングとは クリックジャッキングとは、一言で説明すると「ウェブサイト利用者に意図しないクリック（タップ）をさせる」攻撃です。ウェブサイト上で意図しないクリックを勝手にさせられると、重大な結果になる場合があります。例えば、このURLを閲覧すると、以下のようにTwitter
トランジション周期表は、クライアントワークでよく使われる画面切り替え表現を抽出し、元素記号表のようにルールをもとに並べたものです。
フロントエンド開発は考えることが多い。とくに 0 -> 1 の場合だと、何からはじめたらいいのか？が全然わからず、途方にくれてしまうこともあるでしょう。実際、ぼくがそうでした。 そして、そういった情報はなかなか検索しても出てこない。設計方法や実装方法みたいなものはたくさんあるのに。なので、書いてみました。 これは、ぼくがいくつかのフロントエンド開発を経て「これを最初に知っていれば、もうちょっとうまくできたかも？あの失敗がなかったかも？？」をまとめたものです。フロントエンド開発に不慣れな方の参考になれば、これ幸いです。 まずは仕事のゴールを確認するプロジェクトや各フェーズごとに仕事のゴールは異なるため「何をもって仕事が完了したと言えるか？」を確認する。たとえば、要件定義フェーズであれば「画面仕様書が完成する」とか、開発フェーズであれば「API結合試験がすべて完了し、バグチケットがすべてク
Unicode-Compart is a site dedicated to Unicode and all things related to Unicode, characters, glyphs and internationalization
Firebase のインターフェースとツールでAI 搭載のアシスタントを使用して、開発を効率化します。
カスタムURLスキームの乗っ取りとその対策 2021年5月17日 カスタムURLスキームは、モバイルアプリ内のコンテンツへ直接誘導するディープリンクに広く利用されている¹。そのような中で、2020年3月にLINEはカスタムURLスキームline:// の使用を非推奨とした²。非推奨の理由をLINEは「乗っ取り攻撃が可能なため」と説明し、代わりにHTTP URLスキームによるリンクを推奨している。この変更に対して私は、なぜHTTP URLスキームによるリンクだと乗っ取り攻撃を防げるのか疑問を抱いた。この疑問に答えるためにLINEアプリの乗っ取りを試み、対策の有効性を確認した。 要約 HTTP URLスキームによるディープリンクは対象のアプリを一意に特定できるため、不正アプリによるリンクの乗っ取りが発生しない。カスタムURLスキームでは複数のアプリが同じスキームを宣言できるため、モバイルOS
はじめに としが明け、2023年になり、2022年を振り帰ったり、今年の目標を立てている頃でしょうか？ みなさんは2022年どんな1年でしたか？ この記事では、2022年に話題になったWebサイトをまとめて、 みなさんの振り返りや今年の目標や勉強することの参考にしてみてはいかがでしょうか？ POLA https://www.pola.co.jp/wecaremore/mothersday/ 母の日に合わせて公開された↑この特設サイトは、スクロールに合わせて、だいぶスムーズに花がアニメーションしていくサイトです。 一回サイトに訪れると、その没入感にサイトから抜け出すタイミングがなくなるでしょう。 Pokémon Online Gallery https://onlinegallery.pokemon.co.jp/ja/ ポケットモンスター スカーレット・バイオレットの発売を記念して公開された
デジタル庁では「誰一人取り残されない、人に優しいデジタル化」を実現するため、継続的に「ウェブアクセシビリティ」の向上に取り組んでいます。この度、ウェブアクセシビリティに初めて取り組む行政官の方や事業者向けに、ウェブアクセシビリティの考え方、取り組み方のポイントを解説する、ゼロから学ぶ初心者向けのガイドブックを公開します。 優しいサービスのつくり手になる一助として、ぜひご活用ください。 公開の背景ウェブアクセシビリティの向上に取り組むには、非常に専門的な複数の規格とガイドラインをそれぞれ確認する必要があります。そのため、適切なやり方がわからないままに、現在は間違っている対応の踏襲、不要・過剰な対応、不適切な対応をしてしまうことがあります。ウェブサイトだけではなく、申請・手続等のデジタルサービスの重要性が増す中で、最新の技術動向を踏まえた、初心者が学習できる行政機関向けの研修資料が不足していま
あけましておめでとうございます。株式会社ミツエーリンクスの中村直樹です。昨年と同じく、2022年のWebアクセシビリティに関連する出来事を振り返りつつ、2023年のWebアクセシビリティの展望について俯瞰していきたいと思います。 WCAG 2.22022年9月版のWCAG 2.2で、文書のステータスとしてはようやく勧告候補（Candidate Recommendation）にまでたどり着き、仕様文書として完成する勧告（Recommendation）が見えてきた…と思っていたところですが、12月になって達成基準4.1.1構文解析を削除するという話が急浮上してきました。 達成基準4.1.1がどういったものなのか、改めて振り返ってみましょう。この達成基準については、もとはWCAG 2.1（原文、参考日本語訳）と同じものであり、WCAG 2.0とも同一です。達成基準4.1.1は、マークアップ言語
日本のウェブデザインの特異な事例sabrinas.spaceより。 8週間もかからなかったはずのプロジェクト 日本のウェブデザインはどう違うのか? 2013年のRandomwireのブログ投稿で、著者(David)は、日本のデザインの興味深い相違点を強調しました。日本人はミニマリストのライフスタイルで海外に知られていますが、ウェブサイトは奇妙なほどマキシマリストです。ページには様々な明るい色(3色デザイン原則を破っている)、小さな画像、そして多くのテキストが使われています。2022年11月に撮影されたこれらのスクリーンショットで、自分の目で確かめて下さい。 ブログ投稿には、文化的専門家、デザイナー仲間、そして不満を抱く市民によって支持されている、考えられる理由がいくつか挙げられていました。 この理論が今でも正しいのか、また、もっと定量的なアプローチが可能なのか気になったのでやってみました。 私が見つけたもの 各国の最も人
SEOの学び方：初心者から上級者まで、成果を出すための実践ガイド [最終更新日：2025年7月15日]SEOの学び方を初級・中級・上級の3段階に分けて整理しました。これからSEO関連の仕事を始める方、体系的な学習方法を知りたい方の参考になれば幸いです。SEOの学び方（初級）：SEOとの向き合い方と学習の第一歩SEOは、Web経験がない新卒にはハードな仕事 検索技術と検索事業の理解を深める インターネット検索エンジンの歴史から学ぶ 世界中の企業がSEOに取り組む理由を理解するSEOは市場・事業・ユーザーの理解から始まる 自分でサイト運営・集客の経験をする 身近なものを題材にSEO施策を考えてみる 「この領域だけは、自信がある」というスキルの柱をつくる 自分自身もインターネットを活用するSEOの学び方（中級）：ステップアップに必要な視点と行動SEOの全体像を学ぶ英語を習得する ケ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
