ウェブサイトのフォントは何を指定すればよいのでしょうか？　CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見かけることは少なくありません。それもそのはず、フォント事情は日々変化するもので、古い情報は役立たないことが多いためです。 本記事ではフォントに関わるここ最近のビッグニュースを取り上げつつ、教訓から学んだ変化に強い「無難」なフォント指定を紹介します。 結論 いきなり結論ですが、以下のフォントの組み合わせがオススメです。CSSのbodyセレクターなどにコピー＆ペーストして利用ください。 body { font-family: "Helvetica Neue", Arial,

JavaScriptのモダンな書き方 - ES2020のオプショナルチェーン、null合体演算子、動的import、globalThis等を解説 JavaScriptの仕様であるECMAScriptは年次で仕様が更新されています。ECMAScript 2020（ES2020）は2020年6月にリリースとなりました。現行のすべてのブラウザでES2020の機能は利用できますが、フロントエンドエンジニアにとって使いこなしたい記法ばかりです。 本記事ではES2020に焦点をあて、JavaScriptの新しい記述方法のメリットと使いどころを解説します。 オプショナルチェーン Optional Chaining（オプショナルチェーンやオプショナルチェーニングと呼ばれています）とは、?.構文を用いてnullやundefinedになりうる値へ安全にアクセスできる仕組みです。 利用シーン nullやunde

ウェブの黎明期である2000年頃と比べてはるかにHTMLはコーディングしやすくなりました。10〜20年前のHTMLコーディングはどのようなものだったのでしょうか。 この記事では、NetscapeとIEのブラウザ戦争に決着がついた後の、IE6が全盛期となった2000年代のウェブサイト制作を振り返ります。懐かさに浸たり、現代のウェブの成り立ちに通じる温故知新な情報として参照ください。 テーブルレイアウト / spacer.gif XHTML・CSSが普及するまではテーブルレイアウトが一般的でした。テーブルレイアウトとはtableタグを使い、格子状にレイアウトしていく手法です。テーブルレイアウトは、デザインファイル（Image ReadyやFireworks）から画像を切り出す「スライス機能」と相性のいい方法でした。 <table border="0" cellspacing="0" cellp

JavaScriptのモダンな書き方 - ES2017〜ES2018のawait・async, includes(), padStart()等を解説 ECMAScript 2015がリリースされて以降、JavaScriptの機能は大きく強化されました。const/let、アロー関数、クラス構文、Promiseなどが有名なところですが、ES2016、ES2017、ES2018、･･･ES2022、そしてさらにその先へJavaScriptの仕様は日々進化しています。JavaScript・TypeScriptの開発では、これまで当たり前だと思っていた手法を新しい新機能で置き換えることが何度もありました。 本記事では、JavaScriptのモダンな書き方について説明します。おもに2017年から2018年頃に搭載されたES2017・ES2018の機能について焦点を当てて解説します。 非同期のProm

JavaScriptのプログラミングはこれだけ効率化できる！ 使用歴5年目のエンジニアが送るWebStormの厳選神業集 JavaScript（ES2015+）、TypeScriptの需要は高まる一方ですが、プログラミングの効率化をどれくらい意識していますか？ プログラミングが効率化されれば、作業時間の短縮、ケアレスミスの軽減、プロダクトの品質の向上、そしてストレスの軽減に繋がります。 筆者が5年間使用している「WebStorm（ウェブストーム）」は、JavaScriptのプログラミングをする上での面倒な処理をほとんど自動化するための機能が揃っていて、ロジックの検討や表現の作り込みに時間を割けるようになります。 本記事では、多くの機能の中からとくに便利だと感じるものをピックアップして紹介します。WebStormを使ったことがない方も、「この作業はツールで自動化できるのか」という知識を得て、

米Adobeアドビ Systemsシステムズが主催の世界最大のクリエイティビティ・カンファレンス「Adobe MAX 2017」（ネバダ州ラスベガス）。二日目の10月19日は「スニークス」と題してAdobeの研究中の技術が発表されました。スニークスはAdobe MAXで最大の盛り上がりをみせる恒例の人気イベントです。 ここで発表されたものは現時点では製品に搭載されていないものの将来的に製品に組み込まれるかもしれない技術。過去の例を挙げると、Photoshopのディフォグ（霧を増減させる）機能やマッチフォント機能、最新のPremiere Proに搭載されたイマーシブ空間内での編集機能もかつてスニークスで発表された技術です。本記事では発表された11のテクノロジーを、現地のイベントに参加したスタッフ（池田）がレポートします。 今年は人工知能Adobe Senseiをフル活用した次世代技術のオンパ

JavaScriptには、モジュールという仕組みがあります。ECMAScript 2015のModulesの標準仕様として策定されており、現在はすべてのブラウザで利用できます。この機能は、ES2015 Modules、ECMAScript Modules、ES Modules、ESMなどと呼ばれています（以下、ES Modulesと記載します）。 webpackやViteなどのフロントエンドのツールを通して、すでにES Modulesを使っているエンジニアも多いと思います。この記事では、ブラウザネイティブで使えるES Modulesに焦点をあて、ES Modulesの導入で解決できる課題と利点を紹介します。 HTML+JSではモジュールの仕組みがなかった JavaScript自体には他のJSファイルを取り込む標準的な仕様が昔は存在しませんでした。外部JSファイルを読み込みたい時に、HTML

ブラウザからハードウェアアクセラレーションを使用してリッチな表現を実現できるWebGL。その新たなバージョンであるWebGL 2.0が主要なブラウザで正式対応し始めました。2017年1月にリリースされたChrome 56とFirefox 51や、2021年9月のSafari 15から標準で利用でき、ウェブ表現のさらなる進化への期待が高まります。 本連載では3回に分けてWebGL 2.0の新機能をデモを交えて紹介します。 WebGL 2.0の機能を使ったデモ まずはWebGL 2.0ではどんなことができるのか、機能ごとにデモを作成したので紹介します。それぞれ、マウスドラッグやマウスホイール/上下矢印キーで視点を変更できるので動かしてみてください。 ※各デモはWebGL 2.0で作成しています。WebGL 2.0に対応したブラウザでご覧ください。 Geometry Instancing Geo

ウェブ業界の当たり前だと思っていることでも、同業他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・ この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載第2回目となる本記事ではウェブ業界に関する「学習方法」「HTMLのコーディングスタイル」「JavaScriptのコーディングスタイル」「労働時間」「フォント」の5分野のアンケート結果を紹介します。アンケートは筆者のTwitterから実施していたものです。 HTMLやCSSを学ぶとき、何で勉強をはじめましたか ウェブ制作の初学者はどのような手段で勉強しているのでしょうか。従来は解説書や会社/学校で学ぶことが多かったと思いますが、最近は動画学習サイトが充実しています。2013年以降に学び始めた方へ質問しました。 208件の回答があり「本」が34%、「学校/会社/スクール」が31%、