UI library for Design Engineers20+ free and open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion. 100% open-source, and customizable.
Magic UI
UI library for Design Engineers20+ free and open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion. 100% open-source, and customizable.
ブログの文章やドキュメント作成など、さまざまなシーンで使われる記法に「マークダウン記法」があります。文字修飾の簡単さや読みやすさから使うタイミングは多々あると思いますが、みなさんは快適にマークダウンを書けていますか？ 筆者はVS Codeでドキュメントをマークダウンで書くことが多く、表の作成・編集やプレビュー表示など、めんどくさい・見づらい・使いづらいと思うことがあります。どうにか快適に書けないかと思いさまざまな拡張機能や設定を試しながら業務を行ってきました。 この記事では、筆者が試した拡張機能やVS Codeの設定の中で便利だったものを紹介します。①から⑥まではすべて無料で利用できるので気軽に試してみてください！ ①マークダウンの表をエクセルからコピペできる拡張機能 VS Codeでの表の作成に重宝しているのが「Excel to Markdown table」という拡張機能です。エクセル
「HTML,CSSだって難しいよ！」 初心者でも始めやすいって言ったの誰ですかね。最初は覚えるのに必死だし、少しわかるようになったかな？で始めたサイト制作（コーティング）もエラーだらけで頭を抱える日々。そんな修行を耐えているみなさんに知ってほしい、CSSの設計についてお話できたらなと思います。概念的なこと中心になりますので細かいことは下記の参考文書をご覧ください。 『インプレス社 Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 谷拓樹著 2022年発行第１版』 注意 作者自身もプログラミング初めて１ヶ月の超初心者です。HTML、CSSを使ってデザインカンプを元にサイトを作れるぐらいのレベルです。なので僕より歴長い人はスルーしてもらっていいです。まだ初めたばかりの人は追いついてきてください。僕は先に行ってます。 初め 壊れない完璧な設計を
CSSはどんどん進化している！ マグネットのようにくっつくエフェクトを実装するテクニック -CSS Anchor Positioning
ナビゲーションのアイテムをホバーした時にマグネットのようにくっついてスライドさせるエフェクトをCSSで実装するテクニックを紹介します。 これまでは、JavaScriptがないと実装できないエフェクトでした。レスポンシブにも完全対応、アイテムが二段・三段と複数になっても、水平・垂直になってもエフェクトは追従します。 Anchor Magnet Slide Menu 実際の動作は、デモページでお楽しみください。 右上の矢印アイコンをクリックすると、アイテムの並びが垂直・水平になります。また、右下のアイコンをクリックすると、ダーク・ライトモードになります。 ※CSSのみで動作するのは、Chrome 125+です。それ以外のブラウザはポリフィルが使用されています。 See the Pen Anchor Magnet Slide Menu by coliss (@coliss) on CodePen
このブックマーク可能なガイドの目的は、最近CSSに追加されたばかりの新機能や使い方を分かりやすくまとめることです。 「CSSって、こんなこともできるの?!」と思ってしまうほど、多くの人が知らない新しいテクニックが中心です。 また、たとえ知っていたとしてもよく理解できておらず、「それって何?」「なんで気にする必要があるの？」「サンプルコードがあると助かるんだけど、」そんな人におすすめしたい記事となっています。 周りがあっと驚くテクニックを習得して、ウェブデザインでできる表現の幅をぐっと広げましょう。 コンテンツ目次これだけは知っておきたい最新モダンCSS（2024年春版）CSSコンテナクエリのインタラクティブガイドCSS sroll()とview()によるスクロール駆動アニメーション実践編CSS :has()のインタラクティブガイドCSS Nestingの具体的な使い方と使用例CSSコンテナ
誤解しているかも！ CSSの詳細度について、よくある誤解を解説
CSSの詳細度とは、(0,0,2)や(1,0,0)など3つの数字でスタイルを適用する際の優先度を決めるブラウザのアルゴリズムです。要素に対して複数のCSS宣言があり、そのプロパティや値が競合している場合、詳細度が高いものが優先されます。 このCSSの詳細度について、よくある誤解を紹介します。 Misconceptions about CSS Specificity by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 詳細度の誤解 1: 詳細度は10進数である 詳細度の誤解 2: style属性で詳細度が高くなる 詳細度の誤解 3:!importantで詳細度が高くなる 終わりに はじめに CSSの詳細度（Specificity）、ひいてはカスケード（Cascade）に関する記事が公開される度に、私はと
www.staticguide.org Markdown Guide の著者として知られるテクニカルライターの Matt Cone が、HTML と CSS、そして何より Hugo の静的サイトジェネレータを使って静的なウェブサイトを作成するガイドを書いている。 要は、このサイトの記述に従えば、スクラッチからウェブサイトを構築するプロセスを経験でき、ウェブサイトがどんなもので、そこでどんなテクノロジーが動いているか理解できるというわけだ。 やはり、「静的ウェブサイト」というのがポイントだろう。著者自身、Introduction でその理由を説明している。 Static Site Guide が静的ウェブサイトだけを対象とするのは、静的なウェブサイトこそ大多数の人にとって最適な選択肢だと思うからだ。静的なウェブサイトで、ブログ、企業マーケティングのウェブサイト、個人用やプロ用のポートフォリオ
The Static Site Guide
This is a book about creating and publishing static websites using HTML, CSS, and the Hugo static site generator. It’s still a work in progress, but you can read the draft chapters here. Table of ContentsIntroductionMaking Your First Web PagePublishing Your Web PageSprucing Things UpCreating a Static Website Using HugoCustomizing Our Hugo WebsiteUsing a Custom Domain NameImplementing Version Contr
Q by LivesenseをWordPress on EC2からHugo on Cloudflare Pagesに移行しました - LIVESENSE ENGINEER BLOG
はじめに 技術構成（before）と課題 技術構成（after）と選定の理由 改善したこと パフォーマンスの向上 デリバリー速度の向上 セキュリティ面でのリスク低下 大変だったこと 記事のマークダウン変換 段落分けと改行の区別 字下げ 書式の追加 Lintが必要になった 記事ごとのOGP画像周りの実装 URL変更に伴うリダイレクト設定 標準の検索機能がない おわりに はじめに 技術部の @mom0tomo , @etsxxx です。 技術部では、事業部横断的な仕事としてコーポレートサイトの運用も行っています。このたびWordPress on EC2で運用されてきた弊社のWebメディア（Q by Livesense）を、Hugo on Clouflare Pagesに移行しました。 q.livesense.co.jp 弊社のWordPress運用はやや特殊で、エンジニアがサーバーにSSHして
目まぐるしく変化するWebデザインの世界は、新しい技術やテクニックが毎日のように登場し、追いかけるだけでも大変。 「Webデザインの最新テクニックを知りたいけど、時間が足りない」という方へ。 この記事では、話題になった人気テクニックを中心に集めているので、効果的にWeb注目ニュースをインプットできます。 しかもスニペットはコピペで利用でき、CSSのみでスタイリングされたものも多数。 HTML/CSSやJSのコードをリアルタイムで編集、確認できるので、今後のデザイン制作に活用してみてはいかがでしょう。 こんなことできるの?!最新HTMLテクニック・スニペット Cards (gradient border) 最近良く見かけるモダンなUIカードエフェクトをまとめたミニライブラリ。CSSでできるボーダーアニメーションと合わせてどうぞ。 See the Pen Cards (gradient bor
はてなブックマークのブックマーク数が多い順に記事を紹介する「はてなブックマーク数ランキング」。5月13日（月）～5月19日（日）〔2024年5月第3週〕のトップ30です*1。 順位 タイトル 1位 1on1ミーティングガイド (1on1ガイド) 2位 令和のHTML / CSS / JavaScriptの書き方50選 3位 頼むから男は「今すぐ」化粧水を塗れ！！（追記でデッキ公開） 4位 タワマン刺殺女性「命を賭けて金を搾り取る」証拠動画が物議。色恋営業論はなぜ和久井容疑者に通用しなかったのか？ - まぐまぐニュース！ 5位 フルタイムで働く6児の母が副業でゲームを作った話を聞いたら「天才すぎて何の参考にもならねえ」と思ってしまった話 6位 日本人女性の海外売春の現状●続きあり 7位 わかりにくい線形代数を操作可能な図で表現することで簡単に理解できる無料の教科書「Immersive Mat
HTMLのチェックボックス（<input type="checkbox">）やラジオボタン（<input type="radio">）をCSSで装飾したいというのはよく聞く話です。2024年現在は、HTMLの記述は簡単なまま、CSSで自由度の高い装飾も実現できるようになっています。 結論 従来の手法 appearanceプロパティを使う手法 外枠の配置 未チェックとチェック済みの切り替え 強制カラーモードへの対応 透明なボーダーやアウトライン 内向きの影や背景グラデーション 画像やテキスト ブラウザ組み込みの外観 状態に応じたスタイルの指定 参考文献 結論 単に色調を整えられればよいという場合は、accent-colorプロパティを使います。 input[type="checkbox"], input[type="radio"] { accent-color: #d31; } くだもの や
matcha.css Drop-in semantic styling library in pure CSS. matcha.css is a pure CSS library designed to style HTML elements similarly to a default browser stylesheet, eliminating the need for users to manually patch their documents. Ideal for fast prototyping, static HTML pages, Markdown-generated documents, and developers seeking to streamline their workflow without delving into CSS intricacies and
視覚障害を持つ人々はブラウザの拡大機能やカスタムCSSを使用して文字を大きくしてウェブサイトにアクセスすることがありますが、サイト側の対応が不適切だとレイアウトが崩れてしまいます。レイアウトを維持したまま文字のサイズ変更に対応する方法が、Airbnbの企業ブログで解説されています。 Rethinking Text Resizing on Web. Airbnb has made significant strides in… | by Steven Bassett | The Airbnb Tech Blog | May, 2024 | Medium https://medium.com/airbnb-engineering/rethinking-text-resizing-on-web-1047b12d2881 視力が著しく低下してしまった人がAirbnbのページを見た時のイメージはこん
","naka5":"<!-- BFF501 PC記事下（中⑤企画）パーツ＝1541 -->","naka6":"<!-- BFF486 PC記事下（中⑥デジ編）パーツ＝8826 --><!-- /news/esi/ichikiji/c6/default.htm -->","naka6Sp":"<!-- BFF3053 SP記事下（中⑥デジ編）パーツ＝8826 -->","adcreative72":"<!-- BFF920 広告枠）ADCREATIVE-72 こんな特集も -->\n<!-- Ad BGN -->\n<!-- dfptag ＰＣ誘導枠５行 ★ここから -->\n<div class=\"p_infeed_list_wrapper\" id=\"p_infeed_list1\">\n <div class=\"p_infeed_list\">\n <div class=\"
Hello size coding fans. Today, I have something amazing to share: A tiny raycasting engine and city generator that fits in a standalone 256 byte html file. In this post I will share all the secrets about how this magical program works. Here’s my tweet that contains the code and a video of the output… A City in a Bottle 🌆 <canvas style=width:99% id=c onclick=setInterval('for(c.width=w=99,++t,i=6e3
【CSS】実は br や img に ::before, ::after 疑似要素が入れられる（場合がある）【置換要素】
この記事で紹介するのはお遊びのようなものであり、実用を目的としていません。 後に説明する通り、ブラウザによって表示が異なるなど、動作が保証されませんのでご注意ください。 はじめに結論から br や img には通常、::before, ::after 疑似要素を追加できません。 しかし、以下の Codepen にサンプルを示した通り、br や img 自体のコンテンツを置き換えることで、疑似要素を適用できます。
Last week we hosted React Conf 2024, a two-day conference in Henderson, Nevada where 700+ attendees gathered in-person to discuss the latest in UI engineering. This was our first in-person conference since 2019, and we were thrilled to be able to bring the community together again. At React Conf 2024, we announced the React 19 RC, the React Native New Architecture Beta, and an experimental release
生成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に
GitHub Next | SpecLang
When we as software developers instruct computers to do something, we use a programming language like Rust, TypeScript or CSS. Theoretically, the precision of formal languages allows us to predict exactly what behavior we'll get. But this comes at the expense of needing to explicitly specify every detail we want. On the other hand, if we are instructing a fellow human being, we usually leave out m
AWS Support - Troubleshooting in the cloud Workshopをやってみた③
AWS Support - Troubleshooting in the cloudとは AWSが提供するWorkshopの一つで、現在(2024/5)は英語版が提供されています。(フィードバックが多ければ日本語化も対応したいとのこと) クラウドへの移行が進む中でアプリケーションの複雑性も増しています。このワークショップでは様々なワークロードに対応できるトラブルシューティングを学ぶことが出来ます。AWSだけでなく一般的なトラブルシューティングにも繋がる知識が得られるため、非常にためになるWorkshopかと思います。また、セクションごとに分かれているので、興味のある分野だけ実施するということも可能です。 学習できるコンテンツ・コンセプトとしては、CI/CD、IaC、Serverless、コンテナ、Network、Database等のシステムに関わる全てのレイヤが網羅されているので、ぜひ一度
JetBrains は約 1 年半前にテスト自動化用 JetBrains IDE である Aqua のプレビューバージョンをリリースし、それから Aqua は大きく進化しています。 Cypress と Playwright のサポートなどの重要な機能を追加し、 Selenium をサポートすることで、Aqua はテスト自動化プロジェクトに最適なツールとなりました。 今回、その Aqua が一般公開されました！ 特に EAP 参加者の皆さんからの信頼、サポート、そして貴重なフィードバックには感謝しています。おかげさまでほとんどの重大な問題を一般リリース前に解決することができました。 皆さんへの感謝とテストコミュニティ内の成長促進への取り組みのしるしとして、Aqua の個人用非商用利用の無料ライセンスを提供いたします。 商用ライセンスもご利用可能です。 詳細については、この記事を引き続き読み進
Rethinking Text Resizing on Web
Airbnb has made significant strides in improving web accessibility for Hosts and guests who require larger text sizes. This post takes an in-depth look at: The problems encountered on mobile web when relying solely on browser zoom.The challenges of introducing changes that would impact the workflow of all frontend engineers.The benefits seen since launching these accessibility improvements.by: Ste
Songmu氏のブログ遍歴 Songmu氏：「ブログを作る」話ですね。これもcho45さん（ショ糖氏）の名言です。これはすばらしいなと思って、そのまま引用して読ませてもらいます。「個人サイトの外観はまさに顔だ。デザインされてなさ、みたいなのも含めて。ダサくても個人サイトを持つべきだと思う。ブランディングというと大袈裟だけど、自分のコンテンツは自分で持つのが確実に良い」。これは、名言過ぎますね。 やはりパッと見て、「あ、これは〇〇さんのブログだ」とか、「〇〇さんのサイトだ」ってわかる良さはすごくあるので、オンラインアイデンティティとしての個人サイトはすごくありだと思うし、僕のこのスライドを見ていても、ダサいからいいなと思っています。 ブログ遍歴みたいな話をすると、もともとはHTMLを手書きしてFTP（File Transfer Protocol）で上げるといったことを2004年ぐらいまでやっ
GitHub - lowlighter/matcha: 🍵 Drop-in semantic styling library in pure CSS.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
今回読んだ本 Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 発刊されたのが2014年とおよそ10年前の本になりますが、Web制作においてカオスなCSSに陥らないよう、基本的なCSSのルールから主にコンポーネント設計の手法について書かれています。 以前『CSS設計完全ガイド』という、同じくCSS設計の書籍を読んだことがありましたが、こちらの方がより（文章量的に）ライトで、どちらかといえばCSS設計の概念的な部分で参考になる点が多かった印象です。 自分のCSS設計の現状 普段CSS（SCSS）を書くときは、このあたりを気をつけて臨むようにしています。 SCSS＋BEM記法を使用 セレクタにHTMLタグ、idは使用しない 極力HTMLの構造に依存しないスタイルの当てかたをする（つもり） 既に定義されているスタイルの打ち消しは避ける ハイライ
ブログイメージ 更新日：2024/05/23 最近、ブログのアクセスが減ったと思いませんか。 ブログのアクセスを増やすためには、Google検索で上位にランキングされるかどうかが一つの鍵となります。 記事が上位にランキングされる為には、サイトの表示速度が重要な要素の一つとなっています。 そこで今回は、ブログの表示速度を計測する方法や表示速度改善方法をご紹介します。 サイトの表示速度を改善し、PVを爆上げしましょう。 初心者 PVを増やすにはどうしたら良いの？ 3年目ブロガー まずサイトの表示速度をチェックしよう！ サイトの表示速度を計測する方法 サイトの表示速度を計測する代表的なツールの一つが、Google PageSpeed Insightsです。 PageSpeed Insightsは、Googleが提供する無料ツールで、ページの読み込み速度やパフォーマンスを分析し改善点を提示してくれ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
VS Codeでマークダウンを快適に書きたい！ オススメの拡張機能と設定6選 - ICS MEDIA
HTML,CSS初めて１ヶ月ぐらいの人に知って欲しいCSS設計のこと - Qiita
これだけは知っておきたい最新モダンCSSの書き方（2024年夏版）
静的ウェブサイト作成ガイドは個人サイト再興に資するか - YAMDAS現更新履歴
こんなことできるの?!最新HTMLテクニック・スニペット30選 2024年5月版
今週のはてなブックマーク数ランキング（2024年5月第3週） - はてなブックマーク開発ブログ
CSSでチェックボックスやラジオボタンをカスタマイズする 2024年版: Days on the Moon
matcha.css | Drop-in semantic styling library in pure CSS
ブラウザ側で文字サイズを変更してもレイアウトが崩れないようにするための方法をAirbnbのエンジニアが解説
バイデン大統領のAI「なりすまし音声」、男を起訴 罰金9億円も：朝日新聞デジタル
City In A Bottle – A 256 Byte Raycasting System
React Conf 2024 Recap – React
テスト自動化用 IDE の Aqua が一般公開！ | The Quality Assurance Blog
🌊 mizu.js
「ブログは書くのもいじるのもすごく楽しい、自由なコンテンツ発信とコミュニケーションの場」 Songmu氏がブログについて考え、実践していること
実務で使うCSS設計を学ぶ『Web制作者のためのCSS設計の教科書』 - Qiita
【ウェブに関する主な指標の評価】ブログの表示速度を改善する方法