残念ながらこれはできないようです。
こちらのサイト に変換したい色を入力すると、黒色から指定の色に変換する 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>
svg をhtml内にコードとして貼り付けて、class をつけて、 fill または stroke プロパティで色をつけます
<link rel="stylesheet" href="style.css">
↓
<link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="stylesheet" href="style.css">
↓
<link rel="stylesheet" href="style.css" media="print" onload="this.onload=null; this.media='all'" />
<link rel="stylesheet" href="style.css">
↓
<link rel="preload" href="style.css" as="style">
この先読みはあくまで後で使うためにリソースを先に読んでおくだけで、実行(適用)はされません
新しい記述方法
.popup{
position: fixed;
inset: 0;
margin: auto;
}
昔の記述方法
.popup{
position: fixed;
left: 50%;
top: 50%;
transform: translateX(-50%)
translateY(-50%);
}
margin-top: auto; で画面下固定になります。
.container {
height: 100%;
display: flex;
flex-wrap: wrap;
flex-flow: column;
}
.footer {
margin-top: auto;
}
.br_half {
display: block;
content: "";
margin: 0.5em 0;
}
<br class="br_half">
作業フォルダに移動してから次のコマンドを実行します
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(このファイルをコンパイルする)
src/css/pico.css を生成します
sass ./src/scss/pico_scss/pico.scss ./src/css/pico.css
.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 を表示させます
./src/scss/pico_scss/themes/default/_colors.scss
// Light Blue
$primary-hue: 195 !default;
↓
// Light Blue
$primary-hue: 360 !default;
として再度コンパイルするとボタンの色が変わります。
./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;
DartJS Sass Compiler and Sass Watcher https://marketplace.visualstudio.com/items?itemName=codelios.dartsass
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>
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>
ul {
padding-left: 20px;
list-style-type: disc;
list-style-position: outside;
}
.my_container {
display: flex;
justify-content: flex-end;
}
.my_container {
display: flex;
justify-content:space-between;
flex-wrap: wrap;
}
対応方法 : CSS ファイルを読み込んだ後になんかしらの JavaScript を実行すれば OK です。
<link rel="stylesheet" href="/assets_front/css/style.css">
<script>console.log("prevent Google Chrome css Transition");</script>
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
2行を超える場合に ... を表示します。
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
span:not(:last-child) {
margin-right: 25px;
}
span:not(:last-of-type) {
margin-right: 25px;
}
span:not(:first-of-type) {
margin-right: 25px;
}
:first-childの定義の勘違いが主な原因です。
最初に現れる子要素、という指定は、指定したプロパティの中で最初に現れるこ要素ということではなく、全てのタグを含めた初めに現れる子要素という意味です。
どうゆうことかというと。
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:600;
font-weight:600; に変更する。
引用: https://speakerdeck.com/clockmaker/better-font-family-2019-in-japanese
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
まとめて指定する例:
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;
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;
}
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;
}
How To Create a Pure CSS Dropdown Menu こちらで紹介されています。
デモ
https://line25.com/wp-content/uploads/2012/css-menu/demo/index.html
親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_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