デザインとHTMLのズレを検出！ Node.jsとPuppeteer活用のビジュアル校正テストで実装時のケアレスミスを防ぐ ウェブ制作において、デザインとHTML実装の一致はエンジニアとして当然求められるものです。とはいえ、デザインツールとブラウザ画面をにらめっこしながら確認するのも大変です。本記事ではNode.jsで動くヘッドレスブラウザのPuppeteerパペティアーを使ってデザインとのズレを検知するビジュアル校正テストの方法を紹介します。 ウェブ業界ではデザイン制作とHTML制作が分業である場合がほとんどです。ビジュアル校正テストを導入することで、HTML制作の品質向上に役立てられます。デザインとHTML実装が別の会社のようなプロジェクトでは、HTML実装時の品質保証の担保になりますし、デザイナーとフロントエンドエンジニアが近い組織でもコミュニケーション円滑化に役立つでしょう。ICS
テキストが複数行のときに、行ごとの文字数を同じにしてバランスを自動調整するCSSの新機能「text-wrap: balance;」が、Chromeでサポートされました。 日本語だと複数行の文字数を同じにしたいということは少ないと思いますが、見出しやコピーなどで文字数を揃えたいときに使えます。まぁ使ってもかなりピンポイントになるでしょう。 text-wrap: balance;の基礎知識と使い方、注意点を紹介します。 CSS text-wrap: balance by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 text-wrap: balance;とは テキストのバランスを見つける 制限事項 ブラウザが使用している技術の簡単な説明 text-wrap: bala
詳細度を0にする:where()、iOSのSafariで100vhが高さいっぱいにならないを解決できる新しいビューポート単位など、CSSの便利な新機能の各ブラウザでのサポートも完了し、すでに使用されている人も少なくないと思います。 CSSの新機能を効果的にうまく使った、新時代のCSSリセットを紹介します。 CSSリセットとして使用するだけでなく、CSSの勉強にもなるCSSリセットです。 @acab/reset.css -GitHub :where()とか新しいビューポート単位など、CSSの各新機能については以前の記事をご覧ください。 CSSの新しい疑似クラス:is()と:where() なんだこれ便利すぎる！ CSSの新しい単位「lvh」「svh」これでiOSのSafariで100vhがビューポートの高さではない仕様に対応できる CSSの疑似クラス「:focus-within」が素晴らしい
ついにChromeで使えるようになったCSSの便利機能！ light-dark()関数、field-sizingプロパティ、句読点括弧のカーニングができるtext-spacing-trimプロパティ
今回のアップデートでは、かなり便利なCSSのプロパティが追加されました。 ライトモードとダークモードのスタイルを簡単に定義できるlight-dark()カラー関数、垂直方向の中央に配置するalign-contentプロパティ、フォームのサイズを入力された文字量に合わせて自動変更するfield-sizingプロパティ、CSSで句読点括弧のカーニングができるtext-spacing-trimプロパティ、これらがブラウザにサポートされるのを待っていた人も多いと思います。 Chrome 123 beta New in Chrome 123 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに CSSのlight-dark()カラー関数 CSSのdisplay-modeでpicture-in-p
DeepL Write is a tool that helps you perfect your writing. Write clearly, precisely, with ease, and without errors. Try for free now!
AIで簡単に実装コードを生成できる！ テキストからCSSアニメーションのコードを生成できるツール -AI CSS Animations
簡単にCSSアニメーションのコードを生成できるAIツールが登場しました。テキストや音声でプロンプトを入力するだけで、複雑なCSSアニメーションでも数秒でコードが生成されます。 生成されたCSSアニメーションはその場ですぐにカスタマイズして微調整も簡単です。テキストは日本語にも対応しており「ジャンプして回転」とかでも平気です。
CSSだけでスクリーンサイズやフォントサイズを取得、CSSの三角関数tan(atan2())はcalc()ではできない計算もできる
CSSで便利な機能の1つがcalc()、ページのレイアウト、要素やフォントのサイズ設定に活躍します。特に異なる単位で加算減算（calc(1rem + 1px)）できることが便利ですが、乗算除算（calc(1rem / 1px)はできません。 そこでCSSの三角関数です。すべてのブラウザにサポートされているatan2()を使用すれば、異なる単位で計算ができます。tan(atan2())を使用して、スクリーンサイズやフォントサイズを取得するテクニックを紹介します。 CSS Type Casting to Numeric: tan(atan2()) Scalars br Jane Ori (@Jane0ri) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに tan(atan2())は単なる数値である 追記: 三角関数を学び直
Amazon Web Services(AWS)がクラウドのアーキテクチャ図を自動生成するソリューション実装「AWS Perspective」を公開しました。AWS Perspectiveを利用することによって、アーキテクチャ図の状態を常に最新に保ち、開発チーム内のシステム状況の共有を円滑に行うことができます。 AWS Perspective | Implementations | AWS Solutions https://aws.amazon.com/jp/solutions/implementations/aws-perspective/ AWS Perspectiveのページにある「Launch in the AWS Console」をクリックし、AWS Perspectiveの構築を始めます。 AWS PerspectiveはCloudFormationのテンプレートが提供されて
CSSでfont-sizeをレスポンシブ対応にする最新テクニック！ clamp()関数の定義が簡単にできる便利ツール -Fluid Type Scale Calculator
レスポンブ対応のフォントサイズをCSSで設定するには、CSSのclamp()関数が便利です。clamp()関数は最大値と最小値の2つの値の間をクランプし、レスポンシブ対応の流体フォントサイズを設定できます。 CSSのclamp()関数を使用し、スクリーンサイズに合わせて最適化される流体フォントサイズのCSSを簡単に生成できるツールを紹介します。 Fluid Type Scale Calculator Fluid Type Scale Calculator -GitHub Fluid Type Scale Calculatorの特徴 Fluid Type Scale Calculatorの使い方 Fluid Type Scale Calculatorの特徴 Fluid Type Scale Calculatorはclamp()関数を使用した流体フォントサイズのCSSを生成できるツールです。
無料＆簡単にオンライン予約システムが作れる「SELECTTYPE」レビュー、ウェブサイトへの埋め込みもラクチンで超絶多機能にすることも可能！
自分好みの予約システムを作る手順は簡単で、2つの手順に従うだけ、専門知識は一切不要。 1：あらかじめ用意されているテンプレートから一番変更しやすそうなものを選ぶ 2：自分の好みに合わせて変更 できあがったら、実際に予約する立場で試してみて、「これは使いにくいので変えてみよう」「こういう部分も予約時に決めてもらう方がよさそう」というようにしてブラッシュアップすればとりあえず完成。あとは本番で使ってみて初めてわかる点を改善していけば、どんどん使い勝手が良くなっていき、収益を押し上げてくれるとともに、管理の手間が減ってスムーズに運用でき、本来やるべき事に集中できるようになります。 というわけで、「SELECTTYPE」なら実際にどれぐらい簡単に作ることができるのかという気になる点を実践して確かめてみました。 予約システムつきホームページ【SELECTTYPE】 無料で予約フォーム付き予約システム
ボタン一発でWindowsを必要最小限の構成に変更して軽快な動作を実現してくれるツール「Win Debloat Tools」レビュー
「Win Debloat Tools」は難しい設定を行わずともボタンを押すだけでWindowsから不要な機能を削除し、必要最小限の構成に変更して軽量化を実現してくれるツールです。実際に使ってどれくらい動作が改善されるのかを確かめてみました。 GitHub - LeDragoX/Win-Debloat-Tools: Re-imagining Windows like a minimal OS install, already debloated with minimal impact for most functionality. https://github.com/LeDragoX/Win-Debloat-Tools GitHubのページにアクセスし、「Download Latest Version」の項目にある「Main」をクリック。 zipファイルがダウンロードされるのでクリックして
fit-content, min-content, max-contentの便利な使い方、CSSでコンテンツに依存してサイズを決める
CSSで要素やレイアウトのサイズを指定する方法には、幅や高さを固定値にサイズを定義する方法とその中のコンテンツに依存してサイズを決める方法があります。 この2つの方法それぞれのメリットと使い分け方、特にレスポンシブで効果的なコンテンツに依存してサイズを決める方法を使ったテクニックについて紹介します。 Intrinsic Sizing In CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSでのサイズ指定方法とは 外因性サイジング 内因性サイジング: min-content 内因性サイジング: max-content 内因性サイジング: fit-content ブラウザのサポート状況 実際の使用例 終わりに CSSでのサイズ指定方法とは CSSには、内因性と外因性の2つのサイズ指定方法
CSS GridやFlexboxでレイアウトを確認しながらコードを生成、box-shadowによる繊細なシャドウを見ながらコードを生成、さまざまな区切り線、border-radiusやclip-pathによるさまざまな形、UI用の美しいグラデーションやデュオトーン、グラスモーフィズム、ニューモーフィズム、CSSアニメーションなど、面倒なCSSのコードを簡単に生成できる便利ツールを紹介します。
先月アップデートされたChrome 88でaspect-ratioプロパティがサポートされ、FirefoxとSafariでもまもなくサポートされる予定となっています。 名前の通り、アスペクト比を定義できるCSSのプロパティですが、Webページやスマホアプリで実際にどのように使用すると便利なのか、その使い方を紹介します。 New aspect-ratio CSS property supported in Chromium, Safari Technology Preview, and Firefox Nightly by Una Kravets 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 アスペクト比とは object-fitプロパティ 古いハック: padding-topでアスペクト比を保つ aspect-ratioでアス
Web To Figma
Web to Figma is the ultimate plugin to collect and save, design inspirations into Figma as flawless components. Farewell, screenshots! Web to Figma is the ultimate plugin to collect and save, design inspirations into Figma as flawless components. Farewell, screenshots!
レイアウトにCSS Flexboxは使用しているけど、CSS Gridはこれから。そんな人にお勧めのWebページでよく使用されるレイアウトを簡単に実装できるCSS Gridのテンプレートを紹介します。 レイアウトはコンテンツを中央寄せに配置し、左右のマージンを自由に設定できます。たとえば、テキストには最大幅、画像には全幅、目立たせたい箇所には少し広め・かなり広めといった使い方ができます。 HTMLもCSSもシンプルなので、スニペットに登録しておくと便利です。 Layout Breakouts with CSS Grid HTMLは、非常にシンプルです。 ラッパーに.contentを与え、最大幅を設定した通常のコンテンツはclassなし、あとは幅に応じて.popout, .feature, .fullを与えるだけです。
CSSファイルから未使用のスタイルを削除する4つの方法
CSSの未使用のスタイルを削除するツールPurgeCSS、PurifyCSS、UnCSSの使い方、また、Chrome デベロッパーツールで手動で削除する方法を紹介します。 BootstrapやTailwind CSSなど、CSSのフレームワークを使用する際、すべてのスタイルを使用することはほとんどありません。また、再利用可能なUIコンポーネントを使用する場合なども、不要なスタイルがあります。 4 Ways to Remove Unused CSS by Chidume Nnamdi 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 再利用可能なUIコンポーネント内の未使用CSS 1. PurgeCSSで、CSSファイルから未使用のスタイルを削除する方法 2. PurifyCSSで、CSSファイルから未使用のスタイルを削除する方法
Masonryレイアウトとは、画像やカード型コンテンツをレンガ状に敷き詰めて配置するレイアウトです。Pinterestなどで見かける、高さが異なるカードを順番に配置するテクニックです。 今までは、JavaScriptで実装したり、Flexboxでも少し複雑なCSSで実装したりでしたが、CSS Grid Layout Module Level 3のドラフトが先日公開され、Masonryレイアウトをたった3行のCSS Gridで簡単に実装できるようになります。
コードを1行追加するだけでどんなWebサイトもノーコードで編集できる「Scepter」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、WebサイトのHTML内に1行のコードを追加するだけで、誰でもノーコードでカスタマイズができるようになるWebサービスをご紹介します！ Webサイトの要素を直接クリックしてそのまま編集ができるようになるので、誰でも簡単にカスタマイズができるうえ、好きな要素を追加してまったく異なるページを作成してしまうことも可能です。 Webサイトのカスタマイズやノーコード開発にご興味ある方は、ぜひ参考にしてみてください！ 【 Scepter 】 ■「Scepter」の使い方 それでは、「Scepter」をどのように使えばいいのか詳しく見ていきましょう！ まず最初にトップページ上部にある【Sign up for Free】ボタンをクリックして無料のユーザー登録を済ませておきます。 ユーザー名・メールアドレス・パスワードを入力すれば登録完了です！ 次に「S
コーディング作業は一切不要で、Webサイトやスマホアプリのデザインを積み木感覚で楽しくデザインできるツール「STUDIO」が、去年の4月以来の大型アップデートされました！ 新たにCMSが搭載され、リアルタイムの共同編集、デザイン機能も使い勝手がさらに進化を遂げています。もちろん前回アップデートの新ゴやリュウミンなど、モリサワフォント500種類以上の書体も変わらずに誰でも無料で利用可能のままです。 STUDIO STUDIO 3.0の新機能 STUDIO 3.0の使い方 STUDIO 3.0の新機能 STUDIO 3.0で目玉なのは、3つの新機能です。 共同編集からレビューまで搭載した、まったく新しいCMS UIのさまざまなアニメーションをコードを書かずに実装 シンボル機能で効率的にデザインを作成 まずは、大注目のCMS機能。 STUDIO 3.0では、プロジェクトのダッシュボードにてコンテ
知っておくと便利なCSSの単位: フォントに基づく相対単位（em, rem, cap, ch, ex, ic, lhなど）の便利な使い方を解説
CSSでよく使用する単位といえば、px, r(em)あたりでしょうか。 CSSはそれら以外にもたくさんの単位が使用できます。フォントに基づく相対単位（em, rem, cap, ch, ex, ic, lhなど）の便利な使い方を紹介します。 Relative length units based on font -Going beyond pixels and (r)ems in CSS by Brecht De Ruyte 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの単位: capとは CSSの単位: chとは CSSの単位: emとは CSSの単位: exとは CSSの単位: icとは CSSの単位: lhとは CSSの単位: remとrlhとは CSSの単位: rex, rch, ricとは はじめに
生成AI時代のフロントエンド開発術
2022年11月にChatGPTがリリースされて、1年と約半年が経過しました。私はChatGPTが話題になった頃から、継続して利用しています。ChatGPTを使い続けていると、Webアプリケーションのフロントエンド開発に役立つことがありました。 そこで、本記事ではフロントエンド開発でChatGPTを活用して効率よく進める3つのパターンにまとめました。これらのパターンを紹介し、読者の皆さんの開発に役立ててもらえればと思います。 以下は、本記事で紹介するFigma、ソースコード、デプロイ先URLです。 Wireframing photo - Figma silverbirder/figma-photo-sample-app-for-ai - GitHub https://figma-photo-sample-app-for-ai.vercel.app ChatGPTを使う前に ChatGPTに
Stylelintは、スタイルシートの問題検出や自動修正を行えるLintと呼ばれる静的解析ツールです。利用することで、CSSやSCSSファイルのコード品質の向上に役立ち、具体的には以下のメリットがあります。 プロジェクトのすべてのスタイルシートから構文エラーを検出する セレクターやプロパティの重複といった、問題になりそうな実装を未然に防ぐ 次のようなルールを強制し、コーディングスタイルを共通化してコードに一貫性を持たせる font-weightの値は、boldといったキーワード指定を強制する 疑似要素のコロンは2つに強制する（::before）など ICSでは複数人で開発することが多いため、スタイルシートの一貫性のためにStylelintが役立っています。HTMLコーディングが多い場面で恩恵を得られるツールです。 この記事ではStylelintの導入方法と、必要な設定について紹介します。
個人でも手軽にオンライン決済のサブスクが導入できる「SELECTTYPE」レビュー、年払いから日払いまで幅広く対応＆課金タイミングや入会金の設定も自由自在
サブスクリプション(月額課金)サービスの提供は、支払う側の手間を省いて「支払い忘れからのサービス離れ」も防げるため、「継続的な収入が確保しやすい方法」として注目を集めています。「サブスク」と聞いて音楽や映画の配信サービスを思い浮かべる人も多いかもしれませんが、実際には習い事やセミナーの月謝、月または週ごとに回数が決まっている家事代行サービスや食材配達サービスの利用料金、トレーニングジムやコワーキングスペースの会員料金なども、「サブスク」と呼べるもの。このようなサブスクサービスの導入は、さまざまな業種やサービスでビジネスプランの幅をぐっと広げます。 無料＆簡単にオンライン予約システムを作成できる「SELECTTYPE」は、そんな考え方次第で幅広い業種に応用できるサブスクサービスを手軽に導入することができるサービスとなっています。予約システムを導入しなくてもサブスクサービス単体で利用できるとの
Web制作にすごい役立つ！ コードの軽量化や整形・ファビコンやQRコード作成・PDF変換など、便利ツールが一箇所で利用できる -ToolsOcean
CSSやJavaScriptのミニファイ（軽量化）、HTMLやCSSやJavaScriptのフォーマッター、各種エンコード・デコード、QRコードの生成、カラー値変換、画像の最適化、ファビコン画像生成、ダミーテキスト生成、各種PDF変換など、Web制作に役立つツールがまとめて利用できるToolsOceanを紹介します。 便利なツールが一箇所で利用できるので、ブックマークしておくと便利です。 ToolsOcean ToolsOceanは完全に無料で利用できるオンラインツールが、たくさん用意されています。登録など面倒なことは一切ありません。 いくつか使用してみました。まずは、CSSの軽量化。 CSSだけでなく、HTML、JavaScriptの軽量化、整形も揃っています。
概要 内容に応じてサイズが可変する textarea を、できるだけ手間をかけず、スマートな実装を試みます。 しかも、ネイティブのフォームが持っている利点をそのまま活かして、堅牢でアクセシブルな設計を目指します。 標準 textarea の難点 HTML の textarea 要素は基本的に高さが固定されていて使い勝手が悪いです。３行分くらいしか領域がなくて、長い文章を打つのがとにかく苦痛なんていうこともザラです。 最近のブラウザ実装では、多少気を利かせてくれているのか、テキストエリアの領域をドラッグで拡大・縮小できます。 ただ私は思うのです。めんどくさいし、最初っから、入力するテキスト量に応じて自動的に伸び縮みしてくれればいいのに……と。スクロールバーなんて、１ページにひとつあればじゅうぶんなんですよ。 実装方法 難しいことはありませんが、HTML と CSS、JS が協調して動作します
AWS ソリューション「AWS でのワークロード検出」で自動でシステム構成図作成してみた | DevelopersIO
AWS ソリューション「AWS でのワークロード検出」をご存知ですか？自動でシステム構成図を作成できるソリューションです！ 1. はじめに お疲れさまです。とーちです。 「AWS でのワークロード検出」というソリューションをご存知でしょうか？ このソリューションは AWS 上のリソースを自動で検出し、 アーキテクチャ図を自動で生成 してくれるものになっています。使ってみて便利だと感じたので紹介させて頂こうと思います。 実は書き終わってから既に紹介ブログがあることに気づいたのですが、前回の記事から時間も経っていてソリューション名も変わっている（旧称: AWS Perspective）ので、改めて紹介ということでご了承ください。 2. 構築 早速ですが構築です。このソリューションは CloudFormation で提供されているので、CloudFormation テンプレートを使ってデプロイす
PCでブラウザを開きながら画像編集や動画編集などを行っていると、メモリ(RAM)の使用量が多くなり、PCの動作が遅くなってしまいます。そんな時に「Reduce Memory」を起動させておくと、難しい設定や操作を行わなくても自動的にメモリの使用量を最適化してくれるとのことなので、実際に使ってみました。 Reduce Memory https://www.sordum.org/9197/reduce-memory-v1-3/ 上記サイトにアクセスして「Download」をクリックします。 ダウンロードした圧縮ファイルをExplzhなどで展開します。 展開されたフォルダの中にある「ReduceMemory_x64.exe」という実行ファイルをダブルクリックして起動します。なお、使用しているOSが32bit版の場合は、「ReduceMemory.exe」をダブルクリック。 「Reduce Mem
無料で自分の声を違うキャラクターなどの声にできるリアルタイム音声変換AIを簡単に使えるボイスチェンジャークライアント「VC Client」でどれぐらい声が変わるかレビュー
AI技術の進化によって、絵や文章だけではなく音声変換もAIでリアルタイムに行うことが可能になりました。ボイスチェンジャーAIにはRVC(Retrieval-based Voice Changer)やMMVCなどさまざまな種類が存在しますが、「VC Client」は複数ボイスチェンジャーAI向けモデルに対応しており、簡単にリアルタイム音声変換ができるとのことなので実際に試してみました。 GitHub - w-okada/voice-changer https://github.com/w-okada/voice-changer GitHubのレポジトリにアクセスします。 「事前ビルド済みのBinaryでの利用」の欄にあるテーブルで、「win」にある「通常」をクリック。 ダウンロードリンクが表示されるので、「このままダウンロード」をクリックします。なお、VC ClientはZIP形式で配布され
モダンCSSの新機能のブラウザ対応がこれで簡単になる！ Modernizrに代わる新しいスクリプト -SupportsCSS
2023年もCSSの新しい機能が続々とリリースされ、進化が早いですね。魅力的な新機能を使用するときに気になるのが、ブラウザのサポートです。 ブラウザがその機能をサポートしているかチェックし、判別するクラスを付与してくれるといえば、Modernizrですが、その更新はストップしています。 そんなModernizrに代わる、モダンCSSに対応したスクリプト、SupportsCSSを紹介します。@containerも@layerも:has()もsubgridもcolor-mix()にも対応しています。 SupportsCSS SupportsCSS -GitHub SupportsCSSはModernizrにインスパイアされたスクリプトで、モダンCSSに使用されるセレクタ・機能・@ルールなどのサポートをライブ検出できます。 CSSの@supportsもサポートしている機能を検出できますが、Sup
いかがでしょうか。 グレー(#808080)に近い色はやや見づらくなってしまっていますが、それ以外はかなり上手く表示できているのではないかと思います。 やり方上記のサンプルは以下のようなCSSで実現しています。 ">Copy <div> <span>hello world!</span> </div> <style> div { background-color: red; } span { color: red; filter: invert(100%) grayscale(100%) contrast(100); } </style> 以上、これだけです。 詳しい解説は後述しますが、colorとbackground-colorに同じ色を設定してから、文字色だけCSSのfilterで見える色に変化させる仕組みです。 なお、divとspanをセットにすると背景色にもフィルターが適用されてし
CSS Layout Generator
A CSS Grid generator & CSS Flexbox generator. A tool for generating UI layout component code.
Midjourney（ミッドジャーニー）とは、とても簡単に言えば、入力した文字だけで画像を生成できるAIツールです。 たとえば「ライオン」と文字入力するだけで、あらゆるスタイルのライオンを、１分もかからずに、AIが自動で作成します。 GoProで真正面、しかも超近距離で撮影したようなライオン 入力する文字、プロンプト（英: Prompt）を組み合わせることで、全く雰囲気の違う「ライオン」を生成でき、まるで呪文を唱える魔法のよう。 サイバーパンクなキャラクター風ライオンに プロンプトの組み合わせは自由自在で、あらゆるスタイルの「ライオン」に仕上げることが可能です。 狩りをするライオン「水彩スケッチ」風 Web制作向けUIデザインの自動生成にはじまり、Midjourneyを使い込んでいくうちに、「思い描いたデザインを生成する」ためのコツやポイントが、すこしずつ掴めてきたのでシェア。 ステンドグ
border-radiusの値をデスクトップとスマホで変える、例えばビューポートが大きくてマージンがある場合は8pxで角丸にし、ビューポートが小さくてマージンがない場合は0pxで矩形にする。 メディアクエリで簡単に実装できると思うかもしれません。しかし、ビューポートのサイズが小さく、マージンがある場合に8pxの角丸になりません。 この難しい条件をCSSの関数で実装するテクニックを紹介します。 Conditional Border Radius In CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに border-radiusの値をスマホとデスクトップで変えるテクニック 実装方法の解説 なぜ、9999を使用するのか 終わりに はじめに 私はデベロッパーがどのようなCSSを書いている
インターネットの速度を計測できるスピードテストには、Googleの「インターネット速度テスト」やNetflixの「fast.com」がありますが、どちらも簡単な測定結果しか表示することができません。Cloudflareが公開した「speed.cloudflare.com」を使うと、アクセスするだけで回線速度やリクエストの遅延を計測できるほか、測定結果の元データの数値まで確認することができます。 Speed https://speed.cloudflare.com/ About Speed https://speed.cloudflare.com/about/ 「speed.cloudflare.com」にアクセスすると、すぐに自分が利用しているインターネットの回線速度の計測が始まります。 しばらくするとグラフや地図も表示されます。記事作成時点では測定対象は下りの速度のみで、ダウンロードする
知っておくと便利なCSSの単位: ビューポートに基づく相対単位（vw, vh, lvh, svh, dvh, vb, viなど）の便利な使い方を解説
CSSでよく使用する単位といえば、px, r(em)あたりでしょうか。CSSはそれら以外にもたくさんの単位が使用できます。 前回はフォントに基づく相対単位でしたが、今回はビューポートに基づく相対単位（vw, vh, lvh, svh, dvh, vb, viなど）の便利な使い方を紹介します。 Relative length units based on the viewport -Going beyond pixels and (r)ems in CSS by Brecht De Ruyte 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの単位: vwとは CSSの単位: vhとは CSSの単位: vbとviとは、ブロックとインライン CSSの単位: lvh, svh, dvhとは ビューポート単位の解説動画
レスポンシブ対応で、可変のfont-sizeを定義するスタイルシートを記述するのは、なかなか面倒です。 スマホ表示での最小値、ワイドスクリーンでの最大値を決め、その間は可変サイズで表示されるfont-sizeのスタイルシートを簡単に生成できる無料オンラインツールを紹介します。 font-sizeは自由に定義できるので、日本語のフォントでも最適に利用できます。 Fluid-responsive font-size calculator Fluid-responsive font-size calculatorは、レスポンシブ対応のfont-sizeを可変にするスタイルシートもこの計算機で簡単に生成できます。font-sizeは最小値と最大値を決め、その間のサイズはcalc()関数でスムーズに変更させます。例えば、スマホなどの小さいスクリーンでは16px（最小値）に、ワイドスクリーンでは24p
手書きスタイルのグラフやチャートを簡単に作成できるJavaScriptライブラリを紹介します。手書きの度合いも調整でき、ちょとラフな感じ、雑な感じ、かなり雑な感じ、ぐちゃぐちゃな感じにもできます。 グラフやチャートに使用するデータは外部.csvファイルにも、カンマ区切りのテキストデータにも対応しています。 roughViz.js -GitHub roughViz.jsの特徴 roughViz.jsのデモ roughViz.jsの使い方 roughViz.jsの特徴 roughViz.jsは、ブラウザで手書きスタイルのグラフやチャートを作成するためのJavaScriptライブラリです。D3.jsとrough.jsをベースにしており、MITライセンスで利用できます。 グラフやチャートは、現在7種類に対応しています。 棒グラフ（垂直） 棒グラフ（水平） ドーナツ 折れ線グラフ 円グラフ 散布図
ニューモーフィズムとはで紹介したように、要素が背景と同じで、シャドウを与えて押し出されたような窪んだようなスタイルを実装するCSSを簡単に生成できるジェネレーターを紹介します。 カードやボタン、またフォームなどにも適したデザインで、ニューモーフィズムの凸凹のスタイルをCSSで簡単に実装できます。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザインとHTMLのズレを検出！ Node.jsとPuppeteer活用のビジュアル校正テストで実装時のケアレスミスを防ぐ - ICS MEDIA
【特集】 Windows 11の業務自動化ツールでラクがしたい！純正アプリ「Power Automate Desktop」の使い方
CSSの新機能！ テキストの行のバランスを自動調整する「text-wrap: balance;」の基礎知識と使い方
CSSの新機能を効果的にうまく使った、新時代のCSSリセット -acab/reset.css
DeepL Write: AI-powered writing companion
AWSがアーキテクチャ図を自動作成できるソリューション実装「AWS Perspective」を公開
Web制作に役立つ！面倒なCSSのコードを簡単に生成できる便利ツールをまとめました
CSS aspect-ratioプロパティの使い方、レスポンシブやレイアウトシフトで大活躍
CSS Gridで実装すると簡単！ コンテンツは中央配置、最大幅・全幅・ちょい広めのレイアウトを実装できるテンプレート
Masonryレイアウトをたった3行のシンプルなCSS Gridで簡単に実装できるようになります
「STUDIO 3.0」が大型アップデート！コーディング作業は一切不要、国産の無料デザインツール
CSSのコード品質向上のためのStylelint入門 - ICS MEDIA
内容に応じてサイズが可変する <textarea> を素敵に実装する - Qiita
放置しておくだけでメモリの使用を激減させてくれるフリーソフト「Reduce Memory」
CSSのfilterを使って、背景色に合わせた文字色を自動的に設定する - Blanktar
Midjourney（ミッドジャーニー）で思い通りに画像生成できる徹底ガイド
レスポンシブ対応にメディアクエリなしで、CSSの関数で定義！border-radiusの値を変えるテクニック
ネットの速度や遅延をサクッと＆詳細に計測できるスピードテストサイトがCloudflareから登場
CSSのcalc()関数で、レスポンシブ対応のfont-sizeを可変にするスタイルシートを簡単に生成できる無料ツール
ちょっと面白いスクリプト！グラフやチャートを手書き風のラフな感じにするJavaScriptライブラリ -roughViz
Neumorphism（ニューモーフィズム）のCSSはこれで簡単！スタイルシートを生成できるジェネレーター
abbeyroad0310.hatenadiary.jp
www.nejimakiblog.com
gifu-eiyo.or.jp
note.com/yadannakashima
www.pc-photo-daisuki.com
www.yomiuri.co.jp