[B! *CSS] katz1955のブックマーク

CSSで実装したレイアウトの構造や階層を簡単に確認できる、私のお気に入りのCSSハック -My favorite CSS hack

flexboxで実装したレイアウトはもちろん、floatでもgridでもCSSで実装したレイアウトの構造や階層を確認できるスタイルシートを紹介します。ページ上の各要素のサイズ・マージン・パディングなどに不整合がないか簡単に確認でき、スニペットやブックマークレットに登録しておくと便利です。 My favorite CSS hack by Gajus Kuizinas 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 5年もの間、私がコピペして利用してきたCSSのスニペットを紹介します。 * {background-color: rgba(255,0,0,.2)} * * {background-color：rgba(0,255,0、.2)} * * * {background-color：rgba(0,0,255、.2)} * *

katz1955 2019/09/10

*CSS

リンク

[CSS]知っておくと便利！レスポンシブ用に画像を配置するスタイルシートの5つのテクニック

何らかの理由で画像をレスポンシブ対応にうまく配置できない時があるかもしれません。何時間もかけて、いろいろな実装方法を試すこともあるでしょう。 CSSハックは無しで、レスポンシブ用に画像のサイズ変更を処理して配置するスタイルシートの5つのテクニックを紹介します。 Time-saving CSS techniques to create responsive images by Adrien Zaganelli 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。画像に適した方法で実装しよう画像を配置するこれからのテクニック IEでも機能する、Netflixで使用されているテクニック簡単な方法パフォーマンスを考慮した方法（上級）レスポンシブ対応の画像を実装する時の流れ画像に適した方法で実装しよう今、金曜日の17時だとします。

katz1955 2018/08/28

*CSS

リンク

CSSの単位「rem」を使ったフォントサイズの計算を自動で一覧表示してくれる便利ツール -PxtoRem

フォントサイズの指定によく使用される単位は、相対値で指定できる単位が人気です。中でも、親要素に相対的なemより、常にルートに相対的なremの方が使い勝手がよいでしょう。emを使用すると複利計算になるため、深い階層の子要素はサイズ指定が複雑になってしまいます。ルートに指定したサイズをベースに、px単位でremの指定値を一覧表示してくれる便利なChromeの機能拡張を紹介します。毎回計算していた人には、かなり嬉しいツールだと思います。

katz1955 2018/07/09

*CSS

リンク

宣言ブロックのCSS設計 - kojika17

日本語で「CSS設計」を検索すると、記事やつぶやきなどでセレクタの命名規則に関する話題が多いです。 CSSを設計する上で、命名規則は重要な要素でしょう。簡単なセレクタ名だと他のスタイルと重複する可能性もあります。他のスタイルと重複しないようにセレクタの子孫数を増やしてしまうと、今度はスタイルの取り回しが悪くなります。またデザインをコンポーネントに分ける粒度について紹介されていますが、命名規則の分け方のように紹介されているよう感じます。論理的に構造をわけて命名していくため、覚えやすく、伝えやすさもあわさって、現在の「CSS設計 = 命名規則」のような構図ができあがったと感じています。 CSS設計は命名規則だけか命名規則はCSS設計において、重要な要素です。しかしCSSは命名規則させ気を付ければ良い、というものではありません。私は、すでにあるサイトの一部のコンテンツの作成やすでに用

katz1955 2017/07/19

*CSS

リンク

[コピペ推奨] 最高に楽をしたい人のためのCSSテクニックまとめ | Supership Tech Blog

こんにちは。Supership デザイナーのハガです。今回はcssのお話です。皆さんはcssで、あるデザインを実現しようとした時、あれってどうやるんだっけ？みたいな経験をしたことはありませんか？自分はよくあります。そんな時コピペするだけでokみたいなcssスニペット集があると嬉しいと思い、主に自分のためのメモ的な意味を多分に含みつつご紹介していきたいと思います。（今回紹介しているcss達は主にスマホのためのモダンなブラウザを対象としているため、ieのようなレガシーな感じはごめんなさい。） 10個のcssテクニックコアとなる部分はboldで表現しています。細字の部分はお好きに調整してください。 1.カルーセル<ul class="carousel"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li>

