知らなかったCSSプロパティ 3選 - Qiita

2024/06/29 48 users Qiita カスケーディングスタイルシート Cur CSS

はじめに 意外と知らなかったCSSプロパティを3つ紹介します。 1. currentColor currentColor（CSS:カスケーディングスタイルシート） 特定の要素に指定されている色を参照するCSSプロパティです。 要素内の任意のプロパティで使用できますが、特にボーダーや背景などの色を親要素の色と同じにしたい場合に便利です。 cur... 続きを読む

CSSプロパティを自動ソートしただけで、CSSのファイルサイズを（少しだけ）減らせた話

2023/02/21 17 users CSS Slack Ubie Discovery ユビー 少し

Ubie Discoveryでプロダクト開発をしている@jimboです。 今回は症状検索エンジン「ユビー」のCSSファイルを改善した話を紹介します。 きっかけ ある日、社内のSlackにこんなメッセージが流れてきました。 自分の中ではある程度レイアウト関連やテキスト関連にグループ化して書くようにはしていたのですが、こういう類の... 続きを読む

2022年に見かけたモダンなCSSの書き方を振り返る

2023/01/12 261 users CSS 従来 実装例 Internet Explorer 発信

はじめに 2022年6月15日にInternet Explorerのサポートが終了しました。 (IEの完全無効化は2023年2月14日予定) そのこともあり2022年は今までとは異なるCSSプロパティを使用したモダンな実装例の記事や発信をよく見かけた気がします。 ただしこれらは従来の実装方法でもできる表現であったので、「この記事はあとでしっ... 続きを読む

画像で分かる、新しいCSS

2022/06/21 326 users 新しいCSS 画像 Twitter CSS 連載

この記事では、比較的新しいCSSプロパティやCSSの機能を画像で分かりやすく解説しています。 2021年にTwitterで「1枚の画像で新しいCSSがわかる」という連載をしていたのですが、その投稿内容をまとめて解説文などをブラッシュアップしたものです。 IE11のサポートが終了したことで、ほとんどのCSSプロパティやCSSの機能... 続きを読む

CSSで要素の表示・非表示を気持ちよく切り替える方法いろいろ | 東京上野のWeb制作会社LIG

2019/11/20 62 users CSS Web制作会社LIG つっち フロントエンド 要素

こんにちは。フロントエンドのつっちーです。 要素の表示と非表示を切り替える方法って、同じことをやっているように見えて、実はたくさんありますよね。 これまで無意識に使い分けていましたが、いま一度整理しておこうということで、まとめてみました。 表示・非表示の切り替えに使えるCSSプロパティ 他にもあるかもし... 続きを読む

【CSS】Flexboxの使い方を徹底解説！基本から実践まで(サンプルあり) | creive【クリーブ】

2018/10/19 60 users float display クリープ JavaScript

「Flexboxは、どんなことができるのか、いまいち分かっていない。」 「Flexboxって、横並び機能のfloatやdisplayとどう違うの?」 CSSの学習を始めた人の中には、こう思う人もいるでしょう。Flexboxは、従来、javascriptや他のCSSプロパティを駆使しながら実現していた複雑なレイアウト設計を簡単に実現します。今後、設... 続きを読む

これから開発されるFirefoxの新規機能は、HTTPSにしか対応しない。新規のCSSプロパティなども対象 － Publickey

2018/01/22 196 users コンテキスト Publickey https Mozilla

これから開発されるFirefoxの新規機能は、HTTPSにしか対応しない。新規のCSSプロパティなども対象 Firefoxを開発するMozillaは、Firefoxにおいてこれから開発されるWeb関連の新機能はすべて安全なコンテキスト（Secure Context）のみを対象にすると、Mozilla Security Blogの1月15日付の記事「 Secure Contexts Everywhe... 続きを読む

あなたはCSSプロパティ”display”をどのぐらい知っているだろうか？ | デザイン | POSTD

