CSSで文節の折り返しを！ br・wbrとauto-phraseの活用術 - ICS MEDIA

2024/11/06 132 users 文節 CSS 活用術

ウェブでのテキストの折り返しは、HTMLコーダーにとって意外と難しい分野です。多様な画面サイズが存在する現代では、適切なテキストの折り返しについて悩むことが少なくありません。 この記事で紹介する折り返しとは、以下のようなテキストの区切りの良い場所で改行するかどうかです。 ▼固定幅で折り返し どこで生れた... 続きを読む

JavaScriptで実現するFLIPアニメーションの原理と基礎 - ICS MEDIA

2024/09/04 80 users FLIP 原理 基礎 ライブラリ JavaScript

アニメーション実装のテクニックのひとつにFLIPと呼ばれるものがあります。FLIPアニメーションは2つの状態をなめらかにつなげるテクニックで、とくに移動や拡大といった動きに有効です。FLIPアニメーションを用いると、次のようなアニメーションを実装できます。 本記事では、ライブラリに依存しないFLIPアニメーション... 続きを読む

デザイナーにもお勧め！ CSSもThree.jsもタイムライン編集を可能にするTheatre.jsが凄い - ICS MEDIA

2024/08/28 176 users CSS three.js デザイナー タイムライン編集 ゴー

デザイナーにもお勧め！ CSSもThree.jsもタイムライン編集を可能にするTheatre.jsが凄い ウェブサイトの演出を作る上でアニメーションの実装は欠かせません。一般的には、CSSアニメーションやJavaScriptのライブラリ（GSAPジーサップなど）を用いてコードベースで動きをつけることが多いと思います。ですが、完全にコー... 続きを読む

has()疑似クラスでコーディングが変わる！　CSS最新スタイリング - ICS MEDIA

2024/08/08 136 users Has セレクター ＨＡ コーディング ポテンシャル

2024年のブラウザならCSSの:has()疑似クラスが使えます。この:has()疑似クラスは非常に強力なポテンシャルをもっています。というのも:has()疑似クラスを使えば、どんな関係のセレクターも指定可能になります。これを使えば多彩なセレクターが記述できるようになり、より表現力豊かなCSSを実現できます。この記事では:ha... 続きを読む

HTMLとCSSでつくる！ リンクテキストのホバー時アニメーション11選 - ICS MEDIA

2024/08/01 92 users CSS HTML リンクテキスト

テキストをホバーしたときの変化やアニメーションをつくることは、どのようなサイトをつくっていてもほぼ必ず行う工程ではないでしょうか。 テキストがリンクであることをユーザーに伝えるという点では、ブラウザのデフォルトスタイルのような下線のみで十分な場合もあると思います。 しかしそれだけではなく、変化をつ... 続きを読む

要素の幅でレスポンシブ対応を行える！ コンテナークエリーの使い方 - ICS MEDIA

2024/06/21 15 users ビューポート Container Media CSS 手法

コンテナークエリー（@container）は、CSSの新しいアットルールです。従来のメディアクエリー（@media）とは異なる手法で、レスポンシブウェブデザインができます。メディアクエリーはビューポート（ブラウザ幅）を条件にスタイルを適用できるのに対して、コンテナークエリーは要素の幅を条件にスタイルを適用できます。... 続きを読む

Figmaでちょっとしたデザインをつくるときに使っているプラグイン8選 - ICS MEDIA

2024/06/03 285 users figma アイコン デザイナー プラグイン スライド作成

アイコンやスライド作成など、デザイナーに限らずちょっとしたデザインをつくる機会はありませんか？　そんなとき、Figmaのプラグインを使うと、いつもより少し凝ったデザインを手軽につくることができます。 今回は、画像加工やあしらいをつくるときに便利なプラグインを8個紹介します。2024年6月時点で、すべて無料で... 続きを読む

数値や日付をさまざまな形式の文字列に！ toLocaleString()を使ってスマートに変換しよう - ICS MEDIA

2024/05/29 17 users ウェブアプリケーション API 日付 数値 外部

数値や日付をさまざまな形式の文字列に！ toLocaleString()を使ってスマートに変換しよう ウェブアプリケーションなどでは外部のAPIからデータを取得して表示することがあるでしょう。しかしながら、APIの値を必ずしもそのまま表示せず、ユーザーにとって分かりやすい文字列に加工することもあります。たとえば、数値を... 続きを読む

VS Codeでマークダウンを快適に書きたい！ オススメの拡張機能と設定6選 - ICS MEDIA

