Sassなしで入れ子が可能に。CSSネストが全ブラウザ対応（2023/08/29） 全ブラウザでネストに対応したので記事を更新しました。 本日2023/08/29、全ブラウザでCSSでネスト（入れ子）ができるようになりました💐 次のようなコードが、「SassではなくCSSで」できるようになります。Sassを使わないCSSコーディングを大きく変えることでしょう。
Web制作者はしっかりと理解しておきたい！ CSSにおけるレイアウトアルゴリズムを解説
CSSを理解するには、プロパティや値を知っているだけでは不十分です。CSSのレイアウトアルゴリズムがどのように機能するかを理解する必要があります。 ブログやツイートで便利なCSSスニペットが紹介されていても、なぜ機能するのか、レイアウトアルゴリズムがどのように使用されているのか説明されていないことはよくあります。CSSにおけるレイアウトアルゴリズムについて解説します。 CSSの初学者をはじめ、長く携わっている人にも、気づきや学びがあると思います。 Understanding Layout Algorithms by Josh W. Comeau 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSにおけるレイアウトのアルゴリズム レイアウトアルゴリズムの確認 インライン要素の不思議なスペース 終わりに はじめに 数年
HTMLはシンプルなまま、Webサイトの見栄えをよくするclassレスの超軽量CSSフレームワーク -Almond.css
HTMLはシンプルなままで、モダンなWebページを簡単に作成できるclassレスの超軽量CSSフレームワークを紹介します。 ポートフォリオやブログなどをさくっと作成したい時に便利です。少し手を加えて、CSSリセットとして利用するのもありかもしれません。 Almond.CSS -GitHub Almond.CSSの特徴 Almond.CSSのデモ Almond.CSSの使い方 Almond.CSSの特徴 Almond.CSSは、シンプルなWebサイトの見栄えをより良くするためのclassレスのCSSスタイル集です。CSSのスタイルを正規化してクロスブラウザで同様のエクスペリエンスを提供したり、カスタムスタイルを追加してちょっとしたスパイスを加えることもできます。 HTMLのセマンティックなタグとAlmond CSSを組み合わせるだけで（JavaScriptは不要です）、モダンなWebページが
CSSで変数（カスタムプロパティ）を使ってみよう
CSSで変数（カスタムプロパティ）を使ってみようプログラミングではおなじみの変数。SassやLESSといったCSSプリプロセッサーをお使いの方もよく使うものですね。この一度定義しておけば繰り返し利用できる便利な変数が、CSSでも使えるようになりました！今回はCSS変数（カスタムプロパティ）の使い方と注意点をまとめていきます！ CSS カスタムプロパティとは？公式では「カスケード変数のための CSS カスタムプロパティ（CSS custom properties for cascading variables）」としていますが、単に「CSS カスタムプロパティ」や「CSS 変数」などとも呼ばれています。 変数は文字列や数値などを入れる箱のようなものです。例えば数学では「y = 3x」のような式があり、この y や x の中には自由に数字を当てはめられます。これが変数というものです。数学では数
ユーティリティーファーストとTailwind CSSのススメ - Qiita
.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-align: bottom; } .mb-1 { margin-bottom: 1rem; } .mb-2 { margin-bottom: 2rem; } .mb-3 { margin-bottom: 3rem; } これをHTMLに当てまくって画面を作ればほら簡単！お手軽に画面が作れるね！ と言う感じである。 これの良いところというのは、サクサク画面が作れること。これを体
HTML tableの実装がこれまでと変わる！Googleデベロッパーによる変更点の解説 -TablesNG
GoogleではCSSの新機能を導入するだけでなく、既存の機能を向上することにも取り組んでいます。その中の一つ「TablesNG」で、HTMLのtableの実装がこれまでと変わるのでその変更点を紹介します。 tableは古くからあり、その後さまざまなCSSの機能がブラウザに実装されました。当然、それらの新しい機能にtableは対応していません。それらに対応し、不整合を修正するのが今回の取り組みです。 TablesNG Resolves 72 Chromium Bugs for Better Interoperability by Una Kravets, Aleks Totic 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに TablesNGの取り組み 1. テーブルの行にposition: sticky 2. バック
Demystifying styled-components
When I first started using styled-components, it seemed like magic ✨. Somehow, using an obscure half-string-half-function syntax, the tool was able to take some arbitrary CSS and assign it to a React component, bypassing the CSS selectors we've always used. Like so many devs, I learned how to use styled-components, but without really understanding what was going on under the hood. Knowing how it w
フロントエンドの刺激的なコーディング課題6選 - Qiita
素晴らしい課題でコーディング意欲を高めよう。 Photo by Ferenc Almasi on Unsplash. はじめに コーディングを上達させる最も効率的な方法の1つは、できるだけたくさん作ることです。 コーディング課題は、ものを作ることで自分のスキルアップする楽しい方法です。この記事のリストを参考に、何か選んで作り始めましょう！ 急いでいる時や、コーディングのアイディアを枯渇させたくない時は、100以上の課題をここにまとめてあります。 課題には好きなツールを使えるので、練習したいものがあれば、気軽に挑戦してみてください。 1. タスクマネージャUI なんて美しいアプリケーションでしょう！クリーンでモダン、インテリジェントなUIです。 Aysenur Turkによる「CSSグリッドを使ったタスクマネージャーUI」 学べること HTMLでCSSを使用する方法。新しいCSSグリッドを試
CSSフレームワーク BULMA チュートリアル① - Qiita
はじめに BULMAは、CSSフレームワークで、2016年5月に勧告候補になり各ブラウザへの対応も進んでいる「Flexbox」を最大限に利用しています。またJavaScriptを必要としないことも特徴で、BULMAが用意したCSSファイルを一つ、Webページに組み込むだけで手軽に使えるようになるのも良いところかと思います。 本記事では、BULMAの簡単な使い方を紹介するために、まずは基礎的な使い方を説明し、そのあとはWebページを１ページ作成するチュートリアルを行う予定です。 BULMAの導入 BULMAを導入するには三つの手段があると公式ドキュメントに紹介されています。「NPMコマンドでインストール」、「公式サイトからダウンロード」、「CDNを利用」の三つです。本記事では主に「CDNを利用」を使う予定です。 下記のサンプルコードはCDNをつかってBULMAを導入している例です。BULMA
2020年のCSSのまとめ、FlexboxやCSS Gridの使用状況、よく使用するプロパティや単位、人気のフレームワークやツールなど
CSSを10年以上書いてきた人にとって、この2020年は今までとは全く違ったCSSになったと感じた人も多いと思います。 レスポンシブはブレークポイントの代わりにCSS Gridでより簡単に実装できるようになり、グローバルなスタイルシートに頼るのではなく、CSS-in-JSでスタイルをコンポーネントに配置してテーマ性のあるデザインシステムを構築できます。 フレームワークではTailwind CSSが浸透し、ユーティリティ・ファーストのCSSが使用されるようになりました。2020年現在、CSSの使用状況を調査した「The State of CSS 2020」を紹介します。 The State of CSS 2020 The State of CSS 2020は、The State of CSS Surveyでアンケートを行った調査結果をまとめたものです。私も1票分参加しました。 ちなみに、代表
コピペで簡単！CSSで実装されたジグザグ、波状、罫線、アイソメトリックスなど背景パターンのスタイルシート
ジグザグ、波状、罫線、アイソメトリックスなど、CSSで実装されたさまざまな背景用パターンをコピペで簡単に利用できるオンラインツールを紹介します。 カスタマイズにも対応しており、前景と背景のカラー、不透明度、サイズを簡単に変更できます。
CSS リファレンス
CSS のセレクタ、疑似要素、疑似クラス、および各プロパティについて、用途、使い方、対応ブラウザのほか、サンプルソースなどを掲載しています。用途から逆引きも可能です。
バリアブルフォントで遊ぼう - astamuse Lab
はじめまして、フロントエンドエンジニアの minamo です。 趣味は映画鑑賞、特にアクション映画が大好きです。 今年は「イップ・マン外伝マスターZ」、「ジョン・ウィック : パラベラム」、 「HiGH&LOW THE WORST」と最高アクション映画が豊作でうれしいですね。 2月に astamuse にジョインしてから初めてのブログで、好きな映画以外書くことが思い浮かばなかったのですが、最近「バリアブルフォントがおもしろい！」と思ったので、ご紹介します。 バリアブルフォントって何？ バリアブルフォントとは、Adobe・Apple・Google・Microsoftが共同で開発したフォントの規格です。 Variable = 可変フォントとも呼ばれていました。 通常のフォントは字幅やウェイト、斜体などによってファイルが分かれていますが、バリアブルフォントだとそれらが ひとつのフォントファイルで
CSSにおけるスペースの与え方、paddingやmarginなどを使った実装テクニックを詳しく解説
Webページやスマホアプリの実装で悩ましいのが、スペースの与え方です。マージンとパディングをどう使うか、margin-topとmargin-bottomのどちらにすべきか、グリッド間のスペース、表示デバイスによって異なるスペース、大規模プロジェクトにおけるスペースの管理方法など、CSSにおけるスペースについて解説します。 Spacing in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSにおけるスペースの種類 CSS GridのGap（溝） CSS FlexboxのGap（溝） CSSのポジション CSSのプロジェクトで使用するスペースの実装テクニック スペーサーのコンポーネント CSSの数学関数: Min(), Max(), Clamp() はじめに 2つ以上の要素
一部だけ除外したい CSS の :not() の使用方法
またに使うCSS の :not() の使い方をまとめました。 基本的な使い方 基本的な使い方はこのタグ以外適用したい場合に使います。カッコの中に除外したいタグを指定するだけで使用できます。CSS3が使えるようになり使う機会が増えてきました。 指定タグを除外 /* Pタグ以外適用 */ :not(p) { color:#FFF; } /* divタグ以外適用 */ :not(div) { color:#FFF; } /* h1タグ以外適用 */ :not(h1) { color:#FFF; } 指定IDのみ除外 /* #id以外適用 */ :not(#id) { color:#FFF; } 指定クラスのみ除外 /* Pタグの.class以外適用 */ p:not(.class) { color:#FFF; } 指定擬似クラスのみ除外 /* 擬似クラスhover以外適用 */ a:not(:h
Old CSS, new CSS / fuzzy notepad
I first got into web design/development in the late 90s, and only as I type this sentence do I realize how long ago that was. And boy, it was horrendous. I mean, being able to make stuff and put it online where other people could see it was pretty slick, but we did not have very much to work with. I’ve been taking for granted that most folks doing web stuff still remember those days, or at least t
window.getComputedStyle() で要素のスタイルを取得する - Qiita
JavaScriptでHTML要素のスタイルを知りたいという時、どうしていますか？ jQueryを使っているのであれば jQuery.css(element, 'property') や jQuery(selector).css('property') で取得している人もいるかと思いますが、jQueryを使わずとも window.getComputedStyle() というメソッドで取得可能です。（jQuery.css() もこれを使っています） なにそれなにそれー！ window.getComputedStyle() とは？ 指定した要素の現在の状態のスタイル情報を CSSStyleDeclaration（Firefoxでは CSS2Properties）という名前の読み取り専用の（配列のように扱う事もできる）オブジェクトを返すメソッドです。すっごーい！ MDNでも見てみましょう。 要素
CSSの便利なプロパティmin-widthとmax-width、min-heightとmax-heightの効果的な使い方のまとめ
Webページやスマホアプリのレイアウトをはじめ、画像、ボタン、ナビゲーションなどを親要素に応じてそれらの幅や高さを適したサイズにしたい時がありませんか？ そんな時には、min-widthとmax-width、min-heightとmax-heightを効果的に使用すると、非常に便利です。 widthとheightプロパティにおけるminとmaxの効果的な使い方を紹介します。 Min and Max Width/Height in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに widthプロパティにおけるminとmax heightプロパティにおけるminとmax minとmaxプロパティの効果的な使い方 メモ リソース はじめに 要素の幅をその親に対して相対的にすると同時に、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これでもうCSSのクラス名は迷わない！BEMの命名規則をまとめたチートシート -BEM Naming Cheat Sheet
MindBEMding と近代 Component 設計の共通点 - Qiita