2016/08/05 579 users POSTD display プロパ inline Flex

CSSプロパティの1つであるdisplayはCSSレイアウトに用いるプロパティの中でも極めて重要なものです。block、inline、none、さらにtableやinline-blockは今ではかなり一般的になってきました。一方新たに登場したflexやgridはレイアウト用に作られたものです。これらについて紹介します。CSSプロパティの1つである display は、CSSレイアウトに用いるプロパ... 続きを読む

どのCSSプロパティが世の中のWebサイトでよく使われているのか？ マイクロソフトがクローラーから得た統計を「Global CSS Property Usage」として公開 － Publickey

2016/04/11 177 users Publickey クローラー プロパティ CSS HTML

どのCSSプロパティが世の中のWebサイトでよく使われているのか？ マイクロソフトがクローラーから得た統計を「Global CSS Property Usage」として公開 Webサイトをデザインする際、HTMLでテキストを構造化した上で外観を整えるためにCSSを利用します。 いまのCSSには多彩な表現力を備えたさまざまなプロパティがある一方、最新のCSSに未対応のブラウザに気を使いつつも新しいプ... 続きを読む

テキスト周りのスタイリングに使えるCSSプロパティやスニペット | NxWorld

2015/11/25 309 users NxWorld スニペット スタイリング テキスト周り

スタイリングといっても見栄えを大きく変えるとかではなく、ほとんどがただのプロパティ説明みたいな感じになっていますが、サイト制作時に覚ã... 続きを読む

CSS3のブレンドモードが素敵！ 新プロパティmix-blend-modeを使いこなそう – ICS LAB

2015/07/07 351 users mix-blend-mode ICS LAB ICS池田

こんにちは、ICS池田です。 mix-blend-modeというCSS3のプロパティ。これはDOMエレメントを重ねた時の見え方を指定するCSSプロパティです。今まではChrome CanaryやFirefox Aurora、WebKit Nightly Builds等の開発用ブラウザでしか使えず、実験的な印象が強かったmix-blend-mode。しかし最近(2015年5月)になってIEを除く主要... 続きを読む

擬人化CSSリファレンス GCSS - 擬人化したCSSキャラクターによるCSSの解説サイト

2013/05/10 231 users CSS プライバシーポリシー 利用規約 サイトマップ 広告掲載

擬人化したCSSキャラクターによるCSSの解説サイトGCSS - 擬人化CSSリファレンス 擬人化CSSリファレンスサイトは、CSSプロパティを擬人化し、一覧化したサイトです。また、CSS2〜4のリファレンス情報を掲載しています。 このサイトについて お問い合わせ 運営者|利用規約|広告掲載|プライバシーポリシー|サイトマップ 続きを読む

CSSプロパティの継承：inherit 忘れてたわー | MOL

2013/04/09 37 users MOL わー 継承

最近のスマホサイトとかコーディングしてるとこーゆうリストビューのコンポーネントをよくマークアップする。リストのひとつの項目全体がタップエリアで遷移したりなんかアクションしたりする。 こーゆのコーディングするとなると、ul > li > aでaをblock要素にしたりする。そんとき、上記の普通のテキスト文もリンクテキストになってしまって、いわゆる青色の下線テキストリンクのようなスタイルになってしまう... 続きを読む

CSSのcounter-incrementを使ってリスト以外に番号を付ける方法｜Webpark

2013/02/18 98 users counter-increment Webpark CSS

あまり使っているのを見たことがないマイナーなCSSプロパティ「counter-increment」を使ったサンプルを紹介します。 「counter-increment」というプロパティを初めて聞いたという方も多いかもしれません。「counter-increment」は、サンプルのように番号を自動的に付けるときに使われます。リスト（list-style-type: decimal）のような感じですね... 続きを読む

CSS3も少し入れつつ自分流CSSプロパティの書き順を決めてみた｜Webpark

2013/02/14 122 users Webpark 書き順 background 略し方 試行錯誤

