カテゴリー「CSS」

画像を下揃えにしてテキストを回り込ませるレイアウトは紙媒体では結構あると思うんですが、CSSだと実装が難しいですよね。 今回見つけた方法がスマートだったので紹介したいと思います。 キモとして利用するのはshape-outsideプロパティで...

ファッション系、スタイリッシュ系のウェブサイトで写真が映えるスライドショーを紹介します。 (さらに…)

こんにちは、しばです。 サイト制作をしていると、文章の行数を制御したいところがちょこちょこ出てきますよね。 例えば、ブログの記事一覧のリード文。 私はこれまでテンプレート側で出力文字数を制限して対応していたんですが、微調整効かないのでレスポ...

こんにちは、しばです。 ぱっと見では同じレイアウトでも、コーディング方法がいくつかあることって多いですよね。 メインビジュアルやサムネイル表示等で画像の見栄えを整えたいとき、私は背景画像やpositionプロパティに頼ることが多かったんです...

こんにちは、しばです。 この間、iPhoneとMacのSafariブラウザでcssのz-indexが効かない、なぜか指定した順番通りにならないという事象が発生しました。 どうやらtransformが怪しそう...ということで、調査して修正方...

こんにちは、しばです。 前回に引き続きCSSのアニメーション問題です。 今回はiPhoneブラウザ(safari/chrome両方)で、animation-delayでアニメーションを遅延させているはずの要素が、おかしなタイミングでアニメー...

こんにちは、しばです。 この間Animate.css & wow.jsを使っていたところ、とあるアニメーションがFirefoxで非常にカクカクとした挙動になることが発覚。 Firefoxはシェア率が低いためいつもスルーしてるんですが...

以前はsvg単体のアニメーションを作りましたが(「【SMIL】SVGアニメーションでsvgのキャラ画像を動かそう！」)、今度は前々から気になっていた文字を書くラインアニメーションを調べてみました。 ということで、svgとcssを使った、Il...