2024/05/23 218 users プレ ドキュメント 筆者 文字修飾 VS Code

ブログの文章やドキュメント作成など、さまざまなシーンで使われる記法に「マークダウン記法」があります。文字修飾の簡単さや読みやすさから使うタイミングは多々あると思いますが、みなさんは快適にマークダウンを書けていますか？ 筆者はVS Codeでドキュメントをマークダウンで書くことが多く、表の作成・編集やプレ... 続きを読む

HTML・CSSで実装するかわいいフキダシのアイデア - ICS MEDIA

2024/04/25 177 users HTML・CSS

見出しなどのテキストを目立たせたいときに便利なフキダシ（吹き出し）。 この記事では、HTMLとCSSだけで簡単に実装できる、シンプルなデザインのフキダシをご紹介します。 雑誌やポスターなどで見かける可愛いあしらいをウェブサイトにも取り入れたいと思ったことが、今回のテーマを選んだきっかけです。 とくにフキダ... 続きを読む

2024年版 HTMLで作るフォームバリデーション - ICS MEDIA

2024/04/19 257 users フォームバリデーション ユーザビリティ 要件 HTML 最低限

すべてのフォームが要件を満たしている場合のみ、送信できます。 フォームバリデーションのデザイン 上記の例では最低限のHTMLのみ実装されています。しかし、実際のサイトではバリデーションエラーをユーザーにフィードバックする必要があります。よりユーザビリティの高いフォームでは、以下の点を検討する必要があり... 続きを読む

文章の折り返し指定のCSS最新版 - ICS MEDIA

2024/04/11 202 users レイアウト 結論 CSS指定 ウェブ制作 みなさん

文章の折り返しはウェブ制作において意外と難しいものです。URLが文章に含まれている場合、URLがレイアウトを突き抜けてしまった、という経験をみなさんはお持ちではないでしょうか？　この記事では、国内のウェブ制作において「開発者が考えることが少なくてよくなる」安全なCSS指定を紹介します。 結論から説明すると... 続きを読む

『フロントエンドの知識地図』出版のお知らせ - ICS MEDIA

2023/11/20 196 users フロントエンド ウェブメディア 出版 知識地図 CSS

株式会社ICSの池田・西原・松本の3人で『フロントエンドの知識地図 〜 一冊でHTML/CSS/JavaScriptの開発技術が学べる本』という書籍を執筆しました！ ICS MEDIAではHTML・CSS・JavaScriptにおける最新技術をテーマに取り扱っています。ウェブメディアの特性上、記事は断片的な情報となることが多く、体系的な発信が難し... 続きを読む

意外と奥深いCSSのfont-weightの話 - ICS MEDIA

2023/08/30 138 users font-weight

普段なにげなく使っているフォントですが、文字の太さを表すフォントウェイトには注意したいポイントがあります。とくにどの環境でも同じフォントにするためのウェブフォントでも、CSSの設定やOSの違いによって見え方が変わってしまうことがあります。ほかにもCSSの設定によっては意図しないウェイトが適用されてしまう... 続きを読む

滑らかなスクロール体験を！ JSライブラリでお手軽に導入する慣性スクロール（前編） - ICS MEDIA

2023/08/04 15 users JSライブラリ 前編 挙動 余韻 スクロール

ウェブサイトをスクロールした時に、他のサイトよりも滑らかに余韻が残るような動きを目にしたことはないでしょうか？　このスクロールの挙動は慣性スクロールと呼ばれ、ウェブサイトを演出する手法のひとつです。 スクロール操作を止めた後に少し余韻が残りながらスクロールが継続することで、コンテンツをスムーズに閲... 続きを読む

シンプルで使いやすいHTML・CSSボタンデザイン集11選 - ICS MEDIA

2023/06/29 143 users

ウェブ制作においてボタン風の見た目はよく作成するものの、ネットには新旧さまざまな記法で紹介されているため、参照しづらいケースもあると課題を感じていました。 そこで、2023年において「シンプルで手軽に使いやすいボタン」というテーマで、11種類のHTML・CSSのボタンデザインを紹介します。 この記事で紹介するボ... 続きを読む

HTMLコーディングの今。アンケート結果から分析する2023年のウェブ制作 - ICS MEDIA

2023/06/22 288 users HTMLコーディング 常識 連載 傾向 ウェブ制作

ウェブ業界の当たり前だと思っていることでも、他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか……。この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載9回目となる本記事では「2023年のHTMLコーディング」をテーマとしてアンケート結果を紹介します... 続きを読む

