2024年のCSSの書き方、ワークフローとツールについて
CSSには大きく変わるタイミングが何度かありました。レスポンシブ対応、メディアクエリ、Flexbox、CSS Gridなどはその大きく変わったタイミングでしょう。 そして、2024年もこれらと同様に大きく変わりそうです。CSSのネスト、:has()疑似クラス、subgrid、コンテナクエリ、ビューポート単位などの新機能がすべてのブラウザにサポートされました。 2024年のCSSの書き方として、より保守しやすいCSS、ワークフロー、ツールについて紹介します。 How I'm Writing CSS in 2024 by Lee Robinson 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに デザインの制約 2024年のCSS お勧めのCSSツール 終わりに はじめに 2024年のCSSは、素晴らしいの一言に尽きます。
便利で差がつく、ずるいWeb制作ツール・素材90選【2023年ベスト】
2023年も終わりに近づき、この1年間に収集したツールを振り返りながら、Web制作に役立つお気に入りを見つけてみましょう。 素晴らしい新ツールや素材がたくさんリリースされ、選定にはたっぷり時間がかかりましたが、カテゴリ別に幅広くセレクションできました。 本当に役立つかどうかだけを考え、「これ、神ツール。」と思えるものをピックアップ。 話題の的だったAIをうまく活用すれば、ワークフローを格段にスピードアップさせ、面倒な作業もストレスなくこなすことができます。 この記事では、そんなあなたの役に立つ2023年公開のWebデザイン制作ツールや素材をまとめてご紹介します。 整理したカテゴリは以下の通り。
使いこなして効率アップ！ ChromeのデベロッパーツールでCSSを検証する方法 - ICS MEDIA
ウェブ制作をする上でCSSでのスタイルの記述は必須ですが、意外とデバッグが難しくデザイン通りに実装するには手間がかかります。 そんなときに活躍するのがGoogle Chromeの「デベロッパーツール」です。視覚的にCSSのスタイルが確認、変更できるので、うまく活用することでCSSのデバッグを迅速に行うことができます。 この記事ではデベロッパーツールでCSSをデバッグする方法や便利な機能などを紹介します。記事で使用しているデモは以下のリンクから確認できるので、実際にデベロッパーツールで操作しながら読み進めてみてください。 サンプルを別ウインドウで開く ソースコードを確認する 1. DOMのスタイルを確認 / 変更する デベロッパーツールでは、画面上でスタイルの確認、変更ができます。 (1)デベロッパーツールを開く まずはGoogle Chromeを開きます。 確認したい箇所を右クリックし、［
Figmaの制作フロー劇的改善！超簡単な11の小技とヒントまとめ
この記事では、Figmaでのデザイン制作フローを劇的にスピードアップさせる、お手軽で簡単な小技とヒントをまとめてご紹介します。 よく利用するFigmaのショートカットや、お好みに応じて機能を追加できるプラグインやツールと一緒に活用し、より快適なFimgaライフを送りましょう。 インスペクターでは、シンプルな数式を利用しよう ピクセル単位で正しい値を見つけるために、要素のサイズを手動で変更するのは避けましょう。 数値を入力するインスペクターでは、足し算や掛け算などの数式を利用することで、数秒の貴重な時間を節約できます。 まとめて色を変更したいときは、Selection Colorを利用しよう Figmaでたくさんのコンポーネントを扱っていて、複数の要素の配色を素早く変更したいとき、それぞれの要素を一つずつクリックして、色を変更していませんか。 Selection Colorにあらかじめ配色を
ブックマークしておくと便利！Web制作に役立つさまざまなツールが一箇所で利用できる -SmallDev.tools
CSSやJavaScriptのミニファイ（軽量化）、HTMLやCSSやJavaScriptやSQLのフォーマッター、各種エンコード・デコード、ダミーテキスト・ダミーデータ・ダミー画像・クレジットカードのジェネレーター、diff（ファイル比較）など、Web制作に役立つツールがまとめて利用できるSmallDev.toolsを紹介します。 いろいろなツールが揃っているので、ブックマークしておくと便利です。 SmallDev.tools smalldev-tools -GitHub SmallDev.toolsの特徴 SmallDev.toolsは、Web制作に役立つさまざまなツールが一箇所でまとめて利用できる便利サイトです。完全に無料で利用でき、登録など面倒なことは一切ありません。 最小限のインターフェース🤩 電光石火の速さ⚡ 広告はなし💩 プライバシーフリー🔐（データはすべて、サーバーに
【資料作成の効率化Tips】表やグラフはベタ打ちするよりスプレッドシートから読み込むのがおすすめです。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
今回は、スライドやドキュメントで資料を作成するときに、スプレッドシートから表やグラフを読み込む方法についてまとめました。 ※この記事での「スライド」とはGoogleスライド(パワーポイントのようなプレゼンテーション用資料作成ツール)、「ドキュメント」とはGoogleドキュメント(Wordのような文書作成ツール)を指しています。LIGでは主にこれらのツールを資料作成に利用しています。 スプレッドシートから表やグラフを読み込む 効率を上げて正確性も上がる 私は、会議やプレゼンテーション用に資料を作る機会がよくあるのですが、定期的に数字やグラフのアップデートをする際に、毎回時間がかかっていました。 スライドやドキュメントは、計算式を使って動的に表やグラフを作るには使いづらいため、数字をスプレッドシートで計算して、毎回手入力をしたり、体裁を整えたり、手入力したことでミスがないかの確認などがあるため
To Hell with bad CSS! | | CSS Hell
CSS Hell Collection of common CSS mistakes, and how to fix them content is your Content? I saw a developer using the content property for adding extra text to a label, because why not, he said. Sadly, this raises several issues. .label::after { content: "My label"; } Check out what is going on here ⇸ One size should fit all? In modern web development, there is less and less reason to use fix sizin
console.log()が面倒ならDevToolsでログポイントを設置する（ひとり DevTools Advent Calendar 2020 – 04日目） | Ginpen.com
4 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 デバッグ時に console.log() は大変便利でよく使ってるんですが、DevTools を使うとコードを書き換えることなく同じことをやれます。 毎回スクリプトを書き直し→（ビルド待ち）→画面再読み込みする手間が省けて良いですね。 手順は簡単。 DevTools の Scripts パネルを開く 目的の JS ファイルを開く (CTRL+P) 出力したい位置の行番号を右クリックし “Add logpoint…” を選択 出力する内容を記述 スクリプトを実行（ボタンを押すとか） 編集したい場合も行番号を右クリックからやります。 DevTools のログポイントを編集する様子。行番号を右クリックして追加、編集。 設置すると、Chrome の場合は赤紫の矢印的なものが行番号の上に表示さ
Responsively App - レスポンシブWebデザインを効率化
レスポンシブなWebサイトを開発する際には、様々なデバイスでの表示を一気に確認できると便利です。デバイス毎に画面幅が数多くあるので、それらをまとめて表示確認して調整していくという作業が不可欠です。 今回紹介するResponsively Appはそうした表示をまとめて行えるアプリになります。スクロールやイベントの追従もできます。 Responsively Appの使い方 立ち上げました。iOS系とノートPCでの表示をテストしています。 Webサイトを変えると、全体に反映されます。 表示を横に並べる形にしました。 表示するデバイスを選択します。カスタムサイズも可能です。 表示するデバイスを絞り込めます。 横向きに変更しました。 デバイスを指定して開発者ツールを開けます。 Responsively Appはクリックイベントをすべての表示に対して適用したり、ホットリロードにも対応しています。サイト
自分好みにネットで物を売る方法と手順を最適化できる「イージーマイショップ」で実際に物を売るとこんな感じ
ネットで物を売るとき、アイテムが1～2個であればメモとペンで管理できますが、アイテム数が増加すると発送手続き・在庫管理・問い合わせ対応などがしっちゃかめっちゃかになってしまうことは容易に想像できます。簡単にネットショップを開設でき、かつ自分好みの「売り方」で収益をあげることが可能なイージーマイショップでは、自動で在庫管理してくれ、発送手続きはすっきりと手順化され、問い合わせ対応もスムーズに行える仕組みとなっているとのこと。多機能が売りのイージーマイショップの使いやすさはいかほどなのか、実際に確かめてみました。 ネットショップ開業はイージーマイショップ | セット販売やオーダーメイド商品に強いネットショップ構築 https://www.easy-myshop.jp/ 目次 ◆実際に商品の注文を受け付けてから発送までの流れはこんな感じ ◆配送方法の指定もらくちん＆種類豊富 ◆品切れになっても「
無料でWindowsの「Alt＋Tab」をもっと便利にする「Alt－Tab Terminator」レビュー
「Alt+Tab」キーを押すと開いているウィンドウを素早く切り替えることができますが、雑然とウィンドウのタイトルとサムネイルが並んでいるだけの状態だと、ウィンドウをたくさん開いている時に目的のウィンドウを探すのに苦労します。「Alt-Tab Terminator」は開いているウィンドウをコンパクトな一覧で表示して目的のウィンドウを一発で見つけることができるようにしてくれるフリーソフトです。 Alt-Tab Terminator - Manage Multiple Windows and Switch Tasks Faster - NTWind Software https://www.ntwind.com/software/alttabter.html ◆インストールと設定 上記サイトにアクセスして「FREE DOWNLOAD」をクリックします。 ダウンロードされた「AltTabTer_3
デバッグ作業が快適に！VS Codeにブラウザのプレビュー機能を加える機能拡張 -Browser Preview for VS Code
エディタで作業しながらデバッグをしたい人にぴったりな、VS Code内にChromeをプレビューとして表示させることができる機能拡張を紹介します。 ブラウザで単に表示するだけでなく、デベロッパーツールと連携させることも可能なので、デバッグがかなり捗ると思います。 Browser Preview for VS Code -GitHub Browser Preview for VS Codeの特徴 Browser Preview for VS Codeのインストール Browser Preview for VS Codeの使い方 Browser Preview for VS Codeの特徴 Browser Previewは、VS Code内に実際のブラウザをプレビューとして表示させることができます。 VS Code内でブラウザのプレビューが可能（Chrome Headlessにより）。 複数の
プログラミング効率アップ！50＋個のコーディング用フォント試し打ち＆無料ダウンロードできる Programming Fonts
プログラミングやコーディングを行っているひとは、エディタ画面といつもにらめっこ状態というひとも少なくないでしょう。そんなときはフォント設定を見直し、開発効率を改善してみませんか。 用意された50種類を超えるコーディング向けフォントから、お好みのフォントスタイルをリアルタイムで確認でき、無料ダウンロードできるサイト Programming Fonts が公開されていたので、今回はご紹介します。 可読性の良いフォントを利用すれば、コーディング時の入力ミスを防げたり、等倍フォントなら字幅がずれる心配もありません。開発環境にあった、あなただけのプログラミング用フォントを見つけてみましょう。 数字が美しい書体選びの秘訣とは？すぐに使える Google フォント20個まとめ付 Programming Fonts の使い方 Programming Fonts は、コーディング作業に適したフリーフォントを
Mac歴15年のWEBデザイナーがオススメする便利補助ツール13選 | 株式会社インディバル
人材の確保が難しい時代にあっても、 その状況を鮮やかに一変させるカードは きっとある。 私たちは業界のインフラとなって さまざまなサービスを展開し、 採用シーンのあらゆる課題を 解決に導きます。 その時々、それぞれの場面で 最善の一手を考え続け、 先進的かつユニークな 人材調達・活躍支援サービスの力で つながった先の景色まで支えていきます。
Alfred3 の Workflow でかっこよく業務効率化！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
フロントエンドエンジニアのライダーです。 社内のフロントエンドエンジニアの中で、新卒１年目である僕は、技術・経験ともに最も浅いです。日々の業務の中で得ることが出来ますが、業務を効率化しもっとスピーディーに成長するためにAlfred 3 の Powerpack を購入してみました。 というのは建前で、キーボードでサッサッサとやっているとなんかかっこいいですよね 👌 以前は無料版を使っていたのですが、特に大きなメリットを感じることができず、結局は Spotlightを使うようになり… でもやっぱりAlfredに戻ってみたり… とふらふらしていました。しかし、このたび有料版にアップグレードしたことで、もうAlfredに落ち着くことができそうです。 Alfred とは？ 以前ご紹介した Spotlight の拡張版とも言える、いわゆるランチャーアプリケーションです。 アプリケーションを起動したり
デザイナーが確認しておきたい、デザインリソース完全ガイド 2016年度
オンラインホームページ作成ツール Webydo で働いている現役デザイナー達が、普段からよく利用している、作業を楽にするオンラインツールやリソース75個をまとめています。 ウェブサイトでよく利用する写真の見つけ方や最適化方法から、アイコンやフォント、配色などデザイナーが一度は困ったことのある問題を解決してくれる凄腕ツールが揃っています。現在の制作フローに活用し、より快適な作業を実現しましょう。 コンテンツ目次 イメージ画像・ビデオ動画の関連ツール アイコン関連ツール 書体、フォント関連ツール 配色カラーツール モックアップ＆プロトタイプツール ウェブサイト制作ツール コラボレーション、作業効率ツール デザインコミュニティーサイト オンライン・ラーニング、スクール イメージ画像・ビデオ動画 ShowBox – ブラウザ上からスタジオ制作されたような、高品質なビデオ動画を作成できます。 Cov
CSS スタイルシート制作を楽にする！知っておきたい便利ツール25選まとめ
海外サイト Envato Blog で公開された「25 Free Web-Based Apps & Tools For Working With CSS」の著者 Paul Andrew より許可をもらい、翻訳転載しています。 CSS スタイルシートを作成していると、時間ばかりかかる退屈な作業をこなさなければいけない時があります。 たとえば、CSSアニメーションや FlexBox レイアウトを作成、調整したり、モダンブラウザ対応の書き方を思い出したり、レスポンシブ用にemをpxへの変換や CSS ファイルの圧縮やクリーンアップ、画像をデータURIへ変換など、どれもクリエイティブとは程遠いものばかり。 今回は、作業時間を大幅に短縮し、より快適なスタイルシートの作成ができる便利なツール25個をまとめてご紹介します。 紹介するツールを活用することで、これまで時間がかかっていた頭の痛くなる作業も、ボ
Alt＋Tabっぽい使い方でタブ切り替えを劇的に効率化できる無料アプリ「Pintasking」を使ってみました
例えばメールを読んで、その内容をコピーしてブラウザで検索し、開いたページのリンクをコピーしてLINEで友達に送るなど、複数のアプリを行き来しながら作業する場合、画面下部にある「タブ切り替え」アイコンからアプリを選択して開かないといけないため、作業が非常に面倒に感じることがあります。そんな面倒なタブ切り替えを劇的に効率化できるアプリが「Pintasking」で、タブ切り替えがどれくらい効率化されるのか実際に使って確かめてみました。 Pintasking - Google Play の Android アプリ https://play.google.com/store/apps/details?id=com.phinxapps.pintasking Pintaskingを使うには、上記URLを開いて「インストール」をタップします。 「同意する」をタップ。 インストールが終わると、ホーム画面にP
制作技術は見て盗め？オンラインで作業中の様子を公開している動画サイト
2015年8月10日 Webサイト制作, 便利ツール 以前、すでにWeb制作者として就職している方から「まわりの同僚のように早く作業ができない」「作業の効率のいい進め方がわからない」という悩みを受けたことがあります。作業の効率化について紹介しているWebサイトや書籍も多く見つけられるかと思いますが、実際に手を動かしているところを見るのもひとつの方法です。他の人がどう作業を進めているか、見てみましょう！ ↑私が10年以上利用している会計ソフト！ 人がコーディングしているところを盗み見 「盗み見」なんてあまりいい響きではありませんが、賛否はどうあれ「技術は見て盗め！」という昔からの教育方針も存在します。会社の先輩、学校やコワーキングスペースの凄そうなオーラを醸し出している人の作業を見てみるといいかも。もちろん、絶対に作業の邪魔はしないようにしましょう！ 「技術を見て盗む」メリット 作業の新しい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デベロッパーツールがさらに便利に！Flexboxの実装と検証が簡単になるFlexboxエディタとオーバーレイが搭載
