AIで簡単に実装コードを生成できる！ テキストからCSSアニメーションのコードを生成できるツール -AI CSS Animations簡単にCSSアニメーションのコードを生成できるAIツールが登場しました。テキストや音声でプロンプトを入力するだけで、複雑なCSSアニメーションでも数秒でコードが生成されます。 生成されたCSSアニメーションはその場ですぐ...記事の続きを読む
便利で差がつく、ずるいWeb制作ツール・素材90選【2023年ベスト】
2023年も終わりに近づき、この1年間に収集したツールを振り返りながら、Web制作に役立つお気に入りを見つけてみましょう。 素晴らしい新ツールや素材がたくさんリリースされ、選定にはたっぷり時間がかかりましたが、カテゴリ別に幅広くセレクションできました。 本当に役立つかどうかだけを考え、「これ、神ツール。」と思えるものをピックアップ。 話題の的だったAIをうまく活用すれば、ワークフローを格段にスピードアップさせ、面倒な作業もストレスなくこなすことができます。 この記事では、そんなあなたの役に立つ2023年公開のWebデザイン制作ツールや素材をまとめてご紹介します。 整理したカテゴリは以下の通り。
レスポンシブ対応の遅延画像が「sizes=auto」を使用すると簡単に実装できるようになります
朗報です！ 来年の2024年に、ブラウザはCSSから画像の実際の幅を取得し、それを画像のサイズとして使用することができるようになります。 srcsetで遅延読み込みされた画像の場合、ブラウザはsrcsetからソースURLを選択するために画像のレイアウト幅を使用できるようになります。 Add sizes=auto to lazy-loaded <img> これにより、Webデベロッパーはsizes属性を省略したり、loading=lazyを持つ<img>要素に対して明示的にsizes=autoを設定することができます。 ブラウザは、画像のレイアウト幅にsrcset属性の値を使用します（遅延画像は、レイアウトが判明するまで読み込みを開始しません）。遅延ではない画像の場合は無効で、100vwと同等になります。 sizes=autoはレスポンシブ対応の<img>に特に強力です。複数のバージョンの画
Webフレームワーク「Astro」とは？ 開発初心者からベテランまで注目する理由
はじめに Web制作におけるフレームワークというと、ReactやVue.jsなど、エンジニアが効率的に開発を行うために必要なシステムの骨組み、という印象がありますが、Astroは筆者のような、どちらかというとデザイン寄りの制作者でも理解しやすい設計になっており、実体験としてデザインから静的サイトの構築までを一人で完結させるのに有効活用することができました。 もちろん本職エンジニアの方にとっては、高パフォーマンスなWebフレームワークとして最近注目されているAstroを筆者以上に深く理解し、既存の開発プロセスを改善するヒントにも繋がるのではないかと思います。 現代におけるWebサイト構築のアプローチ 一つのWebサイトを構築しようと思ったとき、現代ではさまざまなアプローチが存在します。 単体、もしくは複数のページをHTMLコーディングする方法から、WordPressに代表される各種CMSをカ
Why Japanese Websites Look So Different
& how to analyze design choices without jumping to conclusions Over the years, I have had many encounters with Japanese websites — be it researching visa requirements, planning trips, or simply ordering something online. And it took me a loooong while to get used to the walls of text, lavish use of bright colors & 10+ different fonts that sites like this one throw in your face: Hankoya — a website
【決定版】2022年～2023年で必ず確認するべきGitHubリポジトリ 40選
はじめに 今回の記事では、個人の独断と偏見で2022年～2023年で必ず確認するべきGitHubのリポジトリを紹介する。私のTwitterでこれまで紹介したものもあれば、そうではないものもある。 GitHubはプログラマーにとって、普段の学習・開発を進めるうえでもっとも重要な情報源の１つである。本記事では、分野ごとに確認するべきGitHubリポジトリを紹介する。 なお、今回の記事で紹介するGitHubリポジトリの分野は以下の通り。内容はWeb開発に特化している。 確認必須 Web Python JavaScript TypeScript ちなみに、「確認必須」は分野を問わずすべてのプログラマーに役立つGitHubリポジトリを紹介している。 今回の記事を通して、年末年始の学習・開発に大いに役立ててもらえたら幸いだ。 確認必須 freeCodeCamp 世界最大規模のプログラミングメディア「f
2024年に最適なfont-familyの書き方 - ICS MEDIA
ウェブサイトのフォントは何を指定すればよいのでしょうか？ CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見かけることは少なくありません。それもそのはず、フォント事情は日々変化するもので、古い情報は役立たないことが多いためです。 本記事ではフォントに関わるここ最近のビッグニュースを取り上げつつ、教訓から学んだ変化に強い「無難」なフォント指定を紹介します。 結論 いきなり結論ですが、以下のフォントの組み合わせがオススメです。CSSのbodyセレクターなどにコピー＆ペーストして利用ください。 body { font-family: "Helvetica Neue", Arial,
CSS Gridで実装すると簡単！ コンテンツは中央配置、最大幅・全幅・ちょい広めのレイアウトを実装できるテンプレート
レイアウトにCSS Flexboxは使用しているけど、CSS Gridはこれから。そんな人にお勧めのWebページでよく使用されるレイアウトを簡単に実装できるCSS Gridのテンプレートを紹介します。 レイアウトはコンテンツを中央寄せに配置し、左右のマージンを自由に設定できます。たとえば、テキストには最大幅、画像には全幅、目立たせたい箇所には少し広め・かなり広めといった使い方ができます。 HTMLもCSSもシンプルなので、スニペットに登録しておくと便利です。 Layout Breakouts with CSS Grid HTMLは、非常にシンプルです。 ラッパーに.contentを与え、最大幅を設定した通常のコンテンツはclassなし、あとは幅に応じて.popout, .feature, .fullを与えるだけです。
2022年のモダンCSS改
7/27（水）開催の「TechFeed Experts Night#1 〜 Web標準 / CSS / Webアクセシビリティを語ろう」で発表した内容です https://techfeed.io/events/techfeed-experts-night-20220727 スライド内のリンクがクリックできるPDF版はこちら https://drive.google.com/file/d/1fc98v082exdGcCuxS73wEN_Qe2COvdTW/view?usp=sharing 各デモURL ■ 上下左右中央揃え https://codepen.io/tonkotsuboy/pen/qBbpYzj ■ スムーススクロール https://codepen.io/tonkotsuboy/pen/NWyNMOo ■ すりガラス https://codepen.io/tonkotsuboy
商用利用無料、UIデザイン用のSVGアイコンが1000種類以上！ 改変・再配布も可の太っ腹ライセンス- MingCute Icon
WebサイトやスマホアプリのさまざまなUIデザインに適した、シンプルなデザインのSVGアイコンが完全無料で利用できるMingCute Iconを紹介します。 アイコンは小さいサイズでもくっきり見えるようにデザインされており、SVGだけでなく、Webフォントも揃っています。 MingCute Icon MingCute Icon -GitHub MingCute Iconの特徴 アイコンのダウンロード MingCute Iconのアイコン MingCute Iconの特徴 MingCute IconはWebサイトやスマホアプリのUI用にシンプルにデザインされた高品質なアイコンです。24x24のグリッドで設計されており、アウトラインと塗りつぶしの2スタイル、2pxのストローク、SVG、PNG、およびWebフォントがサポートされています。 ライセンスはApache License 2.0で、商用
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. スクリーンショ
CSSにおけるスペースの与え方、paddingやmarginなどを使った実装テクニックを詳しく解説
Webページやスマホアプリの実装で悩ましいのが、スペースの与え方です。マージンとパディングをどう使うか、margin-topとmargin-bottomのどちらにすべきか、グリッド間のスペース、表示デバイスによって異なるスペース、大規模プロジェクトにおけるスペースの管理方法など、CSSにおけるスペースについて解説します。 Spacing in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSにおけるスペースの種類 CSS GridのGap（溝） CSS FlexboxのGap（溝） CSSのポジション CSSのプロジェクトで使用するスペースの実装テクニック スペーサーのコンポーネント CSSの数学関数: Min(), Max(), Clamp() はじめに 2つ以上の要素
フロントエンドエンジニア御用達の MDN web docs を網羅した
このリストは何？ MDN web docs を、あたかも書籍の目次かのごとく整理しなおしたものです。それぞれ MDN web docs の記事へリンクしています。 なぜこれが必要になったかというと、人材市場でフロントエンドエンジニアが少なすぎる現状をどうにかするべく教育体制を整えるところから考え始めたのですが、それならまずは日頃お世話になっている MDN web docs を教材として扱いたいなと思ったからです。慣れてきてもよく参照するし「アレどこだっけなぁ？」を軽減もしやすいかなって。 MDN web docs は内容そのものはかなり充実しているものの、リンクがあらゆる方向に張り巡らせられており ある一定の流れに沿って読む ということが少々難しい側面もあります。特に初学者にとっては、迷子になりやすいかもしれません。 ですので、初学者でも学習しやすいように MDN web docs 全体の
実例で学ぶ最新のWebデザイン見本コレクション厳選50個 2019年8月度
この記事では、デザイン制作のインスピレーションやアイデアの参考にしたい、クリエイティブな最新Webデザインをまとめてご紹介します。 時代に関係なく長年愛されるシンプルな配色や、控えめで効果的なアニメーション、エレガントで高級感のあるセリフ書体のフォント選びなど、実際にウェブサイトを制作するときに真似したくなる素敵デザイン・レイアウトが揃います。 実例で学ぶ最新のWebデザイン見本コレクション厳選まとめ Save Whales クジラの保護を訴えるプロジェクトで、スクロールに応じて縦横無尽に画像が切り替わるユニークなスライダー機能を実装。 Stonewall Forever Once Upon a Time in Hollywood LGBTQ問題の歴史について、インタラクティブなストーリーで伝える未来を感じる体験型サイト。ぜひ一度ページを開いてみてほしいサイトのひとつ。 The Gooni
人気上昇中！2019年に注目されているウェブデザイントレンド10個まとめ
この記事では、2019年現在人気となっているウェブデザイントレンド10個をまとめて紹介しています。 2019年のウェブデザインの動向としては、あらゆるトレンドの組み合わせやユニークなデジタルエフェクトなど、ウェブサイトやブランドを魅力的にするものが多く含まれています。お好みのトレンドを見つけて、今後のプロジェクトに活用してみてはいかがでしょう。 コンテンツ目次 1. 効果的なタイポグラフィー 2. グラデーションカラーの変化 3. よりナチュラルで本物の写真を 4. 個人の用途に合わせたイラスト 5. 3Dイラスト 6. モバイルファースト・デザイン 7. マイクロインタラクション 8. ユニークなアニメーション 9. グリッド無視の重なり型レイアウト 10. ビデオコンテンツの統合 1. 効果的なタイポグラフィー 2019年に入り、タイポグラフィーの人気はますます高まっています。大きく表
保存版！デザインツールの総まとめ -200種類以上の定番ツールから最近リリースされた注目のツールまで
Webサイト、スマホアプリの制作・開発に携わるすべての人に役立つ、200種類以上の有料・無料のデザインツールを紹介します。 定番ツールから最近リリースされた注目のツールまで、便利なツールが揃っています。 Awesome Design Tools -GitHub 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 アクセシビリティのツール アニメーションのツール AR（拡張現実）のツール コラボレーションのツール カラーピッカーのツール デザインのフィードバックツール デザインのハンドオフツール デザインパターンとインスピレーションのツール デザインシステムのツール デザインをコードにするツール エクスペリエンスのモニタリングツール フォントのツール スクリーンショットのツール アイコンのツール イラストのツール 情報アーキテクチャの
ウェブデザインの本質に主眼を置いたデザインガイドライン「ブルータリスト・ウェブ・デザイン」
by Igor Miske 建築形式のひとつである「ブルータリズム」を基に、ウェブサイト本来のあるべき姿に焦点を当てて作られたデザイン手法が「Brutalist Web Design(ブルータリスト・ウェブ・デザイン)」です。「雑誌ではないが雑誌のような記事が載っている」「アプリケーションではないが商品の購入やユーザーとのやり取りに使える」「データベースではないが、データベースによって動く」といった複数の側面を持っているのがウェブサイトであり、サイト訪問者に対してコンテンツを純粋に楽しむための方法として提供されるものであるとして、ブルータリスト・ウェブ・デザインは構築されたとのこと。そんなブルータリスト・ウェブ・デザインのガイドラインを、エンジニアのデイビッド・コープランドさんが記しています。 Brutalist Web Design https://brutalist-web.desig
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最短2行。上下左右中央揃えにはCSS Gridが一番ラク
Web標準でつくるガラケーサイト
ディレクターにもうれしい。Adobe XD用の日本語ワイヤーフレームUIキット「Wires jp」提供開始！ – Adobe Creative Station
