[CSS] 1行で収まらなずに要素の幅を超えた文字列を「…」で省略する方法
CSS で超過文字を省略したい レイアウトの調整する為に、要素からはみ出すような文字を省略して表示したいことがよくあります。 例えば、超過した文字を折り返して表示すると要素の高さが揃わなくて不細工になったりする場所や、スクロール表示ができないような場所です。1行で収めたいけど尻切れトンボになってしまうと見栄えがよろしくないという場合、文章末尾に「…」と三点リーダーをつけて、ユーザーに続 […]
CSS
CSS でテキストを流れるように動かす方法(marquee)
CSS でテキストを流れるように動かしたい 表示されているテキストを右から左に流して、あふれたテキストが全部読めるようにスクロールする、みたいな動きをCSSで実装してみます。イメージとしては、駅のホームにある電光掲示板のあの感じです。 Javascriptを使えばいくらでもやりようがあるのでしょうが、今回はCSSのアニメーションを使って実装します。CSSのアニメーションは、IE11以降、モダンなブ […]
position: sticky; を使ってスクロールに追随する固定要素を作る
CSSでスクロールに追随して位置を固定させたい スクロールしてもある位置で固定され続けるような要素を実現するためのCSS、position: sticky; の使い方についてまとめます。 例えば画面上部で固定表示されるヘッダーや、画面をスクロールして画面上部まで来た時点で固定されるようなサイドメニューなどです。jQueryなどを使って実現できますが、新しいCSSの position: sticky […]
- 2017.01.25
- CSS,
[CSS] Font Awesome を CSS 上から attr() で指定する方法
Font Awesome を CSS 上から attr() で指定する方法 例えばボタンにフォントを付けるために次のようなコードを書けます。 <style> #TestBtn1:before { font-family: FontAwesome; content: '\f06e'; } </style> <button id="TestBtn1">button& […]