CSS

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

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

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

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

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

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

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

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

CSSで境界線を下三角の矢印にしたり、斜めにするスタイルです。 デモページを見る   ソースもろもろは全てここに書くと長くなってしまうので、ご利用を希望の方はファイルをダウンロードしてくださ ...

前回のボタンまとめに続き、アニメーションテキストをまとめてみました。 今回は、「css」と「jQuery」で作っています。 どれも面白い動きやオシャレなデザインになっています。 まずはデモページをご覧 ...

今まで見かけた中で、使ってみたいと思ったCSSで作るボタンをまとめてみました。 どれもオンマウスで面白い動きをします。 まずはデモページをご覧ください。 デモページを見る   ソースを全てこ ...

cssのみで、吹き出しタイプの見出し・タイトル表示にする方法です。 ◆html <div class="textBox">吹き出しのタイトル</div> <p>下に ...

css3で作る、タイトル付きの枠線で囲むボックス表示です。 タイトルは上の線に重なるような表現です。 ◆html <div class="textBox">タイトル付きの枠で囲まれたテキス ...

リストタグを使わず、hタグで自動で番号を付与していく方法です。 途中でカウンタを0にセットすると、新たに1番から付与する事ができます。 ◆html <div class="autoNumber" ...

ブレイクポイントのサイズをどうするか、悩ましいところですが、個人的にはBootstrapのブレイクポイントを採用しています。 Bootstrapのブレイクポイントは下記の通り。 ・768pxまで（76 ...

オンマウスで色がスライドする、アニメーションボタンをCSSで作ります。 ◆HTML <a href="#" class="btn btn-medium btn-l-r">アニメーション ボ ...

オンマウスでキラッと動きをつけるボタンをCSSで作ります。 ◆HTML <button class="myButt one"> <div class="insider">&lt ...

webデザイナー、フリーランス、社内web担当者の方などに役立つ記事をご紹介しております。 ◆1ページで完結、Web制作者が助かるチートシート・資料・PDFまとめ　（コムテブログ 様） ◆どれを選んで ...

段落のタイトルによく使われる、グラデーション背景に文字を乗せるCSSです。 ◆HTML <div class="ttl">グラデーション背景にテキストを乗せる</div> ◆C ...

webデザイナー、フリーランス、社内web担当者の方などに役立つ記事をご紹介。 ◆これからのCSSレイアウトはFlexboxで決まり！　（Webクリエイターボックス 様） ◆かつてはJavaScrip ...