フロントエンドコーディング時に便利なジェネレーターサイト（随時更新） - Qiita
更新履歴 追加 2024/04/01 「Epic Easing」を掲載しました 2024/03/07 「Filter Blend」を掲載しました 2024/03/04 「Tooltips & Speech Bubbles」を掲載しました 2023 2023/07/04 「CSS Box Shadows Generator」を掲載しました 2023/06/29 「Regulex」を掲載しました 2023/04/05 「Colorable」を掲載しました 2023/03/09 「Scrollbar.app」を掲載しました 2022 2022/10/04 「CSS Shadow Palette Generator」を掲載しました 2022/09/07 「Wayback Machine」を掲載しました 2022/05/31 「Min-Max-Value Interpolation」を掲載しました
CSS Transformsについてのメモ
既に色々なデモページが作られていたり、実用されていたりするCSS Transformsですが、ちゃんと理解したかったので調べてみました。 まだそんなに自信はありませんが、以前よりは理解できた気がします。 というわけなので、自分が分かる範囲で説明してみたいと思います。 CSS Transformsは2Dと3Dとで別になっていますが、将来的には SVG Transforms と合わせて一つの仕様になるそうです。 今はまだ別々なので、それぞれにリンクをしておきます。括弧内は現時点での最新の日付です。 WD: CSS 2D Transforms（2011/12/15）ED: CSS Transforms（2011/11/28）WD: CSS 3D Transforms Module Level 3（2009/03/20）ED: CSS 3D Transforms（2011/03/21）新しくなった
【CSS3】文字の色を半分だけ変えるテクニック
画像を使用せずに CSS のテクニックだけで文字の色を半分だけ変える方法を紹介します。 言葉での説明が難しいので、まずはサンプルをご覧になっていただいたほうが早いでしょう。 CSS3 Black & White : https://on-ze.com/demo/css3-black-white/ 上記のサンプルではレスポンシヴにも対応。 すべてのデバイスで同じように表示させることに成功しています。 HTML の記述同じテキストを２回記述するのではなく、カスタムデータ属性を追加しただけの非常にシンプルなコードです。 <p data-inverted="Black and White">Black and White</p> ここではカスタムデータ属性は『data-inverted』と名付けています。 CSS の記述続いてキモとなるスタイルシートの記述です。 p:before { conten
ズームアウトしながらフェードで切り替わるZoom Sliderの使い方
Zoom Sliderの使い方とは？ Zoom Sliderの特徴は、ズームアウトしながらフェードで切り替わること。ズームアウトするスピードや次の写真に切り替わるスピード、次の写真に移るタイミングを簡単に操作できます。ズームインやスライドといった機能はないのでご注意を。 それでは説明していきます。 ステップ１： zoomslider.jsを読み込む 配布サイトからzoomslider.jsをダウンロードしましょう。 ダウンロードするとdistというフォルダの中に以下の４つが入っています。 jquery.zoomslider.min.jszoomslider.cssdots.pngplain.png distフォルダごと以下のようにjsフォルダにインポートします。 インポートしたら</body>の直前に以下のコードを挿入してください。フォルダへのパスは自分の環境に合わせて変えてくださいね。
コピペで簡単！シンプルなローディング画面 | ma-ya's CREATE / WEB DESIGN
こんにちわ、ma-ya’s CREATE［まーやずくりえいと］です。 サイトコンテンツや機能が多いとページのロード時間が必然的に長くなりますよね。 特にトップページなんかで要素がガクガクっと表示されていく様を見るのはちょっとなんだかうーんという感じです。 jQueryによるローディング画面のサンプル ということで今回はとてもシンプルなローディング画面サンプルをHTML / CSS / jQueryで作ってみました。 ※右下RETURNボタンを押すか、ページをリロードして下さい。 See the Pen Loading View Sample by mycreatesite (@mycreatesite) on CodePen. ローディング画像はコチラからダウンロードしたGIF画像を使いました。 最近は画像ではなくCSSのみでローディングアニメーション表現する事も多いので、そういった場合は
jQueryでページ読み込み中にローディング画面を表示する方法｜Gimmick log
TOPjQuery jQueryでページ読み込み中にローディング画面を表示する方法 jQueryでページ読み込み中にローディング画面を表示する方法 公開日：2015.11.20 更新日：2020.05.19 jQuery, ローディング jQueryでローディング画面を実装しました。 全てのページの内容が読み込まれたらローディング画面が非表示になる仕様です。 2GRAVITY様の方法を参考にさせていただいています。 jQueryを使わずにjavaScriptで実装するプラグインはこちら デモページ 実装方法 html ロード画面とロード後に表示させたい要素を個別に括っておきます。 <div id="loader-bg"> <div id="loader"> <img src="img-loading.gif" width="80" height="80" alt="Now Loading.
最近よく見る、マウスオーバー時にヌルっと拡大する画像の作り方+α
最近トップページの記事一覧をグリッドレイアウトで組んでいるブログが多いですよね（うちのブログもだけど） そして、ほとんどのブログが各コンテンツにというカードっぽいデザイン（上に画像・下にタイトル）を採用しています。まぁ普通にお洒落です…が、画像部分にマウスオーバーした時、何もエフェクトが掛からないのってちょっと味気ないですよね。 そこで今回は、マウスオーバーした際に画像をヌルっと拡大させる方法を紹介します。ﾇﾙﾘ。
CSSで作る！吹き出しデザインのサンプル19選
今回は、画像を使わずにHTMLとCSSだけで作るで吹き出しのデザインサンプルを紹介します。シンプルなものから、円形、会話形式、LINE風のものまで一挙にまとめました。HTMLとCSSはコピペして使うことができます。 レスポンシブ対応 以下で紹介する吹き出しデザインは（円形のものを除き）、文字が右端まで達すると、次の行へ折り返すようなレスポンシブ対応になっています。 使い方（初心者向け） CSSが反映されないときはこちら シンプルな四角い吹き出し4つ 最もシンプルな形です。三角形の位置を上下左右に配置したサンプルをそれぞれ紹介します。コードを見てもらうと「#e9edff」と書かれた部分が2カ所あると思いますが、これが背景色を指定するコードです。お好みで変えて頂ければと思います。 ちなみに下から伸びる三角形は疑似要素（before）で表現しています。興味のある方は下の記事に目を通してみてくださ
スライドショーに使える！CSS Animation 4選 ～CSS初心者がCSS Animationに入門してみた～ - Eyes, JAPAN Blog
Eyes, JAPAN Blog 1997年からほぼ毎日更新！会津大学発のベンチャー企業、株式会社Eyes, JAPANによるBlog。 コンピュータ、ネットワーク、Hi-Tech Gadget、魔法の様な技術などのGeekなネタから会津のローカルネタまで。 僕とCSS Animation 最近CSS Animationに入門しています。僕は普段セキュリティに興味があり、大学でチームを組んでCTFに参加したり、大学院の研究対象にはマルウェアを選択しています。 そんな僕がなぜCSS Animationに入門したのかというと、きっかけはCSS Animationの個人サイトを運営している@yui540さんという方の作品を見たことでした。 youtubeでCSS Animationを使った演出講座（ https://www.youtube.com/watch?v=wFJ8WB4G4KM ）をやら
スマホの操作も快適な優れもの！ビフォーアフター画像のスライダーを実装するJavaScriptライブラリ -Beer Slider
スマホ、タブレット、デスクトップのレスポンシブに完全対応、マウス操作・キーボード操作・タッチ操作にも完全対応のアクセシブルなスライダーを実装するスクリプトを紹介します。 他スクリプトへの依存は一切なく、単体で動作し、jQueryのプラグインとして実装することも可能です。 Beer Slider Responsive & Accessible Before-After Slider Beer Slider -GitHub Beer Sliderの特徴 Beer Sliderのデモ Beer Sliderの使い方 Beer Sliderの特徴 Beer Sliderは2枚の画像を使用して、ビフォーとアフターを表示できるスライダーです。 単体で動作するシンプルなスクリプト vanilla JavaScriptで記述されたスライダー。他スクリプトへの依存はありません。 jQuery, Zeptoに
ヘッダー・ナビゲーションを固定表示させるアイデア5つ
ヘッダー・ナビゲーションを固定表示させるアイデア5つ 公開日:2017/12/28 /最終更新日:2019/02/09 CSS jQuery・JS Technique 最初から固定表示 基本なので言わずもがなですが一応。単なる固定表示ならCSSの「position: fixed;」だけです。簡単ですね。 HTML <header class="site-header"> <h1 class="site-logo"><img src="images/logo.png" alt="WEBDESIGNDAY"></h1> <nav class="gnav"> <ul class="gnav__menu"> <li class="gnav__menu__item"><a href="">About</a></li> <li class="gnav__menu__item"><a href="">W
[CSS]素晴らしいテクニックが満載！囲いや区切りなどのラインを実装するスタイルシートのまとめ
divやp、hrなどで実装された囲いや区切りのスタイルに、一手間加えた素敵なデザインにするスタイルシートのテクニックを紹介します。 かわいいデザインからスタイリッシュなものまで、実装のアイデアが素晴らしいものばかりです。
![[CSS]素晴らしいテクニックが満載！囲いや区切りなどのラインを実装するスタイルシートのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/a545d68e72312cfa64f79c7d1932afa3d3078686/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014120205-19.png)
【jQuery】ページを開いた際にエフェクトを表示する［IntroTzikas］の使い方
ページを読み込む際に、ローディング中であることを示すエフェクトを表示させているウェブサイトは数多くあります。 これまでは主に Flash を使う方法が主流でしたが、既に Flash は廃れた技術。 そこで、同様のことを jQuery で実現したのが［jQuery IntroTzikas］です。 IntroTzikas：サンプル ファイルサイズも小さく、導入方法も簡単なので初心者の方にもお勧めできる jQuery プラグインです。 jQueryプラグイン［IntroTzikas］の実装方法 まずは公式の配布サイトよりプラグインの本体をダウンロードしてきましょう。 →IntroTzikas 単体では動かないので、jQuery の本体ファイルもダウンロードしてくる必要があります。 →jQuery 続いて HTML の <head>〜</head>内で、ダウンロードしてきた［introtzikas
[JS]ページを表示する時にかっこいいアニメーションを加えるスクリプト（WordPressにも対応） -Animsition
ページを表示する時に、スライド、フェード、回転、ぱたりなどのかっこいいアニメーションを加えるjQueryのプラグインを紹介します。 アニメーションは表示する時だけでなく、リンクがクリックされて離れる時にも適用することができます。 Animsition Animsition -GitHub AnimsitionはWordPressのプラグインとしても用意されているので、WPを使っている時はプラグインの方が簡単に利用できると思います。 Page Transition -WP Plugin Directory Animsitionのデモ Animsitionの使い方 Animsitionのデモ デモはChrome, Safari, Firefox, Opera, IEは10+でご覧ください。 demo: fade エフェクトは全部で18種類！ その中からデモで、9種類が楽しめます。 demo:
![[JS]ページを表示する時にかっこいいアニメーションを加えるスクリプト（WordPressにも対応） -Animsition](https://cdn-ak-scissors.b.st-hatena.com/image/square/9777d3ddb94171e6f761197ff33a27f86a16ce31/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014082901.png)
【2017年版】HTML/CSSで表現できる、すごいテキストエフェクト66選
ほとんどのモダンブラウザがCSS3対応となったことで、これまではPhotoshopなどのデザインアプリで再現していたようなデザインスタイルも、HMTL/CSSで表現できるようになってきており、その進化はますます加速しています。 今回は HTML と CSS、わずかな JavaScript で実装できる、表現力の高いテキストエフェクト用コードスニペットをまとめてご紹介します。コードニペットは各エフェクト別にカテゴリ分けしているので、ウェブサイト制作に活用したいエフェクトを見つけてみましょう。 ナビメニュー100連発！CSSで表現できるコピペ可能なHTMLスニペットまとめ CSS3の広がる可能性！美しいテキストエフェクト用コードスニペット24個まとめ CSSスタイリングで表現できる！すごいテキストエフェクト33個まとめ コンテンツ目次 1. アニメーション・テキストエフェクト 2. グリッチ・
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
コピペで簡単実装！CSSで作る区切り線・水平線デザイン9選【傾斜/破線/セクション】
【CSSで簡単に】固定した背景をスクロールして別の画像や要素に切り替えるFixed Backgrounds CSS6選【コピペで簡単実装】
【初心者向け】ここから始める「Sass」の使い方まとめ | Web Design Trends
親要素から子要素をはみ出させて背景を画面いっぱいに表示する方法
calc()とビューポート単位を使ったコンテナからの解放
