日記です

こちらも書き溜めていたのを放出します。

コーディングの躓きは無限でまとめきれないので、3回以上忘れて調べ直したらメモするルールにしてます。

Photoshopの躓きまとめは こちら

プロパティの読み方がわからない/用語わからない

今でも怪しいのがいっぱい…。基本的なものがまとまっています。

【CSS】『プロパティ』と『値』の読み方をまとめました | 125naroom / デザインするところ（会社）です。

widthって何て読むんですか？ 英語の発音だとウィスですが、わたしはウィドゥスと読んでますよー。ちょっとまと

https://125naroom.com

Web 開発の画面制作のときに使う用語 113選

https://zenn.dev

text-shadowの色を濃くしたい

薄いtext-shadowの色を濃くしたい時の指定方法 | 素材の壺

表現力が豊かになってきたCSS、SEOを考慮してもなるべくHTML＋CSSで出来る表現はしていきたいところですよね。今回はテキストにドロップシャドウの効果を付与できる「text-shadow」について書いてみます。 text-shadowの

https://www.materialpot.com

疑似要素のcontentが文字化けする

beforeやafter疑似要素のcontentプロパティで日本語の文字化けを回避する方法

CSSの擬似セレクタ :before と :after において、content プロパティに日本語を設定すると、表示時に文字化けが起こってしまう場合があります。大半のブラウザでは文字化けが起こらないのですが、マルチブラウザをサポートしなくてはいけないような場合に備え、予防線を張っておく必要があります。 文字化け

https://webllica.com

SCSS変数を使って透明度を調整したい

// ベースとなる色
$base-color: #fff;

// rgbaで透明度を変える
.hoge {
  color: rgba($base-color, 0.8);
}

サイト速度を上げたい

https://zenn.dev

http://yoshi44ever.com

文字の境界線がガタガタになる

borderよりきれいに縁取り文字ができます。

SVG フィルタで縁取り文字を実装する方法 | grip on minds

SVG フィルタ（feMorphology と feComposite）を使用して、縁取り文字を実装する方法を解説します。

https://griponminds.jp

calc内でsassの変数を使いたい

$hoge: 300px;
.box {
    width: calc( 100% - #{$hoge} );
}

SASSで多次元配列を使いたい

Sass Eachで同じスタイルの繰り返し記述を省略する - Qiita

同じスタイルで色を使い分けたい場合each文の基本@each var...] in list or map { ... }配列B: 値, 値, …

https://qiita.com

【Sass】2次元のMap（連想配列）データを扱う例｜eachループ内でmap-get()を利用

【Sass】2次元のMap（連想配列）データを扱う例｜eachループ内でmap-get()を利用｜CSSのメタ言語のSassでは、Map（連想配列）のデータを扱うことができます。Mapでプロパティなどのデータを扱うことでコードを管理しやすくなり、繰り返しデザインする箇所で効率的にデータを利用できます。今回は、そのMapを使用したコーディングの例となり、２次元となるMapのデ……

https://blog-and-destroy.com

命名規則悩む

今でもこれが最適なのか悩みます。

CSS クラスの名前付け (個人的) | knooto

https://knooto.info

【CSS設計】クラスの命名規則について

クラスの命名をするときに意識していることをまとめてみました。世の中には多くのCSS設計方法やクラス命名規則が溢れていますが、どれを取り入れたら良いのかわからない方は、本記事を通してよりよいクラス命名規則とは何かを理解して…

https://eclair.blog

【命名規則】BEMを使った書き方についてまとめてみた【CSS】 - Qiita

実務でCSSをガッツリ書くことになったので、復習の意を込めて自分用のチートシートを作成しました。今回は現場でよく使われているBEMの書き方について調べたことのまとめです。BEMとはBEMはBl…

https://qiita.com