2020-06-27 CSSで親要素を無視（突き抜ける）して画面幅いっぱいに広げる方法 CODE 特定のセクションのみ横幅いっぱいに背景があるデザインって多くないですか？今回はそんなデザインのコーディング時のテクニックをご紹介します。 #CSS#HTML
2020-05-31 【バグ】Safariでborder-radiusがhoverアニメーション中に効かない場合の対応 CODE 以前案件で「iPhoneで丸くトリミングしてる画像が一瞬四角の画像になるんだけど？」と言われて調べたところiPnoneではなくSafariでborder-radiusが効かない場合があることがわかりました。この記事ではその対処法を紹介します。 #CSS#HTML
2020-03-13 JavaScriptで一文字ずつspanで囲む方法【主に一文字ずつのアニメーションに使用】 CODE 文字を一文字ずつアニメーションさせようとする場合は一文字ずつspanタグで囲んでcssでアニメーションさせるのが一般的だと思いますが、そのアニメーションさせる文字数が5文字程度であれば手作業でspanタグで囲んでもいいのですが20や30文字と文字数が多くなるにつれてその作業は大変になります。この記事では文字を span タグで手作業で囲む作業を JavaScript を使用して楽にする方法を紹介します。 #CSS#JavaScript
2020-03-05 CSSのobject-fitをIEに対応させる方法 JavaScriptを使用します【object-fit-images】 CODE object-fitってすごい便利なCSSなんですけどIEでは効かないんですよね...この記事ではobject-fitをIEで効くようにできるJavaScript、object-fit-imagesをご紹介します。Sassを使用してる方向けにもmixin化したものも紹介します。 #CSS#JavaScript
2020-02-28 【Sass】特定の親セレクタの状態を変更するmixin ネスト外にも対応 CODE ネストされたセレクターの深い位置から上から上のセレクターの状態を楽に変更できるmixinを紹介します！BEMで書いている場合はネストをあまりせずに独立してスタイルを書くことが多いと思いますがそれにも対応しています。 #CSS
2020-02-28 Sassでネストされたセレクタの直前の親セレクタを取得する関数 CODE Sassでmixinを作成しているときにネストされたセレクターの直前の親セレクターが欲しいときがあったので、それを取得する関数を作ってみました。 #CSS
2020-02-09 【簡易版】スクロール時に画面内に入ってきたらCSSでアニメーション！JavaScriptはコピペOK！ CODE この記事ではスクロールに応じて特定の要素（HTML）画面内に入って来た場合にCSSでアニメーションさせる方法をご紹介します。JavaScriptを使用しますがコピペでOKです。 #CSS#JavaScript
2020-01-30 CSSアニメーションの開始時・終了時・ループ時にjavascriptで処理をする方法 CODE cssアニメーションの開始時や終了時などに処理を加えたいと思ったことはありませんか？javascriptを使えばcssアニメーション（animationもしくはtransition）の開始や終了を取得できるイベントが用意されていますのでこの記事ではその方法をご紹介します。 #CSS#JavaScript
2020-01-19 【ScrollMagic】スクロールに応じてclassを付与しcssでアニメーション【ES6】 CODE webサイトを閲覧していてスクロールに反応して要素がフェードインしてくるなどのアニメーションを見たことがありませんか？この記事では僕が実際に案件で使用しているスクロールに反応するアニメーションの実装方法をご紹介していきます。 #CSS#JavaScript
2019-08-03 tableでcss擬似要素のcontent: attr()を使用したレスポンシブ方法 CODE tableのレスポンシブ対応ってすごく面倒だと思いませんか？・table内で横スクロールを実装する・単純にdisplay: block;で対応などありますがcss擬似要素のcontent: attr();を使用した方法を紹介します。 #CSS