どの段階にあるかはCSS current work & how to participateで確認できます。 また、list-style、backgroundなどのように略せるものは略して書くようにしていますが、略さない場合も下に載せています。略し方については「まとめて書くことができるCSSプロパティの8つのパターン｜Webpark」をご参考に。 若干それましたが、試行錯誤して並べた結果がこちらで... 続きを読む

【便利ツール】CSScomb for sublime text 2で、CSSプロパティを整理・整頓【16日目】 ｜ クラスメソッド開発ブログ

2012/12/16 50 users 整頓 クラスメソッド開発ブログ 整理 便利ツール

Sublime text 2で使ってみる 最近、注目されているSublime text 2にお世話になっているので、今回はSublime text 2の手順で作業してみようと思います。 それでは早速CSScombのプラグイン（パッケージ）をインストールしてみましょう。 Sublime text 2の詳しい説明は下記をご参照ください。 【追記】【寄せあつめ】今さらだけどSublime Text 2の... 続きを読む

まとめて書くことができるCSSプロパティの8つのパターン｜Webpark

2012/11/06 69 users Webpark パターン ８つ

まとめて書くことができるCSSのプロパティを集めてみました。基本的な内容が多くなっていますので復習に見ていただければ幸いです。 先日は基本的なセレクタの使い方について書きましたので、今度はプロパティの基本ということでまとめてみました。 1. border まずはボーダーです。よく使いますね。 border-width　…　線の太さ border-style　…　線の種類 border-color　... 続きを読む

jQueryの便利に使えるスニペット１０:phpspot開発日誌

2011/11/25 66 users target blank パラメータ アンカー jQuery

10 awesome jQuery snippets | CatsWhoCode.com jQueryの便利に使えるスニペット１０。 次のような使えそうなスニペットが１０個あります 画像のプレロード rel="external"なリンクのtarget="_blank"化 アンカーへのスムーススクロール divカラムの高さを合わせる CSSプロパティに対応しているかテストする URLのパラメータを得... 続きを読む

フレキシブルなボタン - Weblog - hail2u.net

2011/05/14 30 users Weblog hail2u.net RGBa ボタン CSS

ほぼ全てのCSSプロパティの値を相対値やrgba()カラーを利用して指定することによって、コピペしてフォント及び色の調整をするだけで使い回せる基本的なボタンを作ってみました。完成度は85%くらい。 View Demo: Flexible Button ベースとなるCSSは以下のようなシンプルなものです(もちろんベンダー拡張は省略していますが)。完全なコードはデモのページにあります。 button ... 続きを読む

基礎から理解するためのCSS3に関するサイトのまとめ｜Webpark

2011/02/22 684 users まとめ｜Webpark 基礎 CSS3 HTML 先行

CSS3はIEが対応できていないこともあって、今まであまり紹介してませんでしたが、使いこなせると面白そうなのでまとめてみました。CSS3リファレンス有名なサイトですね。CSS3に限らず、HTMLやJavaScriptなど膨大な情報量です。CSS-EBLOG各ブラウザで先行実装しているCSSプロパティがまとめられています。次にブラウザごとの対応状況を確認するサイトを紹介。HTML5 & CSS3 R... 続きを読む

【ハウツー】FirebugにHTML/CSSリファレンスをアドオン! - FireScope (1) あのプロパティの使い方なんだっけ? これからはFireScopeで一発! | エンタープライズ | マイコミジャーナル

2009/02/23 375 users Firebug リファレンス アドオン ハウツー プロパティ

あのプロパティの使い方なんだっけ? これからはFireScopeで一発! SitePoint.comは1月27日(米国時間)、Firebug上で動作するアドオン「FireScope v1.0.1」をリリースした。FireScopeはFirefox2-3のFirebug1.2以降で動作するアドオン。各種HTMLエレメントやCSSプロパティといった要素のリファレンスと各種ブラウザの対応状況、サンプルコ... 続きを読む