リニューアルに使いたいオシャレな動きCSS＆JSパーツまとめ20選 | 楽天ティップスRakutenTips季節の変わり目特に春にはリニューアルするサイトも多かったりします。そんなリニューアルやサイト制作時に使いたいオシャレパーツを集めました。 cssSlider 名前の通りCSSだけで動くレスポンシブスライダーです。クロスブラウザにも対応してます。 WOW.sliderのようにエフェクトからカラーなど好きなように選んで設置できるので、html&CSSがよく分からない人にも簡単に設置することができます。 MockupSlideshow
HTML／CSS、PHP、jQueryの基礎を学ぶなら超オススメ！プログラミング学習サービス「Progate」
まずはProgateへアクセスしてアカウントを作成。私はTwitterで認証しました。 現在学べる言語は HTML & CSS PHP jQuery の3言語の基礎部分。 とりあえずHTML & CSSをやってみましょう。 学習の流れ 学習の流れは3ステップ。 スライドで基礎知識を学習 ブラウザ上のエディタにコードを書いて実際に学習 プレビュー画面で実際に挙動を確認→答え合わせ といった感じです。 スライド スライドは非常に丁寧な作りとなっておりますので、よく読みこめば初心者でもしっかりと理解をしながら学習することが出来ます。 矢印キーでページ送りができるのがCool。 1レッスンにつき数枚のスライドが表示されますので、見終わったらエディタ画面へとGO！ エディタ画面 こちらがブラウザ上で動作するエディタ画面。左側が問題文、真ん中がエディタ、右側がプレビュー画面となります。 もう一度スライ
画像を矩形以外の形状で表示したい人のためのチュートリアル
画像にPNGマスクを使用して、ブラシストローク状、サークル状など、矩形とは異なる形状で表示するチュートリアルを紹介します。 デモページ もう一つのサークル状のデモは、下記ページのギャラリーのサムネイルとして使用されています。 Roundfolio 画像の枚数が少ないのであれば個別に画像を作成してもよいかもしれませんが、このデモのように数多くあると、このテクニックを使用した方がより効率よく実装できます。 [ad#ad-2] 画像の作り方 画像は3種類が必要で、全て同じサイズにします。 ロールオーバー用の画像 ※透過PNG画像 マスク用の画像 ※透過PNG画像 ベースとなる画像 サークル状に使用する画像3種類 制作：HTML, CSS, JavaScript HTML ロールオーバーとマスク用に2つの空span要素を使用します。 <a href="images/gallery-full.jpg
綺麗な動きになった！Web制作前に見ておきたいjQueryプラグインまとめ
作成：2014/12/8 Web制作 > 比較的最近のjQueryプラグインやプロフェッショナルな方々が作成されたスクリプトの中から、サイト制作時に取り入れてみたいエフェクトを厳選してご紹介。今風の見え方を実現できそうなものをチョイスしました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ ファーストビュー １．スライドを立体的に切り替え ２．クリックで滑らかにページ遷移させる ３．背景にスライド、フルスクリーンで固定させる ４．横に移動するフルスクリーンスライド ５．キューブ系のスライドを表示 ６．下方向へドラッグするとページを再読み込みする ７．要素を上下にフワフワ動かす ８．外部要素をクリックで表示 ９．タイピングエフェクト 動作 １０．サーチボックスを画面全体にオーバーレイさせる １１．デイトピッカー １２．ドラッグ＆ドロップ 画像をアップロードする
[JS]日本語もOK、行単位でスタイルを適用できるようにするスクリプト -Lining.js
demo 5 一行ごとにさまざまなアニメーションで表示します。 「rolling」のエフェクトかっこいいです。 Lining.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <head> ... <script src="build/lining.min.js"></script> </head> デモにあるエフェクトを使用する時は、エフェクト用のスクリプトも加えます。 <head> ... <script src="build/lining.min.js"></script> <script src="build/lining.effect.min.js"></script> </head> Step 2: HTML 適用する要素に「data-lining」を加えます。 <p class="poem" data-lining>洋酒といえば、誰でも
![[JS]日本語もOK、行単位でスタイルを適用できるようにするスクリプト -Lining.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/379f3d7832e7204ed5ef8805897189b9eb3bf9bc/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014112501-01.png)
CSS Reset - 2019's most common CSS Resets to copy/paste, with documentation / tutorials
Your enterprise firewall is the foundation of data security for your business network. In fact, your business has its unique requirements, risks, and data flow. Hence, you cannot do with just any firewall. All you need is advanced threat protection […] Read Article The rise of cloud computing has transformed the way organisations manage and deploy their digital infrastructure. With the promise of
第4回 jQueryでアニメーション（お題編） | gihyo.jp
はじめに jQueryの機能を大きく分けると、DOM操作、アニメーション、イベント処理、Ajax、その他のユーティリティ関数といった分類ができます。DOM操作は前回の記事で解説したような、HTMLの要素を追加したり書き換えたりといった操作です。今回はその中の1つ、アニメーションについて解説します。アニメーションも正確にはDOM操作に分類されますが、アニメーションだけでかなり大きな比重を占めるので今回は通常のDOM操作とわけて考えます。イベント処理やAjax、ユーティリティ関数についても連載の後のほうで解説する予定です。 JavaScriptでアニメーションの基本 まず始めに、jQueryを使わないでアニメーションをする方法を紹介します。jQueryのアニメーションが実際に内部でどのような処理が行われているかを知ることでその後の理解度が増すと思います。JavaScriptでアニメーションは基
Cheat Sheets for Front-end Web Developers - WebFX
Home Blog Web Design Cheat Sheets for Front-end Web Developers Cheat Sheets for Front-end Web Developers President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for RevenueC
Masonry
What is Masonry? Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet. Install Download CDN Package managers Getting started HTML CSS Initialize with jQuery Initialize with Vanilla JavaScript Initialize in HTML Next MIT Lice
Home | CSS3 Animate It
CSS3 Animate It is a new CSS3 lightweight animation plugin that triggers animations when they come into view using CSS3 animations.Include css3-animated.js at the end of your file and animations.css in the head. Once you have done that you can just define "animatedParent" as the parent class which is what will trigger the child class "animated" to animate whichever animation is defined, here we ar
[CSS]デモが楽しい！要素にclassを与えるだけでさまざまなCSS3アニメーションを適用するスタイルシート -Magic
Slide, Math, Tin, Bomb Magicの使い方 Step 1: 外部ファイル 当スタイルシートを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="yourpath/magic.css"> </head> Step 2: 要素にアニメーションを指定 アニメーションはmagic.css単体で動作しますが、jQueryと組み合わせることでユーザーのさまざまなアクションをトリガーにすることができます。 まずはjQueryのセレクタで要素を指定し、例えばホバー時にアニメーションさせる時はこんな感じに。 $('.yourdiv').hover(function () { $(this).addClass('magictime puffIn'); }); 特定の時間、ループでアニメーションさせる時はこんな感じ。 setInt
スマートフォン時代のCSS Frameworkあれこれ : 構想雑文
構想雑文 WEBデザインとmacに関すること中心の自分向けメモ主体のブログ。 DREAMWEAVER、Illustrator、Photoshopなどのアプリケーションの設定や使い方。HTML、CSS、JavaScript、PHPのコーディングのことをあれこれ書いています。 ここ最近のサイトへのアクセスログを見ていると、スマートフォンからのアクセスが増加傾向にあるので、ウェブサイトつくるときもスマートフォンに考慮したサイトにせねば、とようやく思い始めています。 スマートフォン向けのレイアウトをつくるのは苦手だし、特に、レスポンシブウェブデザインのレイアウトって面倒としか思えないし、どうするかなぁ、と思うもすぐにCSS Frameworkを使えば解決するかなぁ、と思って調べてみました。 CSS Frameworkの数あり過ぎです。 昔は、グリッドレイアウトをきれいに作成するぐらいのものでしたが
ふわっと下から浮き出るツールチップ
ふわっと下から浮き出るツールチップ：脱エンジニアっぽさ！ クライアントの笑顔を引き出すCSS3アニメーション（3）（1/3 ページ） 今回は、アニメーションするツールチップ（吹き出し）をCSSだけで作ってみたいと思います。 ツールチップを使えば、説明文などが必要な場合も画面をスッキリとさせられます。特に、Webサイトの訪問者にアクションを求める入力フォーム画面などでその効果を発揮します。例えば、購入手続き画面においては、何度も注文したことがあるリピート客にとって、入力方法の説明はもはや分かりきった“ノイジー”な情報ですね。こうした「知りたい人は簡単に情報を得られ、知っている人は目に触れずに済む」ようにするために、ツールチップは非常に有効な手段となります。ただし、注釈文をきちんと認識させるべき会員登録画面などでは、ツールチップで説明を隠してしまうのは望ましくないので、安易な乱用は避けたいもの
[JS]スクロールに合わせてページ内のさまざまな要素を最適なポジション・スタイルで表示するスクリプト -Auto Fix Anything
これは二番目のヘッダとサイドバーで、スクロールすると一番目と同様に上部に貼りつきます。 Auto Fix Anythingの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="jquery.autofix_anything.js"></script> <link href='autofix_anything.css' rel='stylesheet' type='text/css'> </head> Step 2: HTML サイドバーをスクロールに合わせてポジ
[CSS]コンテンツを水平・垂直にぐぐぐっと傾けてナビゲーションを表示するスタイルシート
最近ちらほら見かける、コンテンツをアニメーションでぐぐぐっと傾けて、ナビゲーションを配置したサイドバーやヘッダを表示するスタイルシートを紹介します。 実装 Step 1: HTML パースペクティブで表示するコンテンツをdivなどのラッパーを使って配置します。 <div class="wrapper"> <div class="menu"> <div class="hover-icon"> <i class="icon-align-justify"></i> </div> <ul> <li class="category"><a href="#">HOME</a></li> <li class="category"><a href="#">SEARCH</a></li> <li class="category"><a href="#">ABOUT US</a></li> <li class
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS, jQueryからPython, Rubyまで、制作者の困ったを解決するコードのスニペットを共有する無料サービス -Code Pad
http://boxtuffs.com/
CSS-Tricks - A Website About Making Websites
Flatis
プラグインやチュートリアル 25
