可変するボックスでブロック要素を縦中央に配置したい場合はjQueryを使おう | Cappee Design
あとで読みたい人は… @cappeeです。 ボックスを縦中央に配置する系のテクニックはたくさん記事がありますが、画面全体の縦中央か、サイズが固定されたボックスの中で縦中央にするものばかりです。 縦中央の問題点 今回私が実現したかったのは、左に文字数が前後するテキストがあり、左に画像置換したボタンをテキストの量に関わらず縦中央配置する、というものです。 画像置換の方法はいろいろありますが、今回のボタンは画像置換の関係でブロック要素になっています。 よく記事で書かれているポジションやネガティブマージンを使う方法だとボックスのサイズを固定する必要があるのです。 あと、とても便利なCSSである table-cell を使うという選択肢もありますね。 ただIE8以降からの対応となるので、スマホサイトの制作であればこちらが大活躍するかと思います。 [意外と知らないCSS]スマホ制作に便利！displ
【jQuery大量】Webデザイナーならブクマ必須！jQuery小技を紹介しているページのまとめ | Y氏は暇人
jQuery便利ですよね。Web制作には欠かせないものになってきましたね。 これまでずら〜〜っとコードを書いていたものも jQuery が出てきたことでコンパクトでわかりやすくなり、Webデザイナーでもプログラマーに頼らずに動きのあるサイト作りが可能になりました。 ここではノンプログラマーでもカンタンにコピペベースで実装できるjQuery小技を紹介しているページをまとめています。 Web制作をしていると必ず使用するものばかりですので各ページは要ブクマです！ これだけ大量に小技があれば必要な機能は大体そろうのではないでしょうか？ 少しのコードで実装可能な20のjQuery小技集 http://www.webcreatorbox.com/tech/jquery-tips20/ このページで紹介されている小技一覧 1.マウスオーバーで画像を変更 2.外部リンクを別タブで開く 3.ページトップ
HTML5 × CSS3 × jQueryを真面目に勉強してみる – #4 LESS | DevelopersIO
そんな訳で、拡張メタ言語の中でも特にハードルの低いだろうLESSに触れてみることにしました。 拡張メタ言語 - LESS メタと称されるだけあって、LESSはHTMLやCSS、JavaScriptといった類の言語とは毛色が違います。そういった言語によって記述されたソースコードと同じ意味（機能）を持ちながら、より簡略的に表現できるようにしたための言語というわけです。 念のため分かりやすく補足しておきますと、メタとは比喩とか暗喩という意味であって、「アンタなんか牡丹じゃなくて豚よッ！」というセリフの豚という表現が正にメタに当たります。 ※豚というのは例えであって、本当に動物の豚だといっているわけではありません。 他にもこのような拡張メタ言語には、CSSに対してSCSS(Sass)、HTMLに対してHamlといったものがあります。JavaScriptに対してCoffeeScriptというのが比較
jQueryで簡単に作れるマウスオーバーでアニメーションするボタン５種
Posted: 2010.10.24 / Category: javascript / Tag: jQuery ちょっと前まではマウスオーバーといえば画像の切り替えくらいでしたけど、最近ではアニメーションで切り替わるマウスオーバーも増えてきましたね。 ということでこの記事ではjQueryを使用して、わりと簡単に作れるマウスオーバーアクションをご紹介します。 ナビゲーションはテキストにしないとseo的にあれだよとか言われていますが、コーポレートサイトではまだまだ画像を使用されていることが多いと思います。なので、今回は画像ナビゲーション限定です。（テキストでもあまり変わらないと思いますが……） 縦型+テキストタイプのナビゲーションはこちらの記事をご覧ください。 「jQueryで作るマウスオーバーアニメーションするテキストタイプの縦型ナビゲーション10種」 htmlと画像の準備 はじめにボタンと
まよねこ inside » Blog Archive » 【jQuery】thisの親や子要素の指定方法[リライト版]
jQueryで、”this”の親要素、子要素（子孫要素）を指定する記述方法のメモ、リライト版です。 （元々はこちら） 親要素 thisの親要素を取得 $(this).parent() “親要素を全て返す“記述です。 近いものとして、”ルートを除く先祖要素を全て返す“parents()や、”開始要素から最も近い親要素を選択“するclosest()もあります。 参： parent([expr]) – jQuery 日本語リファレンス parents([expr]) – jQuery 日本語リファレンス closest([expr]) – jQuery 日本語リファレンス jQueryで親要素のスタイル変更 : JSをつらつらとダラダラと書く 子要素・子孫要素 thisの子要素、もしくは子孫要素（ここでは<ul>）を取得 子要素 $(this).children("ul") 子孫要素
かえラボBlog
かえラボBlogはラナデザインアソシエイツのテクニカルチームが運営する技術系ラボプロジェクトですいよいよHTML5もメインストリームになってきたようなので、もろもろテストもかねて作ってみました。 デモはこちら テーマは「重力と音｣です。 ボール（低機能なブラウザでは箱）が投げられてバウンドするだけの単純な内容ですが、 HTMLファイルと使用するサウンドファイルのみで動作しています。 jQueryなどの外部ライブラリも使用していません。（ここ重要） 重力間の表現は下記の公式を利用してます。 初速をv、経過時間をt、仰角をθ、重力加速度をg、初期座標を（x0, y0) として任意の座標を求めると x = v * t * cosθ + x0 y = v * t * sinθ - g * t * t / 2 + y0 音の再生には、HTML5のaudio要素（非対応ブラウザはembed要素）を使
この発想がすごい！次世代表現のヒントがいっぱいのWebサイト
IKEA | TRY ON A NEW SOFA... / uniqlo undercover / TIERRA | 福岡市中央区平尾の美容室 ティ...他...全5件
jQueryで画面遷移のないサイトを作ろうとしたときのちょっとしたメモ
Posted: 2012.02.03 / Category: javascript / Tag: jQuery jQueryを使って画面遷移のないサイトを作ろうとしたときのちょっとしたメモです。 サーバーとやり取りをする、Ajax的なことは書いていないのであしからず。 リンク（href）を無効にする 画面遷移のないWebサイトでもJSのない環境やSEOも考慮して href にリンク先を設定したいときがあります。 hmtl <a href="hoge.html" id="btn">ボタン</a> このような場合だと #btn にイベントを設定しても画面遷移してしまいます。 click イベントに「e.preventDefault()」と記述すればhrefを無効にになり画面遷移が行われません。 javascript $('#btn').click(function(e){ e.preventD
背景画像に更にドットパターンを合成して超カッコよくできるjQueryプラグイン「Vegas Background」:phpspot開発日誌
背景画像に更にドットパターンを合成して超カッコよくできるjQueryプラグイン「Vegas Background」 2011年05月19日- Documentation: Overlay - Vegas Background jQuery Plugin 背景画像に更にドットパターンを合成して超カッコよくできるjQueryプラグイン「Vegas Background」。 背景画像を大きくサイトに使う場合に、単に写真を使ってもカッコイイのですが、ドットパターンを合成してよりカッコよくすることが出来ます。 その昔、Photoshopで画像にテレビに写ったような走査線を入れるようなプラグインが流行ったりしましたが、そういう処理は今やjQueryでやる時代のようです。 大きい写真を背景に使ったデザイン。 画像が小さくてもブラウザサイズに応じて引き伸ばしてくれる機能もついてます。 拡大してみると、まぁ
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>
縦書きにしよう
【jQueryのプラグインを作ろう！】 第12回「縦書きにしよう」 ＊これはascii.jpで連載した記事の続きです。このため、このページを読む前にあらかじめascii.jpで連載した記事をお読み下さい。 text : 古籏一浩 ■横書きでも縦書きでもOKな日本語 日本語は他の言語と違って横書きでも縦書きでもOKです。クロスワードパズルなどは非常に便利な言語です。この縦書き機能ですが、IE以外のブラウザでは標準でサポートされていません。そこで、今回は文字を縦書きにするプラグインを作成してみましょう。 ■純粋にテキストだけを縦書きに 縦書きをまじめに実装すると面倒なので少し条件をつけておきます。まず、HTMLタグは反映されません。一切無視されます。純粋に文字だけを抜き出して縦書きにするだけです。また、一部の文字は回転させないといけませんが、とりあえず「−」を「｜」に変換するだけにしておきます
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
サービス終了のお知らせ
【javascriptパターン】よく使うメソッド、パターン【jQuery】 | ブログ | ColorFullWeb
Loading...
La Moulade - Creative Studio
ososogalaxy