CSSのmarginをあまり書かなくなった話
この記事は、Lancers（ランサーズ） Advent Calendar 2023 の9日目の記事です。 本記事では、マークアップで、CSSのmarginプロパティをあまり書かなくなった話を紹介します。 Webサービスのレイアウトについて 大きく以下が考えられます。 縦に並べる 横に並べる 絶対配置 さらに、それぞれに対して以下が考えられます。 不規則的な配置 規則的な配置 今回は、縦に並べることに着目して、マークアップを考えてみます。 不規則的な配置のパターン marginを利用する .mt-4 { margin-top: 4px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } <div class="box box1"></div> <div class=
HTMLタグからcssセレクターを生成するVSCode拡張機能を作った
【2023/3/23 更新】 こちら、使いやすいようにバージョン1.0.0にアップデートして settings.jsonにオプションを追加出来るようになりました！ 正規表現でセレクターのフィルタリングをできたり、 生成するcssセレクター内に挿入するコードを設定しやすくしました。 詳細はgithubのissueをご確認ください。 成果物 ※良かったら使ってみてください〜 なんで作ったか 突然ですが、 htmlのclassを、cssでセレクタにする作業、 ダル辛すぎませんか？ ページ数、要素数が多くなると、「何回同じ作業やるねん、、」 という思いになります。 朝起きたら、「セレクタ抜き出して用意しときましたよ！！」、って誰かにやって欲しいレベルです。 <div class="l-wrapper"> <div class="p-hoge p-hoge--up js-hoge">aaa</div
HTMLメールの最近の実装方法を解説、tableは不要になりました
HTMLメールの実装で「tableか、、、」とため息をついていた人に朗報です。 tableを使用しなくてはいけなかった理由はWindows上のOutlookだったのですが、新しいOutlookではレンダリングエンジンがEdgeに切り替わります。これにより、tableによる実装は不要になります。 HTMLメールの最近の実装方法を解説します。 Modern HTML email (tables no longer required) by Ollie Williams 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLメールの実装でもっとも頭を悩ませている問題 今日、HTMLメールをどのように実装すべきか？ 電子メール用のAMPについて 終わりに はじめに MailChimpによるHTMLメール実装のベストプラクティ
Web Animations APIのcompositeが凄過ぎてすごいからみんな見てくれ - Qiita
この記事はようやくSafariでもフルサポートされそうなWeb Animations APIのcomposite（効果の組成）って機能がすごいよ！！って、ただそれだけを伝えたい記事です。平たくいうと複数のアニメーションを簡単キレイに合成できる機能なのですが、通常のWebのコーディングでもよく出てくる辛さを解決してくれる結構すごいヤツなのです。 ▼ こういうアニメーション作るのもだいぶん楽になります Web Animations APIで星空パーティクル 単にCSSのアニメーションをJSで描けるよってだけではあるんだけど、ライブラリなしでそこそこ簡単にインタラクティブなもの作れるって意味ではうれしい。主要ブラウザ全部で使える。https://t.co/8H8zXfc5NL pic.twitter.com/bfTERJPxIX — ゆき＠ティアF47a (@yuneco) October 11
Goodbye CSS Modules, Hello TailwindCSS
Our frontend codebase is a single-page application powered by Create React App (CRA), written in TypeScript, and using GraphQL for the API. The existing styling approach used CSS Modules without a design system. CSS Modules are CSS files in which all class and animation names are scoped locally by default. They get compiled as part of the build step—with bundler technology like Webpack—and are nat
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
Rapidly build modern websites without ever leaving your HTML.A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup. <figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800"> <img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg"
OOCSS、BEM、SMACSS、FLOCSS、RSCSSを比較して自分にあった設計思想をみつける
フロントエンドエンジニアというポジションに就いて1年半、普段はJavaScriptを中心に開発している。しかし、いつまで経ってもCSSを思いどおりに使いこなせない。理由は、どんな粒度でクラスを分割し、それぞれにどんなスタイルを適用すれば良いのかわからないからだ。 以下が、CSSの闇にのまれ、筋肉に解決に糸口を見出そうとした哀れなフロントエンドエンジニアの心の叫びだ。 — ダーシノ (@bc_rikko) 2017年3月1日 ということで、よく話題にされる5つのCSS設計を比較し、自分にあった設計思想を見つけようと思う。（CSSは苦手なので、おかしな点があったらご指摘ください） 今回比較するCSS設計思想は以下の5つ。 OOCSS BEM SMACSS FLOCSS RSCSS 古代のCSS設計 まずはCSSの設計思想に触れる前に、いにしえより伝わりしCSS遺産について触れておく。 多くの場
松本の地でSass/SCSSの邪悪なアンパサンドを撲滅するために立ち上がった - メドピア開発者ブログ
メドピアCTO室フロントエンドエンジニアの小宮山です、よろしくおねがいします。 趣味はボルダリングとヨガとピラティスです、よろしくおねがいします。 ６月某日、長野県松本市の地にて開催されたメドピア開発合宿で取り組んだことについて紹介していきたいと思います。 アンパサンドへのウラミツラミ タイトルにも挙げたとおり、今回立ち向かったのはSass/SCSSのアンパサンド（&）です。 メドピアのリポジトリはほぼSCSSで統一されているので、この記事ではSCSSの記法ベースでコード例を載せていきます。 アンパサンド記法は、BEMライクなセレクタを書くときによく利用されるのではと思います。 例えばこのようなものです。 .header { &__foo { color: green; } &--bar { color: blue; } } アンパサンドを使い、冗長な記述を限りなく減らしたスマートな書き方
✨安い！！お得！！激安CSS！！✨ - Qiita
<span class='price'> <span class='price1'>19</span><span class='price2'>,800</span> <span class='yen'>円</span> </span> @import url(https://fonts.googleapis.com/css?family=Poppins:700); .price { color: #c70506; text-shadow: 2px 0 0 #fff, 0 2px 0 #fff, -2px 0 0 #fff, 0 -2px 0 #fff, 5px 4px 3px rgba(0,0,0,0.5); font-weight: bold; font-family: Poppins; letter-spacing: -3px; } .price1 { font-size: 78px
第2回 JavaScriptから始めるプログラミング2016
2. IntroductiontoProgramming withJavaScript 自己紹介 • id - drafear(どらふぃあ, どらふぁー) • 所属 - 京都大学 工学部 情報学科 計算機科学コース 3回 • 趣味 - ゲーム(特にパズルゲー), ボドゲ, ボカロ, twitter • 参加プロジェクト - これ, 競プロ, ctf, 終焉のC++, coq, 組み合わせ最適化読書会 ※青: 新入生プロジェクト @drafear 2@drafear_ku @drafear_carryok @drafear_evolve @drafear_sl @gekimon_1d1a @cuigames
Grd - A CSS grid framework using Flexbox
GitHub # grd   A CSS grid framework using Flexbox. - **Simple**: Provides just 2 base classes `Grid` and `Cell` and some modifiers. - **Light-weight**: Only 321 bytes (Gzipped). - **Flexible**: Easy to use Flexbox features. [Flexible Box Layout Module](http://caniuse.com/#search=flex) and [`cal
CSSモジュール ― 明るい未来へようこそ | POSTD
ここ最近、CSSに対する考え方が広がりを見せています。皆さんの中には、その転換点を見つけようと、Christopher Chedeauの”CSS in JS”という講演を聞いた方もいるでしょう。2014年11月にNationJSで行われたこの講演は、CSSにおける重大な分岐点となりました。まるで高エネルギー粒子が衝突した後のように、それを機に、数ある多様な考え方が、各々の方向へ渦を描くように広がったのです。その例として、 React Style と jsxstyle 、 Radium を挙げましょう。これら3つは、Reactのスタイリングにおける最新かつ最良、そして最も実行しやすいアプローチに含まれており、 各々のプロジェクトのReadmeファイルでも、 そのように言及しています。もし”発明”が、 adjacent possible（一歩先にある可能性） を探ることの一例であるのなら、Ch
AngularJSの1.3から1.4へのバージョンアップ - Qiita
@tsuchikazuです。半年ほど仕事でAngularと戯れています。 3/21に開催されたng-japanでは、あと1週間後ほどでリリースされるとアナウンスされていたAngular 1.4 あれから10週間ほど経った5/27。ついに、Angular1.4の安定版がリリースされました。 Developer Guide: Migrating from 1.3 to 1.4とCHANGELOGから、Breaking Changeを中心に簡単にまとめましたので、公開します。 概要 Angular1.4では、主にngAnimateの大きなリファクタリングと、ngMessagesの機能改善、$cookiesへの新しいAPIが追加されました。 ngAnimateのリファクタリングは、今まで存在していたissueやバグフィックスと、より便利なアニメーションを提供するための新APIのために行われました。
個人サイトでもA/Bテストがしたい（無料で） - MEMOGRAPHIX
今年にはいってから、[自分のブログ](http://memo.sanographix.net/)でA/Bテスト実施してる。のでその方法を書きます。 ## A/Bテストとは A/Bテストとは、異なる2パターンのWebページを用意し、実際にユーザーに利用させて効果を比較するテストのこと（[引用](https://kotobank.jp/word/A%2FB%E3%83%86%E3%82%B9%E3%83%88-13664)）。要するに、パターンAとパターンBというページがあったとして、どっちがクリックされやすいんかな、みたいなことを、訪問してきた閲覧者に対して実験する。 A/Bテストを実施するためのツールはいくつかあるんだけど、[Optimizely](https://www.optimizely.jp/)を使ってみた。Optimizely、[料金ページ](https://www.optimi
eCSStractor - Packages - Package Control
Sublime Text plugin for extracting class names from HTML and generate CSS stylesheet for following work. Default extracting: With BEM nesting: With BEM nesting and class names as comments: Usage Open any document contain HTML and do one of the following: Press Cmd+Shift+X on Mac OS X or Ctrl+Shift+X on Windows/Linux. Go to Tools → eCSStractor → Run Right click and select eCSStractor → Run Then you
position: absolute; の指定で要素が上下左右中央配置になる理由
人様の人気エントリーに乗っかる感じで恐縮ですが、「CSSで block 要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。」 という記事が話題になっていたので、なんでその指定で上下中央配置になるのか補足してみます。 詳しい話は下記のリンク先をご覧ください。 CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。 何でこういうことを書くかというとですね、例えば CSS でこういう指定をするとこう表示されるっていう話に関しては、仕様書を基準に話して欲しいのです。 「なんかよくわからないけどこういう風に書いたらこういう表示になった。よかったね」 で終わらせるのは個人の自由ですが、仕様書を基になぜそうなるのかの根拠を知るとより一層理解が深まると思いますので。 なので余計なお世話なんですが、下記に小難しく書きます。 解説のためのサンプルソース 例えば、下記の
pixivのCSSで使われるクラス名ルール
pixivで運用して上手く行っている感触のあるルールを紹介。 CSS的にルートになるセレクターのクラス名は_で始める _始まりのクラスはサイト内でユニーク CSSの何が問題か。それはどこで指定が衝突するのか分からないことである。そこさえ把握できれば気を付けながら書けるので、それでもう問題ないと思っている。CSSには機能がなく、それが美しい（ということにしておく）。最低限抑えるべき要素以外は考えない方がいい。 コード例。 HTML: <section class="_foo-container"> <h1 class="title">foo</h1> <ul class="_bar-items"> <li class="item"><span class="title">item 1</span></li> <li class="item"><span class="title">item
不特定多数の人が更新する大規模サイトに必要な CSS 設計の思想
今話題（？）の CSS 設計のメモ。 この「ある程度の規模」というのは、肌感覚としてテンプレートの枚数( ≠ Webサイトのページ総数)が 20P〜50P くらいのイメージ。 また、コーディング完了後に自分以外の人間による断続的な更新が入るという前提。 そして一番重要なのは「更新する人のスキルは定義しない。」ということ。つまり HTML の知識が乏しい人が更新する可能性があることを前提とする。 きっと1ヶ月くらいすれば変わると思うけど、自分の思想のログとして残しておく。 今ぼくは以下のことに気をつけながら CSS を書いている。 コードが長くなることを気にしない セレクタが長くなることを気にしない セマンティクスの実現の難しさを理解し、妥協する 再利用性より保守性 拡張しやすい設計 最初から最適化しようとしない ゴールは目先のパフォーマンス向上ではなく誰が触っても問題が起きにくい設計 ひと
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
セクションを斜めに区切るデザインをCSSで実装する方法 - Qiita
メンテナブルでありつづけるためのCSS設計