デザイン– tag –
-
tips
[CSS] :before 擬似要素で番号表示
以前、[CSS]:befor や :after 擬似要素を活用する をご紹介しました。今回は、<ol> でなくても番号表示をCSSのcounter-increment: title;で振る方法を紹介します... -
tips
カルーセル Slick.js 小さなデバイスへの対応
Slick.jsとは、カルーセル(スライダー)を設置するプラグインです。[カルーセル Slick.js に文字を重ねる] で、画像文字を重ねた後の状態からの説明です。応用編として... -
tips
カルーセル Slick.js に文字を重ねる
レスポンシブ対応のスライダーSlick.js の応用編です。[カルーセル Slick.js 基本の設置方法] で設置したスライドに文字を重ねようと思います。 【完成のイメージ】 CS... -
tips
カルーセル Slick.js 基本の設置方法
サイト内にSlick.js を使用した、レスポンシブ対応のスライダーを設置する方法をご紹介します。サンプルは、Slick に掲載されています。 私の場合は、WordpressでBootst... -
tips
カラー(色)選びに迷ったら 参考になるサイト
改定!色選びに悩んだ時にお世話になっているサイトをご紹介します。「Web制作で、微妙な色合いで悩んでも無駄だよ。環境で違うんだから」と良く言われます。(笑)印刷... -
tips
[CSS]コピペで出来る見出しデザイン 10種
見出しデザインでサイトの印象がガラリと変わります。CSSで実装するレスポンシブデザインでも崩れにくく、スタイリッシュな見出しを10種類ご紹介します。 font-size,col... -
tips
[Bootstrap] 初心者に! Bootstrap テンプレート集
初心者にはBootstrapをお勧めしています。個人的な感想では、レスポンシブサイトを作る際に基本的な事さえ覚えれば、一番ミスが少なく構築できると思います。確かに<... -
tips
[Photoshop]パスを使って線を描く
Photoshopで直線を引くにはラインツールを使用したりしますよね?円の場合も、いろいろ方法はありますよね?パスを使えば好きな形に出来ます。ちょっと面倒ですが、手順... -
tips
[CSS] Animate.cssでアニメーション効果をつける-2
※Animate.cssがv4になり、変更がありました。[CSS] Animate.css v4 スクロールで動かす (初心者も) で紹介しています。 Animate.cssでを使って、スクロールのタイミン... -
tips
[CSS] Animate.cssでアニメーション効果をつける-1
※Animate.cssがv4になり、変更がありました。[CSS] Animate.css v4 スクロールで動かす (初心者も) で紹介しています。 Animate.cssはclassを付けるだけで簡単にアニ...