新しいビューポートの単位（sv*、lv*、dv*） | フロントエンドBlog | ミツエーリンクス
ミツエーリンクスでは全社的にInterop 2022の重点分野について調査をしています。 今回はその中から「新しいビューポートの単位」について紹介します。 ビューポートとは ビューポートはWebページを表示するための領域で、ブラウザウィンドウからアドレスバーなどのUIを除いた部分になります。 ビューポートの単位とは ビューポートの単位は相対的な長さの単位で、ビューポートの長さに従って指定します。 ブラウザで表示したビューポートの長さが対象となるため、@pageで宣言した印刷用のスタイルでは無効になります。 なぜ新しいビューポートの単位が必要になったのか 従来のビューポートの単位はUIがスクロールによって拡大縮小するような機能を持つ前に作成されました。 そのため後発の動的にサイズが変わるUIに対応しておらず、画面をスクロールする前の初期表示時に決定されたビューポートサイズを維持し続けます。
意外と知らないvisibilityの活用方法！ | フロントエンドBlog | ミツエーリンクス
※もっと具体的に知りたい方はCSS 2.2の11.2 Visibility: the 'visibility' propertyなどをご覧ください。 visibility vs display vs opacity ただ要素を見えなくするだけなら透明度を操作するopacityプロパティがあります。しかしそれよりもvisibilityが優れている点は、不可視になる（値がhiddenやcollapaseになる）と同時にアクセシビリティツリーからしっかり削除され、スクリーンリーダに読み上げられずタブフォーカスも当たらなくなるというところです1。display: none;との違いは「表示領域が残るかどうか」以外違いはありません。 特に、値collapseはテーブルなどで特定のセルや行だけを非表示にしたい場合などにも重宝します。display: none;でも同じような表現になりますが、colla
Chrome DevToolsのRenderingタブを活用しよう | フロントエンドBlog | ミツエーリンクス
Chrome DevToolsにはさまざまな機能が搭載されています。そのうちの1つ「Rendering」には、ページのレンダリングパフォーマンスを視覚化する機能や、さまざまな見え方を疑似的に再現する機能が含まれています。 サイトのレンダリングパフォーマンス改善の取り組みに活用できる、こちらのRenderingタブ内の各機能についてご紹介します。 利用方法と各機能について Renderingタブはデフォルトだと非表示になっており、利用するにはまず次のいずれかの方法で表示する必要があります。 Chrome DevToolsを開いた状態でWindowsではCtrl+Shift+P、MacではCommand+Shift+Pを押して表示されるコマンドメニューに「Rendering」と入力し、「Show Rendering」を選択 Chrome DevTools内の三点ドットから「More tools
W3C発行のHTMLがすべて廃止された日 | フロントエンドBlog | ミツエーリンクス
あくまで有効日数はW3C仕様の名目上のステータスであり、参考情報にしか過ぎないわけですが、HTML5とそれよりも前に策定された(X)HTML仕様は、2018年3月に一斉に廃止され、HTML Review Draftと入れ替わるタイミングでHTML 5.1とHTML 5.2が同時に廃止されました。Second Editionを含んでいますが、HTML5シリーズがいずれも勧告から3年で廃止されているのは何とも興味深いところではあります。 また、古い話ですが、当時HTML5のEditorを務めていたHixieことIan Hickson氏が2008年に「HTML5の完成は2022年ごろになる」と発言していたことがありました（HTML5の完成は2022年！？ | Web標準Blog | ミツエーリンクス）。2012年にW3CとWHATWGのHTMLが分裂[1]し、結局今年になってWHATWG HTM
記述次第でAutoprefixerいらず？！CSS Grid LayoutのIE11対応方法と未サポートブラウザのフォールバック例 | フロントエンドBlog | ミツエーリンクス
特に労力がかかるのがIE11ではGirdアイテムの配置で、-ms-grid-columnと-ms-grid-column-spanを適宜追記しなくてはならない点でしょう。 .grid-item { /* IE10+での指定 */ -ms-grid-column: 1; -ms-grid-column-span: 2; /* モダンブラウザでの指定 */ grid-column: 1 / 3; } そこで登場するのがIE11でのCSS Grid Layoutサポートの強い味方、Autoprefixerです。 AutoprefixerでIE11のCSS Grid Layoutの対応が楽に Autoprefixerの最新版（2018年6月現在ではv8.6.4）は、IE11用のCSS Grid Layoutプロパティの追記はもちろんのこと、grid-areaの自動変換やIE11では未サポートである
どこで読めるの？今さらきけない仕様書の在り処！ | フロントエンドBlog | ミツエーリンクス
皆さんこんにちは！UI開発者の宇賀です。 先日、CSS Text Module Level 4のEditor's Draftが公開されました。「10.2.3. Japanese Paragraph-start Conventions in CSS」の章で登場する図版に「tentsuki」とローマ字で書かれているのがなんだかちょっと個人的にじわりポイントだった今日この頃。 さて、皆さんはこうしたWeb標準にまつわるドキュメントの動向についてどれくらいアンテナを張っていらっしゃるでしょうか？ 今回は「Web標準に関する仕様書がどこで読めるのか？」をテーマに、その一部をご紹介します。 もしも読者の皆さんの中に、就活を前に「仕様レベルで勉強したい！」と思っている学生さんがいらっしゃいましたら、眺める程度の気持ちでさらっと見ていただければと思います...！ W3C まずは皆さんご存じW3Cです。 W
AMP HTMLでフォームを実装する | フロントエンドBlog | ミツエーリンクス
AMP発表当初はニュースやブログなどの記事ページでの対応が推奨されており、form要素やinput要素などフォームに関連する要素を使用するとAMP HTMLの制約違反となっていました。現在ではAMP HTMLの開発が進みフォームを実装するためのamp-formというコンポーネントや、インタラクティブな機能を実装するためのamp-bindが一般に公開され、AMP対応可能なWebサイトの幅が広がりました。 今回はAMP HTMLでフォームを実装する方法をご紹介します。 AMP HTMLでフォームを実装するためにはamp-formというコンポーネントを使用します。amp-formを使用することでフォーム関連のHTML要素が使用可能になり、執筆時点では次のHTML要素が使用可能になります。 form要素 input要素（type属性値がbutton、file、image、passwordは使用不可
代替テキストはtitle属性で代用可能か | アクセシビリティBlog | ミツエーリンクス
アクセシビリティ部では、社内のスタッフからアクセシビリティに関する質問や相談を受けることがたびたびあります。 特に代替テキストに関する質問を受ける機会が多いので、以前受けた質問の中から1つ紹介したいと思います。 リンク付きアイコンの代替テキストに関する質問 「別ウィンドウで開く」アイコン付きのリンクテキストのマークアップに関する質問を受けました。 質問：下記2種類のマークアップがアクセシビリティ上どのような違いがあるのか教えてほしい。 アイコンをimg要素に指定、代替情報をalt属性に記述 HTML： <a href="http://www.example.com" target="_blank">会社情報 <img src="/images/newWindow.png" alt="別ウインドウで開きます" class="newWindow"></a> アイコンを背景画像に指定、代替情報を
WebサイトのPerformance Budgetとは | フロントエンドBlog | ミツエーリンクス
Performance Budgetについて紹介します。まずはじめにBudgetとは日本語で訳すと「予算」という意味です。そして、予算とはある目標値の達成に向けて費やすことのできる最大割り当て量を示すものです。Performance Budgetを要約すると、Webサイトのページ上で使用できるリソースのサイズ、ファイル数、表示時間などを数値で定義することを示します。 本記事を書くにあたって「Performance Budget」と検索しても日本語圏の記事はあまりなく、まだ馴染みのない言葉かと思いました。そこで、今回参考にさせていただいたページも掲載していますのであわせて読んでいただけると理解が深まるかと思います。 何のために作るのか、そして誰が使用するのか モバイルサイトでは3秒以上表示に時間がかかると53％の人が離脱する調査結果があります。しかし、この速度を構築時、そして運用を開始してか
PWA（Progressive Web Apps）の現状とその開発方法 | フロントエンドBlog | ミツエーリンクス
PWAとは PWA（Progressive Web Apps）とは、ネイティブアプリ的な挙動をするWebサイトのことで、例えるならWebサイトとネイティブアプリを足して2で割ったような物と考えてもらえば解りやすいと思います。2015年に開催されたChrome Dev Summitや、2016年5月に開催されたGoogle I/O 2016において大々的に提唱され、実例や測定結果から2017年現在も注目を集めています。 個人的にはハイブリッドアプリの代名詞的な位置にあるApache Cordova（PhoneGap）のような印象があるPWAですが、後述の通りアプリとしての開発・公開の敷居は低く、仕様を理解していればエディタとGoogle Chromeだけで、特別なツールを使うことなく開発することができます。 PWAの利点 では、WebサイトをPWA化することに、どのようなメリットがあるのでし
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
