2023年モダンCSSの最新トレンド
Demo https://codepen.io/tonkotsuboy/pen/JjmYWmw レスポンシブ対応で、 画像の縦横比を変えたい aspect-ratio いろんなアスペクト比で画像を表示したい アスペクト比とは 従来: padding ハック .box::before { content: ""; display: block; padding-top: calc(100% * 9 / 16); /* 56.25% */ } @media (width <= 500px) { .box::before { padding-top: calc(100% * 3 / 4); } } 現在: aspect-ratio プロパティ .item { aspect-ratio: 16 / 9; } @media (width <= 500px) { .item { aspect-rati
プログラム組んだら負け！実はHTML/CSSだけでできること2015夏
2. 2015 Yusuke Hirao, CC BY-ND. 自己紹介 平尾優典（ひらお ゆうてん） === 株式会社ディーゼロ Webエンジニア ## コミュニティ活動 - 福岡フロントエンド友の会 Fukuoka Frontend Frogs - 福岡マークアップ勉強会 - baserCMSユーザー会 Yusuke Hirao @cloud10designs 3. 2015 Yusuke Hirao, CC BY-ND. 自己紹介 ## コミュニティ紹介 ### 福岡フロントエンド友の会 Fukuoka Frontend Frogs ### 福岡マークアップ勉強会 ### baserCMSユーザー会 「井の中の蛙」にはならないようにと集まった フロントエンドエンジニアのためのコミュニティ。 Webコーディング・アプリ開発の悩める蛙たちが その場で話題を決めて、アンカンファレンス形式で
Widthの発音について
The document discusses CSS properties like width, linear, and relative. It mentions CSS Nite events from 1996-2011 and references getting up at midnight. The author's Twitter handle is provided as @swwwitch and an email takano@swwwitch.com. The document contains technical CSS and HTML terms when discussing width properties and formatting text.Read less
Beyond CSS Architecture
The document is a slideshow presentation about CSS architecture techniques. It discusses object-oriented CSS (OOCSS), block element modifier (BEM), CSS preprocessor extensions of BEM, responsive design patterns, style guide generators, specificity graphs, critical path CSS extraction, and the potential of web components. The presentation emphasizes building modular, reusable CSS components and est
大規模サイトにおける本当は怖いCSSの話
This document provides tips for best practices when writing CSS code. It recommends avoiding inline styles, header styles, multiple CSS files, and !important. It also recommends using shorthand properties, avoiding universal selectors and IDs when possible, optimizing images, and using CSS3 properties instead of images. In summary, the document outlines techniques for writing efficient, well-struc
Nicole Sullivan - OOCSS and Preprocessors | Tech Talk
"OOCSS and Preprocessors in a tree, K-I-S-S-I-N-G" Many developers believe they need to choose between OOCSS and CSS preprocessors like SASS/Compass and LESS. Nicole believes that the best sites pair the strengths of both approaches, pulling the architecture from OOCSS and the language additions from SASS. She will share with you some of her war stories, including everything she screwed up when
モダンなCSS設計パターンを考える
This document discusses modern CSS architecture patterns. It introduces concepts like OOCSS, SMACSS, and BEM for organizing CSS in a modular, scalable and maintainable way. It provides examples of how to build reusable CSS modules and maintain them through techniques like naming conventions, categorization and decoupling CSS from HTML. The presentation emphasizes goals of building predictable, reu
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS 設計ことはじめ
PostCSS とは何か
悩まないコーディングをしよう！ OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計（Sass対応）
プリンより滑らか。スムーズなアニメーションの作り方
なんでCSSすぐ死んでしまうん
borderの書き方論
CSS Architecture with OOCSS, SMACSS, BEM
イマドキCSS設計