HTML / CSS / jQuery コーディング

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

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

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

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

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

前回、「区切り線を曲線の矢印」にする記事を書きましたが、普通の三角矢印バージョンも紹介します。 以前にも同じような記事を書きましたが、改めてタイトルとして使える内容かと思います。   ◆まず ...

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

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

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

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

ページ先頭にアニメーションで移動するボタンが設置できる、jQueryプラグインの「jquery.scrollUp.js」を紹介します。 HTMLにはページ先頭の記述を入れる必要が無く、簡単に設置できま ...

会社概要やお問い合わせページなどで使う事のある表組みを、レスポンシブな「table」で作る方法です。 実際のページを下記のデモページよりご確認ください。 ブラウザを狭めてみると、レイアウトが変わります ...

PCで表示する時は横並びで、スマホで表示する時は上下に変わる、レスポンシブな「dl dt dd」定義リストです。 新着情報を例にしたデモページです。 ブラウザの横幅を狭めてみてください。 デモページを ...

トップページのメインビジュアルに使えそうな、アニメーションテキストをご紹介します。 アニメーションの種類とソースは下記のサイトで紹介されています。 ⇒ MOVING LETTERS サイト &nbsp ...

簡単にcssアニメーションが実装できる、「Animate.css」をご紹介します。 アニメーションの種類などは、下記の公式サイトで紹介しています。 ⇒ Animate.css 公式サイト   ...

「Hover Buttons」は、タグ内にクラス名を記述するだけで、様々なオンマウスのエフェクトを加えることができます。 公式サイトには全種類のサンプルが見れますが、個人的に気に入ったエフェクトをピッ ...

画像をオンマウスすると、フワッと吹き出しがアニメーションで表示されます。 吹き出しはテキスト形式ではなく、png画像として表示します。 オンマウスを外すと、吹き出しは消えます。 デモページを見る &n ...

クラスを指定するだけで、ブルブルふるえるテキストや画像を作れます。 オンマウスした時や、常にブルブルするものも作れます。 デモページを見る   以下、使用方法です。 ◆まずはファイルをダウン ...

リンク箇所をオンマウスした時に、矢印の周りをアニメーションで囲むエフェクトです。 デモページを見る   ソースもろもろは全てここに書くと長くなってしまうので、ご利用を希望の方はファイルをダウ ...

スマホで見ると、タブがアコーディオン形式に変わります。 デモページを見る   ソースもろもろは全てここに書くと長くなってしまうので、ご利用を希望の方はファイルをダウンロードしてください。 C ...