不用意に font-feature-settings を使うと日本語表示がおかしくなる - 果樹園
CSSでOpenTypeフォントの機能を制御できるようになった結果、欧文ページで font-feature-settings: "dlig"; が指定してあると、日本語に機械翻訳して読もうとした時に合字になって欲しくないところまで合字になってしまう。 「〜になります。」が「〜になり〼。」になる。— りんご🍏夜明けのリモートワーカー (@mstssk) April 17, 2024 本日は晴天なり <div style="font-feature-settings: 'nalt';"> 本日は晴天なり </div> 環境にインストールされているフォント次第だと思うので、手元のスクショも。 ※mac上のChrome。 記事を書いたきっかけのツイート https://twitter.com/yodare_inu_/status/1780431031218343978 参考 font-featu
ウェブアクセシビリティ導入ガイドブック｜デジタル庁
デジタル庁では「誰一人取り残されない、人に優しいデジタル化」を実現するため、継続的に「ウェブアクセシビリティ」の向上に取り組んでいます。この度、ウェブアクセシビリティに初めて取り組む行政官の方や事業者向けに、ウェブアクセシビリティの考え方、取り組み方のポイントを解説する、ゼロから学ぶ初心者向けのガイドブックを公開します。 優しいサービスのつくり手になる一助として、ぜひご活用ください。 公開の背景ウェブアクセシビリティの向上に取り組むには、非常に専門的な複数の規格とガイドラインをそれぞれ確認する必要があります。そのため、適切なやり方がわからないままに、現在は間違っている対応の踏襲、不要・過剰な対応、不適切な対応をしてしまうことがあります。ウェブサイトだけではなく、申請・手続等のデジタルサービスの重要性が増す中で、最新の技術動向を踏まえた、初心者が学習できる行政機関向けの研修資料が不足していま
<input type="date"> - HTML: HyperText Markup Language | MDN
HTML チュートリアル HTML の基本 HTML 入門 HTML 入門の概要 HTML を始めよう ヘッド部には何が入る? HTML のメタデータ HTML テキストの基礎 ハイパーリンクの作成 高度なテキスト整形 文書とウェブサイトの構造 HTML のデバッグ 評価課題: 手紙のマークアップ 評価課題: コンテンツのページの構造化 マルチメディアとその埋め込み マルチメディアとその埋め込みの概要 HTML の画像 動画と音声のコンテンツ object から iframe まで — その他の埋め込み技術 ウェブへのベクターグラフィックの追加 レスポンシブ画像 評価課題: Mozilla のスプラッシュページ HTML の表 HTML の表の概要 HTML の表の基本 HTML 表の高度な機能とアクセシビリティ 評価課題: 太陽系の惑星データの構造化 リファレンス HTML 要素 <a>
WordPressをやめ、静的サイトジェネレーターで高速化した話 - ICS MEDIA
ICS MEDIAは2019年4月にリニューアルしました。シンプルでモダンなデザインへと見栄えは変わり、フロントエンドの最新技術によって爆速なサイトへと生まれ変わっています。 技術的におもしろいポイントは、WordPressワード・プレスを廃止したことです。 この記事では、オウンドメディアとしてWordPressをやめた理由、代用技術の選定で苦労したことを紹介します。 リニューアル前後の違い リニューアルによってどのくらい改善したか、定量的な結果を紹介します。ウェブサイトの性能を示す指標としてLighthouse（Google ChromeのデベロッパーツールのAuditsタブ）というツールがあります。 Lighthouseの採点で、リニューアル前は80点ほどだったのが、ほぼ満点のスコアをたたき出せるようになりました。SEOやアクセシビリティの点数も満点です。 動画でもご覧ください。リニュ
<a href="#top">がHTML5で正式仕様になってた件 - Qiita
これなんだけども: HTML - <a href="#top">Top of the Page</a>は該当するフラグメント（<div id="top">や<a name="name">）がなくても仕様的に正しい - Qiita 文書の先頭へのリンク · terkel.jp 仕様についてあんまり書いてなかったので自分で読んでみたまとめ書く。 href="#top"を指定すると自動的にページの先頭へのリンクになる ……というブラウザーの独自仕様があったわけなんだけども、これが正式に仕様として明記されたとの事。 MDNの説明が一発で分かる。 a 要素 - HTML | MDN これは、ハイパーリンクのソースを定義するアンカー要素で唯一必須の属性です。（中略） 補足: 特別なフラグメントである "top" を使用すると、ページの最上部に戻るリンクを作成できます。例: <a href="#top"
aタグで#topにリンクするとページ先頭にスクロールするのは仕様 - hogashi.*
はてなエンジニア Advent Calendar 2022 - Hatena Developer Blog の 2023/1/5 の記事です。 id:hogashi です。 目次 目次 3行 こういうやつ 仕様を眺める 追記1: おまけ 追記2: id="top" な要素があるときは？ 3行 a タグの href 属性に #top と書くと、クリックしてページの先頭にスクロールできる、という話をしているのを見て、 それって仕様なんだっけ、と思って調べたところ、 仕様でした こういうやつ クリックしてこのページの先頭にスクロールする <a href="#top">クリックしてこのページの先頭にスクロールする</a> 仕様を眺める MDN の a タグのページにちょろっと書いてあって、 HTML の仕様に定義されているよ、とある <a>: The Anchor element - HTML:
どうしてHTML5が廃止されたのか | フューチャー技術ブログ
フロントエンド連載の5記事目です。 HTML5が2021年の1月に廃止されました。 Webエンジニアとしてバリバリ活躍されてる方やエグゼクティブテックリードのような肩書きを持つ方にとっては「何をいまさら」という話題かと思います。 しかしながら、今年も新人さん入ってきてくださったので、プログラミングを学習中にHTML5という文字列に悩まされないように、そもそもHTML5とは何かや、廃止された経緯をまとめてみます。 HTML5とはWebサイトを作るときに必ず書くことになるHTML。Webサイトのコンテンツ、つまり中身や構造を作るために使うマークアップ言語です。 そして、その最近版として10年ほど前に登場したHTML5。当時は Webニュースなどで盛んに特集が組まれていましたが、このHTML5がついこないだ、2021年1月28日に廃止されました。 広義のHTML5 / 狭義のHTML5HTML5
javascriptでテキストファイルやCSVファイルを読み込む方法。 | zip358.com
javascriptでテキストファイルやCSVファイルを読み込む方法。 2018年11月13日 Logging javascriptでテキストファイルやCSVファイルを読み込む方法は下記になります。 この他に、jqueryだとajaxを使用して読み込む方法などもありますが、あえて javascriptで記述しています。 rt(); function rt(){ var xmlHttp = new XMLHttpRequest(); xmlHttp.open("GET","xxx.txt",true); xmlHttp.send(null); xmlHttp.onload = function(){ var data = xmlHttp.responseText; } } 追記：アクセス数が結構あるのでサンプルを作りました。 下記のコードをお試しください。 デモページはこちらになります。 h
色モードの切り替え
Windows 10では「アプリ モード(App mode)」、Android 10では「ダークモード(Dark Theme)」、macOS 10.15やiOS 13では「外観モード(Appearance)」と、それぞれ呼ばれている色モードを尊重しつつ、ユーザーの好みで明るくも暗くもできるようにした。どう実装すると効率的かを考えたかっただけなので、次期マイナーバージョンでは消える。 ウェブページでの色モードの設定には、3つの状態の管理が必要らしい。ダーク・モードにしているが特定のウェブページは白背景で見たい、またはその逆があるため、自動(OSやブラウザーでユーザーが設定したモードに従う)と、強制的にダーク、そして強制的にライトにできるべきという主張だ。実装はあまり見ないが、主張は散見される。 僕はアプリケーション側、つまりブラウザーが本来持っているべき設定だと思うので、あまり納得はしていな
脱Bootstrapガイド 〜フルスクラッチCSS〜 - Qiita
2021/02/12 追記 この記事を執筆した当時、Bootstrapがどのサイトでも使われていました。 当時のBootstrapはjQueryと密結合していたり、いろいろと剥がす動機があったのですが、 現在のBootstrapは内部的にもflexboxになっていたりと改良されています。 まずは剥がす前に最新版への更新を検討してみてください。 一方で、TailwindやインラインスタイルCSSなど、Bootstrapを採用しづらい場面も増えてきています。 その場合にはやや記述は古いのですが本記事が役に立つ場面もあるでしょう。 ポイントは、腹をくくってFlexboxのプロパティについて真剣に学ぶことです。 追記終わり Bootstrapは便利ですし、デフォルトのスタイルもフラットでかっこいいですね。 デザイナーでなくてもそれなりに整った画面が作れるということで、大変便利なBootstrapで
Enabling Password AutoFill on an HTML input element | Apple Developer Documentation
Make sure a web view or webpage provides the correct AutoFill suggestions.
画像最適化戦略 WebP 編 | blog.jxck.io
Intro 本サイトの PNG/JPEG で提供している画像については、よりサイズが小さくなりやすい WebP 形式を提供し、対応ブラウザに配布するようにした。 フォーマットを出し分けるため、画像の指定は <picture> 要素を用いて対応した。 画像最適化シリーズ第 3 回目のエントリである。 画像最適化戦略 PNG/JPEG 編 画像最適化戦略 Picture 編 > 画像最適化戦略 WebP 編 画像最適化戦略 SVG/Font 編 画像最適化戦略 Lazy Loading 編 WebP 従来の Web において、画像は用途毎に PNG/JPEG/GIF などを使い分けていた。 一般的には以下のような使い分けが行われている。 WebP は Google が開発した画像フォーマットであり、これら三つの用途全てに適した上で、さらに小さいサイズに圧縮できる場合が多い。 また、 WebP
HTML/CSS/JSやるときの最小テンプレート
HTMl/CSS/JSをいじるときの最小テンプレートを作りました。以下からcloneかダウンロードできます。 https://github.com/kotofurumiya/minhtml-template 簡単なホームページやウェブアプリを作りたいときに活用してください。 使い方はリンク先に書いています。ライセンスはフリーなので自由に使い放題です。 余談 作った動機としては 仕事とかで「HTML書くときって最初どうすればいいの？」と聞かれること多い 意外とこういうの存在しない（びっくりした……） 有名なボイラープレートの類はあまりにもデカすぎる ググって出てくるテンプレートもだいぶデカい ググって出てくるテンプレートの類、デカいんですよね。いや実際本格的なウェブアプリ作ろうとするならそれぐらい盛り盛りになるんですけど、大半の人が求めてるのってたぶんもっと素朴なテンプレートでしょう。 仕事
★★CSSだけで簡単！ハンバーガーメニューの作り方（スマホ対応）
HTML <header> <div id="nav-drawer"> <input id="nav-input" type="checkbox" class="nav-unshown"> <label id="nav-open" for="nav-input"><span></span></label> <label class="nav-unshown" id="nav-close" for="nav-input"></label> <div id="nav-content">ここに中身を入れる</div> </div> </header> inputやらlabelやらが入っていて、何のことが分かりづらいかと思うので、少し解説をします。 解説 全体はheaderで囲んでいます。他にもサイトタイトルやロゴ画像を入れるのではないかと思います。<div id="nav-drawer">の中に
W3Cで現在公開されているHTMLとDOM仕様は将来廃止されます - 水底の血
まえがき W3C（とWHATWG）からの公式なアナウンスはまだ確認していませんが、何度目かに結成されるW3C HTML WorkingのDraft Charterと、このCharterから辿れるDRAFT Memorandum of Understanding Between W3C and WHATWG（Memorandumは日本語で覚書などと訳されるので、ここでも覚書と呼びます）がブログエントリーのタイトルのソースになります。もっとも、今確認できる覚書もドラフトですから、変更があるかもしれません。しかしながらURLで観測できるわけですから、大筋でW3CとWHATWGとの間で合意が取れているのではないかと推測します。あとは、覚書だけでなくCharterもドラフトということになっていますが、以下の文章では面倒なので省略します。最後にお約束ですが、このブログエントリーは「だいたいあってる」感
静的サイトをとにかく高速化する話
自分のポートフォリオサイトをサンプルに、どのくらいの容量削減ができるのかを確認してみました。 jsおよびCSSは、サイトの表示に必要な要素を1ファイルにバンドルした状態です。 画像ファイルはjpegの圧縮率などによって最終的なサイズが大幅に変化するので、jsとCSSのサイズ変化のみを取り上げました。 Bootstrap + Font Awesomeのような重量級フレームワークを使用しても、十分に実用的な容量まで削減できました。これならスマホ+3G回線での表示も心配ありません。 手法 適用しやすさを順に手法を並べると、以下のようになります。 遅延する 圧縮する キャッシュする まとめて削る 遅延する サイト上にあるほとんどのリソースは、実際には後から読み込んでも問題なく動作します。 まず最小限の構成でサイトを表示させ、重いファイルは後から読み込みます。 javascriptの遅延読み込み h
Android版Chromeのタブ（アドレスバー）の色を変更する方法
結果 アドレスバーって意外と目立つ部分なので、カラーの選定は慎重に行ったほうがいいですね…うちのブログは目立ちすぎないようにヘッダーの色に合わせました。 あ、ちなみに暗めの色を指定すると読み込み時のプログレスバーの色が白に変わるっぽいです。なんかお洒落。 メリットは… このコードが効くのは、Android5.0以降かつAndroid用Chrome（Ver39以降）から閲覧しているユーザーに限られています。 そのため、参考元のブログ含む各所で「特に必要ない機能」と言われているというのが現状です。悲しいなぁ… ただ、こういう細かいところまでカスタマイズしているブログに出会うと「お、こだわってるねぇ…」という謎の感動を覚える変な人種もいるので、個人的には一応メリットがあると思います。多分。ね。
正しいfaviconの設定方法を対応ブラウザ別にまとめる | Glatch（グラッチ） – 夫婦で活動するフリーランスWeb制作ユニット
サイト制作で忘れられがちな印象があるfaviconの設定ですが、とっても重要なので正しい書き方で設定しましょう！ <link>でfaviconを指定することがありますが、以下の記述をよく見かけるかと思います。 <link rel="shortcut icon" href="/path/favicon.ico"> rel属性にshortcutの記述が必要なのは、IE8以下の対応が必要なときのみです。 shortcutは非準拠ですので使わないようにしましょう。 古いブラウザに対応する必要がないサイトであれば、rel属性にshortcutは不要ですし、ファビコンの画像もpngやgifが問題なく使用できます。 そこで、どのブラウザまで対応するかによりどう記述すればよいかが変わってくるので、一覧にまとめました。 IE8以下も含めたIE、Chrome、Firefox、Safari、Opera、Edge
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
KUBRICK.blog.jp on X: "たった今、電話であったことを話すぜ・・・ 相手「ホットメールを使ったことありますか？」 私「いえ、ないです」 相手「じゃあ、お仕事お願いできないですね」 私「え、どのメールソフト使っても同じじゃないですか！」 相手「いえ、ホットメール使用経験が必須なのです」…"
池田 泰延 on Twitter: "「Webフォントが重たい」ことへの対策。 ちょっとマニアックですが、各サービスの工夫が興味深かったので、まとめました。 #HTML #CSS https://t.co/nzYBU8JpPf"
