タグ div id
人気順 10 users 50 users 100 users 500 users 1000 usersminimum-react.html · GitHub
2018/06/18
8 users
GitHub
module
script
Hello
root
minimum-react.html <div id=root /> <script type=module> import React from 'https://dev.jspm.io/react@16' import ReactDOM from 'https://dev.jspm.io/react-dom@16' ReactDOM.render( React.createElement('h1', null, 'hello'), document.querySelector('#root') ) </script> 続きを読む
t.jsを使ってタイピング風のアニメーションを再現する | 東京上野のWeb制作会社LIG
2018/05/29
19 users
T.js
アニメーション
Web制作会社LIG
東京上野
どうもですよ、はやちですよ:D 今回は、ページ上でタイピングをしているようなアニメーションが再現できるツール「 t.js 」をご紹介します。 導入方法 github のほうでダウンロードしてから読み込んでください。 <script src="t.min.js"></script> 実装方法 基本的な設定方法ご紹介します:D 動かしたいhtmlのマークアップに対して <div id="js-targ... 続きを読む
react-railsでサーバーサイドレンダリングしつつクライアントでsetStateできて最高になった - Qiita
2015/08/09
126 users
Qiita
React
サーバーサイド
pushState
土日でreact-railsとturbolinksを勉強してみた成果です やりたいこと 画面遷移するときは<div id='content'></div> の中身だけ入れ替えて、pushStateで行き来できるようにしたい reactを使ったリッチなページでも、イニシャルロードやSEOの為にサーバーサイドでレンダリングしておきたい サーバーサイドレンダリングした要素を破棄することなくReactで初... 続きを読む
画像を拡大全画面表示するのに、まだLightBoxとか言ってんの？ - それマグで！
2014/11/28
267 users
lightbox
onclick
マク
コピペ
昨今
2014-11-29 画像を拡大全画面表示するのに、まだLightBoxとか言ってんの？ フルスクリーン・モード使えよ。楽だぞ 昨今のブラウザにはフルスクリーンモードが搭載されていて、それを使うと、コピペレベルで画像を拡大表示が出来る 画像をフルスクリーンにお手軽に作るHTMLの例 <div id='img01' onclick="this.webkitRequestFullScreen();" ... 続きを読む
三章第四回 イベントキャプチャリング — JavaScript初級者から中級者になろう — uhyohyo.net
2014/07/25
42 users
uhyohyo.net
aaa
head
test
Body
JavaScript初級者から中級者になろう 戻る | 三章第三回 | 三章第五回 三章第四回 イベントキャプチャリング イベントキャプチャリング いきなりですが、次のサンプルを見てみましょう。 <!doctype html> <html> <head> <title>test</title> </head> <body> <div id="aaa"> <p onclick="console.lo... 続きを読む
IDを使わないCSSの設計｜Web Design KOJIKA17
2013/09/10
524 users
CSS
header
設計
clearfix
Logo
CSSのスタイリングではIDを使用しない、という話をよく聞くようになりました。 私も最近は、IDを使わずにコーディングしているので所感を書きます。 CSSでIDを使わない 「IDを使わない」ということをHTMLの変化で示すと、以下のようになります。 <div id="header" class="clearfix"> <h1 id="logo"><a href="">logo</a></h1> <... 続きを読む
CSS3のFlexboxでパーセントで指定された要素を天地左右の中央に配置する - to-R
2013/07/11
45 users
Flexbox
outer
to-R
パーセント
コリス
ネタ元：[CSS]パーセントで指定された正確なサイズが不明な要素を天地左右の中央に配置するスタイルシートのテクニック | コリス これを読んでちょっとトリッキーだな。CSS3のFlexboxを利用すれば簡単にできるのにとおもったので紹介しておきます。 次のようなHTMLがあったとして、 <div id="outer"> <div id="inner"></div> </div> 次のようにCSSを... 続きを読む
要素の表示/非表示をトグルするベストプラクティス - hogehoge @teramako
2013/06/12
40 users
foo
hogehoge
DOM
teramako
div
JavaScript, CSS, DOM[JavaScript] tr要素 の display プロパティを用いた表示切替えについて | Blog | Development Referenceを読んで、display = "block" はアカンやろ、と思ったので書いておく。 div id="foo"> p>FOOp> div> div#foo を JavaScript から表示/非表示をするに... 続きを読む
上部固定メニューのお供に、jQueryを使ったクリックで開閉するメニュー｜Webpark
2013/05/23
113 users
jQuery
Webpark
Facebook
お供
マウス
タイトルのとおりjQueryを使ったクリックで開閉するメニューを作ってみました。先日マウスを乗せると開くメニューを紹介しましたが、用途によって使い分けるといいと思います。 facebookにも同じようなのがありますね。それではHTMLから解説していきます。 HTML まずはHTMLです。コンテンツの部分は省略しています。 <div id="fixed-menu"> <div id="fixed-m... 続きを読む
ブログのSEO対策として画面最上部に固定してあるSNSへのリンク・検索窓をフッターへ書き直してみた | OZPAの表4
2013/03/04
40 users
OZPA
ナビゲーションバー
NAV
header
フッター
最近読んだカグア！Googleアナリティクス解説Blogさんの最新SEO対策メモと7つの気づき2013と言う記事を参考に、最上部に固定してあるSNSへのリンク・検索窓の要素をフッターに書き直してみました。 これまでは <head></head> <body> <div id="header"> <div id="nav"> <!-- ここにナビゲーションバーの記述 --> </div> </div... 続きを読む
Backbone.jsでつくるMVPなUIパターン【リスト】 ｜ クラスメソッド開発ブログ
2013/03/04
79 users
Backbone.js
クラスメソッド開発ブログ
リスト
今回はBackbone.jsを使ってフォームから追加し、削除できるリストを作ってみたいと思います。デザインは前回同様Twitter Bootstrapで作成しました。 htmlはこちら！ <div id="ui-list"> <div class="list-controls"> <form> <div class="input-append"> <input type="text" placeh... 続きを読む
[jQuery]ページ内の見出しに合わせて目次を自動生成する - かちびと.net
2013/02/26
39 users
jQuery
見出し
result
目次
strong
Result 簡易的なものなので汎用性は高くは無いかも。 jQuery (function($) { $.fn.toc = function(o, p) { p = $.extend({ title: "タイトル" }, p); //見出しを入れるボックスを生成 this.prepend('<div id="toc-list"><strong>' + p.title + '</strong><ol... 続きを読む
[CSS]JavaScriptを使わずに、Pinterest風レイアウトにするスタイルシートのテクニック | コリス
2012/08/22
160 users
コリス
columns
wrapper
CSS
テクニック
昨日はJavaScriptを使ってPinterest風レイアウトを実現するスクリプトを紹介しましたが、今日はJavaScript無しでスタイルシートで実現するテクニックを紹介します。 デモページ：幅900pxで表示 実装 HTML HTMLは非常にシンプルで、各パネルをdiv要素で実装し、それらをdiv要素で二重に内包します。 <div id="wrapper"> <div id="columns... 続きを読む
ブラウザ上でサインを書けるjQueryプラグイン「jSignature」:phpspot開発日誌
2012/06/11
51 users
jQueryプラグイン
phpspot開発日誌
scrip
jSignature ブラウザ上でサインを書けるjQueryプラグイン「jSignature」。 CanvasかFlashで描画出来るので多くのブラウザに対応。ウェブサイトにサインを導入したい場合に使えるかも 実装は以下のように超簡単です <script src="libs/jSignature.min.js"></script> <div id="signature"></div> <scrip... 続きを読む
[CSS]拡大表示する際、CSS3でぼよよ～んとしたアニメーションを加えるチュートリアル | コリス
2012/05/29
71 users
コリス
div
チュートリアル
CSS
アニメーション
十字ボタンをクリックすると、パネルがスライド表示され、各アイテムをクリックすると、バウンドのアニメーションを伴って、ぼよよ～んと拡大表示されます。 デモページ 実装 HTML 中央に配置する領域をdiv要素で確保し、スライドするパネルはdiv要素で、各アイテムはリスト要素で実装します。 <div id="item-receiver"></div> <div id="thumbnail-wrappe... 続きを読む
JavaScript アニメーションのデザインパターン
2012/05/13
955 users
アニメーション
JavaScript
デザインパターン
変色
JavaScript でアニメーションを作る アニメーションとは何？ ビューを少しずつ回転、拡大縮小、移動、変色などを行い、連続的な動きを作る こんな感じ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; setInterval(function() ... 続きを読む
お手軽にお絵かきアプリが作れるjQueryプラグイン「wPaint」:phpspot開発日誌
2012/04/17
49 users
options
Container
jQueryプラグイン
Websanova - wPaint jQuery Plugin お手軽にお絵かきアプリが作れるjQueryプラグイン「wPaint」 div id="container" の要素があったとして、var wp = $("#container").wPaint([options]); とすれば簡単にHTML5キャンバスを使ったお絵かきウィジェットが作れます。 知識ゼロでこうしたものを作るとなるとかな... 続きを読む
[JS]文字にアニメーションを使った面白いエフェクトを与えるスクリプト -Text Effects | コリス
2012/04/01
75 users
コリス
TypeWriter
jquery.js
スクリプト
Scrambled Writer 文字をごちゃまぜにし、アニメーションで元通りにします。 Text Effectsの使い方 Text Effectsの使い方は簡単で、「jquery.js」と当スクリプトを外部ファイルとして記述し、スクリプトを実行するだけです。 「Typewriter」を例にすると、下記のようになります。 HTML <div id="my-container"> Lorem ips... 続きを読む
[CSS]あらゆる背景上で美しく機能する半透明なエレメントを実装するスタイルシート | コリス
2012/01/22
64 users
コリス
shelf
エレメント
半透明
CSS
まるでガラスで作られた棚のように、美しい半透明な3Dのエレメントを実装するCSS3のテクニックを紹介します。 デモページ：Firefoxのキャプチャ 実装 HTML HTMLはシンプルで、各アイコンはa要素、ガラス棚はdiv要素で実装されています。 <div id="shelf"> <!-- Add icons here --> <a class="icon" href="#"></a> <a c... 続きを読む
これはちょっと使いたくなる、キーフレームを使ったCSS3アニメーションのナビゲーション | コリス
2012/01/18
89 users
コリス
NAV
Container
ナビゲーション
Opera
デモ 実装 デモ デモはキーフレームのアニメーションを使用しているため、Chrome, Safari,Firefoxでご覧ください。 ※IE, Operaでは動作しません。 デモページ: アニメーション完了時 実装 HTML ナビゲーションはリスト要素で実装されており、第二レベルはリストの入れ子になっています。 <div id="container"> <ul id="nav"> <li><a h... 続きを読む
[JS]設置も簡単、機能も豊富、キーボード操作でパネルをスライドする -FerroSlider | コリス
2011/10/12
41 users
コリス
cla
div
class
title
FerroSliderの使い方 HTML 各パネルはdiv要素で配置します。 <div id="div1" class="slidingSpaces" title="Page 1"> first page </div> <div id="div2" class="slidingSpaces" title="Page 2"> second page </div> <div id="div3" cla... 続きを読む
[JS]iPhone, iPad対応、パネルを雑誌のようにぺらっとめくるスクリプト -FlipPage | コリス
2011/09/15
44 users
iPhone
margin-left
コリス
div
ぺら
FlipPageの実装 HTML 画像を配置したdiv要素をdiv要素で内包します。 <div id="exemples"> <div><img src="img1.jpg" style="margin-left: 0px;" /></div> <div><img src="img1.jpg" style="margin-left: -250px;" /></div> <div><img src=... 続きを読む
[JS]ごく普通の画像を立体的にスライスしてアニメーションで切り替える画像ギャラリー -Slicebox | コリス
2011/09/06
73 users
コリス
class
title
div要素
アニメーション
デモページ：垂直スライスでウェーブ状 Sliceboxの実装 HTML 画像をdiv要素で内包します。 <div id="sb-slider" class="sb-slider"> <img src="images/1.jpg" title="Creative Lifesaver"/> <img src="images/2.jpg" title="Honest Entertainer"/> <im... 続きを読む
[JS]ブラウザでiPhoneのような滑らかスクロールを実現するスクリプト -Overscroll | コリス
2011/08/29
65 users
iPhone
Overscroll
コリス
Overlay
デスクトップのブラウザでもiPhoneのような滑らかなアニメーションでコンテンツをスクロールさせるjQueryのプラグインを紹介します。 デモページ Overscrollの実装 デモを例に実装方法を紹介します。 HTML スクロールするコンテンツに必要な箇所は「div id=screen」です。 デモでは初期状態ではオーバーレイ（div id=overlay）が表示され、フォーカスされるとスクリー... 続きを読む
Twitter の特定のユーザーの最新ツイートを JavaScript で取得する方法 | ウェブル
2011/08/01
44 users
Twitter
sidebar
jQuery
JSONP
特定
調べたところ具体的なコードを公開をしているサイトがなかったので私のサンプルコードを公開しておきます。JavaScript と言っても jQuery を使っています。Twitter の jsonp からデータを取得します。サンプルですので細かいところは書き換えてください。 使い方 getTweet 関数にユーザー名を入れます。 1 2 3 4 5 6 <div id="sidebar"> <div ... 続きを読む