カテゴリー「CSS」
【css】行数指定でテキストを省略できるline-clampを使ってみた【IE11別途対応】
こんにちは、しばです。 サイト制作をしていると、文章の行数を制御したいところがちょこちょこ出てきますよね。 例えば、ブログの記事一覧のリード文。 私はこれまでテンプレート側で出力文字数を制限して対応していたんですが、微調整効かないのでレスポ...
object-fitを使って簡単にサムネ表示やメインビジュアルをスタイリングする
こんにちは、しばです。 ぱっと見では同じレイアウトでも、コーディング方法がいくつかあることって多いですよね。 メインビジュアルやサムネイル表示等で画像の見栄えを整えたいとき、私は背景画像やpositionプロパティに頼ることが多かったんです...
z-indexが効かない場合はtransformに気をつけよう!【Safari】
こんにちは、しばです。 この間、iPhoneとMacのSafariブラウザでcssのz-indexが効かない、なぜか指定した順番通りにならないという事象が発生しました。 どうやらtransformが怪しそう...ということで、調査して修正方...
iPhoneでanimation-delayがうまく動かない時の対処法
こんにちは、しばです。 前回に引き続きCSSのアニメーション問題です。 今回はiPhoneブラウザ(safari/chrome両方)で、animation-delayでアニメーションを遅延させているはずの要素が、おかしなタイミングでアニメー...
Firefoxでkeyframeアニメーションがカクカクしてしまう時の対処法
こんにちは、しばです。 この間Animate.css & wow.jsを使っていたところ、とあるアニメーションがFirefoxで非常にカクカクとした挙動になることが発覚。 Firefoxはシェア率が低いためいつもスルーしてるんですが...
CSSとSVGで簡単にラインアニメーションを作る方法【Illustrator初心者向け】
以前はsvg単体のアニメーションを作りましたが(「【SMIL】SVGアニメーションでsvgのキャラ画像を動かそう!」)、今度は前々から気になっていた文字を書くラインアニメーションを調べてみました。 ということで、svgとcssを使った、Il...