【Webエンジニアど素人から３年生ぐらいになるまでに読むと良い本】を段階的にまとめた - Qiita
これってなんなの？ 【ど素人状態＝社会人になって初めてプログラミングを勉強したぜ！（特に新卒）】〜【Webエンジニアの３年生ぐらい】になるまでに読むと良い本まとめです。「どんな目的で学ぶか？」*「いつぐらいまでに読むといいか？」を段階的にまとめました。「これだけ読めばいい！」と、そんな簡単な話ではありませんが、「今いるレベルより少し上の人がどんなジャンルのことを学んでんだろ？」という方の参考になれば嬉しいです。過去の自分に向けてでもあります、自戒。これからWebエンジニアになる人、なって間もない人の参考になれば幸いですm(__)m ※続編 【Webエンジニアど素人】が【3〜4年生】くらいになったら読むといい本を目的別にまとめた ”Webエンジニアど素人から３年生ぐらいになるまでに読むと良い本”の段階的まとめ（一部外部記事あり） ど素人の方々が手を動かしながら１〜６ヶ月以内に学ぼう！ ◆どの
私のCSSはこのままでいいのだろうか、他の人はどのように取り組んでいるのか、CSSのスキルアップを考えているWeb制作者・デベロッパーに、ぜひ手に取ってほしい一冊を紹介します。 本書ではCSSのさまざまな設計手法を解説するだけでなく、最適解となるコードに至るまでの思考プロセスも非常に詳しく解説されています。デベロッパーの頭の中で考えていることが言語化されており、自分のCSSを見直したい人、より効率的なCSS開発を探究している人にお勧めです。 本書は、CSSの中・上級者向けの内容をていねいに詳しく解説したものです。初心者向けのブログやお店ページの例などは一切なく、モジュールベースのコンポーネントやレイアウトが主体で、プロジェクトレベルのCSS設計について解説されています。
Yahoo! JAPAN トップページを Atomic Design と React・Redux・TypeScript で作り変えたお話
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちはお久しぶりです。岡部和昌（@kzms2）と申します。 今回お話しする内容はタイトルでほぼ全部述べているのですが、PC 版 Yahoo! JAPAN のトップページを 2019 年 10 月 1 日に刷新、主に開発環境をアップデートした経緯と採用した技術に関してのお話です。 見た目に関しては特に大きな変化はなかったので、気が付かなかった方も多いのではないでしょうか？ なぜ刷新したか Yahoo! JAPAN トップページは 2008 年 1 月 1 日に大規模なリニューアルを行いました。その頃からある程度の改修はあったものの、基本的にはコードの継ぎ足しで修正を加えている状態でした。 （参照；Yahoo! JAPAN トップ
未経験からエンジニアになり3年が経ちました。 この3年間はベテランエンジニアとの差を埋めるべく、プライベートの時間の大半を学習に充ててきました。幸い少しずつ成長を感じられ、業務では難易度の高い仕事を任せてもらえるようになったと感じます。このキャッチアップのために100冊以上の技術関連書籍を読んだことでしょう。 ここ最近、知人やTwitter経由で知り合った方から、私が学習に使った書籍について質問を頂くことが多いです。そこで、今後参照していただきやすいように、これまで私が読んで良かった書籍を1つの記事にまとめようと思います。 前提：エンジニアとして経験した技術 書籍について 全エンジニア向け Web / インターネット イラスト図解式 この一冊で全部わかるWeb技術の基本 (★) HTMLコーダー＆ウェブ担当者のための Webページ高速化超入門 (★) Webを支える技術 -HTTP、URI
【2021年】 技術書好きプロエンジニア達が紹介する40選 - RAKUS Developers Blog | ラクス エンジニアブログ
こんにちは、技術広報のyayawowoです。 皆様、お気に入りの技術書はありますか？ 今回は、弊社主催で開催している「おすすめの技術書LT会」にて、エンジニア/デザイナーの皆さんに紹介いただいた技術書を一挙公開します！ おすすめの技術書 LT会 - vol.1 おすすめの技術書 LT会 - vol.2 積読が増える可能性がある、エンジニア/デザイナーが厳選した技術書が盛り沢山…お読みになる際は覚悟ください！ ラクス開発メンバーが選んだ技術書は以下をご確認ください。 ・開発メンバーが選ぶ、おすすめの技術書【2020年度】 - RAKUS Developers Blog | ラクス エンジニアブログ 入門シリーズ 『C++プログラミング入門（湯田幸八）』 『ドメイン駆動設計入門』 『実践SQL教科書』 『ソフトウェアデザイン 2021年3月号』 『独習C 新版』 『PHPの絵本 第2版 Web
ウェブ業界の当たり前だと思っていることでも、同業他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・、この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載第6回目となる本記事ではウェブ業界の「HTMLコーダーにとっての2020年」と題してアンケート結果を紹介します。 HTMLのエディター HTML制作によく使われるエディターはどれでしょう？ アンケートで質問してみました。 805票の回答があり「VS Code」が64.5%、「Atom」が8.8%、「WebStorm」が8.2%、「その他」が18.5%でした。 VS Codeは圧倒的な人気ですね。ICS MEDIAでは記事『VS Codeの拡張機能7選』で紹介しているとおり、無料のソフトウェアなのに開発を便利にする機能がたくさん揃っていて魅力的です。 WebStormの回答者数は
Twitterでこういう発言を見かけまして Tailwind CSSはデザインに凝ってるサイトでは使えない こだわりが無い場合に向いている は？何いってんの？ って思ったので、自分がいろいろ試した結果、Tailwind CSSを選んだ話を書きます。 はじめに 以前、Tailwind CSSは結構いいぞって話を書いたんですが、この記事の立ち位置的にはその続きみたいなものなので、以下の記事を始めにご参照いただけるとより分かりやすいかもしれないです。 この記事では、前回記事を書いた後、個人仕事でWebサイトをGatsbyで作り、その中で、どうやってCSSを書くのが良いのか模索した結果、自分はこれを選んだっていうのを、同じUIを色々な方法で書き比べたコードを並べつつ、どうのこうの筆者の考えを述べていきます。 その仕事はほとんど筆者が「まかせてくださいよーいい感じに作りますよー。デザインそろってない
Tailwind CSSは結構いいんでないの？というポエムです ユーティリティーファーストって考え方について まず、 ユーティリティークラスが何かということ ユーティリティークラスを使ってHTMLを書いていくということってどういうことか これは、ある程度CSSを書いている人であれば想像できることであろうと思う。 こんな風に、あらかじめユーティリティー的なクラスを用意しーの .align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right; } .align-top { vertical-align: top; } .align-middle { vertical-align: middle; } .align-bottom { vertical-a
Intro SPA の隆盛で進化したフロントエンドライブラリによって生み出された「コンポーネント」という資産は、それを View 層の最小単位として扱うエコシステムにその重心をずらした。 近年の Web 開発は、虫食いのテンプレートエンジンにデータをはめ込む方式から、デザインシステムにカタログされたコンポーネント群に、 API から取得したステートを流し込み、それらを「いつ、どこで、どう」レンダリングするかという課題への最適解を、各位が模索するフェーズとなっている。 コンポーネントを敷き詰めるコンテナ側の設計は、 Flexbox および Grid の登場によるレイアウトの進化が手助けしたところも多いにある。しかし、「ページ」を前提に設計された CSS は、「コンポーネント」を前提にした設計に移行するうえで、ミッシングピースが多かった。 現在、提案/実装が進んでいる CSS の新機能群には、
CSS設計って最近こういう感じだと思うんですけどどうですかという話です。BEM、CSS Modules、CSS in JS、Tailwind CSSとか色々ありますがどういうふうに捉えればよいのだろうという内容でした。 Youtubeアーカイブ https://youtu.be/8zZKdDIa…
はじめに HTML＋CSSコーディングにおける制作者の思考や判断、アプローチ、コード化に至るまでの流れなどを分解し、コードの状態なども含めてそれぞれを短い言葉で言語化しました。 以下のような効果が期待できます。 HTMLとCSSを使っておこなってきた事を客観視・再認識できる 始原的な動機を把握することで、手法を別の視点で捉えられるようになる 認識合わせや熟練度確認に利用し、制作時のコミュニケーションを円滑にする 場合によっては、ぼんやりと捉えていたことや、詰まりやすかったポイントなどがハッキリと認識できるようになるかもしれません。 言語化の概要 まずは、全体像が分かる概要図を掲載します。 この記事は、以下のステップと各項目について順に説明するものになります。 前提事項・環境について 言語化するにあたって前提となる考え方や環境について記載します。 HTMLとCSSの役割 HTML → データ
これってなんなの？ 【ど素人状態＝社会人になって初めてプログラミングを勉強したぜ！（特に新卒）】〜【Webエンジニアの３年生ぐらい】になるまでに読むと良い本まとめです。「どんな目的で学ぶか？」*「いつぐらいまでに読むといいか？」を段階的にまとめました。「これだけ読めばいい！」と、そんな簡単な話ではありませんが、「今いるレベルより少し上の人がどんなジャンルのことを学んでんだろ？」という方の参考になれば嬉しいです。過去の自分に向けてでもあります、自戒。これからWebエンジニアになる人、なって間もない人の参考になれば幸いですm(__)m ※続編 【Webエンジニアど素人】が【3〜4年生】くらいになったら読むといい本を目的別にまとめた ”Webエンジニアど素人から３年生ぐらいになるまでに読むと良い本”の段階的まとめ（一部外部記事あり） ど素人の方々が手を動かしながら１〜６ヶ月以内に学ぼう！ ◆どの
「Tailwind CSSめっちゃ負債になりそう」はそうでもないのでは、と思っている Tailwind CSS 1 を一目見た人、特にCSS初学者のうちけっこうな割合が「これエグい負債になりそう」と思う気がする。なぜなら実際にそのような意見をちらほら見るからなんだけども、自分はあんまりそうは思っていないし、微妙に今のCSSについて誤解があるような空気も感じるのでその理由を説明したい2。JSXと同じで嬉しさを理解して使い慣れればなんてことはないのだけど、一方でその背景にある話はJSXより複雑なので単純に使って慣れればいいという話でもなさそう。 なお、この記事は私の以下の2ツイートを膨らませたものです。 Tailwind CSS、剥がすのは大変そうだけどそれをもって重大な負債になると評せるかは微妙に思っている https://x.com/aumy_f/status/18220941478532
CSSの解説書はたくさんありますが、今までのCSS本とはかなり異なる面にフォーカスされたCSS設計についての解説書を紹介します。 かなり実践的な解説書です、CSSの何に気をつけて、CSSをどのように書き、CSSをどのように管理するとよいか、現在主流の実装・設計・管理方法について、最適解となるためのアプローチや思考プロセスが詳しく解説されています。 本書は中・上級者向けの内容をていねいに詳しく解説したものです。CSSの初心者向けの基礎知識やサンプルなどはありませんが、CSSに取り組んでいる人であれば大丈夫だと思います。CSSの実装・設計・管理の方法にフォーカスされ、プロジェクトレベルでのCSS設計について解説されています。 著者の高津戸氏とはかなり前にお会いしたことがあるのですが、イラストにそっくりな印象がありますね。
CSS設計で本当に難しいのは「ルールを理解すること」ではなく「ルール通りに自分でコードを書くこと」だと思います。 実際にコードを書いていると「あれ、ここってどうすればいいんだろう？」「こういう場合はどうすべき？」といったことが頻発し、結局よくわからないまま勘でゴリ押すということがよくあります。 本書はそんな人へ向けて、FLOCSSをベースにしつつオリジナル要素を加えてより体系的にまとめた設計「PDFLOCSS（ピーディーフロックス、Page Divided FLOCSS）」を紹介します。 「CSS設計のルールはなんとなくわかるけど、いざ自分でコードを書こうとすると手が止まってしまう」という人に読んでもらいたい一冊です。 （追記：おかげさまでCSS設計のドキュメントとして採用している制作会社様も増えているみたいです！ありがとうございます🙏）
はじめに HTML＋CSSコーディングにおいて、「どのように要素を特定してスタイリングするのか」というCSS設計上の課題に対し、「ひとつ上の視点で思考できる概念図」を紹介します。 この図を用いることで、3種類の異なるスタイリングアプローチ（OOCSS方式 / 包括要素基点方式 / BEM方式）の本質を一度に俯瞰できるため、全てを同じ枠の中で捉えられます。そして、最終的には種別や規模の異なるサイトやプロジェクトに対し、同じメソッドを使ってそれぞれ最適な設計がおこなえるようになります。 ※この記事は標準化ノウハウ公開の一環として書いています。 仕組みの概要や前提事項などについては「UltimateCoding 概要・前提事項」のエントリをご確認ください。 経緯 / 制作者中心のデータ分類 そもそもですが、HTMLとCSSは目的も仕様も異なる言語です。 HTML+CSSコーディングを一般的な視点
白栁隆司@エンジニアカウンセラー @ShirayanagiRyuj @assialiholic すみません。 何故悪いフォームなのかが理解できないのです。 普通のフォームだな、と思ってしまいます。 お手数ですが、解説をお願いできますでしょうか？ 歩くCSS設計完全ガイド / HubSpot Tech Ninja @assialiholic @ShirayanagiRyuj 主に ・カードのブランドは選択させる必要がない（カード番号から判別できるため） ・カード番号入力欄が4つに分かれている（おまけに4桁入力したら勝手に次に遷移するので、修正が面倒です。入力欄は1つでOK） ・有効期限に独自の並び、形式を使用している（ここでめっちゃハマりました） です！ 白栁隆司@エンジニアカウンセラー @ShirayanagiRyuj @assialiholic なるほど！ それは、幾つかの知識がないと「
この記事を読むと VSCode拡張機能を入れて、下記のようなことが実現します ・VSCodeとは別にterminal（Command Line）の画面を開かなくても、VSCode内から直接terminal操作ができる（例えばnpm run devも) ・全てのカッコ()[]{}が種類別に色分けされる ・インデントが一眼で分かる ・htmlタグの開始タグと終了タグを同時に修正できる ・Vue.jsやNuxt.jsの構造やファイル操作が楽になる etc... なぜこの記事を書いたのか VSCodeは素晴らしいテキストエディタです。 特に、Vue.jsやNuxt.jsを用いて開発している方にとっては最も有力な選択肢でしょう（そして、その選択は間違いではないと保証できます）。 さて、VSCodeはそのままでも素晴らしいエディタですが、使用するフレームワークや用途に応じて拡張機能を入れるとさらに、そ
歩くCSS設計完全ガイド / HubSpot Tech Ninja @assialiholic 子の運動会に行ったら「マツケンサンバ玉入れ」なる悪魔合体系の競技があって、幼稚園の先生が中央で玉入れのカゴを背負ってひたすらマツケンサンバを踊り、園児は動くカゴを狙って玉を入れつつ、サビで玉入れを中断して園児もサンバを踊るというエンタメの鬼才が考えたとしか思えない内容で非常に良かった 2023-09-09 00:38:26 ぢべた @jibetaP これ、玉入れだけにすると幼稚園児の体力だと全然入れられなくて楽しくない！やだ！ってなるお子さんも相当数出るよね、という問題を解決することができるから、考案した人はよく考えてると思う。 twitter.com/assialiholic/s… 2023-09-09 08:31:10 🧙♂️やみ仙人かいぽん⚔️ぱぱら快刀🌻💙 @kenji_kaid
Nuxt.js で開発されていたAI受診相談ユビーのフロントエンドを Next.js で作り直しました。 まだまだ仮説検証を繰り返すフェーズのスタートアップのため、機能開発を止めて一気に置き換えることはできず、機能ごとに少しずつ置き換えてリリースをしました。結果、5人のプロダクト開発チームによる機能開発と並走して、全体の移行を1人で1ヶ月の短期間で終わらせることができたので、その意思決定や過程、工夫を紹介します。 移行前の課題 まず前提として、移行前の Nuxt.js による実装は 2018 年に立ち上がったもので、当時 toC の Web サービスを持っていなかった Ubie が ほぼ 1 人の小さいチームで PoC 的に作り始めたものでした。また、当時の Next.js は今ほど多機能ではないプレーンなフレームワークでした。 これらを踏まえて、当時の状況で MVP を最速で作るための技
2022年になりました。矢倉眞隆（@myakura）と申します。昨日に続き、新春特別企画のブラウザとウェブ標準動向について紹介します。 取り上げるトピックの数やそのインパクトから、今回はCSSを独立した記事として取り上げることになりました。「ブラウザとウェブ標準動向」についても寄稿していますので、そちらもお読みいただければうれしいです。 2022年以降のCSSは大きく変化しそうだなと思っています。これまでも、CSS3と呼ばれていた機能による表現力の強化、FlexboxやGridなど強力なレイアウト機能の追加など、大きな変化と言えるだろうものはありました。しかし現在提案・実装されている機能は、CSSの根幹を拡充するものと、これまでと性質が異なるものです。 Compat 2021とInterop 2022で互換性の向上 CSSのつらいところとしてまず取り上げられるのが、ブラウザ実装の挙動の違い
個人的な観測範囲によると、定期的にTwitterで議論になる三大Web制作話題は ・ マサカリ ・ jQuery ・ ピクセルパーフェクト なのですが、今年もまたこのシーズンがやってきました！2020年9月20日に話題になったピクセルパーフェクトのツイートは以下にまとめられています。 そもそもピクセルパーフェクトとは何かをみてみたいと思います。 ピクセルパーフェクトとは簡単にいってしまうと、デザインカンプを1pxのズレもなく完璧に再現することです。まぁ、簡単か難しいかといえば、1枚の絵をそのまま再現すると開き直ると慣れればそんなに難しくありません。Bodyのbackground-imageにデザインカンプを設定してその上にパーツを配置していけばいいだけなので。ChromeにPerfectPixelというアドオンを入れるだけでも十分です。 では、どうしてピクセルパーフェクトはこれだけ議論にな
目次 CSS小史 SUIT CSS - 命名規約ベースのCSS方法論 styled-components - CSS in JS Tailwind CSS - Utility-first CSS なぜインラインスタイルではダメなのか まとめ タイムライン 参考リンク CSS小史 CSSでアプリのUIを実装するための手法は、これまでいくかの変遷を辿ってきた。 はるか昔、CSSが生まれて間もないころには、関心の分離という文脈から、FONT要素などの物理タグはよくないものとされ、 コンテンツ(HTML)とスタイル(CSS)をきっちりと分離することが奨励されはじめた。 そこでは、HTMLはあくまで文書であり、CSSのクラスセレクタという接点でコンテンツと見た目が隔離されることで、それらは別世界のものとして管理されていた。 また、大規模サービス開発においていかにCSSを管理するかという問題意識はまだ
Tailwind CSS 社内勉強会【まとめ】 - RAKUS Developers Blog | ラクス エンジニアブログ
背景 スコープ Tailwind CSSとは？ コンポーネント指向とは？ Tailwind CSSのメリット class名を考える必要がない デザインシステムの最低保証 ドキュメント、チートシートの豊富さ Tailwind CSSのデメリット classに多くのコードを書く必要があり、可読性が落ちやすい CSSの理解度がある程度必要 デザインを100%再現したい場合に強味を生かしづらい 他ライブラリやフレームワークとの比較 Bootstrapとの比較 Material UI/Vuetify等のUIライブラリとの比較 インライン記述との比較 まとめ 所感 参考 背景 こんにちは。mtaaaです。 社内のフロントエンド勉強会でTailwind CSSについて発表を行ったまとめとして、ブログに残したいと思います。 スコープ Tailwind CSSとは？ なぜTailwind CSSに注目が集ま
ITCSSを採用して共同開発しやすいCSS設計をZOZOTOWNに導入した話 - ZOZO TECH BLOG
こんにちは。ZOZOTOWN部フロントエンドチームの菊地（@hiro0218）です。 2021年3月、ZOZOTOWNは10年ぶりのリニューアルをしました。この記事では、そのリニューアルで再考したCSS設計について紹介します。 背景 今回のリニューアルでは、ウェブとアプリが部分的に共通のデザインになりました。 アプリ ウェブ このデザイン刷新には、CSSの大規模変更が必要です。チーム内で検討を重ね、最終的に、大きく書き換えるのであればコンポーネント駆動開発1ができるようにCSS設計を見直すべきという結論に至りました。 CSS設計で特別に考慮する点 現在、ZOZOTOWNのフロントエンドは、「Classic ASP」から「React」へのリプレイスを進めています。新規開発や変更のタイミングで、Classic ASPに依存した実装をReactへ改修します。 ただ、今回のリニューアルではClas
CSS設計における、すべてがコンポーネントであるという誤謬
後日追記: WEB+DB PRESS Vol.133でさらに詳しく書いた。 BEMによってもたらされた、コンポーネントベースのアプローチでは、「ページはコンポーネントの集合によって表現されるべきであり、ページに含まれるのはすべてがコンポーネントである」と考える。しかしこれまでCSSを書いてきた経験から、これではデザイン意図をまともに表現することができないと感じ始めた。なぜなら、普通デザイナーはページのすべてがコンポーネントであるとは考えないからだ。 もちろんページの構成要素のなかには、明らかにそれが「コンポーネント」であると意識して作られたものもある。ただしそれは一部であり、全部ではない。「コンポーネントもあれば、コンポーネントではないものもある」という感覚のほうが普通なのだ。 典型的なUIライブラリにある、「ザ・コンポーネント」みたいなものだけではページは完成しない。例として、一貫してB
9年モノの Rails アプリで、古い Bootstrap を剥がして FLOCSS 化した話 - 弥生開発者ブログ
こんにちは、弥生 Misoca チームでマークアップをする方のデザイナー @kanizmb です。 今回、約1年をかけて古の Bootstrap の撤去および CSS 設計手法の導入（FLOCSS 化）をやり遂げたので、これらの変更をどのように進めていったかについてお話しします。 どういった状況だったか Misoca ローンチは 2011年、当時最新であった Bootstrap 2.3.2 を用いて構築が始まりました。(*1) 当初は請求書の郵送に特化した非常にシンプルなサービスだったため、少しの上書きでスムーズに開発が進められ、Bootstrap のメリットを存分に生かせていたのだと思います。 しかし時は流れ、取引先管理、品目管理、外部サービスとの連携など、機能が増え続けるとどんどん綻びが出始めます。 設計方針もないままに野放図に差し込まれた CSS たちは、いつしか激しい詳細度バトルを
「HTML,CSSだって難しいよ！」 初心者でも始めやすいって言ったの誰ですかね。最初は覚えるのに必死だし、少しわかるようになったかな？で始めたサイト制作（コーティング）もエラーだらけで頭を抱える日々。そんな修行を耐えているみなさんに知ってほしい、CSSの設計についてお話できたらなと思います。概念的なこと中心になりますので細かいことは下記の参考文書をご覧ください。 『インプレス社 Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 谷拓樹著 2022年発行第１版』 注意 作者自身もプログラミング初めて１ヶ月の超初心者です。HTML、CSSを使ってデザインカンプを元にサイトを作れるぐらいのレベルです。なので僕より歴長い人はスルーしてもらっていいです。まだ初めたばかりの人は追いついてきてください。僕は先に行ってます。 初め 壊れない完璧な設計を
この記事は FastDOCTOR After Advent Calendar 27日の記事です。 はじめに ファストドクター株式会社でテックリードをしている shirauix と申します。 弊社では、ある Next.js アプリケーションを別会社のパートナーさんに外注することによって初期開発を行いました。ある時点からこのシステムを内製化することになったのですが、それにあたって多くの課題を解決する必要がありました。 この記事では、外注と内製のそれぞれのメリット・デメリットや、内製に切り替える際にどんな苦労があったのかについての赤裸々な事例をご紹介します。 対象となる読者 外注で初期開発したシステムを内製に切り替えてメンテナンスしようとしているエンジニアの方 新しくシステムを開発したいが、外注と内製のどちらを選択すべきか悩んでいる方 外注と内製の違い 外注するか内製するかはあくまで手段の話であ
達人出版会
探検! Python Flask Robert Picard, 濱野 司(訳) BareMetalで遊ぶ Raspberry Pi 西永俊文 なるほどUnixプロセス ― Rubyで学ぶUnixの基礎 Jesse Storimer, 島田浩二(翻訳), 角谷信太郎(翻訳) 知る、読む、使う！ オープンソースライセンス 可知豊 きつねさんでもわかるLLVM 柏木餅子, 風薬 徹底攻略 AWS認定 クラウドプラクティショナー教科書 第2版［CLF-C02］対応 トレノケート株式会社 高山裕司 超楕円関数への招待 楕円関数の一般化とその応用 松谷 茂樹 手を動かしてわかるクリーンアーキテクチャ ヘキサゴナルアーキテクチャによるクリーンなアプリケーション開発 Tom Hombergs(著), 須田智之(訳) 詳解 AWS CloudFormation 潮村 哲 その決定に根拠はありますか？ 確率思
CSSのgapプロパティーは余白を指定できる新しめの手法です。余白といえば、marginプロパティーやpaddingプロパティーを思い浮かべる方が多いと思いますが、CSS GridやFlexboxでgapプロパティーを使うと柔軟にレイアウトを組めます。もともとgapプロパティーはCSS Gridでのみ利用できていましたが、macOS Safari 14.1およびSafari on iOS 14.6からFlexboxでもgapプロパティーが使えるようになりました。 この記事ではFlexbox、CSS Gridで利用できるgapプロパティーを活用したレイアウト手法とそのメリットを紹介します。今までmarginプロパティーで要素間の余白を調整していたものもgapプロパティーで柔軟に対応できる場面もあります。なお、下記サンプルでmarginプロパティーは一切使っていません。 サンプルを別ウインドウ
マークアップを進化させる WAI-ARIA の基本 私 @masuP9 WAI-ARIAとは何か WAI Web Accessibility Initiative ARIA Accessible Rich Internet Applications WAI-ARIAは、ウェブコンテンツおよび アプリケーションのアクセシビリティと相互運用性を改良するためのフレームワークを提供する技術仕様である。 Accessible Rich Internet Applications (WAI-ARIA) 1.2 日本語訳 WAI-ARIAは ウェブのアクセシビリティを 高めるための技術仕様 WAI-ARIAはなぜ必要か アプリケーション化するウェブ Notion Figma G Suite 3D CAD etc... 意味も振る舞いも 既存のHTMLでは表現できなくなってきた 例えば タブUI 開いてい
2021 年 1 月に CSS Cascading and Inheritance Level 5 の First Public Working Draft が公開された。 CSS Cascading and Inheritance はその名の通り、CSS の Cascade や継承などについての仕様を定義しているもので、つい先日 Level3 が晴れて W3C Recommendation となった。 CSS Cascading and Inheritance Level 3 is a W3C Recommendation そして、新たに First Public Working Draft が公開された Level5 では、今までの Cascading に、新たにLayerという概念の導入が検討されている。 本記事では CSS の Cascading についておさらいし、新しい概念であ
UIUXデザイングループのグループ長を担当させていただいている小田と申します。 一般公開はしていないのですが、モノタロウも一貫したデザインや操作性でウェブサイトを提供するためデザインシステムを作り、現状のサイトに適用しています。 今回はモノタロウのデザインシステムのお話をしたいと思います。 デザインシステムの始まり これは数年前の話です。 何年も運営しているサイトだとよくある話ですが、見た目のスタイルが分散していき、その分のコードが積み重なっていき開発の負荷になります。 また、スタイルが分散していると使っている側のユーザーも、この機能はどういう機能なのかを理解する事に時間がかかります。 サービスの品質を上げるPDCAを早く回す為に土台（図1）を整える必要性があり、スタイルを統一したデザインシステムを構築して、ページに適用していくことが目標になりました。 分散していたスタイル： 作成したボタ
WEAR Webフロントエンドリプレイスのアーキテクチャ選定とNext.jsへの移行 - ZOZO TECH BLOG
はじめに こんにちは。WEAR部フロントエンドブロックの藤井です。WEARでは現在、Webサイトのリプレイスを進めています。本記事では、リプレイスに至った背景や課題と、課題解決のために行ったリプレイスのアーキテクチャ選定についてご紹介します。 なぜリプレイスするのか WEARはサービスローンチしてから約10年が経ちます。これまでローンチ当時の技術スタックのまま開発を続け、サービスを成長させてきました。今後もより継続的にスピード感を持ってユーザーへ価値を届けていくにあたってさまざまな課題があったため、新たな技術スタックでリプレイスを開始することにしました。 リプレイス前の環境 リプレイス前の環境はオンプレミスの環境にロードバランサー、Windowsサーバー(IIS)があり、そこでVBScriptが動いています。VBScriptでテンプレートHTMLにデータを流し込み、ブラウザに表示する仕組み
Vue.jsでCSSを利用する際にScoped CSSやCSS Modules、CSS-in-JSなどの手法があります。とくにScoped CSSは気軽に利用できるため、利用する機会も多くなって来るかと思います。 Scoped CSSがあればCSS設計を使わなくてもよいという意見もありますがはたして本当なのでしょうか？ ICSではScoped CSSにおけるCSS設計に関する議論が活発におこなわれており、本記事では私たちが考えた方式を紹介します。本記事はVue.jsのSFC（シングル・ファイル・コンポーネント）でScoped CSSを利用しているものを想定しています。 CSS設計とは 基本的にCSSは常にすべてのページで読み込まれ、増えれば増えるほど相互に上書きし合う状態が起きやすく、他の言語に比べてかなり壊れやすい言語と言えます。 そこで登場するのがCSS設計です。BEMやSMACSS、
はじめに HTML+CSSコーディングにおいて、Sass管理ディレクトリを標準化する方法を紹介します。 CSS設計は、サイト種別やプロジェクト規模、分業の有無や人数によっても最適解が異なります。 この仕組みは、様々な設計を同じロジックで受け入れることによって、CSSコードの管理効率を画一的に最大化する狙いのものです。 コーポレート・ポータル・ブログ・EC・LP・管理画面…など、様々な種別のサイトのCSSを、同じ仕組みで設計して管理できるようになります。 前提事項など SassなどのCSSプリプロセッサの使用を前提とします。 本記事の一部は、後で見られるよう別記事として切り出しています。（📝のマークのもの） この記事は標準化ノウハウ公開の一環として書いています。 仕組みの概要や前提事項などについては「UltimateCoding 概要・前提事項」のエントリをご確認ください。 セクション一覧
脱・Atomic Design - HTML+CSSコーディングの粒度分類法（HTML Parts） - Qiita
はじめに HTML+CSSコーディング専用の粒度分類を紹介します。 この仕組みは、デザインやワイヤーフレームなどの視覚情報を分解することに焦点をあて、分解した対象を部品化する流れも併せてガイド化した汎用手法です。 世の中には、コーポレートサイト / ポータルサイト / サービスサイト / システム管理画面 / ブログサイト… といった様々な種別のサイト、Webページがありますが、これらの「完成予想図（視覚情報）」を同じ方法で分解して、コーディング用の部品にできます。 粒度と言えばAtomic Designが有名ですが、この「HTML Parts」も粒度そのものの考え方についてはAtomic Designの踏襲です。その上で「思考の入り方・捉え方」や「名称と定義」をコーディング側に寄せることで、CSS設計やコーディング業務を標準化しやすくしています。 ※この記事は標準化ノウハウ公開の一環とし
Reactを学習する時に実際に使ったサイトや書籍を紹介します。私が使用した順ではなく、一通り実践した結果、この順番だと基礎から学べるかなと思った順番に紹介してます。 Reactを学習する時に実際に使ったサイトや書籍を紹介します。私が使用した順ではなく、一通り実践した結果、この順番だと基礎から学べるかなと思った順番に紹介してます。 ちなみに学び始める前の私のスキルは下記の通りです。 JavaScriptの基本的な理解はあるjQueryは仕事で使えるレベルReactは全く使ったことがない 注意 Reactは変化が早く、ここ数年で書き方の主流も大きく変わっており、Reactコンポーネントの主流はクラスコンポーネントから関数コンポーネントに移り変わってきているようです。（私もまだちゃんと理解はしてない。。） ここで取り上げた教材や書籍も、情報や書き方が今では古くなっていたりするものもあります。そち
未経験からコーダーとして仕事をし始めて2年が経過しました。 最初の頃はとにかくスピードややりやすさ、デザインの再現などを重視し、保守性は特に考えていませんでしたが、ページが多くなってきたり自分以外の人と一緒にコーディングする機会が増えるにつれ、当初とはまるで違う意識で書くようになった気がします。 自分のコーディング手法もまだまだ発展途上だとは思いますが、自分なりに保守しやすいであろうコーディング手法が確立されつつあるので、コーディングルールも兼ねて記事に残しておこうと思いました。 デザインが再現できればOKというコーディングから一歩進んだコーディングを目指す方の参考になれたら嬉しいです。 この記事の前提 コーディングに付随するいろんな用語が出てくるかと思いますが、詳しくは説明していません...。なので、今コーディングを勉強中であったり仕事でコーディングしたことない人にとっては、理解しづらい
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
他のCSS本とはかなり異なる！現在、主流の実装・設計方法が徹底解説された良書 -CSS設計完全ガイド
エンジニア3年目までに読んで良かった書籍 - Yuki Watanabe's Blog
HTMLコーダーにとっての2020年。アンケート結果から分析するイマドキのウェブ制作 - ICS MEDIA
色々書き比べた結果Tailwind CSSにしたという話 - Qiita
ユーティリティーファーストとTailwind CSSのススメ - Qiita
次世代 CSS 仕様が与えるコンポーネント時代の Web への影響 | blog.jxck.io
CSS設計って最近こういう感じだと思うんですけどどうですか
HTML+CSSコーディングの言語化 - Qiita
【Webエンジニアど素人から３年生ぐらいになるまでに読むと良い本】を段階的にまとめた - Qiita
「Tailwind CSSめっちゃ負債になりそう」はそうでもないのでは、と思っている
今までのCSS本とはかなり異なる！ 現在主流の実装・設計・管理方法を徹底解説した良書 -ざっくりつかむ CSS設計
明日から使えるCSS設計【PDFLOCSS】
1段上のCSS設計・コーディングの概念図（HCDCモデル図） - Qiita
「よくあるクソフォームだ！」このクレジットカード入力フォーム、どこが悪いのかわかりますか？
Vue/Nuxt開発効率を3倍にするVSCode拡張機能セット - Qiita
子供の運動会で【マツケンサンバ玉入れ】という悪魔合体系のような競技があった「天才演出家現る」
150万MAUのNuxt.js製サービスを機能開発を止めずに1ヶ月&1人でNext.jsに置き換えた話
2022年のCSS | gihyo.jp
本当に求めてるのはピクセルパーフェクトという「要件」ですか？｜榊原昌彦
Utility-first CSS(Tailwind CSS)が合理的であることの説明と、CSSによるUI開発小史
HTML,CSS初めて１ヶ月ぐらいの人に知って欲しいCSS設計のこと - Qiita
外注で初期開発したシステムを内製化するためにやったこと
gapの余白指定が便利！ gridとflexでできる新しいCSSレイアウト手法 - ICS MEDIA
マークアップを進化させる WAI-ARIA の基本
CSSのCascadingに追加されようとしているLayerという概念 - araya's reservoir
モノタロウ社内デザインシステムの今までとこれから - MonotaRO Tech Blog
Scoped CSSにおけるCSS設計手法 - ICS MEDIA
CSS設計・Sassディレクトリ管理の標準化（CROCSS） - Qiita
React初心者がReactを学ぶために使用したサイトや書籍
【暫定】コーダー歴3年で辿り着いた保守しやすいコーディング手法