Smart Communication Design Company
ホーム > ナレッジ > Blog > フロントエンドBlog

フロントエンドBlog

Webのフロントエンドを構成する技術、特にHTMLやCSS、JavaScript、またそれらに関連する話題を扱うBlogです。

あのWAI-ARIAがIDL属性として実装される!?

UI開発者 宇賀

みなさんこんにちは!UI開発者の宇賀です。

昨夜Twitterをぼーっと眺めていましたら、非常に興味深いニュースが飛び込んできました。

WAI-ARIA 1.2の草案が先日公開されたとのこと。何が変わったのか気になりますよね...!早速見ていきましょう!

WAI-ARIA 1.1の勧告から変更点についてを見てみると、次のように書かれていました。

全文を読む

デバイスやネットワークに合わせたWebサイトの構築

UI開発者 泉口

スマートデバイスのブラウザでWebサイトを閲覧している時、意図しないタイミングでブラウザが閉じてしまうことはないでしょうか?
これはWebサイトに限らずアプリでも同じことが言えますが、デバイスへの負荷が多いWebサイトではメモリ使用量やデバイス状況に応じてセーフティが働き、ブラウザを強制終了します。

もし管理/運営しているWebサイトでそのような事象が起きてしまった場合、ユーザーはどのように感じるでしょうか?
最初は何らかの不具合と思うかもしれませんが、何度も不具合が続くとWebサイトへの信頼が落ちてしまい、最悪の場合、二度と訪れない可能性も考えられます。

このような事象を未然に防ぐ方法としてWebサイトのパフォーマンスチューニングは勿論必須になりますが、昨今のブラウザから得られる情報はとても多く、デバイスに搭載されているメモリの量やCPUのコア数を把握することができるので、デバイスの処理能力に合わせて挙動を変更することが有効です。

今回はnavigatorオブジェクトを主に搭載されているAPIとネットワークを含めたデバイス情報を取得する方法をご紹介します。

全文を読む

記述次第でAutoprefixerいらず?!CSS Grid LayoutのIE11対応方法と未サポートブラウザのフォールバック例

UI開発者 古川

CSS Grid Layoutはグリッドレイアウトを実装するのに非常に便利なプロパティですが、案件で用いる際に頭を悩ませるのがブラウザのサポート状況ではないでしょうか。

2018年6月現在、世界的に見て84%のブラウザがCSS Grid Layoutをサポートしており、モダンブラウザと位置付けられているブラウザ(Edge、Chrome、Firefox、Opera、Safari、iOS Safariなど)ではすべて実装することができます。しかし、局所的な観点から見ると日本において依然シェアがあるIE11はIE10からの古い仕様でCSS Grid Layoutが実装されており、アフリカでシェア率が高いOpera miniや主に中国などで使われているQQブラウザ、Baiduなどは未サポートです。

特に日本ではIE11を開発対象から外しづらい傾向にあるため、CSS Grid Layoutの実務での導入はためらいがちですが、対応のポイントをしっかりとおさえておけば充分用いることができます。

全文を読む

ブラウザを自動的にリロードするいくつかの方法

UI開発者 板垣

AIやRPAが一躍脚光を浴び「自動化」というキーワードをよく目にするようになりました。
Web制作でも自動化できることが沢山ありますが、その代表ともいっていいのが「ブラウザの自動リロード」ではないでしょうか。

ブラウザに移動し手動でリロードするのはとても手間ですし、非効率です。
手動でリロードするのにかかる時間を1回0.1秒として、1日100回リロードしているとしたら、1日に10秒、1ヵ月間で3分20秒、1年間では40分もかかってしまいます。

たかが、0.1秒されど0.1秒です。
未だにファイルを更新するたびにエディタからブラウザへ行き来しているという方は、今日で卒業しましょう。

今回の記事ではブラウザを自動リロードする方法をいくつかまとめてみましたので、気に入った方法があれば活用してみてください。

全文を読む

CSSが効かない!?fieldset要素でも簡単にテーブルレイアウトを実現できるdisplay: contents;

UI開発者 宇賀

みなさんこんにちは!UI開発者の宇賀です。
いつもご愛読ありがとうございます!

お申し込みやお問い合わせ画面などで、入力フォームはコーポレートサイトだけでなくBtoCのコンテンツでも度々見かけますよね。

フォーム関連要素であるfieldset要素はコンテンツカテゴリ名の通り、フォームを実装するときに度々登場する要素の1つですが、スタイリング時にクセのある要素としても有名です。

今回は、そんなfieldset要素のスタイリングに最近話題のdisplay: contents;を利用してみようというお話です。

fieldset要素の具体的な利用方法については、以前公開された記事をご参照いただければと思います。

全文を読む