コピペ一発！便利なCSSレイアウト生成ツールおすすめ12選（Grid ＆ Flexbox編）
あなたが、いま実装しようとしているレイアウトは、おそらくCSSで実現できるでしょう。 ただし日常の業務をこなしながら、日々進化するCSSの最新テクニックを習得するとなれば、話はまったく別です。 仕事で使えるCSSの技術を、時間をかけて学ぶよりも、ボタンやドラッグ＆ドロップ操作で、思い通りのレイアウトを自動で生成できる「ジェネレーター（英: Generator）」を活用してみましょう。 新しいプロジェクトにコピー＆ペーストで利用でき、瞬時に思い通りのレイアウトを作成、はじめてのひとにもオススメの時短ツールを厳選しています。 コピペ一発！便利なCSSレイアウトジェネレーターおすすめ12選（Grid ＆ Flexbox編） ここでは、CSS Grid と Flexbox で表現できるレイアウト用ジェネレーターと便利なリソースを一緒にまとめてご紹介します。 Layoutit! grid-templ
Golangでいい設計を実践するための6つのツール
概要 Golangを書くにあたり、いい設計のコードを書くための手助けとなるツールを調べたのでまとめます。 想定読者 Golangの使い方をある程度わかっている(チュートリアルはやった) いい設計をするための具体的なノウハウに興味がある 記事を書いたきっかけ 引用: https://www.amazon.co.jp/dp/B09Y1MWK9N 最近設計に関して勉強するために「良いコード／悪いコードで学ぶ設計入門」を読みました。 本の中では マジックナンバーを使うな 一つのメソッドの中で多くのことをやりすぎるな などの言われてみると基本的な注意点が書いてありました。 一方で以下のように、確かにそうなんだけど実際は守れていない注意点にも書かれていました。 単一責任の原則を守ってクラス設計しよう 高凝集なクラスを作ろう 本を読んでわかった気になって今までと同じように悪い設計のコードを書くままではい
中央に汚い灰色が混ざらずきれいなグラデーションを作成できる「CSS Gradient Generator」レビュー
鮮やかなグラデーションを作成したいのに、なぜか色の移り変わる部分がくすんで灰色っぽくなってしまう……という経験をした人もいるはず。このような事態を避けて色鮮やかなグラデーションを作成可能にするツール「CSS Gradient Generator」が公開されています。CSS Gradient Generatorで作成したグラデーションはCSSのlinear-gradient関数としてコピー＆ペースト可能なので、そのままウェブデザインとしても利用可能です。 CSS Gradient Generator https://www.joshwcomeau.com/gradient-generator/ Make Beautiful Gradients in CSS, with linear-gradient, radial-gradient, or conic-gradient. https://w
エンジニアのための十徳ナイフ「DevToys」が便利すぎる - Qiita
DevToysとは デベロッパーのためのスイスアーミーナイフの紹介文の通り。 開発時によく使うツールを十徳ナイフのようにまとめたアプリになっています。 JSONの整形とかエンコードデコードetc... プログラミングや保守運用の調査でやりがちな作業をいちいち変換サイトを探したり、エディター拡張機能のショートカットを探したりせずとも、これ一つですぐにできます！ インストール Microsoft Storeからインストールできます。 公式サイトからストアへのリンクを踏むか、ストア検索して見つけてください。 WinGetやChocolateyでもインストール可能です。 Microsoft StoreアプリなのでWindowsでしか使えませんが、Macユーザーの方は気を落とさずにこちらの記事をどうぞ！ また、作者曰くMacにはDevBoxやDevUtilsなどの類似ツールが既にあるため非対応だそう
「Googleのソフトウェアエンジニアリング」を読んだ - wyukawa's diary
www.oreilly.co.jp 目次はこちら 第1部 主題 1章 ソフトウェアエンジニアリングとは何か 第2部 文化 2章 チームでうまく仕事をするには 3章 知識共有 4章 公正のためのエンジニアリング 5章 チームリーダー入門 6章 スケールするリーダー 7章 エンジニアリング生産性の計測 第3部 プロセス 8章 スタイルガイドとルール 9章 コードレビュー 10章 ドキュメンテーション 11章 テスト概観 12章 ユニットテスト 13章 テストダブル 14章 大規模テスト 15章 廃止 第4部 ツール 16章 バージョンコントロールとブランチ管理 17章 Code Search 18章 ビルドシステムとビルド哲学 19章 GoogleのコードレビューツールCritique 20章 静的解析 21章 依存関係管理 22章 大規模変更 23章 継続的インテグレーション 24章 継続的
ローコード開発ツール「AWS Step Functions」が大幅拡充、200以上のAWSサービスを組み合わせたクラウドアプリ開発が容易に
ローコード開発ツール「AWS Step Functions」が大幅拡充、200以上のAWSサービスを組み合わせたクラウドアプリ開発が容易に Amazon Web Services（AWS）は、同社のクラウドサービスとして提供しているローコード開発ツール「AWS Step Functions」で、200以上のAWSのサービスを新たにサポートしたことを発表しました。 ICYMI: AWS Step Functions expanded the number of supported AWS services from 17 to over 200, and AWS API Actions from 46 to over 9,000! https://t.co/Azq1LlAt3u — AWS Developers (@awsdevelopers) October 11, 2021 これまではA
Webアクセシビリティ向上をスタートするために行った取り組み | QUARTETCOM TECH BLOG
こんにちは。フロントエンドエンジニアの松岡です。 この記事では、Webアクセシビリティ向上をスタートするためにカルテット開発部で行った取り組みについて紹介させていただきたいと思います。 Webアクセシビリティ 私が「Webアクセシビリティ」を認識したのは、フロントエンド界隈でアクセシビリティについての注目度が上がり、時おりブログなどでこの言葉を見かけるようになってからです。 歴史に目を向けると、Webの技術の標準を定めているW3Cが20年以上前から WCAG（Web Content Accessibility Guidelines） を公開しています。 WCAG 1.0 Recommendation WCAG 2.0 Recommendation WCAG 2.1 Recommendation WCAG 2.2 Working Draft WCAG 3.0 Working Draft 当初
【2021】モダンなPython開発環境の紹介 - Qiita
📌 はじめに Pythonで開発を行うにあたり、リンタやフォーマッタ、パッケージマネージャ等のツールの選定は非常に重要な問題です。一方で歴史的な経緯もあり、沢山の選択肢から何を選ぶべきか情報がまとまっていないように感じました。この記事では2021年9月時点でモダンと言えるであろう開発環境を紹介します。基本的にはシェアが高いこと、著名なパッケージで使用されていることを主な選定理由としており、また特定のエディタに依存しないことを前提とします。 本記事で紹介する内容は一つのテンプレートに近く、必要に応じてカスタマイズするもよし、そのまま使ってもよし、として参考になればと思います。(CI/CDについてはPythonとは独立した問題なので触れません。またドキュメント生成はSphinxを推しますが、必須ではないので今回は割愛します。) 📄 要約 "モダン"な開発環境を箇条で列挙すると下記の通りです
フロントエンドのテストは皆のためのもの | POSTD
テストとは人によって反応が分かれるものの1つであり、大喜びする人もいれば、見ないようにして去ろうとする人もいます。あなたがどちらの側であるにせよ、ここではフロントエンドのテストは皆のためのものであるということを説明します。実際、テストには多くの種類があり、それがテストに対して初めに恐れや混乱を感じる一因なのかもしれません。 この記事では、特に有名で広く利用されている種類のテストを扱います。なかには目新しいものはないと感じる読者の方もいらっしゃるかもしれませんが、少なくとも復習にはなるでしょう。どちらにせよ、筆者の目標は、この記事を通じて世の中のさまざまな種類のテストについて理解を深めてもらうことです。ここではユニットテスト、統合テスト、アクセシビリティテスト、ビジュアルリグレッションテストなどを一緒に見ていきます。 さらに、Mocha、Jest、Puppeteer、Cypressなど、各種
初心者でも簡単！コード不要のホームページ作成ツールElementorをはじめよう
かつて昔、コードを学んだり、ウェブデザイナーでない限り自分のウェブサイトを作ることは、ほとんど不可能でした。 しかし2021年となったいま、WordPressとElementor（エレメンター）のようなドラッグ&ドロップを基本とした、直感的なWebページビルダーを使えば、誰でも簡単にウェブサイトを作れるようになりました。 この記事では、WordPressとElementorをつかってホームページを作成する方法を、順番を追ってご紹介します。 Elementorって何？特長は？ Elementorは、WordPress向けドラッグ＆ドロップのページエディタで、プロのような美しいホームページを簡単に、かつスピーディーに作ることができます。 特長としては、ドラッグ＆ドロップによるデザインの追加や並び替え、編集をリアルタイムで行うことができる点。コードの知識不要で、誰でも簡単にハイクオリティなデザイ
Slidevを導入してMarkdownで美しいスライドを書こう - Qiita
(PR) 本記事でご紹介している Slidev などのテクニックについて、2021/11/20(土) 開催の VS Code Conference Japan 2021 にてご紹介しました。YouTubeアーカイブや発表資料も是非ご参照ください。 Slidevとは Slidevはエンジニア向けプレゼンテーションツールです。 Markdownで記述した文書から美しいスライドを生成できます。 公式デモ とそのソースとなるMarkdown もご参照ください。 ドキュメントは以下にあります。 すぐに使えるサンプル 使用頻度の高いと思われる記法を含めたサンプルのMarkdownを以下に公開しています。 コピペするなどしてお使いください。詳細は後述します。 上記Markdownを使用しているスライドを以下にデプロイしています。 上記Markdownの記述内容と見比べていただけると分かりやすいかと思いま
ノーコードのアプリ開発とは？メリット・デメリットやツールなどを紹介！｜SHOP DX ｜ 店舗経営のDX（デジタルトランスフォーメーション）を科学するウェブマガジン
プログラミングを習得する時間がなく、アプリの開発に踏み出せない方もいることでしょう。エンジニア不足を補う方法として期待されているのがノーコードによるアプリ開発です。今回はノーコードでアプリを開発するメリットやデメリット、具体的な開発ツールなどを紹介していきます。 アプリ開発で知っておきたいノーコードとは？ 一般的にプログラミング言語はさまざまな種類があり、それぞれコードの記述ルールが異なります。初心者から見ると、アプリ開発でどの言語を学べばよいのかわかりづらいだけでなく、独学での学習に不安を覚える方もいるでしょう。その点、ノーコード開発はプログラミングをしなくてもアプリを開発できる手段です。具体的にはノーコード開発をするためのプラットフォームをさします。もともとアメリカのIT起業家や個人プログラマーなどによって開拓された分野でしたが、日本でもITエンジニアの人材不足を補う手段として期待され
アクセシブルなフロントエンドコンポーネントの完全ガイド - 後編 | POSTD
※前編がこちらにあります 目次 icon links inputs keyboard navigation navigation menu modals prefers-reduced-* “skip” links SVGs tabs tables toggle switches tools tooltips video/audio players アクセシブルなインプット 2019年、WebAIMは上位100万件のWebサイトのアクセシビリティを分析し、エラーがないページの推定割合は1%未満というショッキングな結論に到達しました。アシスティブテクノロジー（支援技術）に頼っている人にとってインクルーシブで使いやすいサイトを作成するには、セマンティックHTMLの基礎を正しく理解する必要があります。Oscar Braunertのインクルーシブなインプットに関する記事は、彼の「小さく始めて共有・
あなたの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アニメーション用のコードを作成してくれます。背景色やテキストカラーなどに使えます。 ちなみに、テキストカラーは当サイトのト
Webデザイン制作をもっと楽に！便利な最新オンラインツール45個まとめ
この記事では、Webデザイン制作をもっと楽にする最新オンラインツール45個をまとめてご紹介します。 ウェブデザインに限らず、グラフィックなどあらゆるクリエイティブな案件、プロジェクトで活躍しそうな新しいツールを中心に揃えています。 これまで面倒だった作業をワンクリックで完了したり、人工知能が自動で行ってくれたりと、より快適にプロジェクトを進めることができる便利ツールが揃います。 自分のワークフローにうまくツールを導入することで、制作時間の短縮につながるだけでなく、ストレス少なく作業を行うことができます。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. 配色ツール 3. デザインコレクション 4. イラスト系ライブラリ 5. プロトタイプツール 6. アイコンツール 7. コラボ、リモートワークツール 8.
TypeScriptとOpenAPIスキーマで型安全に READYFORが語る“スキーマファースト”で効率的な開発方法
「実践！フロントエンド分離戦略」はREADYFOR 株式会社主催のエンジニア向けLT勉強会です。ここで、菅原氏が「OpenAPI GeneratorとTypeScriptによる型安全なスキーマ駆動開発」のタイトルで登壇。スキーマ駆動開発とそのメリット、活用しているツールについて話します。 READYFORのフロントエンジニア 菅原弘太郎氏（以下、菅原）：それでは「OpenAPI GeneratorとTypeScriptによる型安全なスキーマ駆動開発」と題して、発表します。自己紹介します。2020年11月に、フロントエンドエンジニアとしてREADYFORに入社しました。岩手県在住で、フルリモートで勤務しています。ReactとTypeScriptが好きで、React Hook Formのメンバーなので、もしフォローしてくれる方がいれば、フォローしてください。 フロントエンドとバックエンドの分離
TypeScriptの型定義からバリデーションコードを生成するツールを書いた
create-validator-tsというTypeScriptの型定義からJSON Schemaを使ったバリデーションコードを生成するツールを書きました。 モチベーション expressなどでAPIを書くときに、Request/Responseが意図したものかどうかをバリデーションする必要があります。 特にreq.queryなどはStringが入ると予想しますが、オブジェクトが入ってくることもあります。 これは、expressの内部で使っているqsというURLクエリのパーサが、オブジェクトや配列へ展開する機能を持っているためです。 expressを使ってるサイトは ?q=text があるときに req.query.q には オブジェクトが入る可能性をちゃんと考慮しないといけない。 ?q[a]=text で req.query.q ; // { a: "text" } になる — azu
コードを書くと結果が即反映されるCodepenやjsfidleのようなHTML/CSS/JavaScripteコード実行ツール・「Codeist」
Codeistはコードを書くと結果が即反映されるCodepenやjsfidleのようなHTML/CSS/JavaScripteコード実行ツールです。Ace.jsが使われています。書いたコードは自動で保存されます。 Codepenやjsfidleと同様の目的ですが、Codeistは書くと同時にすぐに結果が表示される点は割と大きなメリットかなと思いました。Codepenもjsfidleと割と重かったりするので・・ embedや複数保存などは出来ませんが動作が超軽量というだけでも使う価値を感じます。尚、ユーザー登録が必要なのですが、一応ライセンスの明記はありませんがGithubにてソースコードも公開されていますので気になるならローカル環境で使わせてもらうのもありですね。 CodeistGithub
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
（調査中）
Googleスプレッドシートにテキスト・画像を入れるだけでアプリが完成する「ノーコードアプリ制作ツール」が提供開始
