株式会社ガイアックスの公式サイト › ガイアックスオフィシャルサイトGAIAX IS A STARTUP STUDIO DETERMINED TO SOLVE SOCIAL ISSUES ガイアックスは、人と人をつなげるため、 ソーシャルメディアとシェアリングエコノミー領域、 web3・DAOを用いた事業に注力する 起業家輩出のスタートアップスタジオです。
[JS]ウェーブ状のアニメーションでフェードイン・アウトさせる超軽量スクリプト -WaveAnimate
エレメントをウェーブ状のアニメーションでフェードイン・フェードアウトさせるjQueryのプラグインを紹介します。 スクリプトは1.7kで超軽量です。 WaveAnimate jQuery Plugin デモ [ad#ad-2] WaveAnimateのデモ デモでは3通りのアニメーションがあり、上キャプチャのものは端のエレメントから順番にフェードします。 エレメント（右端の赤）を除外し、アコーディオンのようなアニメーションを適用することもできます。 赤いエレメントを除外したデモ WaveAnimateの実装 デモを例に、実装方法を紹介します。 HTML デモではdiv要素で実装したボックスを配置しているだけです。 <div id="demo1"> <div id="el1a" class="fademe"> </div> <div id="el2a" class="fademe"
parallax.jsをいじってパララックスのデモ作ってみた。
2012年2月17日 カテゴリ： Web制作 parallax.jsをいじってパララックスのデモ作ってみた。 Tweetちょっと前に視差効果のあるパララックスサイトまとめなどがよくホットエントリーに上がってきて、「自分もこんなの作ってみたいなー」と思っていたのでトライしてみました。 チュートリアルは下記サイトを参考にしています。 話題になったNikebetterworldに良く似たサイトを作って解説をしてくれています。 Nikebetterworld Parallax Effect Demo そして出来あがったのはこちらのデモサイトです。 以下、メモがわりの解説です。 まず、チュートリアルのサイトからサンプルファイルをダウンロードしてHTMLをみると次のようなjsファイルが読み込まれているのがわかります。 <script type="text/javascript" src="https:
clearfixでfloatを解除 | d-spica
clearfixでfloatを解除 2007-03-07 1 0 XHTML/CSS clear, CSS 枠や背景が消えたり，途中で切れたりしたことはありませんか。 floatした要素（ボックス）を含む親要素（ボックス）のborderやbackgroundが途中で切れてしまうことがあります。 左の例では，右側のメニューが終わったあたりで，左右にあるラインも切れています。 floatした要素の高さは親要素の高さに反映されない 分かりやすいようにXHTMLとCSSの例を書いてみましょう。 <div id="wrapper"> <div id="content"> <p>content</p> </div> <div id="menu"> <p>menu</p> </div> </div> #wrapper { width: 200px; border: solid 3px #999999;
インラインフレームの高さを自動調整するJavaScriptをOperaにも対応 - DRYOUT プログラマー社員のブログ
インラインフレームの高さを自動調整するJavascriptって、検索すればすぐに見つかりますが、残念なことにOperaブラウザに対応したものがぜんぜん見つからないようです。 弊社ではOperaを自社サイトのユーザに向けた推奨ブラウザとして宣言していますので、他のブラウザはともかく、自社サイトに「Opera非対応」のコンテンツだけは置くわけにはいかない事情があります。 今回はなんとしてもこのソリューションを確立すべく、海外のCMS「Joomla!」で使われているJavascriptをベースに、これをOperaに対応させることにしました。 設置方法とソースコードは以下のとおりです。 設置方法とソースコード まず、次の Javascript コードを親フレームのHTML内に貼り付けます。貼り付ける「場所」はどこでもいいですが、可能なら<head>と</head>の間がいいです。 <script
Canvas - HTML5.JP
このコーナーでは、JavaScriptから図を描くことができるCanvasについて解説します。 Canvasとは Canvasとは何か、そしてCanvasで何ができるのかを事例を踏まえて分かりやすく解説します。 Canvasの使い方 実際に、Canvasをどうやって使いこなすのかを、サンプルを通して解説していきます。 いろいろな図形を描く Canvasでは線を引くだけではなく、さまざまな図形を描くためのメソッドを用意しています。このコーナーではCanvasで利用できる図形描画のいくつかをご紹介します。 色を指定する このコーナーでは、Canvasで描く図形に色を指定する方法を紹介します。またCanvasでは指定した色に透明度を与えることも可能ですので、その方法についても紹介していきます。 線形グラデーションを指定する このコーナーでは、Canvasで描いた図形にグラデーションを指定する方法
jQuery公式のテンプレートplugin 「jQuery Templates」
jQuery公式のテンプレートplugin 「jQuery Templates」 Check Tweet 配布元:jquery’s jquery-tmpl at master – GitHub リファレンス:jQuery Templates jQueryプロジェクトからいくつかの公式プラグインが公開されました。そのひとつが「jQuery Templates」。これはJavaScriptで利用できるテンプレートエンジンです。 利用方法 本エントリー執筆時点ではGitHubからダウンロードして利用できますが、jQuery 1.5からはjQuery本体に組み込まれ、プラグインなしで利用することが出来ます。(本体への組み込みは延期されました)また、MicrosoftのCDNでも公開されていますので次のような記述で読み込むことも可能です。 <script type="text/javascript"
Jquery使って、表示されているHTMLを入れ替えたいのです。…
Jquery使って、表示されているHTMLを入れ替えたいのです。 <div id="shop"> <p><a href="http://www.aaaa.jp">お店の名前</a></p> <p>あああああああああ</p> </div> <div id="shop"> <p><a href="http://www.bbbb.jp">お店の名前</a></p> <p>あああああああああ</p> </div> <div id="shop"> <p><a href="http://www.dddd.jp">お店の名前</a></p> <p>あああああああああ</p> </div> <div id="shop"> <p><a href="http://www.cccc.jp">お店の名前</a></p> <p>あああああああああ</p> </div> HTMLを直接書き換えられればいいのですが、P
ブロックレベル要素の高さを揃えるheightLine.js[to-R]
ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。 ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。 このライブラリは新バージョンがあります。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。 このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。 設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja
![ブロックレベル要素の高さを揃えるheightLine.js[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
jQueryでスクロールすると表示する系いろいろ
jQueryでスクロールすると表示する系いろいろ 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 投稿日2012年03月08日 更新日2019年12月19日 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration
jQueryで長いページの区切り（セクション）ごとに背景を変化させる
Posted: 2011.11.07 / Category: javascript / Tag: jQuery, アニメーション 最近は一ページに内容を詰め込んだ縦長のページが増えてきましたね。 そこでスクロールすると区切り（セクション）ごとに背景が変化したら、面白いのではないのかと思いましたのでやってみました。 html sectionはhtml5ではなくdivにclassでマークアップした昔ながらの形式にしました。 html <div class="section"> <h2>Section0</h2> <p> ここは0番目のコンテンツです。 </p> </div> <div class="section"> <h2>Section1</h2> <p> ここは1番目のコンテンツです。 </p> </div> <div class="section"> <h2>Section2</h2>
いますぐ使えるCSS3テクニック集！ コピペ用サンプル付き！
面白法人カヤックがサイトリニューアル！ いきなり手前みそで恐縮ですが、今年の夏、面白法人カヤックがコーポレートサイトを2年ぶりにリニューアルしました。 「世界一更新頻度が高く、カヤックの活動がひと目で分かるコーポレートサイト」をコンセプトに、可読性が高く容量も軽いサイトに仕上げました。 ひと目見るだけで、最近のカヤックの動向が分かるようにニュースでTOPページを構成し、日々リアルタイムにカヤックの最新の情報を発信します。 技術的には、ブラウザのウィンドウサイズによって拡縮する画像はベクターファイルであるSVG（Scalable Vector Graphics）画像で置き換えたり（SVGはベクトル形式の画像のため、拡大してもボケない）、CSS3を用いることで画像の使用を極力控えたりするなど、ページの軽量化を実現しています。 カヤックサイトのCSSテクニックを丸ごと伝授！ 本稿では、サイトリニ
HTML5でWordPressのテンプレート（Theme）作成
この週末ちょっと時間があったので、自分でWordPressのテーマを作ってみました。せっかくなので、勉強がてらHTML5で組んでみることにしました。 「HTML5」とは、ホームページ作成で広く使われているマークアップ言語HTML（現行のバージョンは4.01）の時期バージョンとなります。またJavaScript APIやCSS3などの次世代Web技術を総称してHTML5と呼ぶこともあります。むしろ最近では後者の意味で使われることが一般的になってきています。 今回HTML5でマークアップしテンプレートを作成したわけですが、実際やるとなるとやはり難しかったです。意味付け（セマンティック）の部分では大変悩みましたね。 参考にしたサイトは以下となります。 ・HTML5リファレンス・HTML5.JPどちらもタグを解説したサイトとなりますが、特にHTML5.JPのhtml5doctorは大変役に立ちまし
HTML5 の雛形 - html5doctor - HTML5.JP
サイト内検索 この記事は、html5doctor に掲載されている記事「HTML5 Boilerplates」を日本語訳したものです。この記事では、今すぐに、HTML5 でページを作るために、まず最初に必要な情報が簡潔にまとめられています。 原文タイトル HTML5 Boilerplates 原文ページ URL http://html5doctor.com/html-5-boilerplates/ 著者 Remy Sharp 氏 原文投稿日 2009-07-17 一部、直訳ではなく意訳した部分がございます。原文と表現が異なることがございますので、ご了承ください。この本日本語訳には、翻訳上の誤りがある可能性があります。したがって、内容について一切保証をするものではありません。正確さを求める場合には、必ず各記事の原文を参照してください。当方は、この文書によって利用者が被るいかなる損害の責任を負
CSS3リファレンス
背景 background-clip …… 背景の適用範囲を指定する background-origin …… 背景の基準位置を指定する background-size …… 背景画像のサイズを指定する 角丸 border-radius …… 角丸をまとめて指定する border-top-left-radius …… 左上の角丸を指定する border-top-right-radius …… 右上の角丸を指定する border-bottom-left-radius …… 左下の角丸を指定する border-bottom-right-radius …… 右下の角丸を指定する 画像ボーダー border-image …… 画像ボーダーを指定する border-image-source …… 画像ボーダーに使用する画像ファイルを指定する border-image-slice …… ボーダー画像の
[CSS]floatを解除する「clearfix」のIE6/7に対応した改良版
floatを解除する際にclearを使用せずに解除する「clearfix」の改良版をPerishable Pressから紹介します。 The New Clearfix Method いわゆる旧タイプのclearfixはMac IEも対応ブラウザに含まれているため、スタイルシートは下記のようになります。 旧タイプのclearfix <textarea name="code" class="css" cols="60" rows="5"> .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: inline-table; } /* Hides from IE-mac */ * html .cle
Tumblrのテーマをカスタマイズして簡単にブログを作る方法 | トラベルハック｜あなたの冒険を加速する
Tumblr大好きkikuma(@circustic)です。旅行などをすると写真や記録などをブログとして残したくなりますよね？ 今回はTumblrを使った簡単なブログの作り方をご紹介致します。 もし宜しければトラベルハックTumblrアカウントもぜひフォローして下さい！ 1.Tumblrでブログを作るメリット 広告がないのに無料で使える 容量は無制限（正確には一日ポスト出来る上限がある） 独自ドメインを割り当てる事が出来る 投稿が簡単（スマホやメールからの投稿にも対応している) 無料デザインテーマが豊富（カスタマイズをする事も出来る） TwitterやFacebookとの連携にも対応している 関連ツールが豊富 １からデザインをするというのは難しいので既存の「テーマ」と呼ばれるモノをカスタマイズして簡単なブログを作る方法をご紹介致します。 2. Tumblrの無料テーマ「Effector」を
レイアウト作りを簡単にしてくれるCSSグリッドシステム
CSS でのレイアウト、段組み作りがとっても簡単にできる、CSS グリッドシステムをご紹介。既に使っている人もたくさんいるとは思いますが、未体験の人はぜひ試してみてくださいね！ Web デザインに欠かせない、CSS でのレイアウト作り。コンテナ作って、ここにラッパー作って、メインが 600px で padding が 20px だから、サイドバーが、えーと … なんてことになりがちです。そんな面倒な作業がイヤだなーという人におすすめなのが、CSSグリッドシステム。全ての Web デザインに使える訳ではありませんが、結構重宝します。すでに使っている人もたくさんいると思いますが、こんな方法もあるんだよーということでご紹介します。 1. CSSグリッドシステムとは？ CSS グリッドシステムというのは、レイアウトを均等に分けて、マス目上に考えるレイアウト。何が便利かっていうと、この段は4等分にし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スクロールで背景画像が変化する (ように見える) トリック
HTML5 & CSS3のクロスブラウザー対応方法まとめ