メンテナンス性に優れ、拡張性を備えたCSSを書くための「MaintainableCSS」を紹介します。 あるスタイルを修正する際に他に影響を与えてしまわないか、せっかく書いたコードが先祖帰りしないか、似たページをつくる時にコードを再利用するのに問題はないかなど、全部はもちろん個々でも非常に参考になると思います。 MaintainableCSS 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 メンテナブルCSSにすることのメリット 1. はじめに 2. セマンティック 3. 再利用 4. ID 5. コンベンション 6. モジュール 7. ステイト 8. バージョニング メンテナブルCSSにすることのメリット モジュール化、カプセル化 スタイルはあなたの許可なしで、他のスタイルの影響を受けません。 どんなデザインの要件でも あなたの必要
autoscale: true コンポーネントとCSSのアーキテクチャ 自己紹介 Name : azu Twitter : @azu_re Website: Web scratch, JSer.info CSSについて CSSとはレイアウトとコンポーネントのデザインをするもの 実装 azu/presentation-annotator: viewing presentation and annotate. 場所 src/component 以下に置く component/<ジャンル>/<コンポーネント>/ コンポーネント.js コンポーネント.css 子コンポーネント 分類 コンポーネントに関連するCSSはコンポーネント単位でJavaScriptと同居するので同じルールが適応される src/component/container/ ページから見たレイアウトを扱える Containerコンポ
Buy this domain. nocode.in 2021 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
「CSS Grid」はCSSの新しいレイアウトモジュールで、まだEditor's Draftですが、手続き完了に近づいています。このモジュールは17個の新しいプロパティを持ち、今までとは異なる新しいコンセプトでCSSを記述します。 この新しい仕様がどのように機能し、どのように記述するか、レスポンシブ対応の3カラムレイアウトを使って紹介します。 CSS Gridの基本的な使い方は、下記ページをご覧ください。 CSS Gridの実装で必要な基礎知識、主要なプロパティと用語をくわしく解説 The Holy Grail Layout with CSS Grid 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 「Holy Grail Layout(聖杯レイアウト)」とは 「CSS Grid」で3カラムレイアウトを実装 実装の解説 「Holy G
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! I’ve been intrigued by CSS Modules lately. If you haven’t heard of them, this post is for you. We’ll be looking at the project and it’s goals and aims. If you’re intrigued, stay tuned, as the next post will be about how to get started using the idea. If you’re looking to implement or level u
I haven’t heard about the contain property until some weeks ago when I asked about use cases for container queries on twitter and David Baron mentioned it in a response saying that contain: strict; can avoid many of the theoretical problems of container queries. Since then I read the specification and everything I found about it trying to understand it; Here is what I learned. The contain property
ヨーロッパ系の言語では基本的に単語の途中に折り返しを入れません。しかし、幅の狭い領域に長い英単語を記述するときや、笑いを表す「www…www」のように欧文文字を表現に組み込むときなど、欧文文字同士の合間で折り返したいと思うかもしれません。そのような折り返しの制御を CSS で行うにはどうすればよいのでしょうか。 2013 年 6 月時点の結論 word-wrap: break-word を使うとどうなるのか word-break: break-all を使うとどうなるのか word-wrap: break-word と word-break: break-all を両方使うとどうなるのか なぜ word-break: break-all ではなく word-wrap: break-word を勧めるのか どこに word-wrap: break-word を指定するのか position:
ボックス要素の横並びをCSSで行う場合、皆さんはどうしていますか? 従来知られているfloatプロパティを使った方法の他に、CSS3から「Flexbox」を使用する方法も選択肢として加わりました。では、Flexboxとfloatはどちらの方が処理速度が早いのでしょうか? 本記事ではこの2つをパフォーマンス面から比較し、最適なボックスレイアウト手法について検証します。 Flexboxとは? Flexbox(CSS Flexible Box Layout Module)は、floatに代わる新しいボックスレイアウト方法。横並びはもちろん、ボックスを均等位置に配置したり、整列や中央揃えなど、柔軟なレイアウトが可能です。今やすべてのモダンブラウザーで使用することができ(※1)、Bootstrap 4の新たなレイアウト方法として採用される(※2)等、次世代の標準となっていくであろう技術です。 ※1
I saw this great little highlight hover animation on Web Designer Depot the other day and I wondered how it worked. Turns out it's just a few lines of CSS along with some background-position and gradient tricks. Check the video for a quick explanation on how it works. Enjoy! https://codepen.io/wesbos/pen/yepexZ https://youtu.be/qii-5ZpLLYY Find an issue with this post? Think you could clarify, upd
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The following is a guest post by Wladston Ferreira Filho. We’ve covered critical CSS before, but the technique covered was specific to SCSS. Here Wladston covers the basics and introduces another way to do it, through PostCSS, and shows an example (with data) of the result. Critical CSS is a
2016年3月19日に、モダンブラウザ、スマホ、HTML5に完全対応した「normalize.css」の新しいバージョン「normalize.css v4.0.0」がついにリリースされました! v3から細かい改良が重ねられたv4で定義されている各スタイルが、どのように機能しているか紹介します。 normalize.css normalize.css -GitHub Changes to normalize.css normalize.cssの特徴 html, body, :rootなどの全体系の定義 HTML5の新要素用の定義 リンク系の定義 テキスト系の定義 埋め込みコンテンツ系の定義 グルーピングコンテンツ系の定義 フォーム系の定義 normalize.cssの特徴 normalize.cssとはブラウザごとに異なる要素のスタイルの相違を吸収し、各要素のデフォルトのスタイルを提供する小
レスポンシブ用のMedia Queriesを使う時に「@media (min-width: 400px) {}」のように「px」を単位に使用している人も多いと思います。しかし、px指定には注意が必要です。 Webページでよく使用される条件で検証を行い、Media Queriesでなぜpxを使ってはいけないのか、そして何が適しているのかが分かる検証記事を紹介します。 PX, EM or REM Media Queries? 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 はじめに pxとemとremの検証方法 検証1. html要素でfont-sizeを指定 検証2. ブラウザでズームが可能 検証3. ブラウザでフォント設定が変更可能 検証の結果 はじめに あなたはMedia Queriesで使う単位にpx, em, remのどれが一番
Earlier I wrote about using flexbox to build responsive layouts . There is a behavior that can be surprising when using flexbox for layout like this. The content of a flex item in the layout can force it to not shrink appropriately. Let’s say for example you have a long URL displayed somewhere in your layout that you want to truncate. Applying overflow: hidden will not result in the item shrinking
CSS Modules Inline Styles CSS in JS Let’s start at the beginning… Documents — vs. — Web Apps Global scope — vs — Maintenance OOCSS SMACSS BEM SUIT .Block__Element--Modifier { ... } <div class="page my-page"> <header class="header"> <h1 class="heading header__heading">...</h1> </header> <article class="post"> <header class="post__header"> <h1 class="heading post__heading">Hello World</h1> </header>
例えばリストの各アイテムの区切りにボーダーをつける時、まずはli要素にボーダーを指定し、最後のli要素にだけボーダー無しを上書きで指定する、そんなスタイルシートも「:not」を使うと簡単に指定することができます。 否定疑似クラス「:not」の便利な使い方と使う時の注意点(特に優先順位)を紹介します。 On :not and Specificity 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 「:not」の便利な使い方 CSSセレクタの優先順位 101 「:not」を含む優先順位 「:not」を使う時の注意点 まずは、「:not」の各ブラウザのサポート状況。 2016年現在、どの環境でも特に問題なく、利用できると思います。 :not などセレクタの各ブラウザのサポート状況 「:not」の便利な使い方 否定疑似クラス「:not」は使い
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く