人気のあるUIサンプル

• SVG 三角形のサンプル
• SVGで三角形を描くサンプルを紹介します。 ちょっとしたデザインで三角が使いたくなった時にいちいちフォトショップやイラストレーターで作成して、サーバーア...
• 2019-07-28 05:17:22

• CSS 湯気の表現
• 温かいものの演出に使える湯気の表現です。 SVGの画像をCSSでアニメーションして、２枚の画像を使って湯気の表現を実装します。 この画像は３層になっています。 一番上に湯気の通り道だけ透明の肉ま...
• 2019-07-28 05:23:44

• JS aタグを使わないリンクいろいろ
• Aタグ以外でもリンクを設置する機会は、結構発生します。 そんな時はJavaScriptで対応になります。 JSとjQueryのそれぞれの使用例を記載しました。 通...
• 2019-07-28 05:32:22

• CSS ヘッダー固定
• ヘッダーやフッターなど、バナーやメニューを簡単に固定できるCSSのposition:stickyのサンプルです。 以下のようにヘッダーにdiv要素で画像やメニューなどを簡単に固定できるスタイルの紹介です。 以前はこのようなことがやりたくてもz-indexやfixedで表現して...
• 2019-07-28 13:37:32

• JS メーラー起動
• HTMLではmailto:でリンクを作るとデフォルトのメーラーが立ち上がり、メールを送るよう促すことができます。 しかし、meilto:で書かれたメールアドレスは迷惑...
• 2019-07-28 13:51:44

• jQuery カードをめくる表現
• 主にjQueryで書かれたアニメーションです。 画像をクリックすると、カードを裏返すようなエフェクトのサンプルです。 クリックで発動するものと、ページが表示されると自動で発動する２パターン用意しま...
• 2019-07-28 14:02:54

• CSS 左右に行き来するアニメーション
• 車、電車などホームページでちょっとした演出を施したいときのサンプルです。 CSSのアニメーションを利用して、画像を左右に行き来させています。 画像を変えればいろんなものに応用ができます。 一部jQueryを使ってますが、ほぼCSSの...
• 2019-07-28 14:44:36

• CSS 文字の縦書き
• 文字を縦書きにするスタイルの活用事例です。 CSSでは縦書きができるようになっています。 原稿用紙や雑誌のような縦書きレイアウトも簡単に作ることができます。 行の向きも右から左 一...
• 2019-11-08 15:52:32

• jQuery よく使うメソッド
• jQueryでコードを読むときや簡単なギミックを作るときなど、よく使われるメソッド（手法）をまとめてみました。 ここにない記述もたくさんありますが、独断で...
• 2019-07-28 15:19:17

• SCSS スタイルをまとめて一つにする
• SCSSで細分化したCSSをまとめて一つのCSSにするサンプルです。 ホームページを運用していると、いくつも同じようなデザインを流用することがしばしばあります。 長いこと続けていると、CSSがとても肥大化して運用しづらく...
• 2019-11-08 14:53:35