メディアクエリ（Media Queries）の罠 – $(window).width()とスクロールバー | ツクメモ - ウェブやアプリをツクるヒトのメモ
メディアクエリ（Media Queries）の罠 – $(window).width()とスクロールバー 2015-05-26 JavaScript スクロールバーが表示される場合その幅を含んでしまうということです。 メディアクエリだけで、レスポンシブWebデザインを行うのであれば、ブレークポイントのずれがないので、問題ありません。 しかし、JavaScriptを一緒に使う場合は、注意が必要です。 jQueryでWindowサイズを取得する場合、このように書くことが多いと思います。 これだと、スクロールバーの幅が含まれていないので、15～20pxくらいメディアクエリと差が出てしまいます。 jQuery if ( $(window).width() < 768 ){ ... } レスポンシブで、メディアクエリとともにJavaScriptを併用するとき、メディアクエリ側でスクロールバーを含むの
CSSとJS/jQueryでTwitter埋め込みタイムラインのデザインをカスタマイズする | ITハット
CSSとJS/jQueryでTwitter埋め込みタイムラインのデザインをカスタマイズする 毎日インスピレーションを受けるため、ハイクオリティーなWebサイトを探すのが日課になっています。そこで、もったいないなと思うのがTwitterタイムラインウィジェットが白く、浮いてしまっているということです。せっかく、美しいデザインのサイトなのにTwitterウィジェットで台無しになってしまっていました。そこで、今回はTwitterウィジェットを自由にカスタマイズする方法を紹介します。 ウィジェット作成 まず、Twitterのページへ行き、自分のアイコンをクリックします。 設定をクリックします。 左のメニューからウィジェットを選びます。 新規作成をクリックします。 特に設定するところはありませんが、オプションで@ツイートを除外したい場合はチェックをはずしましょう。設定が終わったらウィジェットを作成を
input type=”file” を画像ボタンに変更する方法 ファイルアップロードをカスタマイズ | Stronghold Archive
どうもこんばんは！ 今日は【input type=”file” を画像ボタンに変更する方法】を書きたいと思います。fileアップロードを画像ボタンに差し替え、ユーザビリティを向上させるのが目的です。たまに使いたくなるのでここにメモしておきますね。 通常のファイルアップロードタグ <input type="file"> 通常の状態です。CSSで背景やボーダーを削除するデザイン変更には限界があります。 ですのでjQueryで補完します。 ボタンの準備 ファイルアップロードを画像ボタンに変更 ・HTML <input type="file" id="file_01" class="file"> <label class="file_mask"> <span><!– 画像用spanタグ –></span> <input type="text" id="mask_file_01"> </label>
【CSS+JS】hoverでばい〜んとバウンドアニメーションさせる | STOCQ
今年の目標の1つに「一瞬で動くデザインを作れるようになろう」というのを設定していまして、だいたいの場面でそれっぽいことができるようになってきました。特にWeb上でのアニメーションは軽快で、作った動きを手軽に伝えられるので重宝しています。
ファイナルファンタジー オール ザ ブレイベスト | SQUARE ENIX
ファイナルファンタジー オール ザ ブレイベスト
Firefox対応！スクロールバーをCSS+js+画像でカスタマイズする
※株式会社マイスタンダードでは、実在性の証明とプライバシー保護のため、グローバルサインのSSLサーバ証明書を使用し、SSL暗号化通信を実現しています。 株式会社マイスタンダードをご覧いただくには、最新のFlashPlayerが必要です。 ・株式会社マイスタンダードをご覧いただくには、最新のAcrobat Readerが必要です。 ・JavaScriptを利用しています。JavaScriptの設定を有効にする必要があります。 [サービス対応地域] 北海道,青森,岩手,宮城,秋田,山形,福島 東京,神奈川,埼玉,千葉,茨城,栃木,群馬,山梨 新潟,長野,富山,石川,福井 愛知,岐阜,静岡,三重 大阪,兵庫,京都,滋賀,奈良,和歌山 鳥取,島根,岡山,広島,山口 徳島,香川,愛媛,高知 福岡,佐賀,長崎,熊本,大分,宮崎,鹿児島,沖縄 システム開
Javascript 動的なCSSの適用 - とみぞーノート
function applyCSS(doc, cssfile, overwrite) { if (typeof overwrite == "undefined") overwrite = 0; // デフォルト:CSSの追加 // 既存のCSSを削除 if (overwrite && doc.styleSheets.length >= 1) { var links = doc.getElementsByTagName("link"); for (var i = 0 ; i < links.length ; i++) { if (links[i].rel == "stylesheet") links[i].parentNode.removeChild(links[i]); } } // CSS追加 if (document.all) { doc.createStyleSheet(cssfil
Resizable tabbed navigation with CSS
The navigation bar shown here is achieved via 3 images, a bit of CSS and some JavaScript. If Microsoft had built a browser that supports CSS2 properly, there wouldn't be any need for the JavaScript. Go on, resize your browser font size now! (Note: Yes, when you resize the font enough, the navigation will wrap into two lines and look a bit rubbish, but this is what you get for using horizontal navi
CSS と JavaScript でタブ切り替え
CSS と JavaScript でタブ切り替えを実現しています。 なるべく CSS や JS の記述量を最小にするように努力しました。 もっとシンプルにできそうなアイディアがございましたらご教示下さい。 「無償・無保証・著作権放棄」 ですので、 このページのソースを適当にいじって自由に使って下さい。 全てのタブの中味は 1 つの HTML ファイル (このファイル) に書いてあります。 見出しのクリックにより、表示の ON/OFF を切り替えるだけ、という仕組みです。 タブの見出しをクリックするたびにサーバーを読みに行くのが 欝陶しく思えるときに、うってつけかと。 そう言えば、某サイトでは、クリックどころか、 タブの見出しにマウスカーソルを合わせるだけで、 フォーカスされていることを表す見出しの画像 (背景色が異なるだけ) を いちいち Web サーバーへ取りに
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Cover Flow Carousel Example
透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる - DesignWalker