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

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

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

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

[初心者向け] jQuery が動かない時

jQuery の異なるバージョンを設置しなければならない時ってありますよね。同じバージョンでも何かうまく動かない事ってありますよね。初心者向けの回避できるかもしれないシンプルな方法をシェアします。とりあえず2種を試してみ…

[Photoshop] パターンを使う(色の変更)

Photoshopでは、パターンを使ってストライプ、ドット柄など手軽に画像を作る事が出来ます。 初心者でも出来るパターンの登録から色の付け方までをご紹介します。 バージョン情報 Photoshop CS6 パターンの入手…

[Excel , PDF] 電子印鑑の作り方

コロナウィールの影響でテレワークが推奨されています。日本のビジネスにおいては、まだまだ捺印が不可欠です。今までは実際の印鑑をお使いだった方も、テレワークで電子印鑑を使う必要が出てきた方もいらっしゃると思います。シャチハタ…

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

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

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

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

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

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

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

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

Google Fonts 使い方 2020年

Google Fontsとは、Googleが無料提供しているWebフォントです。商用も使えますし、2019年から日本語フォントが追加されました。久しぶりに確認した所、画面が変わっていたので、使い方をシェアします。 Web…