タグ: デザイン

[CSS] Animate.css v4 スクロールで動かす (初心者も）

2020年07月05日tips
Animate.cssのバージョンが4になり、思いっきり変更がありました。以前のままの状態でアニメーションが追加出来ないのでやり直しが必要です。スクロールするとアニメーションが始まる様にするには、wow.jsとの組み合わ…
Read more

[CSS] :before 擬似要素で番号表示

2020年06月08日tips
以前、[CSS]:befor や :after 擬似要素を活用する　をご紹介しました。今回は、<ol> でなくても番号表示をCSSのcounter-increment: title;で振る方法を紹介します。 …
Read more

カルーセル Slick.js 小さなデバイスへの対応

2020年04月14日tips
Slick.jsとは、カルーセル（スライダー）を設置するプラグインです。[カルーセル Slick.js に文字を重ねる] で、画像文字を重ねた後の状態からの説明です。応用編として、小さなデバイスでもSlickスライダーの…
Read more

カルーセル Slick.js に文字を重ねる

2020年04月14日tips
レスポンシブ対応のスライダーSlick.js の応用編です。[カルーセル Slick.js 基本の設置方法]　で設置したスライドに文字を重ねようと思います。 完成のイメージ CSSで文字のカスタマイズが必要ですが、この様…
Read more

カルーセル Slick.js 基本の設置方法

2020年04月14日tips
サイト内にSlick.js を使用した、レスポンシブ対応のスライダーを設置する方法をご紹介します。サンプルは、Slick に掲載されています。 私の場合は、WordpressでBootstrapを使用したテーマに設置しま…
Read more

カラー(色)選びに迷ったら　参考になるサイト

2020年03月30日tips
改定！色選びに悩んだ時にお世話になっているサイトをご紹介します。 「Web制作で、微妙な色合いで悩んでも無駄だよ。環境で違うんだから」と良く言われます。(笑）印刷でも、インクに左右されるので理想通りにはならないですけど、…
Read more

[CSS]コピペで出来る見出しデザイン 10種

2020年03月24日tips
見出しデザインでサイトの印象がガラリと変わります。CSSで実装するレスポンシブデザインでも崩れにくく、スタイリッシュな見出しを10種類ご紹介します。 font-size,color,paddingなどはお好みで調整して下…
Read more

Font Awesomeアイコンの使い方の応用

2020年02月24日tips
Font Awesome ってご存じですか？膨大なアイコンを使用できるサービスです。基本的には有料サービスですが、無料版も充実しているのでお勧めです。このサイトでも使用させて貰っています。 導入準備 公式サイト Font…
Read more