svg アイコンの線や背景の色をcssで変更する
● svg アイコンの線や背景の色をcssで変更する
● A. ❌ ![]()
読み込み + cssの fill または stroke による色変更 は出来ません。
残念ながらこれはできないようです。
● B. ＜img src=＞によるsvg読み込み + css の filter による色変更
こちらのサイト に変換したい色を入力すると、黒色から指定の色に変換する filter を生成してくれます。
svg アイコンは黒色で作成しておく必要があります。
https://codepen.io/sosuke/pen/Pjoqqp
もし 白色のアイコンの場合は
background-color: #000;
を #fff に変更します。
例
<img src="icon.svg" class="icon">
<style>
.icon {
filter: invert(64%) sepia(25%) saturate(4945%) hue-rotate(168deg) brightness(93%) contrast(88%);
}
</style>
● C. インラインsvg読み込み + cssによる色変更
svg をhtml内にコードとして貼り付けて、class をつけて、 fill または stroke プロパティで色をつけます
cssファイル自身のlazyload (preload)
● A. rel="preload" で、読み込ませて読み込み後にスタイルに変更する
<link rel="stylesheet" href="style.css">
↓
<link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
● B. media="print" onload="this.media='all'"をつけて読み込ませる
<link rel="stylesheet" href="style.css">
↓
<link rel="stylesheet" href="style.css" media="print" onload="this.onload=null; this.media='all'" />
● B. link rel="preload" を使用する
<link rel="stylesheet" href="style.css">
↓
<link rel="preload" href="style.css" as="style">
この先読みはあくまで後で使うためにリソースを先に読んでおくだけで、実行（適用）はされません
cssで position : fixed な要素を中央に配置する（上下左右センタリング）
● cssで position : fixed な要素を中央に配置する（上下左右センタリング）
新しい記述方法
.popup{
position: fixed;
inset: 0;
margin: auto;
}
昔の記述方法
.popup{
position: fixed;
left: 50%;
top: 50%;
transform: translateX(-50%)
translateY(-50%);
}
flex で フッターの画面下固定
● flex で フッターの画面下固定
margin-top: auto; で画面下固定になります。
.container {
height: 100%;
display: flex;
flex-wrap: wrap;
flex-flow: column;
}
.footer {
margin-top: auto;
}
高さが半分の br
● 高さが半分の br
.br_half {
display: block;
content: "";
margin: 0.5em 0;
}
<br class="br_half">
Pico.css を使用する
● Pico.css
● Pico.css のインストール
作業フォルダに移動してから次のコマンドを実行します
npm install -g sass
npm install @picocss/pico
mkdir src
mkdir src/scss
cp -r ./node_modules/@picocss/pico/scss ./src/scss/pico_scss
ディレクトリやファイル構成は次のようになります
.
├── node_modules（使用しない）
└── src
├── css
└── pico.css（このファイルをhtmlから読み込む）
└── scss
└── pico_scss
└── pico.scss（このファイルをコンパイルする）
● Pico.css のコンパイル
src/css/pico.css を生成します
sass ./src/scss/pico_scss/pico.scss ./src/css/pico.css
● index.html を用意する
.src/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/pico.css">
<title>Document</title>
<style>
.grid div {
padding: calc(var(--spacing)/ 2) 0;
border-radius: var(--border-radius);
background: var(--code-background-color);
font-size: 87.5%;
text-align: center;
}
</style>
</head>
<body>
<main class="container">
<h1>Hello, world!</h1>
<h2>Hello, world!</h2>
<h3>Hello, world!</h3>
<h4>Hello, world!</h4>
<h5>Hello, world!</h5>
<h6>Hello, world!</h6>
<article data-theme="light" aria-label="Forced light theme example">
<h3>Light theme</h3>
<form class="grid">
<input type="text" name="login" placeholder="Login" aria-label="Login" autocomplete="nickname" required="">
<input type="password" name="password" placeholder="Password" aria-label="Password" autocomplete="current-password" required="">
<button type="submit" aria-label="Example button" onclick="event.preventDefault()">Login</button>
</form>
</article>
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
</main>
</body>
</html>
ブラウザで index.html を表示させます
● （pico.cssのカスタマイズ）ボタンの色を赤に変える
./src/scss/pico_scss/themes/default/_colors.scss
// Light Blue
$primary-hue: 195 !default;
↓
// Light Blue
$primary-hue: 360 !default;
として再度コンパイルするとボタンの色が変わります。
● （pico.cssのカスタマイズ） ブレークポイントを減らして2レスポンシブにしてみる
./src/scss/pico_scss/_variables.scss
$breakpoints: (
xs: 0,
sm: 576px,
md: 1002px,
lg: 1002px,
xl: 1002px,
) !default;
// Viewports
// 'null' disable the viewport on a breakpoint
$viewports: (
sm: 510px,
md: 1000px,
lg: 1000px,
xl: 1000px
) !default;
● VS Codeでコンパイルする
DartJS Sass Compiler and Sass Watcher https://marketplace.visualstudio.com/items?itemName=codelios.dartsass
添付ファイル1
){kind=link}
印刷用CSSで任意の位置で改行を送信する
● 印刷用CSSで任意の位置で改行を送信する
css
.page-break-before {
page-break-before:always
}
html
<div class="page-break-before">
<p>この文章の直前で改ページさせる</p>
</div>
テーブルに設定する場合は次のようにします
<head>
<style>
@media print {
tr.page-break { display: block; page-break-before: always; }
}
</style>
</head>
<tr class="page-break"></tr>
table ヘッダ 固定のcss
tabl ヘッダを固定して、テーブルのスクロールさせるcssです。 テーブル全体をラッパータグで囲います。
css
.mytable__wrapper {
height: 100px;
overflow-y: scroll;
}
table.mytable {
text-align: left;
position: relative;
border-collapse: collapse;
}
table.mytable th,
table.mytable td{
padding: 1rem;
border: solid 1px #ddd;
}
table.mytable th {
color: red;
background: white;
position: sticky;
top: 0;
}
<div class="mytable__wrapper">
<table class="mytable">
<thead>
<tr>
<th>見出し1</th>
<th>見出し2</th>
<th>見出し3</th>
<th>見出し4</th>
<th>見出し5</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ1</td>
<td>データ2</td>
<td>データ3</td>
<td>データ4</td>
<td>データ5</td>
</tr>
<tr>
<td>データ1</td>
<td>データ2</td>
<td>データ3</td>
<td>データ4</td>
<td>データ5</td>
</tr>
<tr>
<td>データ1</td>
<td>データ2</td>
<td>データ3</td>
<td>データ4</td>
<td>データ5</td>
</tr>
<tr>
<td>データ1</td>
<td>データ2</td>
<td>データ3</td>
<td>データ4</td>
<td>データ5</td>
</tr>
<tr>
<td>データ1</td>
<td>データ2</td>
<td>データ3</td>
<td>データ4</td>
<td>データ5</td>
</tr>
</tbody>
</table>
</div>
css ul li 改行を揃える
● css ul li 改行を揃える
ul {
padding-left: 20px;
list-style-type: disc;
list-style-position: outside;
}
cssの display:flex で 右端にそろえる / 両端に揃える
● cssの display:flex で 右端に揃える
.my_container {
display: flex;
justify-content: flex-end;
}
● cssの display:flex で 両端に揃える
.my_container {
display: flex;
justify-content:space-between;
flex-wrap: wrap;
}
css transition ページ読み込み時 オフ
● css transitionを ページ読み込み時にだけオフにする（ for Google Chrome）
対応方法 : CSS ファイルを読み込んだ後になんかしらの JavaScript を実行すれば OK です。
<link rel="stylesheet" href="/assets_front/css/style.css">
<script>console.log("prevent Google Chrome css Transition");</script>
css で長いテキストを ... で表示する
● css で長いテキストを ... （3点リーダー）で表示する
● css で長いテキストを ... （三点リーダー）で表示する（1行の場合）
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
● css で長いテキストを ... （三点リーダー）で表示する（複数行の場合）
2行を超える場合に ... を表示します。
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
css で 最後の要素以外または最初の要素以外（2番目以降）のセレクタ
● CSSで「spanタグの最後の要素以外」を指定する
span:not(:last-child) {
margin-right: 25px;
}
span:not(:last-of-type) {
margin-right: 25px;
}
● CSSで「spanタグの最初の要素以外（2番目以降）」を指定する
span:not(:first-of-type) {
margin-right: 25px;
}
● last-child と last-of-type の違い
:first-childの定義の勘違いが主な原因です。
最初に現れる子要素、という指定は、指定したプロパティの中で最初に現れるこ要素ということではなく、全てのタグを含めた初めに現れる子要素という意味です。
どうゆうことかというと。
Mac OS Catalina （10.15）のフォント問題に対応する
● サンセリフになってしまう問題
font-family: Meiryo, "Hiragino Kaku Gothic ProN", sans-serif
↓
font-family: Meiryo, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif
"Hiragino Sans" を追加する。
● font-weight:bold がかなり太くなる問題
font-weight:bold;
↓
font-weight:600;
font-weight:600; に変更する。
引用: https://speakerdeck.com/clockmaker/better-font-family-2019-in-japanese
css「複数行または1行のテキスト」を縦センタリング する
display: flex; を使用します。
.waku {
padding: 0 15px 0 15px;
width: 400px;
height: 150px;
border: solid red 1px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.elem {
flex: 1;
}
デモ : https://pgmemo.tokyo/livedemo/css_flex_vertical_center/css_flex_vertical_center.html
背景画像を複数指定する
● css で 背景画像を複数指定する
まとめて指定する例:
background:
url("waku_border.svg") 0px 65px repeat-x,
url("waku.png") 0px 70px repeat-x;
別々に指定する例:
background-image:
url("waku_border.svg") ,
url("waku.png");
background-position:
0px 65px ,
0px 70px;
background-repeat:
repeat-x,
repeat-x;
cssで背景画像をスマホサイズに合わせて自動でサイズ変更させる
● 背景画像をレスポンシブにしてスマホサイズに合わせて自動でサイズ変更させる
● A. 100%表示の場合
html
<div class="myimg">風景写真。このテキストは非表示になります。</div>
scss
.myimg {
background: url("#{$img_folder}/xxxxx.jpg") 0 0 no-repeat;
height: 0;
padding-top: 75.15%; // 画像の高さを100%とした時の画像の幅%
background-size: contain;
overflow: hidden;
text-indent: -100%;
white-space: nowrap;
}
● B. width , height を指定する場合
html
<div class="myimg">風景写真。このテキストは非表示になります。</div>
scss
.myimg {
width: calc( 50vw - 20px );
width: calc( (50vw - 20px) * 0.7515 );
background: url("#{$img_folder}/xxxxx.jpg") 0 0 no-repeat;
background-size: contain;
overflow: hidden;
text-indent: -100%;
white-space: nowrap;
}
css3だけでグローバルメニューに使えるシンプルなドロップダウンメニューを作成する
● css3だけでグローバルメニューに使えるシンプルなドロップダウンメニューを作成する
How To Create a Pure CSS Dropdown Menu こちらで紹介されています。
デモ
https://line25.com/wp-content/uploads/2012/css-menu/demo/index.html
添付ファイル1
){kind=link}
cssで position : absolute な要素を中央に配置する（上下左右センタリング）
● position : absolute でセンタリング
親DIVに
position: relative;
を指定してから、センタリングしたい要素に以下の指定を行います。
.absolute_center {
position : absolute;
top : 50%;
left : 50%;
transform : translate(-50%, -50%);
}
デモ : https://pgmemo.tokyo/data/filedir/1249_1.html
● margin vh でセンタリング
.margin_vh_center {
margin : 50vh auto 0;
transform : translateY(-50%);
}
デモ : https://pgmemo.tokyo/data/filedir/1249_2.html
どちらも Windows IE11 OK！ です
引用 : https://coliss.com/articles/build-websites/operation/css/absolute-centering-with-css.html
添付ファイル1
添付ファイル2