● svg アイコンの線や背景の色をcssで変更する

● A. ❌ 読み込み + cssの fill または stroke による色変更は出来ません。

残念ながらこれはできないようです。

● B. 読み込み + css の filter による色変更

こちらのサイトに変換したい色を入力すると、黒色から指定の色に変換する filter を生成してくれます。
svg アイコンは黒色で作成しておく必要があります。
https://codepen.io/sosuke/pen/Pjoqqp

例

<img src="icon.svg" class="icon">

<style>
.icon {
filter: invert(64%) sepia(25%) saturate(4945%) hue-rotate(168deg) brightness(93%) contrast(88%);
}
</style>

● C. インライン読み込み + cssによる色変更

svg をhtml内にコードとして貼り付けて、class をつけて、 fill または stroke プロパティで色をつけます

No.2276

01/25 10:57

edit

cssファイル自身のlazyload (preload)

● A. link rel="preload" を使用する

<link rel="stylesheet" href="style.css">

　↓

<link rel="preload" href="style.css" as="style">

● B. media="print" onload="this.media='all'"をつける

<link rel="stylesheet" href="style">

　↓

<link rel="stylesheet" href="style.css" media="print" onload="this.media='all'" />

No.2274

02/03 16:15

edit

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%);
}

引用 : https://bit.ly/3XYY7pq

No.2251

12/07 09:59

edit

flex でフッターの画面下固定

● flex でフッターの画面下固定

margin-top: auto; で画面下固定になります。

.container {
  height: 100%;

  display: flex;
  flex-wrap: wrap;
  flex-flow: column;
}

.footer {
  margin-top: auto;
}

No.2250

12/02 18:51

edit

高さが半分の br

● 高さが半分の br

.br_half {
  display: block;
  content: "";
  margin: 0.5em 0;
}

<br class="br_half">

No.2124

12/29 15:12

edit

Pico.css を使用する

● Pico.css

https://picocss.com/

● 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

pico.css.png ( 31.1 KBytes )　ダウンロード

No.2116

12/22 16:59

edit

添付ファイル

印刷用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>

No.2104

11/25 17:10

edit

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>

引用 : https://bit.ly/3ALIZjp

No.2047

09/27 09:20

edit

css shadow のサンプル

● css shadow のサンプル

https://getcssscan.com/css-box-shadow-examples

No.2023

07/30 16:25

edit

css ul li 改行を揃える

● css ul li 改行を揃える

ul {
	padding-left: 20px;
	list-style-type: disc;
	list-style-position: outside;
}

No.1863

09/27 12:09

edit

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;
}

No.1862

12/16 13:39

edit

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>

No.1845

08/28 09:11

edit

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;

No.1842

08/11 08:44

edit

css で最後の要素以外

● pタグ divタグ spanタグでCSSで最後の要素以外を指定する

span:not(:last-child) {
    margin-right: 25px;
}

span:not(:last-of-type) {
    margin-right: 25px;
}

● last-child と last-of-type の違い

引用: https://bit.ly/3czK9TB

:first-childの定義の勘違いが主な原因です。
最初に現れる子要素、という指定は、指定したプロパティの中で最初に現れるこ要素ということではなく、全てのタグを含めた初めに現れる子要素という意味です。
どうゆうことかというと。

No.1710

09/27 11:58

edit

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

No.1649

01/06 11:01

edit

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

No.1457

03/11 18:28

edit

背景画像を複数指定する

● 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;

No.1412

01/10 16:28

edit

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;
}

引用: https://goo.gl/AyJGb3

No.1409

01/11 15:58

edit

css3だけでグローバルメニューに使えるシンプルなドロップダウンメニューを作成する

● css3だけでグローバルメニューに使えるシンプルなドロップダウンメニューを作成する

How To Create a Pure CSS Dropdown Menu こちらで紹介されています。

デモ
https://line25.com/wp-content/uploads/2012/css-menu/demo/index.html

添付ファイル1

css3_dropdown_menu.png ( 413.9 KBytes )　ダウンロード

No.1398

12/20 17:35

edit

添付ファイル

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

absolute_center.html ( 425.0 Bytes )　ダウンロード

添付ファイル2

margin_vh_center.html ( 416.0 Bytes )　ダウンロード

No.1249

12/05 09:39

edit

添付ファイル

● svg アイコンの線や背景の色をcssで変更する

● A. ❌ 読み込み + cssの fill または stroke による色変更 は出来ません。

● B. 読み込み + css の filter による色変更

● C. インライン読み込み + cssによる色変更

● A. link rel="preload" を使用する

● B. media="print" onload="this.media='all'"をつける

● cssで position : fixed な要素を中央に配置する（上下左右センタリング）

● flex で フッターの画面下固定

● 高さが半分の br

● Pico.css

● Pico.css のインストール

● Pico.css のコンパイル

● index.html を用意する

● （pico.cssのカスタマイズ）ボタンの色を赤に変える

● （pico.cssのカスタマイズ）ブレークポイントを減らして2レスポンシブにしてみる

● VS Codeでコンパイルする

● 印刷用CSSで任意の位置で改行を送信する

● css shadow のサンプル

● css ul li 改行を揃える

● cssの display:flex で 右端に揃える

● cssの display:flex で 両端に揃える

● css transitionを ページ読み込み時にだけオフにする（ for Google Chrome）

● css で長いテキストを ... （3点リーダー）で表示する

● css で長いテキストを ... （三点リーダー）で表示する（1行の場合）

● css で長いテキストを ... （三点リーダー）で表示する（複数行の場合）

● pタグ divタグ spanタグ でCSSで最後の要素以外を指定する

● last-child と last-of-type の違い

● サンセリフになってしまう問題

● font-weight:bold がかなり太くなる問題

● css で 背景画像を複数指定する

● 背景画像をレスポンシブにしてスマホサイズに合わせて自動でサイズ変更させる

● A. 100%表示の場合

● B. width , height を指定する場合

● css3だけでグローバルメニューに使えるシンプルなドロップダウンメニューを作成する

● position : absolute でセンタリング

● margin vh でセンタリング

● A. ❌ 読み込み + cssの fill または stroke による色変更は出来ません。

● flex でフッターの画面下固定

● （pico.cssのカスタマイズ）ブレークポイントを減らして2レスポンシブにしてみる

● cssの display:flex で右端に揃える

● cssの display:flex で両端に揃える

● css transitionをページ読み込み時にだけオフにする（ for Google Chrome）

● pタグ divタグ spanタグでCSSで最後の要素以外を指定する

● css で背景画像を複数指定する