iframe要素のスマホ対応 – CSSとJavaScriptそれぞれのレスポンシブ対応方法
「CSS」でiframe要素をレスポンシブ対応させるまずは、CSSでiframe要素をレスポンシブ対応させる方法を説明します。CSSオンリーでもレスポンシブ対応させることができます。以下のYouTubeの動画はiframe要素となっています。これから説明するCSSでレスポンシブ対応させています。 Design for a Mobile MindHTML – iframe要素をラップするHTMLの方では、レスポンシブ対応させたいiframe要素をdiv要素などでラップします。それぞれにclass属性などで名前をつけます。iframe要素はできたらサイズの指定をしておきます。 <div class="iframe-wrapper"> <iframe width="560" height="315" src="https://www.youtube.com/embed/xqviGwyy7y0?r
正しく、効率が良いjQueryライブラリの書き方を学ぶ - Qiita
何となく書いてごまかしてきたJavaScriptやjQueryを、このところきちんと勉強しています。 オプション豊富なスライドショーを作成できる「Slick」のコードを参考に、メソッドなどを読み込んでみました。 https://github.com/kenwheeler/slick/ 他のスクリプトと衝突しない、オブジェクト指向のjQueryライブラリの書き方をだいたい理解したので、おさらいとしてまとめてみます。 2016-12-27 追記 コメント欄でいただいたアドバイスをもとにひな型を改良しました。 2016-12-02 追記 ここのコメント欄とSNSなどで以下のようなアドバイスをいただきましたm(__)m jQueryっぽく書くのなら38行目のcss()はwidth()、48行目のmatch()はhasClass()が良いのでは このコードの場合、9行目のsample.prototy
jQueryプラグインを使わずにフリック＆ドラッグで動くスライダーを作ってみる | スターフィールド株式会社
レスポンシブサイトが増えてきて、 フリックへの対応の必要性は日々高まっています。 今広まっている多くのスライダーやカルーセルのjQueryプラグインでは フリックやドラッグで動かすことができるようになってきています。 ただ、特殊な使用等のためプラグインがどうしても使えない場合は、 フリックやドラッグでの動きを、 プラグインなしでつける必要が出てくるかもしれません。 そのため、今回はその方法について調べて、 実際に作ってみました。 方法は、↓こちらのサイトを参考にさせていただきました。 jQueryで作る最もシンプルなフリックスライド DEMOはこちら↓ DEMO 参考にさせていただいたサイトではフリックのみに対応する場合だったので、 せっかくなので、マウスのドラッグに対応させる方法を紹介させていただきます。 まず、参考サイトに紹介されていたフリックに必要なjQueryの記述を載せます。 $
You Don't Need jQuery - Qiita
注意とお願い この記事の内容はもはや古いです。ここに書いている方法では動かないものをいくつか見つけました。参考にする際は動作をよく確認してから使ってください。 ひとつお願いがあります。「あれ、動かないぞ」というコードを見つけたら是非コメントか編集リクエストで教えてください。解決方法までなくても結構です。「これはもう動かないよ」という印をつけたいのです。 この記事はYou Don't Need jQueryの日本語訳と同じ内容です。 先日ひょんなことからYou Don't Need jQueryの日本語訳をさせていただきました。著者のCam Songさんからも快諾をいただけたので1、Qiitaでも公開させていただきます。 なお、本家の英語の説明は継続的にメンテされているので、この記事の情報は古くなっている可能性があります。 追記 この記事は当初は「もうjQueryは必要ない」というタイトルで
CSSフィルタことはじめ - Qiita
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <style> @charset "UTF-8"; body { font-family: "メイリオ",meiryo; } .floatcontainer:after{ content: "."; display: block; height: 0; font-size:0; clear: both; visibility:hidden; } .floatcontainer { display: inline-block; } /* Hides from IE Mac */ * html .floatcontainer {height: 1%;} .floatcontainer { display:block; } /* End Hack */ .social_b
数行加えるだけでパララックススクロールを実装できるチュートリアル | コリス
実装は簡単です。 既存のページにもこれなら簡単に組み込めると思います。 HTML パララックススクロール用の背景を配置するために先頭に空のdiv要素を加え、あとのコンテンツは普通に実装します。 <div class="background"></div> <div class="wrapper"> <h1 class="pageTitle">見出しLv1</h1> <h2 class="pageSubTitle">見出しLv2</h2> <p>パラグラフ</p> <p>パラグラフ</p> <p>パラグラフ</p> </div> <div class="slogan"> <h2 class="sloganTitle"> Parallax scrolling </h2> </div> <div class="wrapper"> <h1 class="pageTitle">見出しLv1</h1>
「:target」疑似クラスを考慮したスムーススクロール | スターフィールド株式会社
ページ内でアンカーリンクさせる場合、 何も設定しないと急激に動いてしまい、動きとしてあまり見栄えが良くないため、 jQueryなどJavaScriptを使ったスムーススクロールを導入することが多いです。 ただ、この場合、急激な動作を避けるために、<a>のクリックイベントに対して”return false;”をかけて、 実際にはリンクさせないようにするのですが、 CSS3ではアンカーリンクさせた要素に対してスタイルを設定することができる、 「:target」という疑似クラスがあり、 通常のスムーススクロールではこの「:target」を活かすことができません。 そこで、CSS3の「:target」疑似クラスに対応させられるスムーススクロールを考えてみました。 ↓作ってみたもの DEMO 方法 $(function(){ /*------------------------------- 通常の
フロントエンドで知っておきたい要素指定の考え方 - pixiv inside [archive]
みなさんはじめまして、ピクシブのフロントエンドエンジニア id:koharusugiura です。 JavaScript を用いた開発を行う際に jQuery や React、vue.js といったライブラリーを使う方は多いでしょう。これらのライブラリーは共通して DOM を扱うライブラリーとなります。 DOM についての説明は長くなるのでここでは省きますが、簡単に説明すると HTML や XML の構造を表現するための仕様です。DOM は JavaScript のためだけにある仕様ではなく、 Java や Python など、多くの言語に対応する仕様です。 前述した各ライブラリーは多くのウェブブラウザー間の差異を吸収してくれるため、非常に便利なものです。しかし、その機能の豊富さからライブラリー自体のサイズは大きく、ウェブブラウザーで読み込むファイルの数や合計の容量が増えてしまいます。状況
![フロントエンドで知っておきたい要素指定の考え方 - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/06141560504fa4e927919dd41de3eab52a11d032/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fk%2Fkoharusugiura%2F20151222%2F20151222103513.png)
スクロールによってCSSを変更し、パララックス効果を実現するjQueryプラグイン - Qiita
スクロールによってさまざまなCSSを変更することができます。 またプラグインのオプションをdata属性に設定できるjs（jquery.dataExtend）を使うとdata属性に指定するだけで効果を与えることができます。 以前も同じようなプラグインを作ってはいたのですが、複雑になりがちだったため なるべくシンプルに、再現したいと思ったことが工夫次第でできる作りにしたいと思い作り直しました。 GitHub: https://github.com/kamem/jquery.scrollParallax Description このプラグインには3つの機能があります。 任意の位置を通過したときに関数を実行する スクロール量に応じてcssを変化させる 移動距離に応じてcssを変化させる DEMO y scroll Requirement jquery jquery.dataExtend ※ jqu
短期間である程度までjQueryができるようになる独学Webデザイン勉強法を書いてみる - Yukihy Life
HTML、CSSの勉強法を以前書きました。 www.yukihy.com この記事を書いたあと、jQueryに挑戦をして、まだまだ完璧ではないものの実際にこのはてなブログを通して、いろんなブログパーツのようなものを作ることができました。 そこで、jQueryを勉強するとき、効率良く身につけられる方法を書いていきたいと思います。 僕自身いろんな本やツールに手を出しながら進めてきたので、実際に下の通りに行ったわけではありませんが、もう一度勉強しなおすとしたらこういったようにやるなといった感じです。 それではレッツゴー！ jQueryを身につけるための最短ステップ ステップ１ Progateで手を動かしながら学ぶ ステップ２ 平行してWebデザインレシピの記事を読む ステップ３ ドットインストールで総復習&補完 ステップ４ 書籍を参考に実際に作ってみる 作りながら学ぶjQueryデザインの教科書
jQueryでhtmlの簡易ローディング画面をつくる | 2GRAVITY
大きな画像を多用していたり、パララックスサイトなどで1ページあたりの容量が大きくなった場合、通信回線にもよりますが全ての画像とソースコードの読み込みが完了するまで結構な時間がかかったりします。 読み込み中の間は画像が順次表示されていって美しくなかったり、不具合が起きたり、訪問者がイライラして離脱に繋がったり…いろいろ不都合があります。 これを解消するために、ページを読み込み中の間はローディング画面を表示し、読み込み完了後にコンテンツを表示する方法をとります。 イメージとしては、読み込み中は上記の画像のようにコンテンツの上に目隠し用のレイヤーを表示し、全ての読み込みが完了したタイミングで目隠しを非表示にするイメージです。 ソースコードは左から右へ、上から下へと読まれていくので、ソースコードを書く位置にも注意しましょう。 ソースコードと画像が「全て読み込まれた」というイベントは、javascr
パララックスをサクッと作れるskrollr
「skrollr」は、パララックス（視差効果）を簡単に実装できるプラグインです。 サンプルの動画を見ていただければわかりますが、非常に多彩なエフェクトが用意されており、基本的なパララックスサイトであれば、サクッと作れます。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、skrollrを配布ページからダウンロードしましょう。skrollrはGitHubで公開されており、ページ右下の「Download ZIP」というボタンからダウンロードします。 jQuery本体と「dist」フォルダに入っている「skrollr.min.js」を、利用するWebページのbodyの閉じタグ直前で読み込みます。 //(中略) <script src="jquery.min.js"></script> <script src="skrollr.min.js"></sc
jquery.kerning.js
jQuery.Kerning.js A jquery plugin which adjust text kerning in HTML. Get Source Demo うつくし明朝 - plain ポラーノの広場 あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。 うつくし明朝 - kerned ポラーノの広場 あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。 M+ 2m Regular - plain ポラーノの広場 あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。 M+ 2m Regular - kerned ポラーノの広場 あのイーハトーヴォ
[JS]スマホでもデスクトップでも快適！水平スクロールコンテンツを簡単に実装できるスクリプト -horizonScroll.js
マークアップは非常にシンプル、スクリプトの設置も簡単、スマホでもタブレットでもデスクトップでもすいすい快適に操作できる水平スクロールコンテンツを実装できるjQueryのプラグインを紹介します。 デモのアニメーション horizonScroll.jsの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="jquery-1.10.2.js"></script> <script type="text/javascript" src="jquery.horizonScroll.js"></script> </head> スマホなどタッチデバイス対応にする場合は、touchSwipe.jsも加えます。 <head> ... <script type="tex
![[JS]スマホでもデスクトップでも快適！水平スクロールコンテンツを簡単に実装できるスクリプト -horizonScroll.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/87c79333735eb75d10033e33d194426b66f5def3/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015031609.png)
45+ Creative Menu With jQuery and CSS3 - ninodezign.com
45+ Creative Menu With jQuery and CSS3 by ninodezign · November 5, 2014 Menu is the most important part of website to show visitor about your website purpose and also easy for user to find information on the website, it is a key factor in the user experience. A well laid out navigation can mean a first time visitor is able to be successfully guided through the site. If you want to create navigatio
JavaScript・jQueryの改修・高速化のためのメモ - Qiita
たまにJavaScriptやjQueryなどの改修が入ったりすると忘れてしまうので、自分用のメモとして残しておきます。 JavaScriptコーディングベストプラクティス（高速かつ堅牢なコードを効率よく書くために）を参照しながらのメモになります。 随時、この記事に追記予定です。 高速化メモ JavaScript編 スタイルシートは上に、JavaScriptは下に指定する JavaScriptファイルは読み込んだ後、通常はスクリプトを解析している間、他のファイルの読み込みをブロックする JavaScriptはページの上部に指定すると、このブロックによりロード時間が増加する場合がある スタイルシートはなるべく上に、JavaScriptファイルは下部にしていることで、ロード時間が短縮できる 画面描画に関係ないJavaScriptは、</body>の直前に書く $(document).readyを
jQuery UI
jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice. What's New in jQuery UI 1.13? Compatibility with recent jQuery versions (up to 3.6): Usage of deprecated jQuery API
Example of simulating "-webkit-background-clip: text" property — resize, copy, search, etc.
Example of simulating "-webkit-background-clip: text" property — resize, copy, search, etc. Pattern A pattern, from the French patron, is a type of theme of recurring events or objects, sometimes referred to as elements of a set of objects. The elements of a pattern repeat in a predictable manner. Patterns can be based on a template or model which generates pattern elements, especially if the elem
Unheap - A tidy Repository of jQuery Plugins & JavaScripts
Another great gem from Zurb. What if you wanted to make a user aware of a piece of content long before their mouse directly hovers over its element? Perhaps it was a piece of content that a user would have never otherwise hovered over (thus rendering all that CSS you styled on the :hover of your class forever invisible to your user). What is a designer/developer to do? Reactive Listener allows us
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - kotarok/jQuery.waokon: 和欧文間スペースを自動的にある程度適当にちょっといい感じにします。