katz1955 2017/03/24

*CSS

リンク

CSS3のセレクタ全42種まとめておさらい使い方リファレンス | WP-E (仮)

こんにちわ。WP-Eイクラこと@ampersand_xyzです。 CSS3のセレクタ、ちゃんと覚えてる？普段使わなかったりするようなセレクタって、すっかり脳みそから抜け落ちてしまい、適用されているスタイルを確認したときにあれ？コレなんだったっけ？というセリフを何度心のなかでつぶやいたか分かりません。また、場面によって必要に応じたセレクタを使えてるかどうかというところも気になるところ。どんなセレクタがあるのかを覚えておけば、たとえばDOMの動的生成をするときに無駄な分岐処理をしてstyle適用とか、JSでゴリゴリスタイル付与とかしなくてよくなるはずです。おさらい用チートシート作成を兼ねて、Selector Level3 のSelectorsについて、セレクタの記法と使い方のgistつけてまとめていきたいと思います。なお、仕様書の日本語訳は以下のページをご参照ください http:/

katz1955 2017/03/09

*CSS

リンク

CSSコーディングで泣かないためのSassの基礎知識と10の利点

CSSコーディングで泣かないためのSassの基礎知識と10の利点：爆捗！ WordPressテーマ作成ショートカット（3）（1/3 ページ）本連載では、CMSのスタンダードでもある「WordPress」のテーマ作成を、Dreamweaverをメインに用いてさまざまなモダンな技術を組み合わせながら爆発的に捗（はかど）らせる方法を解説していく。今回は、現場におけるCSSコーディングの3つの問題点、Sassの概要と主な10の機能、SASS記法とSCSS記法の違いなどを紹介。本連載「爆捗！ WordPressテーマ作成ショートカット」では、初回の「Dreamweaverで始めるWordPressサイト構築の基礎知識」で、「Adobe Dreamweaver CC」（以下、Dreamweaver）でWordPressのテーマをカスタマイズできるようにする環境構築や設定を行い、前回の「WordPr

katz1955 2017/03/09

*CSS

リンク

http://o-ands.net/css_hover_howto/

katz1955 2017/03/09

*CSS

リンク

:link、:visited、:hover、:active の記述順序とその覚え方 - jmblog.jp

スタイルシートでa要素のリンクのデザインをする際に、次のように 4 つの擬似クラスを用いることが多いと思います。 a:link { color: blue; } a:visited { color: purple; } a:hover { color: red; } a:active { color: yellow; } 実はこの 4 つの擬似クラスの記述順序には注意が必要で、 link visited hover active の順番で記述しないと意図した結果にならなかったりします。この順序についてちょっと調べてみたので、まとめてみたいと思います。なぜこの順番じゃなければダメなのか？実践 Web Standards Design には、次のように書かれています。 :hover 擬似クラスと:active 擬似クラスは一連の動作であるので、スタイルシート内でもこの順番で記述しないと有効

katz1955 2017/03/09

*CSS

リンク

はじめてのCSS　INDEX

CSSのセレクター（Selectors）の種類と使い方【65】CSSのセレクターを整理しよう（セレクター一覧）【65-1】エレメンタルセレクター（要素名で指定するセレクター）（ちょっとメモ）「,」で区切る「セレクターリスト」【65-2】結合子を使うセレクター（E F,　E > F,　E + F,　E ~ F）【65-3】属性セレクター　[att] [att="val"] [att~="val"] [att|="en"] 【65-3】属性セレクター　[att^="val"] [att$="val"] [att*="val"] 【65-3】属性セレクター　[att="val" i] [att="val" s] 【65-3】クラスセレクター（.）と IDセレクター（#）（ちょっとメモ）名前空間（ネームスペース）とCSSセレクター【66】擬似クラスと疑似要素（2つの違いとそれぞれの