シンプルで軽量！ 新しいCSSリセット「The New CSS Reset」を作成したElad Shechterにインタビュー

2021/10/28 11 users 新しいCSSリセット where インタビュー not CSS

CSSの新しい機能:where()や:not()、allプロパティやunset値やrevert値などを使用したCSSリセット「The New CSS Reset」の特徴や機能の解説などを作成したElad Shechterに聞いたインタビューを紹介します。 CSSリセットの考え方や現在の扱い方、新しいプロパティや値の使い方・注意点、CSSの記述方法、box-sizingやlist-s... 続きを読む

リストにCSSカウンターで数字を表示して全体的にグラデーションカラーにする | かちびと.net

2019/06/10 8 users グラデーションカラー padding Flex center

Result CSSカウンターで加えた数字をグラデーションに、というもの スクロールしても色が変わらず維持できます だからどうしたと言われたらまぁ言い返す言葉も無いんですが css /* リストのスタイル*/ li { counter-increment: index; display: flex; align-items: center; padding: 12px 0; box-sizing: border-box; } ... 続きを読む

「出会えたことに感謝したいCSSベスト3」まとめ - Togetter

2018/04/08 540 users Togetter Flex None border-box

box-sizing: border-box; →出会えた時の感動 content: “”; →::before ::afterとの組み合わせ display: none; →blockとのコンビネーションが好き flexは殿堂入りぽいからそれ以外にしてみました #出会えたことに感謝したいCSSベスト3 続きを読む

[CSS]便利なのが登場！normalize.cssをモダンブラウザ用に最適化したスタイルシート -modern-normalize | コリス

2018/02/13 77 users コリス border-box Normalize.css

ブラウザごとの差異を吸収してデフォルトのスタイルを提供する「 normalize.css 」をモダンブラウザ用に最適化したスタイルシートを紹介します。 「box-sizing: border-box;」の採用など、今の実装方法に最適化されています。 modern-normalize -GitHub modern-normalizeの特徴 modern-normalizeの使い方 modern-no... 続きを読む

CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | phiary

2015/11/04 639 users padding border phiary height 原因

今回は CSS3 から box-sizing について紹介します. width や height と同時に border や padding を指定しているときに, 少し値を変えただけで意図しない表示になったりレイアウトが崩れたという経験はありませんか？ これはボックスサイズの算出方法が複雑なのが原因です. そんな面倒な問題を解決してくれるのが box-sizing プロパティです!! box-s... 続きを読む

[CSS]最近のWeb制作でよく使う、Sassのmixinのまとめ | コリス

2014/11/17 323 users Mixin opacity Sass コリス CSS

15 essential Sass mixins 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Sassやってみたい、と考えてる人には下記の本をオススメします。 Sassの初心者からもっと使いこなしたい人まで、Sassを確実にマスターできるオススメの本 -Sassの教科書 box-sizing（ボックスサイズ） opacity（不透明度） ... 続きを読む

レスポンシブデザインに便利！今さらCSS3のbox-sizingについて話してみます｜Webpark

2014/03/11 134 users Webpark プロパティ レスポンシブデザイン 具体例 理解

CSS3で追加したプロパティ「box-sizing」が結構便利です。皆さんブログで良さを紹介していますが、私なりに具体例を入れつつ解説してみますので、これを読んで「box-sizing」への理解が深まれば嬉しいです。 以前「初めてスマートフォン専用ページを作成する際に知っておきたいポイント｜Webpark」という記事を書いたときに、スマホ用サイトを作るときにbox-sizingが便利という内容を書... 続きを読む

[CSS]box-sizingを使ったIE8+対応の画像やテキストを画像に置換するテクニック | コリス

2013/05/27 31 users コリス CSS テクニック テキスト 画像

続きを読む

CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | TM Life

2012/09/25 638 users padding border height width 原因

今回は CSS3 から box-sizing について紹介します. width や height と同時に border や padding を指定しているときに, 少し値を変えただけで意図しない表示になったりレイアウトが崩れたという経験はありませんか？ これはボックスサイズの算出方法が複雑なのが原因です. そんな面倒な問題を解決してくれるのが box-sizing プロパティです!! box-s... 続きを読む

reset.cssやnormalize.css、box-sizingなどを選んでシンプルなHTMLのスターターセットを作れるSiimpler - かちびと.net

2012/05/27 94 users テンプレ Normalize.css お好み 日曜 HTML

日曜なので軽い話題。シンプルで 小さめなプロジェクト用のテンプレ を作成するツールです。reset.css とかnormalize.cssなどを選択して スターターセットとしてDLする事が 出来ます。 この手のものはいろいろあるのでお好みで選んでみるといいですね。 Siimpler reset.cssやnormalize.cssなどを選んでシンプルなHTML5製のテンプレを作るサービスです。まぁそ... 続きを読む

* { box-sizing: border-box } FTW « Paul Irish

2012/02/02 25 users FTW border-box Paul Irish

One of my least favorite parts about layout with CSS is the relationship of width and padding. You're busy defining widths to match your grid or general column proportions, then down the line you star... 続きを読む

CSS でつまづいたポイント ― transparent, transition, box-sizing | Unformed Building

2011/11/24 84 users transparent Ｔｒａｎｓｉｔｉｏｎ CSS 過去

CSS でつまづいたポイント ― transparent, transition, box-sizing 過去に CSS でつまづいたポイントとかメモしておこうと思います。 このくらい分かっとけと言われそうですが、まあ自分はその程度だということで。 transparent について CSS グラデーションで何か黒くなるなーと思ったら、transparent を使っていないかどうか見てみましょう。 ... 続きを読む