CSS

スクロールして要素が表示される位置に来ると、順番にふわっとフェードインして表示される仕組みです。 ◆まずはデモページをご覧ください。 デモページを見る   HTML <div clas ...

過去に同じ内容の記事を書きましたが、内容が古くなっているので新しく作り直しました。 新着情報などでよく見る、日付・カテゴリ・タイトルを並べて表示する形式です。 スマホで見た場合は、タイトルが改行されま ...

最近で気になった記事を幾つかご紹介します。 Microsoftは2025年までにWindows 10のサポートを終了する予定 最後のOSではなかったのか？   SEO効果がいちばん高くなるH ...

ページを読み込み中に表示するローディング画面は、現在ページを読み込んでいると思ってもらうためや、会社や店舗のイメージを伝えるためにも、あると良い演出です。 色々なアニメーションのローディングがあります ...

年内最後の投稿になる今回は、今までで一番アクセスの多い「レスポンシブな「dl dt dd」を作る」の最新版をご紹介します。 以前の内容では「float: left;」を使って横並びにしていましたが、最 ...

画像にオンマウスすると、影が付いたり拡大する効果を「transition」「box-shadow」「transform」を使って作ってみました。 それぞれの効果について解説していきます。 最初にデモペ ...

今回は、スクロールで要素が表示された時に、フワッとしたアニメーションで表示する「ScrollReveal.js」を紹介します。 各要素を時間差で表示させることも出来るので、例えば複数の画像を同時に表示 ...

「Font Awesome」をCSSの疑似要素で指定した際に、アイコンが表示されなかったり、文字化けしたりする場合の解決方法です。 結論から言うと「font-weight」を指定します。 例えば、リス ...

IEのサポートが終了したことで、堂々と使えるようになるCSSが出てきます。 そんな中で今回は、ユニークな小技になりますが、簡単に反映できるCSSをご紹介します。 お問い合わせフォームなどで利用する、入 ...

画像の端や一部にテキストを被せる（乗せる）デザインです。 ◆まずはデモページをご覧ください。 デモページを見る   テキストを縦中央に配置するために、テキストの子要素に下記の記述をするのがポ ...

CSSで横幅を指定しても「padding」や「border」を入れることで、指定した横幅以上に広がってしまう事があります。 そこで「padding」や「border」を記述した場合とその見え方、解決方 ...

この記事に関しては、第2弾の記事を書きましたので「第2弾【CSS・レスポンシブ】日付とカテゴリとタイトルを横並びにして新着情報を作る」をご覧ください。（2021年7月25日）   過去に「【 ...

ページ内で線や色分けなどでエリアを区切る表現がありますが、今回は区切りのところにタイトル用の画像やテキストを被せる方法をご案内します。 ◆デモページをご覧ください。 デモページを見る   ソ ...

メインビジュアルのどこをクリックしても、画像が切り替わるスライダーです。 クリックした個所から波紋のように広がりながら切り替わるので、オシャレですね。 ◆まずはデモページをご覧ください。 デモページを ...

PCだと横並びで、スマホだと縦並びになるカード型の表示形式です。 1カラムのページで見かけると思います。   ◆まずはデモページをご覧ください。 デモページを見る   ソースもろも ...

シンプルな形式ですが、最初の「QとA」以外の文字にインデントが入るQ&Aページを「dl dt dd」を使って作ります。 レスポンシブなので、スマホで見ても「QとA」の下に文字が入らないようにな ...

コンテンツの区切りを直線や三角矢印にするページをよく見かけますが、今回は吹き出しのように矢印を曲線にする方法で作ってみました。 コンテンツの区切りの他に、人物を入れるとコメントしているような表現にもな ...

段落の区切りを、線や色分けだけでなく、モコモコとした形でデザインするcssです。 特に1カラムのページで使えそうなデザインです。 デモページを見る   ソースもろもろは全てここに書くと長くな ...

飲食店などで使える料金表を、実際の店舗に置いてあるメニュー表のように作ってみました。 スマホで見るときは、メニューや料金が縦並びになります。   ◆まずはデモページをご覧ください。 デモペー ...

画像の上に、白いカードを乗せたようなデザインで作りました。 数字の部分は「Google Fonts」を利用しています。 スマホで見るときは、テキストと画像が縦並びになります。   ◆まずはデ ...