Sass
- Sass、SASS、SCSSの3つの言葉の違い
- Sassで色を明度、彩度、透明度を変更
- CSS ボタンのフォーカス時に色を濃くしたい
- CSSで文字ふち
- CSS(Sass)でグラデ
CSSでグラデにしようとすると・・・ブラウザ対応が面倒なので - Sass:Koalaのインストール
Sassのコンパイラ「Koala(コアラ)」をWin10にインストールする。 - CSS Font Awesome: fa-plus-circle-oが欲しい
「fa-plus-circle」のアウトライン版が無いので・・・がんばる - css svgファイルを色変更して使いたい
ちょっとしたアイコンをsvgにして使いたいんだけど、色を変更したい。ファイルを触らずにCSSで対応したい - sass 似たようなclassをループで作成(each、if、map-get)
配列で回して似たようなclassをまとめて作成する - bootstarp、css: 天地中央、中心揃え、inline時の左右余白関連 / cheatsheet
bootstarpの「col-xx」の中で天地中央にしたい、「display:flex;」で天地中央にしたい...とか。チートシート - Ubuntuでsassのコンパイル(ruby-sass)
コマンドラインでだけどsassをコンパイルしてcssファイルを作成したい - Ubuntu dart-sassを使う
「dart-sass」ってのを使うように言われているらしいので使ってみる - sass dart-sassでbootstrapのprimaryの色を変える(@import, @use)
@importじゃなく@useを使ってbootstrapのprimaryの色を変更したい - sass 「@use」のメモ
- dart-sass map-get()を使う(sass:map、map.get())
map-get()がdart-sassとダメな感じらしい - scss 既存のscssファイルを元に継承してセレクターを追加したい
scssファイルは存在する。そのscssファイルは触らずに継承したクラスを用意したい
dart sass
- Ubuntu dart-sassを使う
「dart-sass」ってのを使うように言われているらしいので使ってみる - sass dart-sassでbootstrapのprimaryの色を変える(@import, @use)
@importじゃなく@useを使ってbootstrapのprimaryの色を変更したい - sass 「@use」のメモ
- dart-sass map-get()を使う(sass:map、map.get())
map-get()がdart-sassとダメな感じらしい
未分類
- form+bootstrap.css
- ワイルドカードを使ったCSS
特定の文字を含むクラスをまとめて設定したいときとか。 - css preタグ内で改行させたい
- css グラフィックアイコンを使う
いわゆるアイコンフォントってヤツを使いたい。 - Bootstrap.css:アラートメッセージに閉じるボタン
- 引用のblockquote、qタグとCSS
- JqueryとCSSでローディング画像
読み込み中のグルグル画像を出しておきたい。できれば画像ファイルを使わずに。 - css 親要素内の下部に固定したい
「position:fixed」だとウィンドウ内の下部に固定できるけど、親要素内は出来ないので「display:flex;」で行う。 - cssのposition
positionのそれぞれ。ウィンドウに対する固定、親要素に対する固定など。 - jqueryでhover時のCSSの記述
hover時のCSSをjqueryで記述したい - CSS「position:absolute」で中央配置
「position:absolute」で左右天地中央、左右中央、天地中央配置 - html フォームの入力項目のグループ化(fieldsetとlegend)
- このサイトで設定したbootstrapの上書きしたCSSとか
基本、自分用でHTMLの構成とクラス名のみ。具体的な中身を知りたいときは、CSSを直接見る感じで。 - jquery 「:hover」や「:active」のCSSを書き換えたい
「:hover」は普通にあるけど「:active」とかが無い。 - inputタグのテキストフィールド内のクリア
formでinputタグのテキストフィールド内のクリアさせる。 - css 要素内の上・下で固定
「position:fixed」はウィンドウ内での固定だけど、求めているのは要素内での固定 - CSS 要素全体の半透明と背景色のみ半透明
半透明にしたいけど文字とかは半透明にしたくない。 - CSSで影付き
枠や文字、透過画像に対してCSSだけで影をつけたい。 - javascript CSSから「:hover」で指定されているスタイルを無効にする
スマホ端末でリンクやボタンをタッチした後に「:hover」のスタイルが残ってしまうので、どうにかしたい - css floatの解除(.clearfix)
floatを解除するときに使うCSS - CSS IEで「initial」が使えない
CSSの設定を初期化する「initial」。IEは非対応だそうだ。 - CSS formのinputやselectなどに背景色をつける
バリデーションチェックでエラーなヤツらに背景色をつけたい - css textareaとinputの書体を統一
指定をしないとtextareaとinputで書体が異なるっぽい。ブラウザの問題かもしれない。 - SVGとCSS・HTMLで拡大・縮小してもぼやけない画像
ベクトルデータなので拡大・縮小しても問題無しな画像・・・だそうだ。 - CSS ボタンの無効関連
- 「.map(ソースマップファイル)」が404エラー
404自体は問題ないけど、404が原因で他のトコでエラーになるという問題発生したので・・・その解決にいたるまで。 - css、JS フォントサイズを親要素に合わせたい
フォントサイズをウィンドウサイズじゃなくて親要素に合わせたい - css/jquery クリックやタップしたときの枠線を消す(focus, outline:none, blur())
ブラウザの問題かCSSだけでは対応できないこともある。そのときはJSでフォーカス解除(blur())。 - css 固定幅と可変幅の組み合わせ(display:flex;、width:calc()、flex-basis:auto、Bootstrapのcol)
固定幅を引いた幅を設定したい - css 最初の要素、最後の要素だけ(疑似要素: first-of-type, first-child, last-of-type, last-child)
最初の要素だけCSSをあてたい - css 「position:sticky」で右寄せ(right:0)にする
右下に表示させたいけど左下になる・・・ - css tableタグのtdタグを均等に幅を指定したい
tableタグのthタグを固定して、tdタグは残りの幅で均等に分割していほしい - css 〇番目のクラスに何かしたい(疑似要素: first-of-type, first-child, last-of-type, last-child、nth-of-type())
- js iframe内のCSSを変更したい(クロスドメイン)
ドメインの異なるページをiframeで読み込んでCSSを変更したい - 「<!DOCTYPE html>」と「<html>」の違い
想定と異なる出力結果になるので調べていたら「<!DOCTYPE html>」と「<html>」で違いがあるそうだ - CSS 子要素を均等の幅にわけたい(flex)
子要素の数にあわせてCSSを変更するのを避けたい - CSS、JSで中窓 半透明のレイヤーの中に透明の枠を追加したい
一部だけ目立たせる方法の一つに対象以外を半透明のレイヤーを乗せたい…けどそんなコトはできないっぽいので無理やり対応