twitterの新ウィジェット（埋め込みタイムライン）をカスタマイズ
MS Office カテゴリ MS Office (105) 関連タグ Access (44) Excel (92) OfficeScripts (2) PowerPoint (8) Python (2) VBA (91) YouTube (6) イラスト (44) 入門 (38) Web カテゴリ Web (85) 関連タグ facebook (4) jQuery (10) linux (3) Photoshop (18) PHP (24) tips (22) twitter (10) WordPress (76) YouTube (6) アプリ (29) イラスト (44) デザイン (15) ブログ (39) 入門 (38) 分析 (20) Adobe カテゴリ Adobe (28) 関連タグ facebook (4) Fresco (2) Illustrator (8) JavaS
[JS]複数のパネルを1ページに垂直に配置した際にベストポジションにスクロールを補正するスクリプト -jQuery.panelSnap
Event Capturing 各イベントを取得することもできます。 jQuery.panelSnapの使い方 Step 1: 外部ファイル スクリプトをhead内に外部ファイルとして記述します。 <head> ... <script src="/path/to/jquery.js"></script> <script src="/path/to/jquery.customEvents.js"></script> <script src="/path/to/jquery.panelSnap.js"></script> </head> Step 2: HTML コンテンツは一つずつsection要素（変更可能）で並列に配置します。 スタイルシートは各コンテンツ自由にしてください。 <body> <section>コンテンツ：1</section> <section>コンテンツ：2</sect
[JS]納品前の確認に最適、使用されていないCSSのセレクタを見つけ出すスクリプト -Helium
ウェブサイトの多数のページ全体に渡り、スタイルシートで定義されたセレクタが使用されているかどうかチェックし、使われていないセレクタのレポートを生成するスクリプトを紹介します。 納品する際に、不要なセレクタを除去するのに役立ちますよ。 Helium -GitHub Heliumの準備 Heliumの使用方法 Heliumの準備 HeliumはjQueryなど他のスクリプトを必要せず動作し、URLのリストから全てのページをロードし、解析して、スタイルシートで見つけたセレクタが全ページで使用されているかどうかチェックし、レポートを作成します。 スクリプトは、開発環境で実行してください。 公開中のサイトで実行すると、ユーザーにもHeliumの動作が見えてしまいます。 Step 1: 外部ファイル テストするページの全てに、当スクリプトを外部ファイルとして記述します。 場所は、head内でも</bo
[JS]レスポンシブ対応のシンプルながら高性能なすごいナビゲーション！ -Resposive Nav
jQueryなどに依存せず単体で動作し、スクリプトがオフでも機能し、実装も非常にシンプルで、デスクトップやタブレット・スマフォそれぞれで最適な状態で表示し、IE6にさえ対応し、しかも超軽量のスクリプトを紹介します。 シンプルで、セマンティックなマークアップ 1.8KBの超軽量スクリプト 外部ライブラリは不要 CSS3アニメーションを使った美しいエフェクト タッチイベントをサポート クリックとタップの違いを調整 スクリプトがオフでも機能 MITライセンス 対応ブラウザ IE6をはじめ、デスクトップ・タブレット・スマフォの主要なブラウザ全て。 以下は、テスト済みのプラットフォームです。 iOS 4.2.1+ Android 1.6+ Windows Phone 7.5+ Blackberry 7.0+ Blackberry Tablet 2.0+ Kindle 3.3+ Maemo 5.0+
MdN Design｜総合情報サイト
高さが固定のエリアに単一行のテキストを天地中央にセンタリングすることは、line-heightを高さと同じに指定する等の方法で可能だが、複数行となると簡単にはいかない。複数行にまたがるテキストを天地中央にセンタリングしたいということは多いだろう。 それを実現する方法のひとつとして、「CSS TRICKS」の「Vertically Center Multi-Lined Text」（css-tricks.com/vertically-center-multi-lined-text/）が参考になるだろう。このサイトで紹介されているサンプルは高さが固定になってしまっているが、これを参考に高さが可変の例を紹介しよう。 ここでは【1】のようなものをつくる場合を考えてみる。まずは、HTML【2】とCSS【3】を用意しよう。メニュー用のリスト要素ul.boxに対して、「display:table;」を指定
iframe内からWebページが読み込まれるのを防止する X-Frame-Options HTTP レスポンスヘッダ
昨日とあるところに投稿された質問で"フレーム内に表示する許可がありませんというエラーが出る"と書かれていました。 そういった設定がWebページに対して可能なのかどうか調べてみたところ、X-Frame-Options HTTP レスポンスヘッダというものを使えばコントロールできるようです。 LINK： The X-Frame-Options response header クリックジャッキング攻撃を防止するなどの目的で用意されたもののようですね。最近新しく出来たものではなく随分前からあるようです。今後使う機会もあるかもしれないので使い方を確認しておきました。 X-Frame-Optionsヘッダに設定可能な値はDENYとSAMEORIGINの2つがあります。 DENY フレーム内に表示するのを全面禁止 SAMEORIGIN 同じサイト内のページでフレームに読み込まれた場合だけ許可
主要ブラウザでvideoタグを有効にしてくれるJavaScript「html5media」 | Web活メモ帳
html5の<video>タグを使用すると簡単に動画を埋め込めるようになりますが、対応していないブラウザが多いのも事実です。 今回ご紹介する「html5media」はvideoタグを有効にする事ができるJavaScriptです。 videoタグを使用する事でFlashなどのプラグインが必要なくなり、設置も簡単にできるようになります。 詳しくは以下 次のコードを貼付けるだけでvideoタグが有効になります。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src="http://html5media.googlecode.com/svn/trunk/src/jquery.html5media.min.js"></script> 後はhtmlに簡単なタ
Learn web development | web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
誰のためのHTML5？ウェブとテレビと出版と | DECONCEPTER
HTML5はどんな実益をもたらしたのか？正直まだ何ももたらしていないと思う。もたらしたのは「未来への淡い期待とカオスだ」と現状では言わざるをえない。去年から徐々に盛り上がり始めたHTML5は今年に入り一気に熱を帯びて加速した。 言葉の盛り上がりとは裏腹に語られていたメリットを思ったより享受できていないどころか機種やブラウザ依存の差異に苦しんで、コストがかさんでいるのが現状だろう。そんな中仕様策定完了のお知らせが舞い込んできた。W3CがHTML5仕様策定完了を発表、相互運用性テストおよびパフォーマンス向上へ HTML5が話題に上がり始めて3年が過ぎ、現場とは裏腹により一層過熱を見せるであろう来年からの展開をそろそろ想定しておきたい。HTML5の捉え方も仕様も立場やビジネスによって多岐にわたっている。整理しきれない上、難しい話題だが、ぱっと見渡した全体観をざっくりと見ていきたいと思う。この記事
ウェブサイトの明朝体フォントにアンチエイリアスが掛かるフォントサイズ - Webのプルタブ
明朝体にアンチエイリアスを掛けて綺麗に見せる的な ウェブサイトで文字を綺麗に見せたいけど、画像を作るのは面倒くさいなズボラな俺。ディスプレイサイズも大きくなってきているのでこれでいい。きっと大丈夫。良く使うからメモ。 CSS #content h1 { font-family: "ＭＳ Ｐ明朝","MS PMincho","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","HGS明朝E",serif; font-size:23px; font-weight:normal; text-shadow:1px 1px 1px #ccc; /*ここから装飾*/ margin:0 0 10px; padding:5px 10px; border:1px solid #E0DCD8; background: url(h1_gradient_example_bg.gif) to
[HTML5] 位置情報を継続的に取得する - YoheiM .NET
今日はHTML5のGeoLocationAPIを利用した位置情報取得、第2弾。 継続的に位置情報を取得する方法を試してみたので、それをブログに残しておきたいと思います。 HTML5の位置情報を取得する機能とは GeoLocation APIという機能を使う事で、Web画面でJavaScriptを利用する事で、位置情報（経度や緯度など）を取得出来るようになります。 ”HTML5で位置情報を取得する＠YoheiM.NET”をご参照ください。 継続的に位置情報を取得するには HTML5で位置情報を継続的に取得するには、navigator.geolocation.watchPositionメソッドを利用して位置情報を取得します。 // watch Position. var watchId = null; var watchButton = document.querySelector("#wat
![[HTML5] 位置情報を継続的に取得する - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/1632d00b34fa7c78cf8450b7ea81f349cecd4a9b/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F031.gif)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA