タグ「div id」 - はてブログ

タグ div id

新着順人気順 5 users 10 users 50 users 100 users 500 users 1000 users

(1 - 25 / 30件)

minimum-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">  <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 ... 続きを読む