デザイン– tag –

レスポンシブ対応のサイト制作で不可欠なのがメディアクエリ（@media）の記述です。私自身、曖昧なまま使っていた所があり、すんなり思い通りにならない、コンパクトに...

CSSを使って、ラインマーカー(ハイライト）で線を引いたようなデザインにしてみようと思います。文中のちょっと目立たせたい箇所に引けば、そこだけ文字自体に色を付け...

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

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

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

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

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

改定！色選びに悩んだ時にお世話になっているサイトをご紹介します。「Web制作で、微妙な色合いで悩んでも無駄だよ。環境で違うんだから」と良く言われます。(笑）印刷...

見出しデザインでサイトの印象がガラリと変わります。CSSで実装するレスポンシブデザインでも崩れにくく、スタイリッシュな見出しを10種類ご紹介します。 font-size,col...

初心者にはBootstrapをお勧めしています。個人的な感想では、レスポンシブサイトを作る際に基本的な事さえ覚えれば、一番ミスが少なく構築できると思います。確かに<...