コーディングガイドライン | ディーゼロ フロントエンドガイドライン
コーディングガイドライン 🚩 概要 このガイドラインは、株式会社ディーゼロで取り扱うウェブサイト制作のために作成されたものです。 ひとりで同時に十数本のプロジェクトに携わる制作において、担当の交代や引き継ぎなどがスムーズにできるように、ルールや方針の統一し、クオリティを担保して確実にウェブページを作成・更新・運用できることを目的としています。 コーディングに大切なこと クオリティ ビジュアルのクオリティアクセシビリティダウンロード・レンダリングスピードページパフォーマンスメンテナンス性 一貫性更新性拡張性影響範囲の把握バージョン管理制作スピード 制作環境の明瞭化テスト・チェックの自動化修正の自動化🔧 ガイドラインの更新 このガイドラインは日々更新されるウェブの技術やトレンドによって最適化されるべきです。 変更・追記・削除に関しては常に議論されることが期待されます。 集めた意見や
少しの記述でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニック集 – TAKLOG
少しの記述・工夫でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニックを独断と偏見で集めてみました。最近クローズドな場所で登壇を行ったのですが、そちらで話した内容を纏めたものにいくつか内容を追加したものとなります。 原則的にこのブログで取り入れられている手法だったり過去の記事で触れた手法を紹介したものです。 button要素には touch-action:manipulation を指定するiOS限定の話ではありますが、button要素をつい連続でタップすると画面が拡大表示されてしまい非常に煩わしいです。 ポストを別枠で表示する そのため、パンおよびズームのジェスチャーは有効にしつつダブルタップ時のズームなどの標準外の追加的なジェスチャーを無効にするtouch-action:manipulationを指定して誤作動を防止しておくと良いでしょう。
作って学ぶ HTML + CSS グリッドレイアウト | エビスコム - EBISUCOM
はじめにCSSグリッドの立ち位置と本書の構成もくじ はじめに 「HTML＆CSSは簡単」と言われます。ところが、いざWebの実装・構築を始めてみると、いろいろな壁にぶつかります。 レイアウトのためにどんどん深くなるDOM（HTML）のネスト構造スペースをどこでどう入れていくかどうやってレスポンシブを管理するかコンポーネントを組み込んだときの影響をどう軽減していくか … etc. 悩みのタネは尽きません。 それもそのはず。CSSは「ドキュメントをレイアウトするために作られたもの」であり、現在のWebのように多種多様なものをレイアウトしたり、コンポーネント化して管理するといったことは想定されていなかったからです。 そんな中、ドキュメント以外の、さまざまなレイアウトに対応すべく登場したのが、新しいレイアウトシステムの「CSSグリッド（CSS Grid）」です。 ただ、これまでのCSSの機能の１つ
How To Center a Div
IntroductionFor a long time, centering an element within its parent was a surprisingly tricky thing to do. As CSS has evolved, we've been granted more and more tools we can use to solve this problem. These days, we're spoiled for choice! I decided to create this tutorial to help you understand the trade-offs between different approaches, and to give you an arsenal of strategies you can use, to han
いまNext.jsで新規サービスを立ち上げるときの観点（Router・CSS・認証・監視など/2023年末）
免責事項 社内向けに展開するように雑にまとめました Next.jsの知見が深くない人がリードしてPoCを立ち上げなきゃいけなくなったが、社内的にはNext.jsを推奨しているみたいな場面を想定しています なので自信ないところも多いですが割と断言するように心がけて書いています PoCの立ち上げ想定なので、jest/Storybookなど内部品質面についてあまり深く書くことを避けています ほぼ自分の知識だけで書いており私見も多いですし、そもそも自分自身がトップクラスの知識や視座を有しているわけでもないので、まずは以下の話を理解はした上で、踏襲するかどうかは別途他記事やGitHub、公式ドキュメントなどを漁って判断することを推奨 App RouterかPages Routerか 2023年末現在まだApp Routerは技術記事が足りてきている印象ではないため、社内でノウハウを積極的に貯めていく
CSS subgrid | Articles | web.dev
CSS subgrid Stay organized with collections Save and categorize content based on your preferences. CSS grid is a very powerful layout engine, but the row and column tracks created on a parent grid can only be used to position direct children of the grid container. Any author defined named grid areas and lines were lost on any other element than a direct child. With subgrid, track sizing, templates
CSSで角丸を美しく実装するテクニック、ネストされた外側と内側を相対角丸の美しいバランスで実装
カードやパネルの外側と内側に角丸を使用したときに、なんだかバランスが悪いなと思ったことはありませんか？ 角丸を二重にするときに外側の角丸と内側の角丸の値を同じに設定すると、内側の方がすこし大きく見えて、不格好になってしまいます。 外側の角丸と内側の角丸を美しいバランスで実装する相対角丸のテクニックを紹介します。 まずは、ネストされた角丸を美しいバランスで実装したデモをご覧ください。 See the Pen Inner Radius Design Tip with CSS Custom Properties by coliss (@coliss) on CodePen. 外側の角丸と内側の角丸を美しいバランスで実装するポイントは、「外側の半径 = 内側の半径 + パディング」に設定することです。こうすることで、外側の角丸と内側の角丸の中心点が同じになり、美しいバランスになります。 ちなみに、
Modern alternatives to BEM
Brainstorming a handful of new CSS organization acronyms August 26, 2022 When I first heard Nicole Sullivan talk about OOCSS, I thought “Oooh, smart.” When I read Jonathan Snook’s riff on that idea in SMACSS I thought “Oooh, smart.” When I heard Harry Roberts say “never use IDs in your CSS files” I said “Oooh, smart.” But when BEM and roboclasses came around… I didn’t have the same reaction. I nev
2022年のモダンCSS ～TechFeed Conference 2022講演より | gihyo.jp
本記事は、2022年5月に開催されたTechFeed Conference 2022のセッション書き起こし記事「2022年のモダンCSS（鹿野 壮） — TechFeed Conference 2022講演より」を転載したものです。オリジナルはTechFeedをご覧ください。 では始めていきます。 めちゃくちゃ可愛い猫を飼っています。tonkotsuboy_comというTwitterIDです。マネーフォワードにおります鹿野壮と申します。 こういった本を執筆しました。 「JavaScriptコードレシピ集」/ 技術評論社 「JavaScript最新仕様 -ES2020-」/ 日経ソフトウェア2020年9月号 「最新CSS」/ 日経ソフトウェア2021年9月号 今日は2022年5月現在における全モダンブラウザ対応の最新CSSをいくつかピックアップして紹介します。 固定ヘッダーとアンカーリン
この発想はすごい！ モダンCSSで実装する、ボーダーをアニメーションさせるテクニック
モダンCSSで実装する、ボーダーをアニメーションさせるテクニックを紹介します。矩形のHTMLはdiv要素1つだけ、ボーダーがどのようにアニメーション化されているのか、その仕組みが視覚的に分かるデモもあります。 CSS border animations by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスにもとづいて翻訳しています。 はじめに CSSにおけるボーダーの設定 ボックスモデルの保持 ボーナスコンテンツ: border-image 終わりに はじめに ボーダーをアニメーションさせるCSSのテクニックを紹介します。 ボーダーをアニメーションさせる仕組み CSSにおけるボーダーの設定 CSSで要素にボーダーを実装するには、border, outline, box-shadowの3つのプロパティがあります。Modern CSS Solutionsで詳しく説
State of CSS 2022 | Blog | web.dev
Browser compatibility A primary reason so many CSS features are set to cooperatively release is due to the efforts of Interop 2022. Before studying the Interop efforts, it's important to look at Compat 2021’s efforts. Compat 2021 The goals for 2021, driven by developer feedback via surveys, were to stabilize current features, improve the test suite and increase passing scores of browsers for five
センスだけに頼らない！ CSSとJSで作るパーティクル表現のテクニック - ICS MEDIA
パーティクルやラインアニメーションなど、ウェブページにちょっと見栄えのする表現を加えてみたくなることはありませんか？ ICS MEDIAのトップページや弊社採用サイトでもこうした表現を実装していますが、思った通りの演出をコードで表現するのはなかなか難しいものです。技術は分かっても「自分にはセンスがないから……」と諦めてしまっている人もいるかもしれません。 この記事では、簡単なパーティクル表現を題材に、効果的なアニメーション表現のためのテクニックを紹介します。サンプルコードはブラウザー標準のWeb Animations APIを使用して実装していますが、CSSアニメーションやGSAP等のライブラリを用いても同様の実装は可能です。 基本のパーティクル 例題とする基本のパーティクルを見てみましょう。クリックすると中央の星からパーティクルが放射状に広がるアニメーションが再生されます。 デモを別画面
ワクワクが満載！Web制作を変える最新オンラインツール50個まとめ
この記事では、Webデザイン制作がグッと楽になる最新オンラインツール50個をまとめてご紹介します。 ウェブデザインに限らず、グラフィックなどあらゆるクリエイティブな案件、プロジェクトで活躍しそうな新しいツールを中心に揃えています。 これまで面倒だった作業をワンクリックで完了したり、人工知能が自動で行ってくれたりと、より快適にプロジェクトを進めることができる便利ツールが揃います。 自分のワークフローにうまくツールを導入することで、制作時間の短縮につながるだけでなく、ストレス少なく作業を行うことができます。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. CSSツール 2. Web制作便利ツール 3. デザインツール 4. アイコンツール 6. クリエイティブ・面白ツール Web制作の効率、生産性アップ！話題の最新オンラインツールまとめ
明日から使えるCSS設計【PDFLOCSS】
CSS設計で本当に難しいのは「ルールを理解すること」ではなく「ルール通りに自分でコードを書くこと」だと思います。 実際にコードを書いていると「あれ、ここってどうすればいいんだろう？」「こういう場合はどうすべき？」といったことが頻発し、結局よくわからないまま勘でゴリ押すということがよくあります。 本書はそんな人へ向けて、FLOCSSをベースにしつつオリジナル要素を加えてより体系的にまとめた設計「PDFLOCSS（ピーディーフロックス、Page Divided FLOCSS）」を紹介します。 「CSS設計のルールはなんとなくわかるけど、いざ自分でコードを書こうとすると手が止まってしまう」という人に読んでもらいたい一冊です。 （追記：おかげさまでCSS設計のドキュメントとして採用している制作会社様も増えているみたいです！ありがとうございます🙏）
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Panda CSS - Build modern websites using build time and type-safe CSS-in-JS
Park UI
Radix UI
ついにSafariも。 media queryの範囲指定をより直感的に書ける記法が全ブラウザ対応へ
2021年から開発の現場で使える3つの便利CSS - aspect-ratio, gap, is()
これは覚えておきたい！ コンテナ・ラッパーを定義するCSSの古い書き方とモダンCSSを使用した書き方
