「flex box layoutで中に長いテキストなどを含む幅可変要素のレイアウト - くらげだらけ」という記事が興味深いです。過去に「長い英単語を途中で折り返したいときの CSS の指定方法」にて、word-wrap: break-word と display: inline-block などの組み合わせには注意が必要 (word-wrap の指定が効かないように見えることがある) と述べたのですが、似たようなことが display: flex にも言えるようです。 この挙動は認識していなかったので CSS Flexible Box Layout Module Level 1 (flexbox 仕様草案、2016 年 4 月 2 日時点のもの) を見てみたところ、「4.5. Implied Minimum Size of Flex Items」(flex アイテムの暗黙的な最小サイズ)
CSS Color Module Level 3 W3C Recommendation 19 June 2018 This version: https://www.w3.org/TR/2018/REC-css-color-3-20180619/ Latest version: https://www.w3.org/TR/css-color-3/ Previous version: https://www.w3.org/TR/2018/PR-css-color-3-20180315/ Editor's Draft: https://drafts.csswg.org/css-color-3/ Feedback: GitHub Issues are preferred for discussion of this specification. When filing an issue, ple
Abstract This specification describes CSS <color> values, and properties for foreground color and group opacity. CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, etc. This section describes the status of this document at the time of its publication. A list of current W3C publications and the latest revision of this technical report
CSS Color Module Level 3 W3C Recommendation 18 January 2022 More details about this document This version: https://www.w3.org/TR/2022/REC-css-color-3-20220118/ Latest version: https://www.w3.org/TR/css-color-3/ Previous version: https://www.w3.org/TR/2021/REC-css-color-3-20210805/ History https://www.w3.org/standards/history/css-color-3 Editor's Draft: https://drafts.csswg.org/css-color-3/ Impleme
どうも、くーへいです。 この記事は、CSS3のモジュールをW3Cの仕様書に基づいてまとめています。 CSS2までは1つの仕様書になっていたのですが、CSS3からは個々の機能ごとにモジュール化され、ブラウザはそれぞれのモジュール機能を搭載するかしないかを選べるようになっています。 そんな状況ですので、CSS3とは何かがいまいち明確になっていませんし、各仕様書も10年前に作業終了したものから未だに作業中のものまで多岐にわたっています。 そこで、この記事でまとめてしまおうというわけです。 詳細については各記事を公開次第、この記事にもリンクを作成します。 この記事も随時更新しますので、お楽しみに。 ※各タイトルの日本語名は筆者によるもの。カッコ内の英語名は仕様書のまま。 ※各仕様書の策定状況は記事公開時点（2014年7月◯日）とします。状況確認次第、お知らせします。 ※ブラウザ対応状況は「Can
Welcome to Foundation 6 We built Foundation for Sites to be the most advanced responsive front-end framework in the world. Installing FoundationThere are a number of ways to install Foundation for Sites. Our installation page will help you find the best option for you. Install Foundation for Sites New to Foundation for Sites?With an easy to understand syntax and consistent structure, you'll learn
Alphabetical list of CSS Properties A align-content [CSS Align L3] [CSS Flexbox] align-items [CSS Align L3] [CSS Flexbox] align-self [CSS Align L3] [CSS Flexbox] alignment-adjust [CSS Inline L3] alignment-baseline [CSS Inline L3] all [CSS Cascade L3] alt [CSS Pseudo-Elements L4] animation [CSS Animations] animation-delay [CSS Animations] animation-direction [CSS Animations] animation-duration [CSS
はじめに Multilayer CSS構成システムはBEMとOOCSSの原理を基にしています。この方法はOdnoklassniki.ru（世界のソーシャルネットワークのTOP10）開発チームによって作り出され、ドキュメントとチームベースのシステムの中核として開発者にお勧めです。 この方法は60人以上の開発者と多くの内部サービスという巨大なプロジェクトから生まれましたが、中小規模のプロジェクトにも簡単に導入できます。その拡張性により、開発者はルールの厳格さのレベルを選択できます。 このドキュメントはドキュメント作成エンジンSourceなどの補助ツールを使い、常に改善されています。オリジナルのドキュメントはロシア語で記述されており、全ての情報はまだ翻訳されていませんが、翻訳のプルリクエストはお気軽にどうぞ。 何か質問があればIssues section on Githubまたはメールアドレスr
Harry Roberts氏によるCSSガイドライン(High-level guidelines from writing manageable, maintainable CSS)のドキュメントが素晴らしすぎたので、勢いで翻訳してみました。（ロシア語、中国語、フランス語に引き続いて4番目...） 一般 CSS 注釈、アドバイス、ガイドライン at github 個人的な主観で見所を選んでみると、以下のような感じです。 クラスの名前付け方法（ネーミングルール） セレクターの設計、考え方 !importantの使い所 最近見るようになって来たBEM命名法についても説明してあります。 そもそもWebのデザインをどうするかという問題は置いておくと、CSSを書くという事は、どうやってそのデザインを実現するかというHowTo的なものと、どうのように名前付けやエレメントの設計を行なってメンテナンス可能
JavaScriptでCSSの擬似クラス（:link/:visited/:hover/:activeなど）を設定する方法を紹介します。 １．問題点 JavaScriptでCSSを設定する場合、例えばテキストリンクの色を設定するには、styleプロパティを利用して次のように記述します。 <a href="http://.../">foo</a> <script> var foo = document.getElementsByTagName('a'); foo[0].style.color = '#f00'; </script> ですが、styleプロパティには擬似クラスがなく（というか、そもそもプロパティではない）、 a:link a:visited a:hover a:active などの設定方法が不明です。 注：jQueryは使わない前提とします。 ２．擬似クラスを設定する 調べるとい
5月 2日付けですが、Selectors Level 4 の Working Draft （草案） が更新されました。 Selectors Level 4 自体は 2011年 9月 29日の Selectors Level 3 仕様の勧告とあわせて最初の Working Draft が公開されていますが、そこから今回で 2回目の更新となります。 Selectors Level 4 W3C Working Draft 2 May 2013 Working Draft 内の、「Selectors Overview」 に Selectors Level 4 を含めた、セレクタの一覧がありますので、下記に引用しつつ簡単に日本語での解説も付け加えておきましたが、Selectors Level 4 ではセレクタがより一層便利になっていますので、早いところブラウザ側で実装されるといいですね。 ちなみに、
CSSでグリッドレイアウトを実現するための仕様のワーキングドラフト「CSS Grid Layout - W3C Working Draft, 2 April 2013」が公開された。将来のCSSでグリッドデザインを実施する方法として参考になる。公開されたワーキングドラフトにはサンプルコードが豊富に掲載されており、どのようなコーディングを想定しているのかがわかりやすい。 現行使われているCSSにはグリッドレイアウトが含まれていないため、既存の機能を組み合わせてグリッドレイアウトを実現する必要がある。Blueprintや960 Grid Systemなど、グリッドレイアウトを簡単に実施できるようにするCSSフレームワークがいくつか存在している。CSSフレームワークを使えばグリッドレイアウトを比較的簡単に実現できるが、フレームワークごとに記述形式が異なり、記述の互換性がないという問題がある。 C
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
