2024年に最適なfont-familyの書き方 - ICS MEDIA
ウェブサイトのフォントは何を指定すればよいのでしょうか？ CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見かけることは少なくありません。それもそのはず、フォント事情は日々変化するもので、古い情報は役立たないことが多いためです。 本記事ではフォントに関わるここ最近のビッグニュースを取り上げつつ、教訓から学んだ変化に強い「無難」なフォント指定を紹介します。 結論 いきなり結論ですが、以下のフォントの組み合わせがオススメです。CSSのbodyセレクターなどにコピー＆ペーストして利用ください。 body { font-family: "Helvetica Neue", Arial,
VS Codeを使いこなせ! フロントエンジニア必須の拡張機能7選 - ICS MEDIA
「Visual Studio Code（略称：VS Code）」はMicrosoftが提供している無償で高機能なエディターです。標準でも十分な機能は備わっていますが、拡張機能をインストールすることで、より使いやすく自分にあったエディターへとカスタマイズできます。 本記事では、HTMLコーダーやフロントエンドエンジニアに役立つ拡張機能を紹介します。 1. IntelliCode IntelliCodeはMicrosoft謹製の公式プラグイン。AI支援による次世代のコード補完がJavaScriptやTypeScriptで利用できるようになります。APIの一覧がアルファベット順に提示されるのではなく、利用する可能性の高いAPIがAIによって予測されます。 コード補完の様子を次のスクリーションショットでご覧ください。入力候補の「★」マークが付いているところが、補完候補になっているところです。人工知
Sassのモダンなコンパイル環境が3分で作れるParcel入門 - 独自設定ファイルは不要 - ICS MEDIA
ウェブ開発ではSass、TypeScriptなどの言語のコンパイルや、出力ファイルの最適化、ローカルサーバーの起動などさまざまな作業が求められます。現在は、それらの作業を自動化するwebpackやGulp.jsがよく使われています。 webpackにはwebpack.config.js、Gulp.jsにはgulpfile.jsという設定ファイルがそれぞれ必要で、両ツールともその使用方法を覚える学習コストがあります。 Parcelパーセルというツールを使うと、webpackやGulp.jsのような独自の設定ファイルを使うことなく、各種言語のコンパイルやバンドルができるようになります。バンドルとは、複数のファイルを1つにまとめることを指します。Parcelとは、設定ファイルが不要で高速なウェブアプリケーションのバンドルツール。次のようなことが可能です。 Sassのコンパイル Autoprefi
今の時代、ウェブページは一瞬で表示するべき！ 画像の遅延読込に役立つamp-imgの使い方 - ICS MEDIA
ウェブページの表示速度は、離脱率やコンバージョン率にもっとも影響する重要なポイントです。Googleが公表した調査結果では、「表示に3秒以上かかると、約53%のユーザーは離脱する」「表示速度が1秒から6秒に落ちると、直帰率は106%上昇する」というデータが出ているようです。 表示速度を改善する施策は色々とありますが、本記事では「AMPアンプ（Accelerated Mobile Pages）」を作成する際に利用するJavaScriptライブラリーを使って、簡単に表示速度を改善する手法を紹介します。 AMPとはウェブページの読み込みを高速化させる技術 「AMPアンプ（Accelerated Mobile Pages）」とは、名前の通りモバイルでのウェブページの読み込みを高速化させる技術です。 本サイト（ICS MEDIA）では以前「AMPの利点と対応HTMLの作り方」で導入方法を紹介していま
フロントエンド開発に役立つ話題のコード整形ツール「Prettier」とは - ICS MEDIA
Prettierとは、Node.js上で動作するコードフォーマッターです。本記事ではPrettierの利点と使い方を紹介します。 コードフォーマッターの必要性 複数人で開発を行っている場合、各々が自由にコードを書いてしまうと、さまざまな書き方が混在し統一性のない読みづらいコードとなってしまいます。統一されていないコードは、可読性が低くメンテナンス性が悪くなり、ミスが発生する原因となることもあります。 コードフォーマッターを利用すると、自動的に決められたコードスタイルに整形してくれるため、開発者はコードスタイルを意識することなくコーディングに集中でき、可読性の高いコードを作成できます。 Prettierを導入する利点 コードフォーマッターは、WebStormやVisual Studio Codeなどのウェブ制作のエディターにも付属していますが、これらはユーザー環境に依存します。つまり、開発者
あえてズレを入れるのがミソ！ ウェブのアニメーションを「いい感じ」に魅せるズルいテクニック - ICS MEDIA
アニメーションはゲームだけではなく、ウェブサイトやウェブアプリのUIなど、多くの用途で必要となります。流行りのマイクロインタラクションでもアニメーションは重要視されています。しかし、アニメーションに対して苦手意識を持っている方も少なくないのではないでしょうか。今回は私が普段トゥイーンアニメーションを作る時に使っている、簡単に「いい感じ」に仕上げるズルいテクニックを紹介します。 本記事で扱うのはトゥイーンと言われるアニメーションの種類です。これは、始めと終わりの状態を指定することで、中間の状態を自動的に補完しアニメーションさせる技術。具体的にはCSS TransitionやjQueryのanimate()関数、Adobe Animate CCのトゥイーン機能のことを指します。 本記事のデモはCreateJSで作成していますが、CSS3やjQueryなど他のテクニックでも応用できる内容となって
文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの
Sparticle徹底解説。パーティクルエフェクトを作ろう！ - ICS MEDIA
2013年3月26日（水）に弊社が開催したWebGL & Stage3D 勉強会 (第5回)にてパーティクルエフェクトツールの「Sparticle」についてのデモをさせていただきました。今回はそのフォローアップ記事になります。 1. Sparticleの紹介 Sparticleは、リアルタイムプレビュー付3Dパーティクルエフェクト作成ツールです。AIR製のデスクトップツール、オンライン上のWebツールがあり、いずれも無料で利用できます。FlashのStage3Dを使用していますのでGPUパワーを利用し高速に動作する上、GUIによるシンプルな操作が特徴です。ツールで作成したエフェクトは、Away3Dライブラリを使用したコンテンツにに取り込むことができるため、3Dの展示デモや、ゲームコンテンツ、モバイルアプリなどの開発に利用できます。(SparticleはCheng Liao氏による実験的プロ
HTML5 CanvasとWebGLの使い分け―CreateJS勉強会/池田発表資料 (前編) ― ICS LAB
2015年2月10日（火）、アドビシステムズ株式会社でCreateJS勉強会 (第5回)が開催され30名を超える方々が来場されました。勉強会のフォローアップとして、発表資料「CreateJSで制作するスペシャルコンテンツ」のスライドをブログ記事という形で公開します。本記事では口頭で発表した内容もできる限り記載しました。 なお、前編（CanvasとWebGLの比較）と後編(WebGLの最適化)の二部構成にしています。前編となる本記事ではスペシャルコンテンツ制作にあたり調査したHTML CanvasとWebGLの双方の利点・欠点をまとめています。 HTML CanvasとWebGL 今回のテーマは「HTML CanvasとWebGLの使い分け」です。皆さんもご存知の通り、HTML5のCanvas要素 (JavaScript ではCanvasRenderingContext2Dオブジェクト）は従
Node.jsユーザーなら押さえておきたいnpm-scriptsのタスク実行方法まとめ - ICS MEDIA
ウェブ制作の現場では作業の自動化を行うことが多いです。Node.jsインストール時に付属するnpm (Node Package Manager)を使用すれば、タスク処理が実現できます。 npmとはNode.jsのモジュールを管理するためのツールであり、タスク処理にはnpmの機能のnpm-scriptsを使用します。本記事はnpm-scriptsを使ったタスク実行環境が構築できることを目標に解説します。 そもそもnpm-scriptsとは何か？ npm-scriptsとは、package.jsonファイルに記述可能なシェルスクリプトのエイリアスです。エイリアスとはコマンド名を別のコマンド名に置き換えることです。以下のnpm-scriptsはHello world!!を表示させるコマンドのエイリアスを作成する例です。 ▼package.jsonファイル { "scripts": { "say"
ウェブ制作にはWebStormがお勧め！ 使いこなせば操作が爆速になる機能のまとめ - ICS MEDIA
みなさんはウェブサイト制作で、どのテキストエディターを使用していますか？ 弊社ではHTMLやCSS、JavaScriptを扱うウェブ制作ソフトとして「WebStorm（ウェブストーム）」を全スタッフが利用しています。WebStormは有料のソフトウェアですが、日本語に対応しており、ウェブ制作に役立つ機能が豊富に搭載されていて値段以上の価値があります。 今回はWebStormの魅力について、「WebStormの概要」、「ウェブ制作に便利な使い方」、「コードリーディングに重宝する機能」、「コーディングの助けになる機能」の4点から紹介します。 ※本記事はWebStormの内容ですが、開発元のJetBrains社が提供しているIntelliJ IDEAやPhpStorm、その他のIDE（統合開発ソフト）で同様のショートカットや機能を使用できます。 本記事は初心者向けの内容ですが、続編記事「使用歴5
今どきの入力フォームはこう書く！ HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA
みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？ 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ
今どきの入力フォームはこう書く！ HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA
みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？ 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ
Web用保存は古い!? JPEG画質が改善したPhotoshop CC 2015の新方式の画像保存機能まとめ – ICS MEDIA
みなさんはAdobe Photoshopでどのように画像を書き出してますか？ 最新のPhotoshopではさまざまな画像書き出し機能が搭載されていますが、どれを選択するかで手間が異なります。 本記事ではPhotoshopのさまざまな画像書き出し機能を紹介し、最適な画像書き出し方法を検証します。 この記事はPhotoshop CC 2022 (23.5.0)で検証しています。 この記事のポイント 新しい画像保存方式（書き出し形式、クイック書き出し）は手間が少ないので、作業効率が良い 新しい画像保存方式はデフォルト設定で、小さなファイルサイズの結果を得られやすい アニメーションGIF保存は「Web用に書き出し（従来）」を使う Photoshopの画像書き出し方法一覧 Photoshop CCにおいて、画像を書き出す方法は分けて5種類あります。 書き出し形式 ［ファイル］→［書き出し］→［書き出
SourceTreeの使い方 | コミットの再編集・変更方法 - ICS MEDIA
Gitでの開発で、こんな体験はありませんか？ 3つ前のコミットのメッセージにミスがあった。修正したい・・・ このコミットの順番入れ替えたいなぁ このコミット、ホントは要らなかったから削除したいなぁ …… 実はそれGitでできるんです！今回はGitクライアントソフトのSource Treeソース・ツリーでコミットログを修正する便利な機能「rebase interactiveリベース・インタラクティブ」を解説します。 コミットの再編集ができる機能とは？ Gitではコミットを再編集する機能を「git rebase interactive」といいます。たとえば、コミットの入れ替えや編集、統合、削除ができます。正確に説明すると、コミットそのものを編集するのではなく、新しくコミットのコピーを作成して1つずつコミットを組み立てる機能になります。 Source Treeでコミットログを編集しよう Sour
SourceTreeの使い方 - 初心者が習得すべき基本操作(diff, stash, tag, revert, cherry-pick) - ICS MEDIA
SourceTreeの使い方 - 初心者が習得すべき基本操作(diff, stash, tag, revert, cherry-pick) GitクライアントのSourceTreeソースツリーは無料で使えるGitアプリケーションとして人気があります。「SourceTreeの基本的な使い方はバッチリ！ だけど、まだまだ使っていない機能があるなぁ」なんて人も多いのではないでしょうか？ そんな人へオススメの知っておくと便利な機能を5つ紹介します。 ※本記事は2024年4月現在のmacOS 14.4.1、SourceTree 4.2.7で解説しています。Windows版のSourceTreeでも同じ手順で利用できます。 はじめに - SourceTreeとは？ SourceTreeはGit / MercurialのGUIクライアントで、Atlassian社から無償で提供されています。Windows
HTML5 CanvasとCSS3のスマホブラウザでの描画性能 - ICS MEDIA
スマートフォンのブラウザでどの程度のグラフィック表現が可能なのか、性能が気になりませんか？ 近年、HTML5を利用できる分野はウェブサイトのみならず、ゲームやSPA（シングルページアプリケーション）など多岐に渡っています。そこで、本記事ではiOSやAndroidの新旧さまざまな端末を使ってパフォーマンスを検証。記事の前半では描画性能を、後半ではJavaScriptの計算性能を測定しています。 描画性能の検証ビデオをご覧ください さまざまな端末を使って、描画検証の様子を録画しました。この80秒の動画では画像のオブジェクトの表示可能な個数を測定しています。ビデオの後半が見どころで、iPhone 5のパフォーマンスが良すぎてビデオを早送りするほどスコアがでるまで時間がかかっています。 さまざまな端末のスコアを測定しました 次の表に、2012年までに発売されたスマートフォンのスコアを掲載しました。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
