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

タグ ICS MEDIA

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

(1 - 25 / 185件)

意外？ @propertyがCSSアニメーションを激変させる理由 - ICS MEDIA

2024/12/19 5 users 理由

メディアクエリとして知られる@mediaやCSSアニメーションで使われる@keyframesなど、CSSには@から始まるさまざまなルールがあります。その中にある@propertyというルールはご存知でしょうか？ CSS変数の定義をより細かく設定できるものですが、実はアニメーションにも活用できる意外な隠し能力があります。今回は@proper... 続きを読む

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 リンクテキスト

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

Figmaの基本機能で簡単につくる、テキスト&あしらい表現TIPS - ICS MEDIA

2024/07/02 5 users figma Tips エフェクトレイヤーブレンドモード

リリース以来数多くのアップデートが行われ、多機能になっていくFigma。今回はそんなFigmaの基本機能を使用した、簡単なデザイン作成やあしらいづくりに活かせる表現TIPSを紹介します。テキストの表現マスク機能やエフェクト、そしてレイヤーのブレンドモードを使用したテキストの表現をいくつか紹介します。 TIPS：画... 続きを読む

要素の幅でレスポンシブ対応を行える！コンテナークエリーの使い方 - 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ライブラリ前編挙動余韻スクロール

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

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ファイルのコード品質の向上に役立ち、具体的には以下のメリットがあります。プロジェクトのすべてのスタイルシートから構文エラーを検出するセレクターやプロパティの重複といった、問題になり... 続きを読む