タグ「ICS MEDIA」 - はてブログ

タグ ICS MEDIA

新着順人気順 5 users 10 users 50 users 100 users 500 users 1000 users

(1 - 25 / 174件)

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ライブラリ前編挙動余韻スクロール

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

CSSだけでスクロールアニメーションが作れる！？新技術Scroll-driven Animationsとは - ICS MEDIA

2023/07/19 8 users スクロールアニメーションアニメーショ CSS スクロール

CSSだけでスクロールアニメーションが作れる！？新技術Scroll-driven Animationsとは 2023年7月にリリースされたGoogle Chrome 115では、「Scroll-driven Animations」が搭載されました。 Scroll-driven Animationsを使うと、今まではJavaScriptを使わなければ実装できなかったスクロールと連動するようなアニメーショ... 続きを読む

パフォーマンスの高みを目指せ！ CDNのエッジサーバーでSSR - CloudflareでViteを動かす手順 - ICS MEDIA

2023/07/06 7 users エッジサーバー CDN CloudFlare vite 悲願

パフォーマンスの高みを目指せ！ CDNのエッジサーバーでSSR - CloudflareでViteを動かす手順ウェブサイトの高速化はあらゆるウェブ制作者の悲願です。1ミリ秒でも早くコンテンツを届けるために、エンジニアたちは血と汗と涙を流します。しかし、ウェブサイトの高速化は、ウェブサイトの構成要素を最適化するだけでは実... 続きを読む

シンプルで使いやすい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コーディング」をテーマとしてアンケート結果を紹介します... 続きを読む

Figmaのチームとプロジェクトの違いって？料金体系を含めわかりやすく解説 - ICS MEDIA

2023/06/16 8 users figma ワークスペース決裁権課金マネージャー

ブラウザ上で共同編集ができるデザインツールのFigma。今回は、Figmaのワークスペース（チーム、プロジェクト、ファイル、ページ等）の関係性を説明します。 Figmaのワークスペースは、課金の仕組みにも大きく関わっているため、しっかりと理解しておきましょう。デザイナーだけでなく、マネージャーなど決裁権を持つよ... 続きを読む

階層メニューやトースト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プロパティなどのおさらいを... 続きを読む

使いこなして効率アップ！ ChromeのデベロッパーツールでCSSを検証する方法 - ICS MEDIA

2023/03/17 8 users デベロッパーツールデバッグ CSS 必須 Chrome

ウェブ制作をする上でCSSでのスタイルの記述は必須ですが、意外とデバッグが難しくデザイン通りに実装するには手間がかかります。そんなときに活躍するのがGoogle Chromeの「デベロッパーツール」です。視覚的にCSSのスタイルが確認、変更できるので、うまく活用することでCSSのデバッグを迅速に行うことができます。 ... 続きを読む

独立したCSS translate・rorate・scaleプロパティだからできる、豊かなアニメーションテクニック！ - ICS MEDIA

2023/03/09 102 users rotate transformプロパティプロパティ記述

独立したCSS translate・rorate・scaleプロパティだからできる、豊かなアニメーションテクニック！ CSSのtransformプロパティはtraslate()やrotate()を1つの値として受け取るプロパティでした。そのため、同時にそれらを動かしたい場合、1つのプロパティに両方の記述が必要でした。これは記述の複雑化を生みます。最新... 続きを読む

Figmaの作業を効率化！知らないと損するショートカット集 - ICS MEDIA

2023/03/03 11 users figma マニ定番ショートカットキーウェブ制作

ウェブ制作における定番になりつつあるデザインツール「Figma」。本記事では、Figmaの知らないと損するショートカットキーを紹介します。よく使う便利な機能を呼び出すショートカットキーを覚えておくことで、作業効率が上がるのでしっかり覚えていきましょう。本記事では基本機能のショートカットキーだけでなくマニ... 続きを読む

HTML制作で気をつけたいスクロールバーの挙動 - ガタつきをCSSのscrollbar-gutterで防ぐ方法など - ICS MEDIA

2023/02/14 113 users スクロールバー挙動 CSS HTML制作見た目

HTML制作で気をつけたいスクロールバーの挙動 - ガタつきをCSSのscrollbar-gutterで防ぐ方法など - ブラウザのスクロールバーは、OSの種類によって挙動や見た目がさまざまです。環境によって挙動が違うため、自分の環境では問題なくても、ユーザーの環境から見ると問題が起きていることがあります。次のような問題を経... 続きを読む

CSSの三角関数を理解しよう！ sin()とcos()でできる表現 - ICS MEDIA

2023/02/02 100 users Firefox Safari cos Sin ブラウザ

2023年3月にリリースされるChrome 111ではCSSの三角関数がサポートされます。FirefoxやSafariではすでにサポートされている機能のため、2023年3月からは主要なブラウザでCSSの三角関数が使えるようになります。とはいえ、「CSSで三角関数をどうやって使えばいいの？」「そもそも三角関数で何ができるの？」という方も多... 続きを読む