css ページ内リンクズレ解消

css

よくある下記でページ内リンクのズレ解消が出来ない時は要素の上に空要素を追加して非表示にする #service { display: block; visibility: hidden; width: 100%; height: 100px; } #service { padding-top: 100px; margin-top: -100px; }

2024-03-05

CSS 画像をマスクで切り抜き

css

<div class="masked"></div> .masked { width: 100px; height: 100px; background-color: #8cffa0; -webkit-mask-image: url(star.svg); mask-image: url(star.svg); mask-repeat: no-repeat; mask-position: 0 0; mask-size: 100%; } 変幻自在なグラフィック表現！CSS, SVG, Canvasで…

2023-03-27

SVGアニメーション作成ツール

css

SVG Artista - SVG Drawing Animation Generator SVGアニメーションジェネレーターを使って簡単に動きをつける

2022-03-22

PHP CSSに自動で日付を入れてキャッシュを読み直す

PHP css

CSSの読込がうまくいかないことがあるので、CSSに自動で日付が入るようにして毎回違うCSSを読み込むと前のキャッシュが残らない。方法としては、 ? をCSSに加える。 <link rel="stylesheet" href="./css/cm_pc.css?<?php echo date('Ymd-Hi'); ?>" type="text/css"> これが一番簡単な方法かと！サーバにアップする際に、『.html』をPHPとして動作させるた</link>…

2022-02-09

疑似要素でpadding-topを指定してブロック要素の縦横比を維持する方法

css

cssのaspect-ratioも随分普及してきましたが、今日は以前からブロック要素の縦横比を維持する方法です。・縦横比を設定したい要素にposition:relativeを設定。（中身はposition:absolute) ・上記の要素に疑似要素を作成してpadding-topで縦横比を設定・中…

2021-12-21

文章がコンテンツからはみ出る時の対処

css

https://techacademy.jp/magazine/9386 https://techacademy.jp/magazine/9386