CSS 画像のぼかし、補正 CSSのfilterを使って簡単な画像補正が可能です。何がどう調整できるのかサンプル一覧を作りました。 フォトショップを使わずにCSSでも画像の補正がかなりできるようになりました。 たくさんの種類があるので、どんなことができるのか並べてみましょう。 画... 2019-07-30 22:28:24
CSS ヘッダー固定 ヘッダーやフッターなど、バナーやメニューを簡単に固定できるCSSのposition:stickyのサンプルです。 以下のようにヘッダーにdiv要素で画像やメニューなどを簡単に固定できるスタイルの紹介です。 以前はこのようなことがやりたくてもz-indexやfixedで表現して... 2019-07-28 13:37:32
Storybookの実行メモ(Vue.js版) Vueを利用した環境で、Storybookを使うときの作業メモです。 Storybookは、最小単位でのデザインされたパーツを組み立ててサイトを構成する際に便利な内部向けツールです。 細分化されたパーツをサイトとは別に作品集よ... 2019-07-02 00:00:00
CSS 湯気の表現 温かいものの演出に使える湯気の表現です。 SVGの画像をCSSでアニメーションして、2枚の画像を使って湯気の表現を実装します。 この画像は3層になっています。 一番上に湯気の通り道だけ透明の肉ま... 2019-07-28 05:23:44
CSS マーカーのような表現 蛍光ペンで文字の上に線を引いたような表現のサンプルです。 文章の中で、目立たせたいときに、よく蛍光ペンで線を引きます。 CSSで思いのほか、簡単にできます。 サンプルの文章で、大事な部分に、水色をつけて... 2019-08-03 22:19:57
CSS3 要素を回転させる 要素にクラスを指定して回転、逆回転させるサンプルです。 CSS3では簡単に画像やオブジェクトを回転させることができます。 アイキャッチにはなりますが、多用すると目が疲れるので使うところは考えましょう。 まず... 2019-08-03 21:58:12
CSS3 flexを使った配置3(行間の操作) 以前掲載した、flexで配置した時の改行のサンプルに続き、行全体の配置のサンプルです。 まずは共通のスタイルを用意します。 .demo_box{ backgroun... 2019-08-03 21:29:20
CSS3 flexを使った配置2(要素の改行) 以前掲載した、flexでシンプルに横に並べるサンプルに続き、子要素の数が多くなった時の応用編です。 まずは共通のスタイルを用意します。 .demo_box{... 2019-07-30 21:50:18
CSS3 flexを使った配置1(横の位置) flexを使ってfloatのような配置を実装します。 CSS3より追加されたflexのサンプルです。 flexという言葉の通りこれがあればレイアウトをうまいことやってくれるのでfloatやmarginで悩むことが減りそうです。... 2019-07-29 21:51:41
CSS3 画像を左右に回転する 要素をCSSのアニメを使い、左右にかしげるような表現のサンプルです。 CSS3で手軽にアニメーションが使えるようになり、回転とループアニメを組み合わせると下記のような動きをつけることができます。 左右に回転するアニメーショ... 2019-07-29 06:53:21