jQuery：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5 - NxWorld
一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>
アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう
2014年7月3日 SVG ベクター画像を表示する際とっても便利なSVG。名前を聞いたことのある方も多いのではないでしょうか？SVG自体は10年以上前から存在するのですが、HTML5の普及とともに多くのブラウザーでサポートされるようになり、今年に入ってから徐々に見かける機会が増えてきました。今回はそんなSVGにフォーカスしようと思います。 ↑私が10年以上利用している会計ソフト！ 2014年7月3日 追記：SVGスプライトの書き方について修正＆追記しました。 SVGってなに？ SVG（Scalable Vector Graphics）はIllustratorで作成したようなベクター画像を表示する技術です。Web上で一般的に使われる画像形式であるJPEGやPNGなどのビットマップ形式とは違い、ベクター形式の画像は、拡大縮小しても画質が劣化しません。 Appleがレティナディスプレイを発表して
PHP勉強してアフィで稼ごうと掲示板作ってみた結果ｗｗｗｗｗｗ : IT速報
1: 以下、名無しにかわりましてVIPがお送りします 2013/12/05 17:17:07 ID:gATX6Fdk0 全然稼げないんご・・・ 稼いでるやつらはどうやってPVを集めてるんだ？ 3: 以下、名無しにかわりましてVIPがお送りします 2013/12/05 17:18:16 ID:h1dNmTmr0 PVとは 5: 以下、名無しにかわりましてVIPがお送りします 2013/12/05 17:18:54 ID:gATX6Fdk0 >>3 Page View の略だよ 4: 以下、名無しにかわりましてVIPがお送りします 2013/12/05 17:18:39 ID:O6vc4fC+0 何のサイト？ 7: 以下、名無しにかわりましてVIPがお送りします 2013/12/05 17:19:39 ID:gATX6Fdk0 >>4 掲示板だな まとめサイトは管理が大変そうだと思った 8:
スクロール後、ナビゲーションをページトップに固定するjQueryプラグイン「stickUp」:phpspot開発日誌
stickUp - a free jQuery Plugin スクロール後、ナビゲーションをページトップに固定するjQueryプラグイン「stickUp」 最初からposition:fixedではなく、一定以上スクロールした段階でfixedにしてくれるプラグインです。 シームレスにナビが固定されるあたりがクールだったりしますが、これを簡単に実装できます。 関連エントリ レスポンシブなナビゲーションメニュー作成用jQueryプラグイン「Naver」 スクロールすると上に固定される一見普通のナビゲーション実装jQueryプラグイン「SMINT」 レスポンシブでクールなナビゲーションを実現できる「Responsive Nav」 クールな円形ナビゲーションを作るチュートリアル
cssとは？使い方と学び方の基礎まとめ - プログラミング学習の窓口
プログラミングの基礎であるhtmlを勉強していると、必ず出てくる言葉がcss。 現代のwebサービスにおいて、htmlとcssはいわば兄弟のようなもので切っても切れない関係と言えるでしょう。 では、cssとはいったいどういうものなのでしょうか。 簡単に言うと、Webページの文字の色や大きさ、背景、配置といった見た目を設定する言語の一種です。 静的ページも動的ページも見た目の部分の多くはこのcssで制御されています。 もしcssを詳しく学ぶなら、独学もいいですがプログラミングスクールがおすすめです。費用は当然かかりますが、アドバイスがもらえることと、学習スケジュールが管理されるので、強制的に頑張れる仕組みが作れるのもメリットと言えるでしょう。 The post cssとは？使い方と学び方の基礎まとめ first appeared on プログラミング学習の窓口.
facebookアプリの作り方(PHP編) | PLUS
コンテンツへスキップ →web コメントコメントを残す コメントをキャンセルメールアドレスが公開されることはありません。 * が付いている欄は必須項目です コメント 名前* メール* サイト 次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。 Δ 先頭へスクロール
jQueryでツイート数、はてブ数、いいね数を取得して自由にデザインする方法 | アンギス
注意※Twitterのツイート数の取得のコードについて この記事のコードでは後日、ツイート数の取得ができなくなるとご指摘いただきました。確認したところ2013年5月7日に行われるTwitterの仕様変更によりツイート数の取得ができなくなってしまいます。（それについての記事）その他はてブ、いいね数のコードにつきましては正常に動作します。問題のコードはサンプルとして残しておきますが、ご利用の際はくれぐれもご注意ください。今回の件についてご指摘くださった方々に御礼申しあげます。そして、すべてのユーザーの方々に不確かな情報を提供してしまったことをお詫び申しあげます。 さらに追記※Twitter APIの仕様変更について Twitter APIの仕様変更後もこのコードで動作し続けています。もともとAPIのリファレンスにも載っていませんしいつ仕様が変更されるかわかりません。ご利用の際はくれぐれも気をつ
b4logは2013年で10周年 – b4log
b4logロゴ、「since 2003」がちょっと誇らしく思える b4logは、本日2013年2月11日、をもちまして開設から10周年となりました。これは2003年にinfoseek iswebのレンタルスペース内に立ち上げたウェブサイト「日本七生」から通算しての期間です。 2003年4月頃の「日本七生」ウェブサイトトップページ、コンテンツなんてないに等しかったその当時はまだ高校一年生、HTMLをエディターでポチポチ打っていたころでした。その後、ブログが流行だったことと日記ぐらいしか主に更新しないことに気づき、レンタルサーバーにP_BLOGをインストールして2005年にブログに移行、2011年にWordPressに移行しました。 ものすごいネットで注目されているわけでもないし、最近は更新も滞りがちなb4logではありますが、曲がりにも十年一昔、それなりにウェブサイト運営を続けられてきました
WebページのCSSプロパティ・値をワンクリックで表示してくれるブックマークレット「XRAY」が神便利！！！
こんな便利なんあったん… Webページ制作でよく利用されるのが「Firebug」などのデベロッパーツールですが、もっと超絶簡単にCSSプロパティを確認できるブックマークレットがありました。っていうかその存在を知りました。 そんなわけでXRAYと言うブックマークレットのご紹介。 使い方は簡単、サイトに訪れたら中央部分にあるボタン状のブックマークレットをブックマークバーへD&Dします。 これにて準備は完了。 CSSを覗きたいサイトを訪れたら先ほど登録したブックマークレットを起動。 XRAYが立ち上がります。あとはページ上の要素をクリック！ すると、その要素のプロパティ・値がご覧のように表示されるのです！なにこれお手軽！便利！ 要素のwidth・heightも確認できます。 そんなわけで簡単ではございますが、CSSを表示してくれるブックマークレット「XRAY」のご紹介でした。ちょっとしたCSSデ
あきれるほど強い！SEOバッチリなWordPress プラグイン35
作成：2013/01/7 更新：2013/06/16 WordPress > 集客もSEOもちゃっかり強くしたい プラグインの中で強力に集客の効果を発揮するものをインストールしておきたい。 これと・・・このプラグインを入れてっと（１５分） よっしゃ！あとはブログを書くだけでOKOK！ 初心者さんも、熟練者さんも絶対に入れておくべきSEO強化に必須のプラグイン。今回は僕がWordPressをインストールしたらまず最初に必ず入れている秘蔵のプラグインと設定方法を用途ごとにまとめました。もちろんアクセスアップさせるためのものです。 使い方をどこよりも詳しく解説してあるサイトのURLをつけてます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ １．画像検索でも、ちゃっかり集客したい ２．内部SEOをトコトン強くしたい ３．メタを個別に自動生成させたい ４．リンクのち
ブログのPVを10倍に増やす為に実践した3つの手順 | Other
あなたは、いい記事を書いているはずなのに中々読んでもらえないと悩んでいないだろうか？ 当ブログでも昨年10月まではほとんど読者がおらず、検索で月に数千アクセス程度だったのだが、最近は徐々に読者が増えてきた。 そして、2012年12月のPV数は11月のそれより10倍も増えた。記事数は12月が5本、11月は6本と１本しか変わらないがかなりPVに違いがでたのだ。 実は12月からはPVを少し意識して記事のコンセプトを変えたのだが、それが見事に当たったのだ。そこで、実際に私がPVを10倍にするために行った3つの方法を紹介しておこう。あなたは、いい記事を書いているはずなのに中々読んでもらえないと悩んでいないだろうか？ 当ブログでも昨年10月まではほとんど読者がおらず、検索で月に数千アクセス程度だったのだが、最近は徐々に読者が増えてきた。 そして、2012年12月のPV数は11月のそれより10倍も増えた
たった2行でIE5.5～IE8をモダンブラウザの挙動にする魔法のJS – attrip
開発者泣かせの問題児ブラウザ、Internet Explorerですが、IE5.5、IE6、IE7、IE8をモダンブラウザの挙動にする神JSがGoogle Codeで配布されていました。 とりま、 attripのデザイン崩れはこれで解決できました！ 使い方は簡単！下記のコードを貼り付ければOK！ まじ仏。 「IE9.js」は、IEを普通のモダンブラウザの挙動にするJSです。IE5、IE6でも透過PNGが使えるようになります。 「css3-mediaqueries.js」は、IEでCSS3 Media Queriesを使えるようにするJS。レスポンシブデザインのサイトをIEでも見れるようにします。 ちなみに、border-radiusや、box-shadow はできませんでした。 あと、IEでの見え方をチェックする方法はこちら↓↓ IE9環境でIE6/IE7/IE8/IE9表示する方法(共存
JavaScriptなしで地域ごとに色が変わる日本地図を作る
HTML、CSS、画像だけで、マウスオーバーした地域ごとに色が変わる日本地図を作る方法です。 文字だけではちょっと意味がわかりにくいかもしれませんので、とりあえず↓の日本地図の上にマウスカーソルを載せてみてください。クリックするとページ遷移しますが、このデモでは Not Found になりますのでご注意ください。 デモページを別のタブで開く このデモをダウンロード（ZIP） 2009年に仕事で「日本地図をクリックすると地域ごとに違うページに飛ぶ」ページを作らなければならなかった時に、当時 JavaScript も書けないし Flash は PC に入っていなかったので、HTML と CSS だけで作ってみました。 このデモはDOCTYPE宣言が HTML5 になっていますが、当時 HTML 4.01 で、IE6 でもきちんと動くように作りました。 ですので、特殊なタグやプロパティは使わず
プラグインは使わない！WordPress カスタマイズまとめ４０
作成：2012/11/19 更新：2014/11/01 WordPress > 自分のブログならいいけど、受託の場合は出来るだけプラグインやブログパーツ使用は控えたい。 例えば、Zenbackやlinkwithinって便利だけど外部リンクが表示されちゃうから、クライアントさんには使えない。プラグインを出来るだけ使わずに、自分でやんなきゃいけないこともあります。まぁそこで 「分かんなくなったらここ見よう」と参考にさせていただいたサイトをまとめました。カスタマイズをやっていくうちに内部施策が充実したのか、アクセスも40日間で147%アップ。集客提案の一つとしても使えると思います。 フッターにこだわったり、タグ・カテゴリ一覧表示したり、サムネイルで関連記事を表示、アバターを写真にしたり、レスポンシブ、マルチサイト化にカートまで受託開発で必要なことなどもメモメモ。※一部プラグインを使用します。 エ
改行削除するくらいなら gzip したらいいじゃない
CSS や JavaScript ファイルなどを gzip 圧縮して転送量の削減や Web サイト表示速度の向上を実現する方法を解説。既存 Web サイトのソースには一切手を加えない方法でまとめています。おまけでキャッシュ関連の記述もあり。 いや、1バイトの無駄もゆるせねぇんだよとか、難読化したいとかなら別にやればいいんですけど、CSS や JavaScript ファイルの改行やスペースを削除しただけでファイル容量圧縮、読み込み速ーい的なこという人がいるので今さらですが書いてみます。すでに色々なところで書かれてるのでかぶるのは承知の上で。 改行や無駄なスペースなどを削除すること自体が悪いと言ってるわけではありませんのでその辺は誤解ないようにお願いします。ただ、gzip 使って圧縮するのに比べたら、改行削除して削れるファイルサイズなんて微々たるものです。もちろん、両方やれば最大限ファイルサイ
あなたが作ったサイトのフッターの役割は？12のフッター活用方法！
昔はさっぱり注目されていなかったフッターエリアですが、今では多くのクリエイターがフッターに関心を持つようになりました。フッターデザインだけを集めたサイトなんて過去にほとんどありませんでしたが、ここ2、3年でいくつもそういったサイト・ページを見るようになりました。また特に海外サイトで言えることですが、最近では「これがフッターなのか！」と思う、すごいクオリティーのフッターも見る機会が多くなりました。 皆さんは大きく関心を集めるようになったこのフッターエリアを上手に活用できていますか？ ユーザーの起こすアクションを絞る(誘導する) 皆さんはブログの記事を読み終わった後、次にどんなアクションを起こしますか？ スクロールしてトップに戻る 元々いたサイトに戻る(はてブとか) タブを閉じる ツイートしてみる なんとなくコーヒーを飲む 上記のようにユーザーは、記事を読み終わると必ず何らかのアクションを起こ
インターネットでものづくりするときに役立つサイトまとめ
先日、東京学生広告研究団体連盟の総会にて、 「インターネットでつくる人を増やす」というテーマでお話させていただきました！ その時に紹介したサービスをまとめます。 この記事のターゲットは、インターネットでまだ作ったことがない人。 興味があってこれから始めよう！と思っている人向けです。 ポイントは、ブラウザだけで完結できるもの。PCさえあればOK。 アイデア・インスピレーションをストックしよう まずは、アイデアのストックやインスピレーションを高めるサービスを紹介します。 EVERNOTE 簡単なメモから、写真や動画まで記憶し、整理整頓ができるサービスです。 tumblr オンラインでできるスクラップブック。Web上の記事や画像・映像などを簡単にストックできます。 また他のユーザーの投稿もストックできるので、面白いユーザーをフォローするのがオススメです。 Pinterest 画像を貼りつけて共有
今後の大きな画像を配置するウェブデザインに必須のファイルサイズ縮小テクニック
概要 ▶ 最近のウェブサイトでは大きく画像を使うデザインが増えてきましたが、閲覧者のストレスを無くすためにロード時間はなるべく短い方が良いですよね。今回はFireworksを使った画像劣化の少ないJPEG画像サイズ縮小テクニックを紹介します。 今回は画像を画面いっぱいに使う時代に必須の画像ファイルサイズ縮小テクニックを紹介します。 最近のウェブサイトではかなり大きく画像を使うデザインが増えてきました。 たとえばこんな感じのサイト（これは本当はデモページですが） 出典：Overlay Effect Menu with jQuery | Codrops ブロードバンド化が進んでいるとはいえ、画像のファイルサイズが大きすぎて、画面表示まで時間が掛かってしまうようであればユーザビリティも悪いですし、何より格好が悪いですね。 ローカルでデザインしている時は特に問題が無くても、サーバーにアップロードし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
レスポンシブの確認が快適に！ブラウザやOSを問わず各デバイスをシミュレートしてWebページを表示できるオンラインサービス
東京渋谷 “HTML5入門＆jQuery” 勉強会(5/26)の資料を公開します | tonowp
