文章の折り返し指定のCSS最新版 - ICS MEDIA
文章の折り返しはウェブ制作において意外と難しいものです。URLが文章に含まれている場合、URLがレイアウトを突き抜けてしまった、という経験をみなさんはお持ちではないでしょうか？ この記事では、国内のウェブ制作において「開発者が考えることが少なくてよくなる」安全なCSS指定を紹介します。 結論から説明すると、以下の指定を提案します。 body { overflow-wrap: anywhere; /* 収まらない場合に折り返す */ word-break: normal; /* 単語の分割はデフォルトに依存 */ line-break: strict; /* 禁則処理を厳格に適用 */ } この記事では上記の指定にいたった理由と、折り返しの理解について必要なoverflow-wrapとword-breakプロパティを中心に解説します。 overflow-wrap overflow-wrapは
ウェブ制作にも便利！React & Vueで始めるヘッドレスUI - ICS MEDIA
ウェブの表現がリッチになるに従い、コーポレートサイトやキャンペーンページのような「普通のウェブページ」でもモーダルダイアログやアコーディオンといった、ちょっと凝ったUIを見かけることが増えてきました。こうしたUIが必要な場合、皆さんはどのように実装していますか？ 2023年3月にモーダルダイアログの実装について聞いたアンケートでは<div>で自前実装派とJSライブラリ利用派で回答が二分されました。 この記事ではリッチで使いやすいUIを実装するための選択肢として「ヘッドレスUI」ライブラリを紹介します。ヘッドレスUIライブラリも大きな括りでは「JSライブラリ利用派」に含まれますが、古くから定番のBootstrapやMaterial UI・Vuetifyなどとはちょっと毛色の違う存在です。 ヘッドレスUIとは？ BootstrapやVuetifyとは何が違う？ ヘッドレスUIとは「デザイン（見
エンジニアのための、いますぐ使える文章校正テクニック - ICS MEDIA
ウェブ制作や開発の仕事で文章を扱う機会は多いはず。書き手は不自然に思っていない文章でも、読み手は違和感をもっていることがあります。文章校正テクニックを覚えるだけでおかしな表現は少なくなり、読みやすい文章を書けるようになります。 本記事では、ICS MEDIAで実践している文章校正の一例を紹介します。 レベル1、基本的な校正ルールを使う いろんな場面で使える基本的な文章校正テクニックから紹介します。 テクノロジー系の名詞は正しく記載しているか テクノロジー系の名詞を間違って使うと、「本当に技術に詳しいの？」と読者からの信頼度が下がります。名詞は大文字小文字、スペース有無含めて正確に記述しましょう。 Github → GitHub（Hは大文字） Javascript → JavaScript（Sは大文字） After Effect → After Effects（複数形の「s」を忘れてはいけな
脱jQueryのためにしたこと - ICS MEDIA
脱jQueryという主張をよく耳にします。 私の個人プロジェクト「Beautifl - Flash Gallery」のリニューアルでも、依存しまくっていたjQueryの採用をやめました。 サイトを立ち上げたのは8年前の2009年。最盛期のjQueryをふんだんに使って、インタラクションの充実したRIAの開発に挑戦していました（参照「wonderflのギャラリーサイトBeautiflを作りました」）。 この記事では、なぜjQueryをやめようと思ったのか、別の技術で得たものは何なのかを紹介します。 ▲リニューアルしたBeautiflは、jQueryをすべて抜きました ※この記事は「CSS Grid Layoutをガッツリ使った所感 - ICS MEDIA」に対する後編（JavaScript編）となります。 リニューアルにあたってJavaScriptで改善したかったこと リニューアルにあたって
上下中央揃えのCSSまとめ。Gridだと2行、Flexboxだと3行で実現可能 - ICS MEDIA
CSSでブロック要素を上下中央揃え（天地左右の中央に配置）する方法はいくつかありますが、CSS Gridを使う方法が現在では一番手軽です。CSS Gridレイアウトを使うと、たった2行で上下中央揃えができます。 ▼ CSS .container { display: grid; place-items: center; } デモを別ウインドウで再生する ソースコードを確認する ※CSS GridだとIE 11に対応できません。しかし、IE 11は2022年6月にサポートを終了しているので、ウェブ制作者が気にする必要はないでしょう。 Flexboxだと3行 対して、Flexboxでも上下中央は実現できます。Flexboxの場合、中央揃えしたい要素の親に対してたった3行記述するだけです。モダンブラウザはもちろん、Internet Explorer 11（以下、IE 11）でもベンダープレフィッ
ES Modules入門 - JavaScriptでモジュールを使う時代 - ICS MEDIA
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
ブラウザからBluetoothが使える！ JSでWeb Bluetooth APIを使ってBLE機器を操作する方法[Lチカ・温湿度センサー編] - ICS MEDIA
最新版！ Lottieアニメーションの実装方法 - Lottie-Player編 4月5日公開澤田 悠♥ 35
![ブラウザからBluetoothが使える！ JSでWeb Bluetooth APIを使ってBLE機器を操作する方法[Lチカ・温湿度センサー編] - ICS MEDIA](https://cdn-ak-scissors.b.st-hatena.com/image/square/4d4be16a8cc16d13f108d2cd40431babfbd134d7/height=288;version=1;width=512/https%3A%2F%2Fics.media%2F_assets%2Ftop%2Ffacebook_opg_image.png)
最新版で学ぶwebpack 4入門 - BabelでES2017環境の構築(React, Three.js, jQueryのサンプル付き) - ICS MEDIA
最新版で学ぶwebpack 5入門 Babel 7でES2023環境の構築 (React, Vue, Three.js, jQueryのサンプル付き) ECMAScript 2015(略：ES2015)以上の言語仕様でJavaScriptを書くことが、昨今のウェブのフロントエンドエンジニアの基本テクニックです。しかし、ECMAScript 2015以上の仕様のJavaScriptで記述すると、Internet Explorer 11など古いブラウザでは動作しないこともあります。そこでBabelなどのトランスパイラと呼ばれるツールを使って、ES2015〜ES2023の仕様で記述したJavaScriptファイルを互換性のあるECMAScript 5に変換します。 トランスパイラとして一番有名なのが「Babel」というツールです。ただ、BabelにはECMAScript Modules（impo
特徴で使い分けたいCSSレイアウト手法 - CSS Grid, Flexbox, floatの使い分け - ICS MEDIA
ウェブページのレイアウトを作る手段には、CSSのGrid Layoutグリッド・レイアウト、Flexboxフレックス・ボックス、floatフロートなどがあります。 CSSのGrid Layoutはウェブページのレイアウト構築に役立ちます。従来floatやFlexboxでつくっていたようなレイアウトは、Grid Layoutで置き換えられるでしょう。しかし、すべてをGrid Layoutで置き換えるのが良いとはいえません。 float、Flexbox、Grid Layoutには、それぞれ特徴があるためです。特徴を使い分けていくことで、保守性の高いコーディングができるでしょう。本記事では、float、Flexbox、Grid Layoutの特徴と使い分け方をサンプルを通して紹介します。 Grid Layoutの基本については前回の記事『CSS Grid Layout入門』を参照ください。 この
CSS Grid Layout入門。対応ブラウザが出揃った新しいレイアウト仕様 - ICS MEDIA
CSSのGrid Layoutとは、ウェブサイトのレイアウトを構築するための新しい仕様です。今まではウェブサイトのレイアウトを実現するために、floatやFlexboxを使っていた方が多いのではないでしょうか。 Grid Layoutを使えば、HTML要素の構造を汚さず、従来の手法に比べてウェブサイトのレイアウトがつくりやすくなります。たとえばfloatだと親要素にdivを増やす必要があったのが、Grid Layoutを使えばそのようなムダなHTML要素を増やさなくて構わなくなります。 今回はレイアウトをつくりながら、Grid Layoutの基礎知識について紹介します。余裕のある方は、記事を読みながら実際に手を動かしてレイアウトをつくってみましょう。 この記事で学べること Grid Layoutの基本的な使い方 Grid Layoutの利点 サブグリッドの使い方 よくあるレイアウトをつくり
ウェブ制作者なら意識してほしいCSS設計の基礎知識 - ICS MEDIA
みなさんは、CSSを書くときに管理のしやすさを意識していますか？ CSSを書くときに命名や構造のルールをシンプルにすることで、他のCSS編集者が理解しやすくなります。 何も意識せずにCSSを書くと、 誰も読めない、理解できない 何に使っているかわからない謎のルールセットがあるが、必要かもしれないので消せない CSSを修正したら意図していないパーツも修正の影響が出てしまった スタイルが上書きされすぎていて、 !important せざるを得ない といった問題が起こりやすくなります。このような問題を解決するアプローチとして、CSSを設計するという考え方があります。ウェブサイトの規模が大きくなり複雑化していく現代では、CSS設計を意識することの重要性が高まってきています。今回は、CSS設計をしたことがなくても意識してほしいCSS設計の基礎になる考え方と、基本の手法についてご紹介します。 CSS設
文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの
Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ - ICS MEDIA
以前、記事「[商用利用可能！高品質なオススメ日本語Webフォント8選（無料フォント多数）](https://ics.media/entry/13498/）」にて日本語のWebフォントを紹介しました。無料のWebフォントを中心に紹介しましたが、種類が少なく使いたいフォントがないといった場合も多いかと思います。 そういった場合に有償のWebフォントサービスが候補として挙がりますが、使用できる書体数やPV数の制限などサービス内容の違いがあり、どのサービスを選択するか悩ましいのではないでしょうか。今回は5つのWebフォントサービスを取り上げ、それぞれで扱っている書体数やプラン内容などを徹底比較します。 TypeSquare 「TypeSquare」はモリサワが提供しているWebフォントサービスです。800を超える書体（和文フォントは695書体）から選択可能で、主な書体として「新ゴ」「リュウミン」「
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"
最適なCSSの横並びはどっち!? Flexboxとfloatのパフォーマンス比較 - ICS MEDIA
ボックス要素の横並びをCSSで行う場合、皆さんはどうしていますか？ 従来知られているfloatプロパティを使った方法の他に、CSS3から「Flexbox」を使用する方法も選択肢として加わりました。では、Flexboxとfloatはどちらの方が処理速度が早いのでしょうか？ 本記事ではこの2つをパフォーマンス面から比較し、最適なボックスレイアウト手法について検証します。 Flexboxとは？ Flexbox(CSS Flexible Box Layout Module)は、floatに代わる新しいボックスレイアウト方法。横並びはもちろん、ボックスを均等位置に配置したり、整列や中央揃えなど、柔軟なレイアウトが可能です。今やすべてのモダンブラウザーで使用することができ（※1）、Bootstrap 4の新たなレイアウト方法として採用される（※2）等、次世代の標準となっていくであろう技術です。 ※1
今どきのJavaScriptで使われているインデント規約まとめ - ICS MEDIA
みなさんは普段JavaScriptを使って開発する場合、インデントはどのようにしていますか？ タブ、スペース2個、スペース4個・・・などいくつかの選択肢があります。 個人で開発している方は問題ありませんが、チームで開発している場合は意見が分かれ議論になることもあるでしょう。プロジェクト開始早々インデント論争でチーム内の雰囲気を悪くしたくはありません。 本記事はそんなインデント論争の1つの解決策となるべく、ブラウザベンダーやプロダクトで定めているJavaScriptコーディングのインデントルールを調べてみました。 この記事のポイント* 海外のJS界隈ではスペース2個のインデントが多数派 ESLINTなどの設定ファイルからコーディングルールを調べられる なぜインデント論争が起こるのか？ そもそもなぜインデント論争が起こってしまうのでしょうか？ それはそれぞれ一長一短のため好みが分かれてしまうか
Web用保存は古い!? JPEG画質が改善したPhotoshop CC 2015の新方式の画像保存機能まとめ – ICS MEDIA
みなさんはAdobe Photoshopでどのように画像を書き出してますか？ 最新のPhotoshopではさまざまな画像書き出し機能が搭載されていますが、どれを選択するかで手間が異なります。 本記事ではPhotoshopのさまざまな画像書き出し機能を紹介し、最適な画像書き出し方法を検証します。 この記事はPhotoshop CC 2022 (23.5.0)で検証しています。 この記事のポイント 新しい画像保存方式（書き出し形式、クイック書き出し）は手間が少ないので、作業効率が良い 新しい画像保存方式はデフォルト設定で、小さなファイルサイズの結果を得られやすい アニメーションGIF保存は「Web用に書き出し（従来）」を使う Photoshopの画像書き出し方法一覧 Photoshop CCにおいて、画像を書き出す方法は分けて5種類あります。 書き出し形式 ［ファイル］→［書き出し］→［書き出
CSS3のブレンドモードが素敵！ 新プロパティmix-blend-modeを使いこなそう – ICS MEDIA
mix-blend-modeというCSSのプロパティ。これはDOM要素を重ねた時の見え方を指定するCSSプロパティです。デザイナー視点だとブレンドモードはごく当たり前に使う機能のひとつ。mix-blend-modeはウェブの表現手法が広がり、デザインの自由度が広がる注目すべきCSSプロパティです。本記事はmix-blend-modeの魅力と使い方をデモを交えて紹介します。 そもそもブレンドモードとは？ ブレンドモードはクリエイティブな表現を作る上での基本機能のひとつです。Adobe PhotoshopやIllustrator、After Effects、XDや、Figmaで搭載されていて、レイヤーを重ねたときにどのように重ねて表示するかの設定になります。ソフトによっては「ブレンドモード」や「描画モード」「モード」と異なる名称が使われていますが、機能としては同じものになります。本記事ではCS
コーディングに最適な日本語対応の等幅フォントSource Han Code JPとは – ICS MEDIA
コーディング向けの日本語対応の等幅フォント「Sourceソース Hanハン Codeコード JPジェイピー（和名：源ノ角ゴシック Code JP）」が、2015年6月4日に公開されました。「源ノ角ゴシック Code JP」は、プログラミングやHTML/CSSのコーディング、ターミナルでのテキスト表示など、和欧表示用フォントとしての利用を想定されたフォントです。 ダウンロードはこちらから Release Fonts (OTF, OTC) · adobe-fonts/source-han-code-jp · GitHub ※このフォントは無償でダウンロード可能です。OTCとTTFの両方のフォーマットで配布されているので、Windows/macOSともに簡単にインストールできます。 ※上記リンクの「Fonts version ［バージョン番号］ (OTF, OTC)」となってい箇所の［Sourc
JenkinsとSeleniumを使ってWebコンテンツの自動UIテスト環境を作ろう！ - ICS MEDIA
先日公開した「UIテストの自動化！Node.jsとSeleniumでWebアプリのUIテスト環境構築」では、手動で行っていたWebアプリのUIテストをSeleniumを使って自動化する手法についてご説明しました。 SeleniumでUIテストを自動化することにより、リグレッションテスト（改修により既存機能への影響がないかを確認する回帰テスト）が簡単にでき、バグの早期発見に繋げることができますが、実際にはこのテストを運用でしっかりと行っていかないとプロジェクトとしての品質向上にはつながりません。また、コマンドラインの扱いに慣れていない方は、コマンドラインからのテストの実行に抵抗があり、テスト結果もコンソールに出力されるため見づらいと思う方も多いと思います。 そこで今回はCI（継続的インテグレーション）ツールであるJenkinsとSeleniumを連携することで、定期的にテストを実行し、テスト
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
