blog上野谷根千界隈でまったりと暮らしているWeb系フリーランスの雑記ブログです。Webやフリーランス、グルメなどについてもしゃもしゃ書いてます。メニューを開閉するHOMEWebDevelopFoodFreelanceLifeHOMEWebDevelopFoodFreelanceLifeカテゴリー「CSS」CSS2019/11/20【css】行数指定でテキストを省略できるline-clampを使ってみた【IE11別途対応】こんにちは、katori@xxbicottです。サイト制作をしていると、文章の行数を制御したいところがちょこちょこ出てきますよね。ブログの記事一覧のリード文。私はこれまでテンプレート側で出力文字数を制限して対応していたんですが...CSS2018/11/28object-fitを使って簡単にサムネ表示やメインビジュアルをスタイリングするこんにちは、katori@xxbicotです。見では同じレイアウトでも、コーディング方法がいくつかあることって多いですよね。メインビジュアルやサムネイル表示等で画像の見栄えを整えたいとき、私は背景画像やpositionプロパティに...CSS2018/9/26z-indexが効かない場合はtransformに気をつけよう!【safari】こんにちは、katori@xxbicotです。この間、iPhoneとMacのsafariブラウザでcssのz-indexが効かない、なぜか指定した順番通りにならない、という事象が発生しました。transformが怪しそう...と...CSS2018/8/29iPhoneでanimation-delayがうまく動かない時の対処法こんにちは、katori@xxbicotです。前回に引き続きCSSのアニメーション問題です。今回はiPhoneブラウザ(safari/chrome両方)で、animation-delayでアニメーションを遅延させているはずの要素が、おか...CSS2018/8/22Firefoxでkeyframeアニメーションがカクカクしてしまう時の対処法こんにちは、katori@xxbicotです。wow.jsを使っていたところ、とあるアニメーションがFirefoxで非常にカクカクとした挙動になることが発覚。以前はsvg単体のアニメーションを作りましたが(「【SMIL】SVGアニメーションでsvgのキャラ画像を動かそう!」)、今度は前々から気になっていた文字を書くラインアニメーションを調べてみました。WORDPRESS(13)Profilekatori在宅フリーランスのWebデベロッパー(フロントエンドエンジニア、コーダー)です。東京の上野谷根千界隈でまったり仕事してます。