タグ

CSSに関するshogo0809のブックマーク (13)

  • Panda CSS - Chakra UI の Zero Runtime CSS フレームワーク

    🐼 パンダが来た / Panda CSS Chakra UI から、新しい CSS フレームワークである Panda CSS がリリースされました。 2023 年 3 月に公開された Chakra UI の今後のロードマップに関するブログ内でもすでに言及されていましたが、今回それが正式にリリースされた形となります。 Panda CSS の特徴 リポジトリ内 README からの抜粋となりますが、次のような特徴があります。 ⚡️ Write style objects or style props, extract them at build time → Style 用のオブジェクトや Props を定義してビルドで抽出 ✨ Modern CSS output — cascade layers @layer, css variables and more → Cascade Layers

    Panda CSS - Chakra UI の Zero Runtime CSS フレームワーク
  • Simple.css Framework

    Are you using Simple.css? If you are, it would be great if you considered buying me a coffee to say thanks. Things like this really help open source software thrive. You can Buy Me A Coffee or even sponsor me on GitHub. ❤️ Simple.css is a CSS framework that makes semantic HTML look good, really quickly. Simple.css is mostly classless, which means that you can integrate Simple.css with plain HTML a

    Simple.css Framework
  • まとまったCSSを別のコンポーネントに分けないでほしい話 - uhyo/blog

    この記事は、ReactCSSを書くときに関連したCSSを別々のコンポーネントに分けるのをやめようという記事です。主な理由は、スタイリングという機能が複数コンポーネントに分散するのを防ぐためです。これには修正時に複数コンポーネントにまたがって修正が必要になるのを防ぐという意味もあります。 Flexboxの例関連したCSSが複数の要素に分かれることはよくあります。その代表例がdisplay: flexです。例えばこんなレイアウトを考えてみましょう。左側のボックスの幅が決まっていて右側の幅が可変の2カラムレイアウトです。 左のカラム (100px)右のカラムこのレイアウトはおおよそ次のように実現できます。 /* 親要素 */ display: flex; /* 子要素(左) */ flex: 100px 0 0; /* 子要素(右) */ flex: auto 1 0;では、Reactではどの

    まとまったCSSを別のコンポーネントに分けないでほしい話 - uhyo/blog
  • CSSでアイコンをテキストに揃えるのはこれで簡単になる!CSSの新しい単位「lh」「rlh」が登場

    アイコンのサイズをテキストに揃えて配置する時、どのように実装していますか? テキストのサイズぴったりにアイコンを簡単に配置できるCSSの新しい単位「lh」「rlh」が登場します。 'lh' and 'rlh' units 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSS Values and Units Module Level 4に見たこともない新しい単位がありました! lh それが使われている要素のline-heightプロパティの計算値に等しい rlh ルート要素(おそらく<html>要素)のline-heightプロパティの計算値に等しい これらの新しい単位が役立つシーンはどこだと思いますか? Šime Vidasの記事によると、

    CSSでアイコンをテキストに揃えるのはこれで簡単になる!CSSの新しい単位「lh」「rlh」が登場
  • [CSS]「display: contents;」がすごい便利!ラッパーを使った実装が大きく変わるこれからのテクニック


    13JavaScript使 HTMLdisplay: contents;使 How display: contents; Works    2021/9/4:  CSS  display: contents;使 display: contents; display:
    [CSS]「display: contents;」がすごい便利!ラッパーを使った実装が大きく変わるこれからのテクニック
  • iPhone X の Safari における Web コンテンツの表示 - ONO TAKEHIKO - Medium


    iPhoneX  iPhoneX iOS  Safe Area Safe Area  iOS  iPhoneX  iPhoneX Safari  Web  Web 
    iPhone X の Safari における Web コンテンツの表示 - ONO TAKEHIKO - Medium
  • かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技

    2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト! 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す(文字色も変更) ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう!サンプルも作ったのでコードと

    かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
  • マージンやパディングでもう悩まない、モジュール式WebデザインにおけるHTMLとCSSの新しい実装方法


    Web2oror Web HTMLCSS Learning from Lego: A Step Forward in Modular Web Design   WebUIWebLEGO
    マージンやパディングでもう悩まない、モジュール式WebデザインにおけるHTMLとCSSの新しい実装方法
  • StyleDocco

    StyleDocco generates documentation and style guide documents from your stylesheets. Stylesheet comments will be parsed through Markdown and displayed in a generated HTML document. You can write HTML code prefixed with 4 spaces or between code fences (```) in your comments, and StyleDocco shows a preview with the styles applied, and displays the example HTML code. The previews are rendered in resiz

  • RedLine Magazine : ブラウザ(Win) CSSセレクタ対応状況まとめ (2010年5月14日版)

    最近のコメント PHP オブジェクト指向の勉強 └ Red - 2010.01.08 └ hogepage - 2010.01.21 └ Red - 2010.01.22 └ - 2011.11.27 └ houseiii - 2011.11.27 Fireworks トリミング画像を一括書出 CS4編 └ Iper - 2009.06.27 └ Red - 2009.06.27 └ mala - 2011.11.17 └ Red - 2011.11.18 jQueryでボックスを上下左右中央に簡単配置 └ ミラクル - 2009.03.15 └ Red - 2009.03.15 └ entZ - 2011.10.22 └ Red - 2011.10.24 overflow を使用したボックス背景のこと └ - 2007.12.13 └ Red - 2007.12.13 └ - 2007.

  • 逆引きCSSハック(IE8,Firefox,Opera,Safariを含めたブラウザ別CSSハック)

    cat888 live เว็บไซต์ของเราได้รับการรับรองว่าเป็นเว็บพนันที่มีคุณภาพเยี่ยมที่สุดในประเทศไทยสำหรับการพนันออนไลน์ เว็บพนันที่มั่นคงและปลอดภัยที่สุดสำหรับการเดิมพันออนไลน์ที่ทำการเงินอย่างมั่นคงและปลอดภัยและรับรองความเป็นส่วนตัวของคุณในการเล่นเกมพนันที่นี่. ทางเรามุ่งเน้นให้ประสบการณ์การพนันออนไลน์ที่ไม่ซ้ำซากและน่าสนุกที่สุดเลยค่ะ! cat888 หวย เมื่อคุณมีความระมัดระวังในการพนันออนไลน์ คุณจะมั่นใจได้ว่า

  • 死ぬまでに見ておくべきCSSデザインサイト集まとめ - GIGAZINE

    ということで、今まで数限りなくネットのあちこちで紹介されてきたCSSデザイン関連のサイトがリスト化されてまとめられたようです。これだけあれば当分はブログなどのデザインのネタに困ることはなさそう。インスピレーションを得るのに使うもよし、デザインの参考にするのもよし、知っておいて損はないものばかりです。 リストは以下の通り。 CSS Beauty | CSS Design, News, Jobs, Community, Web Standards http://www.cssbeauty.com/ CSS Drive- Categorized CSS gallery and examples. http://www.cssdrive.com/ Stylegala - Web Design Publication http://www.stylegala.com/ CSS Mania http:

    死ぬまでに見ておくべきCSSデザインサイト集まとめ - GIGAZINE
  • 【特集】正式版完全対応! Internet Explorer 7 CSS攻略法 (15) 04-01 CSSハック一覧 | クリエイティブ | マイコミジャーナル

    以下の一覧は、IE7でも使用可能なCSSハックである。CSSハックでは、特定のブラウザだけをスタイルシートの適用先とするため、ブラウザのバグや未対応機能を利用してセレクタなどを記述する。IE6の時代には、IE特有のバグを回避し、モダンブラウザと表示を揃える手段として多くのサイトで利用されてきた。 しかし、バグが修正されたIE7では、主要なCSSハックがこれまでと同じ目的では使用できなくなっており、対応が求められている。 CSSハックを使用せずに対応することができれば理想的だが、どうしてもハックを使用する場合、その仕組みやリスクを理解し、機能しなくなった場合はすぐに対応できるようにしておくことが重要だ。 なお、IEではコンディショナルコメントを使って適用先のブラウザを指定することもできる。 記述形式の表記 〜: 適用先を指定 ...: スタイルシートの設定を記述 property: プロパテ

  • 1