いざという時のために覚えておくと便利なHTML＆CSS Tips集の第2弾です。何かで困った時に読み返してみてください。何かでお役にたてると思います。
グラデーションを使ったテキストアニメーション
See the Pen
Text gradient animation by BUILD (@buildstd)
on CodePen.
テキストカラーにグラデーションを使ったアニメーションを施す方法。
テキスト要素の背景にanimation プロパティでアニメーションさせたグラデーションを設定し、background-clip: text で背景グラデションをテキストのかたちに切り抜くイメージです。color: rgba(0 0 0 / 0) でテキストカラーを透明にしないと背景グラデーションが表示されないので指定します。
p {
color: rgba(0 0 0 / 0);
-webkit-background-clip: text;
background-clip: text;
background-image: linear-gradient(23deg, #a3c8e5, #225489, #26b6af, #288088);
background-repeat: no-repeat;
background-size: 400% 400%;
animation: textGradient 9s ease infinite;
}
@keyframes textGradient {
0% {
background-position: 0% 50%;
}
25% {
background-position: 100% 50%;
}
50% {
background-position: 50% 100%;
}
50% {
background-position: 0% 100%;
}
100% {
background-position: 0% 50%;
}
}サンプルでは、background-size: 400% 400% と背景サイズを大きくとり、@keyframes でbackground-position の値を変えることで、背景が動いているように見せています。
CSSグラデーションアニメーションツールの「FUZE」を使うと、色のイメージを確認しながらCSSコードを取得することができるので便利です。
縁取りテキスト
See the Pen
Text stroke by BUILD (@buildstd)
on CodePen.
テキストの縁に線を施す方法です。
p {
color: rgba(0 0 0 / 0);
-webkit-text-stroke: 1px #111;
text-stroke: 1px #111;
}text-stroke を使うことで簡単に縁取り文字が設定できます。執筆時（2023年10月現在）では、全モダンブラウザでベンダープレフィックス（-webkit-）が必要です。
テキストのインフィニティループ
See the Pen
Untitled by BUILD (@buildstd)
on CodePen.
サンプルのように、テキストをCSSでループさせる方法です。
<p class="text-loop">
<span class="text-loop__item">Build a website that conveys your thoughts.</span>
<span class="text-loop__item" aria-hidden="true">Build a website that conveys your thoughts.</span>
<span class="text-loop__item" aria-hidden="true">Build a website that conveys your thoughts.</span>
</p>.text-loop {
display: flex;
overflow: hidden;
}
.text-loop__item {
display: inline-block;
transform: translateX(0);
animation-name: textloop;
animation-duration: 70s;
animation-iteration-count: infinite;
animation-timing-function: linear;
white-space: nowrap;
will-change: transform;
}
@keyframes textloop {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}animation を使って、transform の値を0%から-100%に変えることで、テキストが右から左へ移動しているように見せています。
animation-iteration-count: infinite で、アニメーションの繰り返しを指定。
animation-timing-function: linear で、一定したスピードのアニメーションを指定。
white-space: nowrap で、行の折り返しをしない（2行以上にしない）指定。
will-change: transform で、アニメーションを滑らかなにしています。
animation-duration は、1回のアニメーションが完了するまでの所要時間を指定するのですが、テキスト量（文字数）やフォントサイズによって異なるので、実際に確認しながら調整してください。
また、文字数が少ない、フォントサイズが小さいなど、場合によっては画面横いっぱいに表示できないことがあるので、同じ文章を複数記述しておきます。
<p class="text-loop">
<span class="text-loop__item">Build a website that conveys your thoughts.</span>
<span class="text-loop__item">Build a website that conveys your thoughts.</span>
<span class="text-loop__item">Build a website that conveys your thoughts.</span>
</p>このままだと、スクリーンリーダーを使った際に、同じ文章を繰り返し読み上げられてしまいます。アクセシビリティの観点から、繰り返し部分にaria-hidden="true" を指定し、読み上げ対象外にしておきます。
<p class="text-loop">
<span class="text-loop__item">Build a website that conveys your thoughts.</span>
<span class="text-loop__item" aria-hidden="true">Build a website that conveys your thoughts.</span>
<span class="text-loop__item" aria-hidden="true">Build a website that conveys your thoughts.</span>
</p><span> で括ったテキストを横並びにするため、親要素にdisplay: flex を指定。overflow: hidden ではみ出した部分をスクロールさせない指定をしておきます。
PCのみhoverを適用する
See the Pen
Media query Hover by BUILD (@buildstd)
on CodePen.
※PCでご確認ください。
PCのみhover スタイルを適用する方法です。正確には、メディアクエリでhover に対応しているデバイスのみに適用されます。
@media (hover) {
a:hover {
color: #fff;
background-color: #111;
}
}これは、スマホやタブレットで、リンクをタップした際に一瞬出てくる変化を止めることを目的としています。記事一覧部分をスクロールしているときにも出てくることがあります。
スマホやタブレットには、hoverという概念がないのですが、該当部分をさわった時に意図しないかたちで表示されてしまいます。
@media (hover) を使って、hover に対応しているデバイスのみにスタイルを適用させることで使いやすくします。
ちなみに、@media (hover) は、@media (hover: hover) と同じです。省略することができます。
スムーズなカウントアップアニメーション
サイト読み込み時のオープニングアニメーションや、採用サイト等で数字を強調したい時に見かけるカウントアップアニメーション。
フォントによっては、動画下（白背景の方）のようにブレることがあります。そんなときは、font-variant: tabular-nums を指定することでスムーズに見せることができます。
.counter01 {
font-variant: tabular-nums;
font-feature-settings: "tnum";
}環境によっては、font-variant: tabular-nums だけではブレる場合があるとのことで、font-feature-settings: "tnum" も併記しておきます。
また、このコードはOpenType フォントのみに適用されるので、対応しない場合があります。カウントアップアニメーションを実装するさいは、フォントの選定も気をつけた方が良いです。
サンプルでCodepen を用意したのですが、一部ブラウザにてWebフォントが適用されず、ブレが確認できない状態です。MacのChromeとFirefoxではWebフォントが適用されているので、実際のサンプルをご覧になりたい方は先述したブラウザにてご確認ください。
See the Pen
Count Up by BUILD (@buildstd)
on CodePen.
コンテンツの表示順を変更する
PCとスマホで表示順を変えたいとき、レイアウトに合わせて表示順を変えたいときなどに使える方法です。HTMLの記述順を変えずに、CSSのFlexboxを使ってコンテンツの表示順番を変更します。
Flexbox order
See the Pen
Flex order by BUILD (@buildstd)
on CodePen.
親要素にdisplay: flex を指定し、子要素にorder を指定することで順番を変えることができます。
<div class="container">
<div class="item item01">4</div>
<div class="item item02">3</div>
<div class="item item03">2</div>
<div class="item item04">1</div>
</div>.container {
display: flex;
}
.item01 {
order: 1;
background-color: #eee;
}
.item02 {
order: 0;
background-color: #ddd;
}
.item03 {
background-color: #ccc;
}
.item04 {
order: -1;
background-color: #bbb;
}order の値は、以下の順で表示されます。
-1などのマイナス値 → 0 → 1などのプラス値
未指定の要素がある場合は、HTML記述順で表示されます。サンプルにように、order: 0を指定した要素と未指定の要素が隣り合っている場合は、HTML記述順で「3の要素」 → 「2の要素」となります。
Flexbox row-reverse
See the Pen
Untitled by BUILD (@buildstd)
on CodePen.
親要素にdisplay: flex を指定し、子要素にflex-direction: row-reverse を指定することで表示順を変えることができます。
サンプルでは、1行目はHTMLの記述順、2行目はHTMLの記述順とは逆にしています。
.wrapper:nth-child(even) {
flex-direction: row-reverse;
}:nth-child(even) は、偶数番目にスタイルを適用させるときに使う擬似クラスです。flex-direction: row-reverse で並び順を逆にしています。
CSSのみでスムーススクロール
See the Pen
Scroll behavior by BUILD (@buildstd)
on CodePen.
リンクをクリックすると、同じページ内の指定した箇所にスクロール（移動）するスムーススクロールはこれまでJavaScriptを利用していましたが、CSSで実装可能です。
html {
scroll-behavior: smooth;
}また、画面上部にヘッダーなどを追従している場合には、scroll-margin-top でスムーススクロール後の位置調整をします。
section {
scroll-margin-top: 60px;
}これで、スムーススクロール後にコンテンツがヘッダーに被ることがなくなります。
See the Pen
Scroll behavior by BUILD (@buildstd)
on CodePen.
※サンプル内の赤い線が各セクションの上端です。
第1弾がこちら。