文章の折り返しはウェブ制作において意外と難しいものです。URLが文章に含まれている場合、URLがレイアウトを突き抜けてしまった、という経験をみなさんはお持ちではないでしょうか? この記事では、国内のウェブ制作において「開発者が考えることが少なくてよくなる」安全なCSS指定を紹介します。 結論から説明すると、以下の指定を提案します。 body { overflow-wrap: anywhere; /* 収まらない場合に折り返す */ word-break: normal; /* 単語の分割はデフォルトに依存 */ line-break: strict; /* 禁則処理を厳格に適用 */ } この記事では上記の指定にいたった理由と、折り返しの理解について必要なoverflow-wrapとword-breakプロパティを中心に解説します。 overflow-wrap overflow-wrapは
4月11日、AppleはSafari Technology Preview Release 192を発表した。このリリースは、認証、CSS、編集、JavaScript、メディア、レンダリング、Web API、Web Extensions、およびWeb Inspectorに関連する多数の改善と新機能が導入されている。 4月11日、AppleはSafari Technology Preview Release 192を発表した。このリリースは、認証、CSS、編集、JavaScript、メディア、レンダリング、Web API、Web Extensions、およびWeb Inspectorに関連する多数の改善と新機能が導入されている。 特に注目すべき新機能には、View Transitions APIのサポート、メディアソース拡張(MSE)のワーカーでのサポート、JavaScriptのObject
ユーザーエージェント文字列は、ユーザー分析やデバイス・ブラウザーで処理を分けたい時に広く用いられています。取得方法は昔からあまり変わっておらず、ウェブブラウザーの種類・バージョン・プラットフォームごとに固有の文字列を取得しています。 実は、この文字列が近い将来固定化され、正常に情報を取得できなくなってしまうことをご存知でしょうか? 今回はユーザーエージェント文字列の変遷を追いながら、現在策定されている新しいユーザーエージェント仕様である「User-Agent Client Hints」の概要を紹介します。 User-Agent Client Hintsの使い方、ユーザーエージェント文字列が固定化された時の対応についてもまとめています。 旧来のユーザーエージェント判別方法 従来のユーザーエージェント文字列取得は、navigatorオブジェクトのuserAgentプロパティを参照する方法です。
<!doctype html> <meta charset="utf-8"> <script async type="module"> import {transpile, ScriptTarget} from "https://esm.sh/typescript@5.3.3?bundle&target=esnext"; import {minify_sync} from "https://esm.sh/terser@5.27.0?bundle&target=esnext"; for(const {type, textContent} of document.getElementsByTagName("script")){ if(type !== "text/typescript" || !textContent){ continue; } const js = transpile(tex
最近ではモダンブラウザをターゲットにした場合、リセットCSS自体は必要ないかもしませんが、設定しておきたいスタイルや一部のブラウザ用に設定しておきたいスタイルがあります。 その中の一つとして、img要素に設定しておくと便利なスタイルを紹介します。 最近のリセットCSS、また設定しておきたスタイルや一部のブラウザ用に設定しておきたスタイルは、下記をご覧ください。 2023年、現在の環境に適したリセットCSSのまとめ img要素に設定しておきたスタイルは、こちら。 img { max-width: 100%; /* 1 */ height: auto; /* 1 */ vertical-align: middle; /* 2 */ font-style: italic; /* 3 */ background-repeat: no-repeat; /* 4 */ background-size:
この記事は毎週必ず記事がでるテックブログLoglass Tech Blog Sprintの17 週目の記事です。 1 年間連続達成まで残り 36 週となりました! はじめに こんにちは!株式会社ログラスでエンジニアをしているd4te74です 🍷 ログラスではレポートと呼ばれる経営データ分析のための機能領域を改善するチームに所属しています。 この記事では、最近取り組んでいたレポート機能のフロントエンドのパフォーマンスチューニングとして行った「巨大なテーブルコンポーネントの仮想スクロール化」について書いていこうと思います。 ※ Loglass は事業の予実を管理するサービスです。 レポート機能とは レポート機能とは、Loglass 内に統合された部署や勘定科目などの経営データに対し集計・分析が行える機能で、ユーザー自身がそれらを自由度高く表形式に組み立てて、表示できるというものです。 以下の
ArcというブラウザをWebアプリケーション開発で利用してみました。使ってみて便利だったので、機能を紹介しようと思います。 Arcについて MacとiOSで利用できるWebブラウザです。執筆時点ではWindowsは対応していませんでした。 また、Chromiumを使用しているためChrome拡張も利用できます。 便利だった機能 Splite View ひとつのウィンドで同時に複数のサイトを開けます。 なので、左半分はChatGPTを常駐させ、右半分ではGithub、localhostなどを開くことができます。 Developer Mode Developer Toolが使えるのはもちろんですが、ArcのUIを開発者に適した状態にする「Developer Mode」が存在します。Developer Modeを有効化すると、上部にアドレスバーとショートカットボタンが表示されます。 上部にあるシ
Work with IndexedDB Stay organized with collections Save and categorize content based on your preferences. This guide covers the basics of the IndexedDB API. We're using Jake Archibald's IndexedDB Promised library, which is very similar to the IndexedDB API, but uses promises, which you can await for more concise syntax. This simplifies the API while maintaining its structure. What is IndexedDB? I
Webブラウザ上でNode.js環境を実現する「WebContainer」、iOS/iPadOS版Safariに対応。iPhone/iPadでWeb開発環境が起動 WebAssemblyを用いてWebブラウザ上でNode.js環境を実現する「WebContainer」などを提供するStackBlitzは、WebContainerがiOS/iPadOS 16.4以降のSafariに対応したことを明らかにしました。 iPhoneやiPad上のSafari上で、Node.jsをベースとしたWeb開発環境が起動することになります。 Big news: WebContainers are now supported on Safari, iOS and iPadOS!https://t.co/6SfOUDn4z2 pic.twitter.com/9PykipdNxJ — StackBlitz (@s
Document Picture-in-Picture API は策定中のものです。本記事で紹介した内容が変わる可能性があります。 Chrome111 から Document Picture-in-Picture API がオリジントライアルで試せるようになりました。 Picture-in-Picture とは? 次の画像のように、画面の一部に別でウインドウを表示することを Picture-in-Picture といいます。 Picture-in-Picture のサンプルページ 動画を右下で流しつつ、別の WEB サイトを確認するなど、1 つの画面で 2 つのウインドウが表示できます。 Document Picture-in-Picture API とは? 今回新たにオリジントライアルに追加された Document Picture-in-Picture API とは別に Picture-
作成日 2023-02-28 更新日 2023-02-28 author @bokken_ tag Clear-Site-Data, storage, Cookie はじめに Clear-Site-Data というクライアントサイドのデータを削除するための仕様がある。提案自体は2015年頃からある仕様だが、最近 Safari の Beta Release にリリースされ、もうすぐ主要ブラウザで実装が出揃う形になる。¶ この記事では、Clear Site Data とはどういう仕様なのかをまとめる。¶ Clear Site Data とは Web アプリケーションでは、オフライン時にも利用できるようにリソース (データ) をキャッシュしたり、パフォーマンスを高めるため、 local マシンにリソース (データ) を保持することがある。また、サービスをログインするのに Cookie にセッショ
3月15日(金)に実施したメンテナンスは、予定どおり終了いたしました。詳細は こちら 引き続き、教材として幅広くご活用いただけるよう、改修・最適化をすすめてまいります。 桃鉄で 駅や地理を覚えて勉強になった!日本全国の観光名所や物産 に詳しくなった! ─ そんな皆様の声に応え、『桃太郎電鉄 ~昭和 平成 令和も定番!~』に、 学校などの教育現場のカリキュラムを想定して 学習機能を追加した ブラウザ版『桃太郎電鉄 教育版Lite ~日本っておもしろい!~』が登場! 授業で活用できるよう、WEBブラウザやタブレット等でプレーできます! しかも学校教育機関への 導入は無料! 新ジャンルの桃鉄を、授業に取り入れてみませんか? 学校教育機関への提供を開始しました! ご利用のお申し込みは こちら!
「プレイヤーがサイコロを振って日本を周り、資産の増大を目指す」ゲームシステムで1988年の登場以来、幅広い年代から愛されている「桃太郎電鉄」シリーズ。 子供の頃プレイした方や、大人になっても友人達とプレイするという方も多くいるのではないでしょうか。 「桃太郎電鉄」は土地の名前や特産物、経済などを学べるという特徴から、知育ゲームとしても人気が高いタイトルです。 この度、株式会社コナミデジタルエンタテインメントは「桃太郎電鉄 教育版Lite ~日本っておもしろい!~」の学校教育機関からの導入申し込みをスタートしました。 「桃太郎電鉄 教育版」について 本タイトルは人気シリーズ「桃太郎電鉄」を教材としても活用できるよう制作されたタイトルです。 教育現場で使いやすいよう、ブラウザやタブレットでのプレイが可能となっています。 また、他人のプレイを妨害する要素が非搭載となっていたり、地理歴史に関する情
こんにちは。強いUIはボタンを捨てるをスローガンにScrapboxを開発しています。shokaiですshokai.icon Helpfeel Advent Calendar 2022の5日目の記事です 昨日はHelpfeelエンジニアのyado.iconさんでした 採用面接中にチャーハン・ピラフ判定器とスタバ警察botで盛り上がる会社に入った | 株式会社Helpfeel ヨコハマハウスフラペチーノがエンジニア採用の役にたった?みたいで良かったです <a>タグの挙動を工夫する事で、Scrapboxからみたいなボタンをなくしました 更新ボタンの役割は2つ 更新がある事を教える 押すとアプリが更新される Scrapboxも昔こういうメニューがあった 今はもう無い では解説ですshokai.icon SPAのタブ永遠に開きっぱなし問題とは? SPAとstaticなwebサイトの違い static
iOS SafariやAndroid Chromeの画面の高さいっぱいにヒーローイメージを表示するという表現は、よく見かけます。 高さをいっぱいに広げるのに100vhを使うと、不要なスクロールが発生し、意図通りに表示されません。 この問題を解決するために、特殊なCSSを使ったりJSを使ったりと、開発の現場では多くの苦労がありました。 本日(2022/11/30)リリースされたGoogle Chrome 108で対応したsvhを使えば、手軽に画面いっぱいのヒーローイメージを作れます。 Safari・Firefoxでは対応済み、Chromeと中身が同じEdgeは12/1週リリースの108で対応するので、全ブラウザで使える時代が来ます。もちろん、iOS・Androidも対応です。 本記事では、svhの使い方、同様に使えるようになったdvhやsvmaxなどの違い、従来の手法のデメリットをデモを交え
11月末にリリース予定のChrome 108で、ビューポートのサイズ変更動作が変更されます。簡単に言うと、Android版Chrome 108の挙動はiOS版Safariと同じになり、より一貫性のあるクロスブラウザの動作が実現されます。 サイズ変更動作の内容とサイズ変更の仕組み、Chrome 108のリリースまでに何を準備しておけばよいのかを紹介します。 特に、position: fixed;を使用している要素やビューポート相対単位に依存している要素は配置がずれてしまう可能性があるので、対応が必要です。 Prepare for viewport resize behavior changes coming to Chrome on Android by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。 はじめに レイアウトビューポートと
機能 天体 デフォルトで60万個以上の恒星のカタログ 追加で1億7,700万個以上の恒星のカタログ デフォルトで8万個以上の星雲星団のカタログ 追加で100万個以上の星雲星団のカタログ 星座のアステリズムとイラスト constellations for 40+ different cultures calendars of 35+ different cultures 星雲の画像 (メシエカタログのすべて) 本物のような天の川 大気の効果を考慮した、本物のような日の出や日没 惑星やその衛星 all-sky surveys (DSS, HiPS) 操作画面 便利な拡大・縮小機能 時間の操作 多言語対応 スクリプト入力画面 プラネタリウムのドームのための魚眼投影法 安価な私的なドームのための球面鏡投影 graphical interface and extensive keyboard con
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く