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 で長いテキストを ... で表示する

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
No.1842
08/23 20:43

edit

css で 最後の要素以外

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

span:not(:last-child) {
    margin-right: 25px;
}
No.1710
04/17 11:02

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
No.1398
12/20 17:35

edit

添付ファイル