あなたのWeb制作をサポートしてくれるWebツール13選 | BUILD Journal
あなたのWeb制作をサポートしてくれるWebツール13選Update2023.05.24Release2023.04.28Tools HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する Web制作をサポートしてくれるツールを10個紹介します。mix-blend-modeやgridレイアウト、transformなどのコードの他にもフォントチェックや背景画像を作成できるツール、VSCodeのテーマ作成ツールもあります。あなたのWeb制作を快適に進めるためにチェックしてみてください。 Fuze – CSS Gradient AnimatorFuzeグラデーションアニメーションのCSSジェネレーター。色を複数指定するだけでCSSアニメーション用のコードを作成してくれます。背景色やテキストカラーなどに使えます。 ちなみに、テキストカラーは当サイトのト
JavaScriptは無し、スクロールした時にヘッダの高さを縮ませて上部に固定表示させるCSSの実装テクニック
スクロールした時にヘッダの高さが縮んで上部に固定表示させるWebページを見たことがあると思います。今まではJavaScriptを使用する必要がありましたが、CSSのposition: sticky;を一工夫して使用することで簡単に実装できます。 高さを縮ませるのはヘッダに限らず、パネルやバナーなど他の要素でも簡単に実装でき、汎用性にも優れていると思います。 Shrinking Header on Scroll Without JavaScript by Håvard Brynjulfsen 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 デモページのデザインがシンプルなので、一見見落とすかもしれませんが、ページをスクロールするとヘッダの高さが縮んで上部に固定表示されます。 デモページ 仕組みは、簡単です。 ヘッダは外側と内側の2
Web制作の時短に！2020年の便利オンラインツール・ベスト100選
この記事では、2020年に公開された便利なWebオンラインツール・ベスト100個をまとめてご紹介します。 定期的にリストアップしている最新オンラインツールまとめ記事では、2020年にかけて合計306個の新しいツールやサービスが登場しました。 その中でも、特にWebデザイン制作に便利なツールを選りすぐったコレクションで、「無料で利用できるツール」を揃えています。 これらのツールやサービスを活用すれば、Webデザイン制作をより快適に進めることができるでしょう。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. CSSツール（14個） 2. パターンツール（7個） 3. イラスト系ツール（3個） 4. デザインツール（10個） 5. 配色カラーツール（6個） 6. グラデーションツール（3個） 7. SVGツール（8個） 8. スクリーンショ
マイクロソフト、Webブラウザで動作する開発環境「Visual Studio Codespaces」発表。Visual Studio Onlineを名称変更、料金も値下げ － Publickey
すると自分用のVisual Studio Codespacesのインスタンスが起動し、そこへWebブラウザで接続するか、ローカルのVisual Studio Codeからリモートで接続すれば、（Visual Studio CodeのRemote Developmentと同様に）コードを編集し、ターミナルからコマンドを実行し、ビルドやデバッグなどが可能になります。 Visual Studio Codespacesの料金は選択されたCPU性能とメモリ容量によって異なりますが、Visual Studio OnlineからVisual Studio Codespacesへのリニューアルに伴い、料金はより安価なものに改定される予定。 Visual Studio Codespaceは、その実行イメージを取り出してユーザー自身のサーバや自身で用意したクラウドのインスタンス上で実行することもできます。この
web制作案件で「ありがちな場面」と「その際に有効な記事」まとめ - Qiita
こんにちは、フロントエンドエンジニアのてりーです。 僕の詳しいプロフィールはこちら 個人的には2024年現在は未経験・独学からプログラミングで稼ぐにはフロントエンド開発が1番手っ取り早いと考えています！ 興味があればご覧ください。 はじめに 今回は「web制作案件」というテーマに対して、 僕が良く遭遇する「あるある」と「対策記事」をセットでまとめました。 フリーランスになりたての方や、これからフリーランスを目指す方は是非参考しにして下さい。 制作準備 「初めてのクライアントさんからの案件だな」 デキる人に見えるズルい仕事テクニック 初めてのクライアントさんの時はいつも以上に本気を出すために、一旦この記事を読みます。 仕事が円滑に進むようなテクニックが誰でも実践できる形で書いてあるので、最高です。 毎回はじめに意識するだけで、ちゃんとした人に近づいている気がして気分が良いです笑 「見積もり額
架空企業「オニギリペイ」に学ぶ、セキュリティインシデント対策
架空企業「オニギリペイ」に学ぶ、セキュリティインシデント対策：徳丸浩氏が8つの試練を基に解説（1/3 ページ） ECサイトやWebサービスでセキュリティインシデントを起こさないためには何をすればいいのか。2019年12月に開かれた「PHP Conference Japan 2019」で徳丸浩氏が、架空企業で起きたセキュリティインシデントを例に、その対策方法を紹介した。 ECサイトやWebサービスを提供する会社で発生したセキュリティインシデントに関するさまざまなニュースが後を絶たない。どうすればこうしたインシデントは防げるのだろうか。 『体系的に学ぶ安全なWebアプリケーションの作り方』（通称：徳丸本）の筆者として知られる徳丸浩氏（EGセキュアソリューションズ 代表取締役）は、2019年12月に開かれた「PHP Conference Japan 2019」のセッション「オニギリペイのセキュリ
Vue.js＋Vuex＋TypeScriptのWebフロントエンド開発現場を前向きに改善した話 - ZOZO TECH BLOG
こんにちは。Webフロントエンドエンジニアの松井菜穂子です。 ZOZOテクノロジーズに入社して一年ほど経ちます。 あるサービスの立ち上げから運用まで、Webフロントエンドのチームリーダー・開発メンバーとして関わってきました。 当記事では、当社のWebフロントエンド開発現場にあった問題と、それぞれの課題に対して堅実に積み重ねた技術的な改善方法についてご紹介します。 はじめに モダンな技術でも負債は生まれる 負債を何故改善するのか 要因 その1: Vueコンポーネントを綺麗に分割する テンプレート コンポーネントクラス 使用例 解決策 テンプレート コンポーネントクラス 使用例テンプレート 使用例コンポーネントクラス コンポーネントカタログで汎用化を促す コード テンプレート（atoms.vue） コンポーネントクラス（atoms.vue） サンプル その2: Vuexをシンプルにする Sta
W3C、パスワードを不要にする「Web Authentication」（WebAuthn）を勧告として発表。Chrome、Firefox、Androidなど主要ブラウザですでに実装済み
W3C、パスワードを不要にする「Web Authentication」（WebAuthn）を勧告として発表。Chrome、Firefox、Androidなど主要ブラウザですでに実装済み W3Cは3月4日、FIDOアライアンスのFIDO2仕様の中心的な構成要素であるWeb認証技術の「Web Authentication」（WebAuthn）が勧告になったことを発表しました。 W3Cが策定する仕様はおもに、草稿（Working Draft）、勧告候補（Candidate Recommendation）、勧告案（Proposed Recommendation）を経て正式仕様となる「勧告」（Recommendation）に到達します。今回、WebAuthnが勧告となったのに合わせて、W3CとFIDOアライアンスはWebAuthnの仕様が正式版になったことも発表しました。 WebAuthnは2018
📃 Webページをそのままの状態でローカルに保存するツールを作った話 - Qiita
はじめまして。yamaimo (@yarnaimodev) です。Qiita 初投稿...というかネット上にちゃんとした記事を上げるの自体初めてな気がします。 1998 年生まれで、プログラミングとか Web デザインは独学で 3 年ぐらいやってます。TypeScript / Firebase / Node.js / React あたりが特に好きです。 この前 coliss で紹介された Can't Unsee を試してみたら 1 回目が 7,630 点、2 回目が 7,930 点でした。1 小規模ですが Mastodon インスタンスを管理してます。あと Helix キーボード をこの前組み立てた2んですがキー配列を変えたのがなかなか覚えられなくて死んでます。 開発環境は基本的に WSL + Hyper + fish shell と VSCode です。 今回 Puppeteer を使っ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
