タグ ICS MEDIA
新着順 10 users 50 users 100 users 500 users 1000 users文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
2016/11/30
1086 users
font-feature-settings
プロパティー
「Webでは文字詰めはできない」と諦めていませんか？ 美しいタイポグラフィーのためには文字詰めは「当たり前」というデザイナーは多く、DTPやグラフィックデザインの界隈では基礎テクニックの一つされています。 そんな文字詰めですが、HTMLでも実はCSSの font-feature-settings プロパティーを指定するだけで 自動カーニングができます 。ほとんどのブラウザがサポートしており、実務で... 続きを読む
若い世代が知らない2000年代のHTMLコーディングの地獄 - ICS MEDIA
2018/05/17
1056 users
HTMLコーディング
地獄
温故知新
若い世代
黎明期
ウェブの黎明期である2000年頃と比べてはるかにHTMLはコーディングしやすくなりました。10〜20年前のHTMLコーディングはどのようなものだったのでしょうか。 この記事では主にIE6が全盛期だった2000年代のウェブサイト制作を振り返ります。昔からコーディングしている方は懐かさに浸ったり、そうでない方は現代のウェブの成り立ちに通じる温故知新な情報として参照ください。 テーブルレイアウト / s... 続きを読む
人工知能Adobe Senseiの画像処理が凄すぎてAdobe MAX 2017の会場は狂喜乱舞に - ICS MEDIA
2017/10/20
1044 users
狂喜乱舞
人工知能Adobe Sensei
アドビ
会場
恒例
米 Adobe アドビ Systems システムズ が主催の世界最大のクリエイティビティ・カンファレンス「 Adobe MAX 2017 」（ネバダ州ラスベガス）。二日目の10月19日は「スニークス」というAdobeが研究中の技術を発表する恒例の講演が行われました。 ここで発表されたものは現時点では製品に搭載されていないものの将来的に製品に組み込まれるかもしれない技術。 未来のCreative... 続きを読む
2016年に見直したHTML5・CSS3コーディング手法6選 - ICS MEDIA
2016/12/19
1032 users
HTML・CSSコーディングを取り巻く状況は、数年前と大きく変わっています。最近では、 2016年11月にHTML 5.1が勧告 されたり、 2015年8月頃にChromeのブラウザーシェアがInternet Explorerを抜いたり といったニュースがありました。また、 2017年4月にはWindows Vistaのサポートも終了する ため、今後対応すべきはWindows 7のIE 11以降と... 続きを読む
WordPressをやめ、静的サイトジェネレーターで高速化した話 - ICS MEDIA
2019/04/15
1007 users
静的サイトジェネレーター
爆速
見栄え
WordPress
ICS MEDIAは2019年4月にリニューアルしました。シンプルでモダンなデザインへと見栄えは変わり、フロントエンドの最新技術によって爆速なサイトへと生まれ変わっています。 技術的におもしろいポイントは、WordPressワード・プレスを廃止したことです。 この記事では、オウンドメディアとしてWordPressをやめた理由、代... 続きを読む
CSSレイアウトにfloatはもう古い！ Webデザイナー初心者でも始められるFlexbox入門 - ICS MEDIA
2016/08/22
945 users
float
Flexbox
CSSレイアウト
CSS
主流
ICS MEDIA Web制作 2016/08/22 CSSレイアウトにfloatはもう古い！ Webデザイナー初心者でも始められるFlexbox入門 « Prev ボックス要素の横並びをCSSで行う場合、これまでは float プロパティを使うのが主流でした。しかし、 CSS3の新機能「Flexbox」を使うと float よりも簡潔なコードで、ボックスの豊富なレイアウトが可能です 。本記事では... 続きを読む
エンジニアのための、いますぐ使える文章校正テクニック
2019/04/14
669 users
文章校正テクニック
エンジニア
一例
文章校正
違和感
ウェブ制作や開発の仕事で文章を扱う機会は多いはず。書き手は不自然に思っていない文章でも、読み手は違和感をもっていることがあります。文章校正テクニックを覚えるだけでおかしな表現は少なくなり、読みやすい文章を書けるようになります。 本記事では、ICS MEDIAで実践している文章校正の一例を紹介します。 レベル... 続きを読む
エンジニアのための、いますぐ使える文章校正テクニック - ICS MEDIA
2018/10/05
663 users
校正
文章校正テクニック
エンジニア
違和感
原稿作成
メールや原稿作成など、ウェブ制作や開発の仕事で文章を扱う機会は多いはず。書き手は不自然に思っていない文章でも、読み手は違和感をもっていることがあります。定番の文章テクニックを覚えるだけでおかしな表現は少なくなり、読みやすい文章を書けるようになるでしょう。 本記事では、ICS MEDIAで気をつけている校正... 続きを読む
Visual Studio Codeを使いこなせ！ フロントエンドエンジニアにオススメの拡張機能7選 - ICS MEDIA
2018/07/02
601 users
エディター
フロントエンドエンジニア
HTMLコーダー
略称
「Visual Studio Code（略称：VS Code）」はMicrosoftが提供している無償で高機能なエディターです。標準でも十分な機能は備わっていますが、拡張機能をインストールすることで、より使いやすく自分にあったエディターにカスタマイズできます。 本記事では、「HTMLコーダー」「フロントエンドエンジニア」にそれぞれ役立... 続きを読む
文章作成・メール作成に役立つ！ VS Codeの拡張機能「テキスト校正くん」をリリース - ICS MEDIA
2018/08/31
593 users
テキスト校正くん
Visual Studio Code
ICS MEDIA アプリ開発 2018/08/31 文章作成・メール作成に役立つ！ VS Codeの拡張機能「テキスト校正くん」をリリース 文章の校正チェックを自動で行うVisual Studio Codeの拡張機能「テキスト校正くん」を弊社からリリースしました。 テキスト校正くん – Visual Studio Marketplace短い文章であれば目視でもチェックで... 続きを読む
ウェブ制作者なら意識してほしいCSS設計の基礎知識 - ICS MEDIA
2017/03/15
576 users
基礎知識
ウェブ制作者
みなさんは、CSSを書くときに管理のしやすさを意識していますか？ 私がCSSを書くときは、命名や構造のルールをシンプルにすることで、他のCSS編集者が理解しやすいよう心がけています。 何も意識せずにCSSを書くと、 誰も読めない、理解できない 何に使っているかわからない謎のルールセットがあるが、必要かもしれないので消せない CSSを修正したら意図していないパーツも修正の影響が出てしまった スタイル... 続きを読む
ChromeのデベロッパーツールでJSをデバッグする方法（2019年版） - ICS MEDIA
2019/05/17
558 users
デベロッパーツール
Chrome
方法
２０１９年版
JavaScriptのデバッグは必ず覚えておきたいウェブ開発の必須スキルの1つです。プログラムの実行をデバッグすることで現在の変数の値や、処理がどのように進んでいるのかを確認します。これを利用してプログラムが意図した動作になっているかの分析に役立てることができます。 本記事ではGoogle Chromeブラウザーの「Chro... 続きを読む
今の時代、ウェブページは一瞬で表示するべき！ 画像の遅延読込に役立つamp-imgの使い方 - ICS MEDIA
2018/06/07
555 users
ウェブページ
コンバージョン率
一瞬
離脱率
直帰率
ICS MEDIA ウェブ制作 2018/06/07 今の時代、ウェブページは一瞬で表示するべき！ 画像の遅延読込に役立つamp-imgの使い方 ウェブページの表示速度は、離脱率やコンバージョン率に最も影響する重要なポイントです。Googleが公表した 調査結果 では、「 表示に3秒以上かかると、約53%のユーザーは離脱する 」「 表示速度が1秒から7秒に落ちると、直帰率は114%上昇する 」とい... 続きを読む
配列を征する者はJSを制す。JavaScriptのスマートな配列操作テクニック - ICS MEDIA
2020/08/25
549 users
配列
filter
forEach
Array
every
JavaScriptでコードを記述する際、配列の各要素について処理をするケースは頻出します。開発の現場で配列操作の処理を見ていると、次のようなケースがよくあります。 filter()やevery()など配列のメソッドで処理を簡潔に書けるのに、forEach()メソッドやfor ... of文の冗長なコードを書いている 書いても意味のないArray... 続きを読む
VS Codeを極める！ MarkdownやGitにもオススメの拡張機能9選 - ICS MEDIA
2018/07/24
520 users
エディター
HTMLコーダー
略称
Microsoft
Git
「Visual Studio Code（略称：VS Code）」はMicrosoftが提供している無償で高機能なエディターです。標準でも十分な機能は備わっていますが、拡張機能をインストールすることで、より使いやすく自分にあったエディターにカスタマイズできます。 前回の記事では、「HTMLコーダー」「フロントエンジニア」にそれぞれ役立つ... 続きを読む
レスポンシブイメージで画像の表示を最適化 〜CSSもJSもいらないHTML 5.1の新機能 - ICS MEDIA
2016/09/26
500 users
CSS
レスポンシブイメージ
タブレットユーザー
最適化
画像
日本のwebサイトにおけるスマートフォン・タブレットユーザーのシェアは32%に達し（参照「 StatCounter 」)、今やレスポンシブなwebデザインなどのスマートフォンを意識した設計が必須です。しかし、レスポンシブなレイアウトにおいて画像を取り扱う場合、最適な画像サイズ、最適な画像の見せ方を実現するには、複雑なCSS・JavaScriptコードが必要でした。 HTML 5.1では、このような... 続きを読む
VS Codeを使いこなせ! フロントエンジニア必須の拡張機能7選（2019年版） - ICS MEDIA
2019/04/09
490 users
エディター
HTMLコーダー
略称
VS Code
拡張機能
「Visual Studio Code（略称：VS Code）」はMicrosoftが提供している無償で高機能なエディターです。標準でも十分な機能は備わっていますが、拡張機能をインストールすることで、より使いやすく自分にあったエディターへとカスタマイズできます。 本記事では、HTMLコーダーとフロントエンドエンジニアにそれぞれ役立つ拡... 続きを読む
2018年に見直した現代的なJavaScriptの記法を紹介するぜ - ICS MEDIA
2018/02/21
485 users
JavaScript
const
記法
TypeScript
2015年6月にECMAScript 2015がリリースされて以降、JavaScriptの機能は大きく強化されました。 const / let 、アロー関数、クラス構文、 Promise などが有名なところですが、ES2016、ES2017、ES2018、そして更にその先へJavaScriptの仕様は日々進化しています。筆者は ここ数年JavaScript（主にTypeScript）の開発を進めて... 続きを読む
上下中央揃えのCSSまとめ。Flexboxがたった3行で最も手軽 - ICS MEDIA
2018/03/28
465 users
手軽
displ
Flexbox
ベンダープレフィックス
3行
CSSでblock要素を上下中央揃え（天地左右の中央に配置）する方法はいくつかありますが、CSSのFlexboxを使う方法が現在では一番短いコード量で済みます。中央揃えしたい要素の親に対して たった3行記述するだけ です。最新ブラウザはもちろん、Internet Explorer 11（以下、IE 11）でもベンダープレフィックスなしで動作します。 ▼ CSS .container { displ... 続きを読む
jQueryからTypeScript・Reactまで - Viteで始めるモダンで高速な開発環境構築 - ICS MEDIA
2021/07/08
443 users
jQuery
vite
ウィード
ビルドツール
フレームワーク
Vite（ヴィート＝フランス語で「速い」の意味）は2020年に発表された新しいフロントエンドのビルドツールです。 開発者がVue.jsの作者であるEvan You氏であるため、Vue.jsのツールであると誤解されることもありますが、プレーンなJavaScript（バニラJS）からVue.js・React・Svelteといった流行のフレームワークまで、さ... 続きを読む
ノンデザイナー必見！ 絶対に見ておきたいデザインスキルアップできる記事12選 - ICS MEDIA
2015/11/19
431 users
カーニング
デザイン
記事12選
フロントエンド
テキスト
弊社のスタッフはフロントエンドの開発にとどまらず、デザインを制作する機会も少なくありません。弊社に限らず、近年職種を問わずデザインを扱う機会が増えているように思います。しかし、コンテンツ要素が整理整列されていなかったりテキストのカーニングがされていなかったりと、基礎的なことができていないようなケースも多く見られます。基礎的な部分が押さえられていないと、野暮ったさや素人感が出てしまいイマイチな仕上が... 続きを読む
新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました - ICS MEDIA
2021/04/09
423 users
アニメーション
メソッドチェーン
タイピング
ライブラリ
演出
アニメーションを作る時に、「思いついた演出をすぐに実装したい」「頭の中ではできているのに、コーディングするのが面倒」と思ったことはありませんか？アニメーション作成にはライブラリを使用することが多いと思いますが、使い方を調べて覚えて、ドキュメントからコピペしたり、ひたすらタイピングをして… 私はこれ... 続きを読む
次世代のフォント技術 バリアブルフォントの世界 - ICS MEDIA
2020/10/08
423 users
バリアブルフォント
次世代
世界
補完するのは登録された軸のみになります。たとえばitalの値が1種類しか登録されていないフォントはitalの値によらず一定の傾きをもちます。 オプティカルサイズとは、サイズに連動した文字のスタイルです。フォントサイズが小さなときは簡略化された表記、大きなときは細かく装飾されたフォント、というように設計され... 続きを読む
1ミリ秒でも早く届けたい! HTMLで画像読込を高速化するために取り組んでいること - ICS MEDIA
ウェブサイトの表示スピードはサイトの健全性における重要な観点の一つです。Googleが提唱するCore Web Vitalsコア・ウェブ・バイタルズと呼ばれる指標の中にもサイト表示スピードに関する項目があり、表示されるまでの時間が単なるユーザー体験だけでなく、SEOでも無視できない存在です。表示スピード低下の要因はネッ... 続きを読む
UIテストの自動化に！ユーザー操作を記録・再現できるブラウザ拡張Selenium IDEを活用しよう - ICS MEDIA
2018/04/05
403 users
アドオン
IDE
出社
Firefox
Chrome
Selenium IDE （セレニウム・アイディーイー）とは、ブラウザ操作を記録・再現できるChrome、Firefoxで利用可能な拡張機能（アドオン）です。 手軽に記録・再現ができるため、アイデア次第で色々な使い方ができます。筆者は 会社の打刻操作（社内サイトへアクセス→ログイン→打刻ページへ遷移→打刻ボタンをクリック）を記録し、自動実行することでいち早く出社ができるようにしていました。 その他... 続きを読む