※月単価80万円を基準に、7ヶ月分の工数として560万円相当と換算しています。 最初に こんにちは！ 普段はIT企業でWebエンジニアとして働いています。 現在はフリーランスとして活動し、Ruby（Ruby on Rails）、TypeScript（Next.js, React）、Pythonなどを使って、フロントエンドとバックエンドの両方に携わっています。 将来はソフトウェアエンジニアとしてアーキテクチャ・設計について自ら意思決定した上、プロジェクトを推進する事が出来るようになりたいです。 そのためさらにスキルを磨いていきたいと思っており、日々技術に対して情熱を持って仕事に取り組んでいます。 以前Qiitaで 退職して560万円相当の工数をかけてお金を稼ぐサービスを開発した という事でBizRankというビジネス書籍を紹介するサービスを開発しました。 今回はその後としてのお話になります。
こんにちは。pixivのnamazuです。 先日開催されたPIXIV DEV MEETUP 2024にて、『pixivというシステムはどんな形をしているのか、それはなぜか。』というテーマで発表をさせていただきました。当日、セッションにご参加いただいた皆さま、そしてフィードバックをいただいた方々に、改めて感謝申し上げます。 Webサービス開発において面白い点の一つは、どのサービスもその要件や状況に応じて異なる選択がなされることです。結果として、類似点がある場合もありますが、細部において同じものはなく、すべてがユニークです。弊社内でもさまざまな違いが見られますが、業界全体を見渡すとさらに多様性が広がっていることでしょう。 今回の発表では、pixivのシステムに関する重要な要件や状況をいくつか取り上げ、現時点でどのような構造になっているかを、インフラストラクチャ、バックエンドアプリケーション、開
CSSだけでwidth: auto;やheight: auto;にアニメーションできたらいいな、と思ったことはありませんか？ たとえば、下記のようにテキストの量によってサイズが異なるボタンです。 これまではCSSでアニメーションするときは、固定値（width: 100px;しかアニメーションが機能しませんでしたが、Chrome 129でサポートされたinterpolate-sizeプロパティやcalc-size()関数を使用すると、簡単にwidth: auto;へのアニメーションが実装できます。 Animate to height: auto; in CSS by Bramus! 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに autoなどのキーワードをアニメーションさせる方法
ブラウザ内テキスト探索の高速化というテーマで改善を行いました。公開許可は頂いていますが、先方の希望で社名は伏せさせていただきます。 技術的には「再現性がある木構造のノード探索の条件の生成、その実行の高速化」という少しR&Dっぽいタスクでした。Playwright のコードを参考にしつつ、個別により速いパーツで置き換えていく、というもので非常に興味深いものでした。こういう仕事は楽しいので、いくらでも歓迎です。 今回は最初はドメイン理解に時間をあてて、その後十分にドメイン理解が進んだら計測しつつ改善する、という流れです。 以下、敬称略。 相談内容 ブラウザを自動操作する技術を開発している。技術的には一種のE2Eテストの応用技術で、サーバーに要素の探索条件と、その操作を登録する。 今回の相談では、その要素探索が重くなってしまうケースがあり、これを改善してほしい、という依頼。とくにテキストを条件に
ウェブでのテキストの折り返しは、HTMLコーダーにとって意外と難しい分野です。多様な画面サイズが存在する現代では、適切なテキストの折り返しについて悩むことが少なくありません。 この記事で紹介する折り返しとは、以下のようなテキストの区切りの良い場所で改行するかどうかです。 ▼固定幅で折り返し どこで生れたかとんと見当がつかぬ。何で も薄暗いじめじめした所でニャーニャー泣 いていた事だけは記憶している。 ▼文節での折り返し どこで生れたかとんと見当がつかぬ。 何でも薄暗いじめじめした所で ニャーニャー泣いていた事だけは記憶している。 本記事では、HTMLコーディングにおいて改行・折り返し方法の選択肢を整理し、最適な方法について考察します。 この記事で紹介すること <br />と<wbr />タグを使った改行指定 CSSのword-break: auto-phraseを使った自動折り返し JSラ
２つのJSON文字列の差分をシンタックスハイライト付きで表示したいケースがありました。 Zennでも同じ差分かつシンタックスハイライトができますね。下のようなコードブロックがそうです。 Zennでは行頭に+や-をつけることで差分としてハイライトされるようになっています。 このようなシンタックスハイライトかつ差分ハイライトを、2つのJSON文字列の差分に対して行いたいと思いました。つまり、差分を表示したい箇所に明示的かつ静的にマークしていくのではなく、2つのテキストから動的に差分を計算して差分ハイライトを表示してくれる機能です。 この記事ではその方法を紹介します。 なお、僕がJSONの差分を表示したかったのでJSONで例を出しますが、好きな言語で、なんならプレーンテキストでも応用可能です。好きなだけdiff表示してください。 先出し結論 jsdiffでJSONの差分トークンを取得し、shik
I’ve been a programmer since the age of 8, and some kind of developer for most of my life. Throughout my life as a coder, both hobbyist and professional, I’ve learnt plenty of programming languages that felt like cookie-cutter clones of each other, but also a few programming languages that changed the way I looked at programming, sometimes even at thinking. Ranking by order in which I discovered t
Weird Lexical Syntax
I just learned 42 programming languages this month to build a new syntax highlighter for llamafile. I feel like I'm up to my eyeballs in programming languages right now. Now that it's halloween, I thought I'd share some of the spookiest most surprising syntax I've seen. The languages I decided to support are Ada, Assembly, BASIC, C, C#, C++, COBOL, CSS, D, FORTH, FORTRAN, Go, Haskell, HTML, Java,
スタイルクエリとは、親要素のスタイルに応じて子要素のスタイルを適用するCSSの機能です。たとえば、カードのコンテナがあり、カードによってラベルやボタンのスタイルを変更したい場合などに便利です。 このスタイルクエリがブラウザにサポートされているかをCSSだけで確認するテクニックを紹介します。 Feature detect Style Queries Support in CSS by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スタイルクエリのサポートを確認するCSS このCSSの仕組み デモ Safari 18のバグを回避する方法 はじめに 先日、XでAdam Wathanが（カスタムプロパティの）スタイルクエリを確認する方法を尋ねていました。理論的には@supports at-rule()を使用す
They’re out! Like many of you, I look forward to these coming out each year. I don’t put much stock in surveys but they can be insightful and give a snapshot of the CSS zeitgeist. There are a few little nuggets in this year’s results that I find interesting. But before I get there, you’ll want to also check out what others have already written about it. Josh Comeau digested his takeaways in a rece
Fivotに参画してから約半年が経過しました。 参画当初から数ヶ月間、さまざまな課題に取り組み、方針も固まってきたため、 これまでの取り組みを整理し共有します。 背景 参画時点では、Flutter WebからNext.jsへの移行が完了したばかりの段階でした。 もともと別のプロダクトでFlutterアプリを活用していましたが、Flutter Webでの開発はメンテナンスが難しく、Next.js（v13）への移行が決断されました。 エンジニア2人体制で担当しましたが期間が短かったこと、フロントエンドが専門でなかったこともあり、コードの品質は課題が多い状態でした。 参画当初、早期の新規開発も求められていましたが、技術的負債の解消も並行して進めなければいけないと考え、改善活動に取り組みました。 技術的負債解消の取り組み オンボーディング改善 環境構築に必要な情報をREADMEに記載し、ドキュメン
業務で使用している .zshrc 大公開！！！ 〜〜ちょっとした解説付き〜〜 - Adwaysエンジニアブログ
こんにちは！！！ 広告事業本部でアプリケーションエンジニアをしている森田です！！ みなさん、Zsh使ってますか？？ 僕は昨年、新卒で入社したタイミングでbashから乗り換えて使い始めました。 業務でMacを使用するようになり、シェルを立ち上げるたびに「デフォルトZshやから乗り換えてな」的なメッセージが出てくるのが嫌で乗り換ることになりました... きっかけとしてはこの通り受動的なものだったのですが、使ってみると意外と高機能でプラグインも豊富で以前よりよい開発体験を得ることができています。 乗り換えたてのころ、まわりの皆さんがどんな設定にしているのかなと気になり、 「ゾッシュってどんな設定にしてますか？」 と聞いたことがあり、場が一瞬？？？となったことがありました。 このブログではそんな僕がZshをズィーシェルと読むことを知り、業務のためにZshの設定ファイル.zshrcをいじってきた、そ
Making content-aware components using CSS :has(), grid, and quantity queries
Making content-aware components using CSS :has(), grid, and quantity queries A big thing you need to contend with when working on design systems is anticipating all the different ways someone may use a component. The idea here is that you then preemptively provide sensible behavior and safeguards to keep things working well. An example of this is a “Simple List” component I was helping to make. It
iコンセプト ### 1. プロジェクト概要 - **プロジェクト名**: バーチャルオフィス「オフィスナビ」ホームページリニューアル - **サイトの課題**: - 既存のホームページはスマートフォンに対応しておらず、ユーザー体験が向上する余地が大きかった。 - SEO対策はトップページに限られており、下層ページの最適化が不十分だった。 - 下層ページを含め、問い合わせ数を増やしたいというニーズがあった。 - **目的と目標**: - **ターゲット層**: 起業を考えている方や副業を行う個人事業主。 - **目標**: サイト改善によるアクセス数の向上およびCV（コンバージョン）率の向上。 - **安心して申し込める環境**を整えることも目標の一つ。 - **対策内容**: - ターゲット層に向けて、レンタルオフィスよりも簡単で、コストが約20分の1になるバーチャルオフィスの魅力を紹介
Fullstack AI Dev & Raycast Summit (2024/11/23 10:00〜)
※ タイムテーブルは予告なく変更になることがあります 登壇者 草間 一人 所属：PagerDuty株式会社 職種：Product Evangelis 通信事業者でプラットフォームエンジニアを務めたのを皮切りに、いくつかの外資系企業でプロフェッショナルサービスやプリセールスエンジニアとしてクラウドネイティブやプラットフォーム製品に携わるなど、10年以上さまざまな形でプラットフォームに関与している。2023年11月より現職。一般社団法人クラウドネイティブイノベーターズ協会 代表理事。Platform Engineering Meetupオーガナイザー 上野 彰大 所属：PharmaX株式会社 職種：取締役・CTO PharmaX共同創業者。かかりつけオンライン薬局サービス「YOJO」を運営している。2023年からは積極的なLLMの活用によって、オペレーションの自動化を主導してる。エンジニアリン
「CTRは高いのにCVRがまったく上がらない」という悩みを持つ広告運用担当者は多いのではないでしょうか。 LPへの流入数は増えているのに、肝心のCVが取れないと、 「どこを変更すれば成果を出せるのかな…….」 「予算を増額した方が良いのかな……」 そう思う方は少なくないはずです。 しかし、やみくもな施策をおこなったり、予算の増額をすることはかえって成果を下げることにもなりかねません。 そこで今回は、CVRが低いときによくある原因やCVRを高める方法を解説します。 この記事の内容 「CTR」と「CVR」の基本 CTRが高いのにCVRが低い理由 CVRを改善するための具体例6選 成功事例 この記事を読むことで、CVRの効果的な改善の仕方を理解でき、グッとコンバージョン数を増やすことができます。 広告運用においてCVRの改善を目指している方は、ぜひ参考にしてください。 現在、80項目以上をまとめ
The stretch keyword: a better alternative to width: 100% in CSS?
The stretch keyword: a better alternative to width: 100% in CSS? Certain HTML elements, like a div or a p, will stretch to take up the full available width by default. If you give them a horizontal margin, it won’t cause a horizontal scrollbar. This is an incredibly useful default behaviour. Of course, many other elements aren’t full-width by default. Let’s look at a few instances where width: 100
Should masonry be part of CSS grid?An exploration of examples showing masonry as both a part of CSS Grid and as its own display type. Oct 30, 2024 The examples in this article work only in Firefox with experimental features enabled (Go to about:config and enable grid-template-masonry-value) or the latest Safari Technology Preview. I've included videos below each interactive demo for easy viewing o
はじめに CSSでランダムな値を指定したいと思ったことはありますか？ 僕はありません。 ただ、CSSでランダムな値を扱う random()・random-item() 関数が 2024年11月現在 Editor's Draft となっており、近いうちにCSSでランダムな値が指定できるようになることでしょう。 そのため、この記事では random()・random-item()関数の使い方を紹介しようと思います。 random() 関数 random() 関数は、均一分布から抽出された最小値と最大値の間のランダムな値を表す数学関数です。 また、オプションで選ばれる値を最小値と最大値の間のステップを制限できます。 random() 関数は、以下のような引数に受け取ります。
GitHub - astahmer/atomic-css-devtools: A devtool panel for debugging Atomic CSS rules as if they were not atomic. Available on chrome & firefox
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
フロントエンド刷新を迅速に終わらせるための2つの軸 - Cybozu Inside Out | サイボウズエンジニアのブログ
kintone 新機能開発チームでエンジニアをしているぶっちーと宇都宮です。 ６月の中旬から約３ヶ月間、アプリストアという「kintoneアプリ」を作成するための機能を実現している複数のページのフロントエンド刷新に取り組みました。この取り組みは、以前から kintone 開発チーム全体で取り組んでいるフロントエンド刷新の一環であるため、このプロジェクトの概要について説明されている以下の記事をあわせてご覧ください。 blog.cybozu.io 基本的にフロントエンド刷新は開発チームの開発容易性を向上するものであり、新機能開発とは違ってそれ自体が顧客価値を生むものではありません。そのため、出来るだけ迅速に完了し、新機能開発などの顧客価値を提供する活動に繋げていく必要があります。そこで本記事ではフロントエンド刷新をより迅速に完了するために意識した「作るものを減らす」と「開発＋テストの速度を上げ
乗りこなせ！ モダンフロントエンド Cascade Layers/レイヤーによる優先順位の制御 ［CSS Modern Features no.3］ こんにちは！ サイボウズ フロントエンドエキスパートチームの麦島です。 今回取り上げるCSSの機能はCascade Layersです。 Cascade Layersは、「レイヤー」と呼ばれる階層を独自に定義することで、CSS適用の優先順位をコントロールする機能です。利用時は@layerを用いて宣言します。 Cascade Layersと優先順位 CSSを適用する際、CSSセレクタを用いた詳細度での優先順位のコントロールが広く利用されています[1]。 しかし、新たにCascade Layersを組み合わせた場合には次の順番で適用されます。 Cascade Layers CSSセレクタでの詳細度指定 Cascade LayersがCSSセレクタ
Yes, it’s the Twitter heart button. This heart animation was done using an old technique called sprite sheets🡵. On the web sprite sheets are used mainly to reduce the amount of HTTP requests by bundling multiple images together into a single image file. Displaying a sub-image involves clipping the sheet in the appropriate coordinates.
広告代理店での営業経験10年を経て、現在はWebデザイナー兼フロントエンドエンジニア、そしてWebマーケターとして活動しています。WordPressを中心に15年以上の経験を持ち、SEO対策にも15年のキャリアがあります。特にWordPressを活用したサイト構築が得意です。 「きれいなだけじゃ売れない！」をモットーに、JavaScript、PHP、Pythonなどのプログラミング言語を駆使して、マーケティングの視点からWebサイトを最適化し、SEO効果を最大限に引き出します。これまでの経験と技術をフル活用して、ユーザーのニーズに応える高品質なWebサイト制作を心がけています。 スキル HTML、CSS（SCSS） WordPress、JavaScript、PHP、Python Photoshop SEO対策 リスティング広告（Google） アクセス解析 特にWordPressの構築が得
![yosida (@u30rental)さんのプロフィール - knoow[ノウ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/d24f168d5f825d249dac393e36372f93b4e57e40/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fdhig6q3gb%2Fimage%2Fupload%2Fq_auto%3Alow%2Fcover%2F0fd782dfe8cba7dad00873250228ca0eea6b4b18ca1b22210eec641f7fcb7e5e.jpg)
CHAPTER 1 デザインを始める前に CHAPTER 2 レイアウト CHAPTER 3 配色 CHAPTER 4 タイポグラフィ CHAPTER 5 写真とイラスト CHAPTER 6 デザインのアイデア集 カバーイラストはこれまでと同様岡村亮太様に描いていただきました！今回も素敵なイラストをありがとうございます！ 予約する こんな人におすすめ これからデザインをはじめる初心者 HTMLとCSSの基礎を学んだあと、何を勉強しようか考えていた人 一度デザインを勉強したけど挫折した人 Webとグラフィックの両方のデザインを学びたい人 デザイン制作のアイデアをもらいたい人 デザインって結局どう進めればいいかわからず迷子な人 デザインは才能ではなく、きちんとルールや仕組みを学べば誰でも取り組めるものだよ！という気持ちをたっぷりと込めて書きました。これからはじめてみたい人が第一歩目を踏み出せる
印象に残るブログデザインの法則：アクセスを増やす秘訣とは？【初心者向け】 ブログのデザインは、ただ見栄えを整えるだけでなく、読者の信頼を得て滞在時間を延ばし、リピーターを増やす重要な役割を果たします。この記事では、効果的なブログデザインのポイントを初心者向けに解説します。 ブログデザインの目的 ブログデザインの目的は、ブランディングや心理的効果の発揮、そしてユーザビリティの向上にあります。ブログを単に書くことではなく、読者が何度も訪れたくなるような「価値」を提供することが目標です。デザインにより「信頼感」や「親しみやすさ」を与えることで、読者の関心を引き、またSEO的にも効果を発揮することが期待できます。 特に、収益を目的とするブログや幅広い読者層をターゲットとする場合には、自己満足な装飾を避け、シンプルで洗練されたデザインを心がけることが重要です。 良質なブログデザインを実現するためのポ
自然言語でWebサイトが作れるサービスは便利な反面、ブレやすいのがネックです。そのネックを解消するため、HTMLのようなプロンプトを考案しました。「（川合式）日本語コーディングプロンプト」と呼んでいます。例はCreateを使っていますが、v0でも同じような出力になると思います。 Createの出力結果 コードのようにプロンプトを書くことで、出力結果のブレが最小限におさえることができます。 Cursorでプロンプトを作成 補完やテキスト生成・修正をしてくれるので、プロンプトを書くならCursorが便利です。 プロンプト 下記をコピペして試してみてください。 ---html--- <container> <box> <maincopy-containar> <maincopy> あなたは<br/>AIで救えるか？ </maincopy> </maincopy-containar> <subco
Cloud CDNでCache-Controlを使ってキャッシュ制御したい(Google Cloud） | 株式会社ビヨンド
はじめに システムソリューション部所属、インフラに少々携わっておりますsumiです。 本日は アプリケーション ロードバランサ を使用したサーバーで、Cloud CDN を指定したファイルのみキャッシュするように設定する方法をご紹介いたします。 Cloud CDN 自体はコンテンツをエッジサーバーにキャッシュすることでサーバー負荷の軽減、レスポンスタイムのチューニング等に役立ちます。 本記事では、特定の静的コンテンツをキャッシュしないように、HTTPヘッダーでのキャッシュ制御を目的とした設定例を紹介します。 キャッシュされても困らないサイトの場合は、Google Cloud が推奨する設定「静的コンテンツをキャッシュする」、または、公式ドキュメント「キャッシュに保存されたコンテンツを無効にする」を合わせて参照してください。 ※調整に当たっては、検証等行った上で実施することを強く推奨いたしま
『ランディングページの作り方＆ウェブセールスコピーライティング』攻略法 開催日時 : 2025年02月07日 - 2:00 PM - 5:00 PM 参加定員 : 8名 参加料金 : ￥1,000.00 ※主催者からのメッセージに金額表記がある場合、そちらの金額になります。 主催者名 : このは屋 投稿者プロフィール 担当者名 : このは屋事務局 電話番号 : 050-5866-7372 ※お問い合わせの際は「"オールイベント"を見た」とお伝えください。 受付時間 : ▼ 主催者からのメッセージ 外注業者に依存せず、自作(DIY)で内製化して、売込まずに、顧客獲得できるようになるための『ランディングページの作り方＆ウェブセールスコピーライティング』攻略法 ランディングページは、「レジ」です。 「レジ」の無いお店では、お客さんに商品を購入して頂くことができません。 同じように、「レジ」である
概要 Google Apps Script(以下GAS）の練習も兼ねてAnkiという有名な暗記アプリのインポートを楽にしたいので作成。筆者はHTMLやCSSは苦手なのでChatGPTを介し作成。 機能 リスト形式での単語追加 リストの長さはボタンで行を追加して可変的に対応可能 リストごとの削除ボタン CSV出力機能 出力前に確認メッセージ 出力CSV名は"Anki_import.csv" <!DOCTYPE html> <html> <head> <base target="_top"> <style> .header-container { display: flex; justify-content: space-between; align-items: center; } .container { display: flex; flex-direction: column; mar
おそらく間違っている情報が含まれているとは思いますが今回はこれで進ませていただきます！ これを入力したら作成したスプレッドシートのURLをコピーして終了です！ SheetDBにアクセス 次にこちらのURLにアクセスしてください！ アクセスしていただいたら画面左にある 「Create Free API」をクリックしてください！ 右上にある 「＋ Create new API」をクリックすると 「Google Spreadsheet URL」と表示された画面がでます！ その画面に先ほどコピーしたスプレッドシートのURLをペーストしてください！ おそらく中央に「https://sheetdb.io/api/v1/<ユニークID>」が表示されたと思います！ そのURLにアクセスしてみるとJSON形式で表示されれば成功です！ コーディングしよう！ 皆さんお疲れ様です！あともう少しなので頑張りましょう
tDiary README
tDiary ツッコミのできるWeb日記システム tDiaryでできること tDiaryは、いわゆるWeb日記を支援するシステムです。tDiaryには以下の特徴があります。 更新や設定までCGIでできる 日記の参照だけでなく、日記の更新、設定までもCGIでサポートします。ブラウザさえあれば面倒なメンテナンスは不要。手軽に使えて、長く続けられます。 「ツッコミ」が入れられる 日記の読者が、日記に「ツッコミ」を入れられます。ようするに、日付ごとに掲示板がついています。これを通じて、読者とのコミュニケーションが生まれます。 ツッコミがあったことを著者にメールで知らせる機能もあります。 「本日のリンク元」(Referer)機能 他の日記等からリンクされると、Refererヘッダを見てそのURLを表示します。どこかで自分の日記が話題にされていることがすぐにわかるように、従来のWeb日記コミュニケーシ
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こんにちは、とまだです。 突然ですが、みなさんは「ヴァンパイアサヴァイバーズ」（以下、ヴァンサバ）というゲームをご存知ですか？ 私はこのゲームが大好きです。 クリアしてはデータを消してまた最初からプレイするというサイクルを繰り返しているぐらい、どハマりしています。 そんな中、最近ふと気づいたのです。 「あれ？このゲーム、エンジニアの人生設計にめちゃくちゃ似てるぞ...？」 ...と。 今回は、そんなヴァンサバから学べるエンジニアの人生設計について、7つのポイントをお話しします。 ヴァンサバの概要 本題に入る前に、ヴァンサバについて簡単に
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに このドキュメントは、Bolt アプリケーションのコードベースの構造と各部の機能について解説します。Bolt は、StackBlitz の WebContainer API を活用し、ブラウザ上でフルスタック Web アプリケーションのプロンプト入力、実行、編集、デプロイを可能にする AI 駆動の開発ツールです。このリポジトリは Bolt.new のコアコンポーネントを提供するオープンソース版であり、独自の AI 駆動開発ツール作成を支援します。Cole Medin氏によってフォークされたこのバージョンでは、プロンプトごとに使用
displayとopacityを使ってフェードアウト 通常、displayをnoneに設定するとアニメーションが即座にキャンセルされます↓ Setting the display property to none will terminate any running animation applied to the element and its descendants. If an element has a display of none, updating display to a value other than none will start all animations applied to the element by the animation-name property, as well as all animations applied to descendants w
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? ウェブサイト作成に最適なプログラミング言語は何か？ ウェブサイトの開発に最適なプログラミング言語を選ぶことは、パフォーマンス、スケーラビリティ、ユーザー体験に影響を与える重要な決断です。この選択は、プロジェクトのタイプ、必要なカスタマイズのレベル、開発者の好みによって異なります。ここでは、ウェブサイトの作成に人気のあるプログラミング言語とその主な利点を紹介します。 私のウェブサイト https://noticiasdeprimera.com/ 1. JavaScript JavaScriptはウェブ開発で最も利用されている言語の1つです
Affinityシリーズの不満点に、デフォルトで搭載されてるスウォッチとグラデーションの少なさであります。インストール直後は「グレー」「カラー」「グラデーション」のスウォッチと、印刷用途のためにPANTONEカラーが実装されてますが。はっきり言ってデフォルトはショボい。 先日Windows 11を入れるべくクリーンインストールしたら、今まで積み重ねたスウォッチとグラデーションのバックアップを取り忘れ、データを消し飛ばしてしまいました。チクショー!! 良い機会なので、2021年現代の主要なデザインガイドラインを元にスウォッチ(カラーパレット)を作り直し、グラデーションも今時使いそうなものを組み直したので、ここに公開します。タイトルではAffinity用と書いてますが、Adobe用とGIMP用のスウォッチ・グラデーションファイルも同梱しています。 ダウンロード 全部のファイルをZIPで固めてお
もっと書き込み隊2
*これは<H1>です **これは<H2>です ***これは<H3>です ↓<HR>です — b(ここは太字) f(ここは茶色::#990000) fb(ここは太字で赤::red) fbi(ここは太字で青で斜め::blue) ↓こうなります ●文字装飾については以下の設定があります $kani = 1; #簡易文字装飾機能を使う？(0:NO 1:YES) $kani_pass = 0; #簡易文字装飾機能を使う場合、管理者パスワードで投稿された時のみ文字装飾を行う？(0:NO 1:YES) ・検索機能に「AND/OR判定」及び、検索文字のハイライト表示を追加 ▼検索結果をハイライト表示する際の文字装飾CSS。装飾しない場合は”” $highlight = “<span style=’background-color:$hcolor;font-weight:bold;’>”; ・RSS対応 ・
最近のやまもも やまももページ全体のソースを見直しました。表示はあまり変化ないけれどソースは簡素化されています。デジタル絵本とビバ！ ムービーのページを新設。更新したいことはたくさんあるけれど、なかなか思うように進みません。がっくり。 インターネット閲覧環境の横幅拡大化の波にのり、このページも横幅を980pxにしました。XGA（1024×768ピクセル）環境での閲覧はぎゅうぎゅうな感じになるかもしれません。 また、FirefoxおよびSafariで最適な表示となるように作成されているため、Internet Explorerの一部のバージョンではCSSが正しく認識されず表示が大きく崩れる場合があります。 お気に入りの一枚： ユキヤナギの由来 ユキヤナギは別名コゴメバナと言うそうですが、花が開く少しまえはまるでお米がたくさん付いているようです。小さなお米がたくさんあるようで、これを誰かがコゴメ
https://github.com/praveenjuge/myna/ https://github.com/praveenjuge/mynaui-icons/
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【無料公開】560万円かけて開発したサービスのソースコード
pixivというシステムはどんな形をしているのか、それはなぜか。 - pixiv inside
ついにCSSだけでwidth: auto;やheight: auto;へのアニメーションができるようになります
Playwrightを参考にブラウザ内テキスト検索を高速化する (事例紹介:サードパーティスクリプト提供会社)
CSSで文節の折り返しを！ br・wbrとauto-phraseの活用術 - ICS MEDIA
2つのJSONの差分を動的に表示する。シンタックスハイライトもする。powered by shiki
Programming Languages That Blew My Mind
CSSだけでスタイルクエリのサポートを確認する方法、Safari 18のバグを回避する方法も
State Of CSS 2024 Results | CSS-Tricks
フロントエンド（Next.js）現場に入って数ヶ月で技術的負債の改善に取り組んだ話
バーチャルオフィスのオフィスナビ by hpプラス｜CREATORS BANK〈クリエイターズバンク〉
広告運用でCTRが高いのにCVRが低くなる原因とは？ -webma-
Should masonry be part of CSS grid?
【CSS】CSSでランダムな値を指定したい - Qiita
Cascade Layers/レイヤーによる優先順位の制御 ［CSS Modern Features no.3］ | gihyo.jp
CSS sprite sheet animations · leanrada.com
yosida (@u30rental)さんのプロフィール - knoow[ノウ]
書籍執筆しました！『1冊ですべて身につくWeb ＆ グラフィック デザイン入門講座』
印象に残るブログデザインの法則：アクセスを増やす秘訣とは？【初心者向け】
Createやv0で使える「日本語コーディングプロンプト」 - Qiita
『ランディングページの作り方＆ウェブセールスコピーライティング』攻略法 - オールイベント
Anki用インポートデータ作成Webアプリケーション(記録用) - Qiita
独自APIを使った戦国武将紹介ページの作成 - Qiita
ヴァンパイアサヴァイバーズから学ぶエンジニアの人生設計 - Qiita
Bolt.new アプリケーションの構造と機能解説 - Qiita
【CSS】transition-behaviorプロパティを使って、displayプロパティをトランジション可能にする
ウェブサイトを作成するのに最適なプログラミング言語は何ですか? - Qiita
Affinity用スウォッチとグラデーションの配布 – ToooNの工作室
やまももページ
HTML5/CSS3のニュースやTIPSなどのまとめ (2024年10月31日)