階層メニューやトーストUIが簡単に作れる新技術！　JavaScriptで利用するポップオーバーAPI - ICS MEDIA

2023/05/31 72 users 補足 API ポップオーバー アクション JavaScript

階層メニューやトーストUIが簡単に作れる新技術！　JavaScriptで利用するポップオーバーAPI 2023年5月31日にリリースされたChrome 114には、「ポップオーバーAPI」というAPIが搭載されました。 ポップオーバーとはコンテンツの1番上に重ねて表示するUIで、ユーザーにアクションを促したり、補足の情報などを伝えるために... 続きを読む

CSSのコード品質向上のためのStylelint入門 - ICS MEDIA

2023/05/25 48 users CSS lint コード品質向上 Stylelint 重複

Stylelintは、スタイルシートの問題検出や自動修正を行えるLintと呼ばれる静的解析ツールです。利用することで、CSSやSCSSファイルのコード品質の向上に役立ち、具体的には以下のメリットがあります。 プロジェクトのすべてのスタイルシートから構文エラーを検出する セレクターやプロパティの重複といった、問題になり... 続きを読む

頑張らない3D表現！ WebGLを使わずにウェブサイトで3Dを実現するCSSテクニック - ICS MEDIA

2023/05/19 102 users WebGL ウェブデザイン 別ウィンドウ three.js

ウェブデザインにおける3D表現はリッチでユーザーの興味を惹くものがあります。しかし3Dコンテンツの実装は技術レベルも高く、予算も豊富でないと難しいものです。そこで、今回はWebGLや代表的な3DライブラリのThree.jsを使わないで3D表現（あるいは3D風）を実現する方法を紹介します。 サンプルを別ウインドウで開く コ... 続きを読む

View Transitions API入門 - 連続性のある画面遷移アニメーションを実現するウェブの新技術 - ICS MEDIA

2023/05/10 87 users View Transitions API入門 ウェブ 連続性

今年3月に公開されたChrome 111とEdge 111にView Transitons APIが搭載されました。View Transitons APIを使うと、シンプルでスムーズな連続性のあるアニメーションを実装できます。 ウェブ技術でのアニメーションはさまざまな手段が存在します。CSSのtransitionやanimation、JavaScriptでのWeb Animations APIなど利用... 続きを読む

WebGPUがついに利用可能に - WebGL以上の高速な描画と、計算処理への可能性 - ICS MEDIA - ICS MEDIA

2023/05/02 182 users WebGPU 描画 プラグ Safari デフォルト

2023年5月にリリースされたGoogle Chrome 113で、次世代WebグラフィックスのJavaScript APIであるWebGPU（ウェブジーピーユー）がデフォルトで利用できるようになりました。ICS MEDIAでは2018年にWebGPUについて紹介していましたが、当時はSafariで開発者向けのフラグを有効にした場合にのみお試しできる実験的機能でし... 続きを読む

ウェブ制作にも便利！React & Vueで始めるヘッドレスUI - ICS MEDIA

2023/04/13 16 users React Vue ヘッドレスUI ウェブ制作

ウェブの表現がリッチになるに従い、コーポレートサイトやキャンペーンページのような「普通のウェブページ」でもモーダルダイアログやアコーディオンといった、ちょっと凝ったUIを見かけることが増えてきました。こうしたUIが必要な場合、皆さんはどのように実装していますか？ 2023年3月にモーダルダイアログの実装に... 続きを読む

ユーザー操作の一括無効化で役立つ！ HTMLのinert属性の紹介 - ICS MEDIA

2023/04/06 119 users HTML ユーザーインタラクション ユーザー操作 None

HTMLやCSSには、ユーザーインタラクション（ユーザー操作）を無効化するための方法がいくつか存在します。たとえば、マウスやタッチ操作を無効化したいときはCSSでpointer-events: noneを要素に指定するなど、制御したいユーザー操作によってさまざまです。 カルーセルやモーダルなユーザーインターフェイス（UI）では、... 続きを読む

CSSのoffsetプロパティで、楽しいパスアニメーションを作ろう - ICS MEDIA

2023/03/30 42 users SVG animationプロパティ プロパティ CSS 一見

offsetプロパティは、パス上に要素を配置・移動させるCSSのプロパティです。animationプロパティやtransitionプロパティと組み合わせることで、手軽に一見複雑そうなアニメーションが作れます。 SVGやJavaScriptは詳しくないけど、複雑そうな動きのアニメーションを作ってみたい方、animationプロパティなどのおさらいを... 続きを読む