デザインをレスポンシブに対応させる時に役立つjQuery・プラグイン6（サンプルあり） - Design Color
レスポンシブ対応jQueryコード 1.スクロールすると現れて追尾するトップへ戻るボタン スクロールすると現れるページ上部へ戻るボタンです。よく見るやつですね。PC版ではスクロールするとふわっと画面右下に現れて追尾しますが、スマホ版（ウィンドウ幅480px以下）ではついてこられると鬱陶しいので画面最下部に固定しています。 まずは、ある程度スクロールするとフェードインして現れるjQueryコード。 <!-- jQuery --> <script> $(function(){ var pageTop = $("#pageTop"); pageTop.click(function () { $('body, html').animate({ scrollTop: 0 }, 300); return false; }); $(window).scroll(function () { if($(th
たった1行！スマホサイトのコーディング時に役立つ小技8（サンプルあり） - Design Color
もくじ 幅をデバイスサイズに合わせる スマホを横にしたときに文字が大きくならないようにする 電話番号に自動的にリンクが付かないようにする リンクを押したら電話をかけられるようにする リンクを押したらGoogleマップアプリを起動させる リンクエリアを広げる paddingやborder分を気にせずwidth/heightの数値を指定する 長い文字列でも途中で改行させる 1.幅をデバイスサイズに合わせる まずはスマホサイトを作るときの基本ですね。サイト幅をデバイスの幅に合わせてあげるには、以下の一行だけで対応出来ます。 <meta name="viewport" content="width=device-width,initial-scale=1.0"> サンプル 2.スマホを横にしたときに文字が大きくならないようにする スマホを横にすると、解像度が変化すると共に文字サイズも大きくなってし
jQuery.autopagerで次ページを読み込む間にローディングアイコンを表示させよう - Design Color
2.ローディングアイコン 読み込んでいる間に表示させるローディングアイコンを用意しましょう！ 私はこちらのサイトでローディングアイコンを作成しました！細かい設定ができるジェネレーターです！ 3.「次のページへのリンク」を取得する関数 「オートページャー」とは、分割されている「次のページ」を今みているページ内に継ぎ足して読み込んでくれるものです。なので、「読み込むべき『次のページ』とは何ページ目なのか」を指示してあげなければならないですよね。 ※オートページャーの場合は「前のページにもどる」ことは考慮していないので、「次のページへのリンク」だけでOKです。 例えば一番簡単な方法だと「現在のページ + 1」で次のページの値が取得できます。 以下はものすごくシンプルにした「次のページへのリンク」を取得する関数の例です。 <?php function nextpage(){ //現在のページを取得
ゲーム関連のデザイン制作時に参考になるサイト20 - Design Color
もくじ ゲームサイトのデザインいろいろ ゲームサイトに特化したギャラリーサイト 「ゲーム」タグがあるギャラリーサイト ゲームのデザインをまとめた記事 ゲーム関連のアイコン ゲーム関連デザインのためのチュートリアル ゲームサイトのデザインいろいろ まずゲームサイトのデザインとはどんなものがあるのでしょうか？本当に様々ですが、中でも雰囲気や見せ方がそれぞれ異なるサイトを4つピックアップしてご紹介します！ ジョジョの奇妙な冒険 オールスターバトル バァーンッ！！まずはFlashバリバリ！のジョジョのゲームサイト。かっこいいしキャラを大きく打ち出しているのでインパクト抜群です！なんかもう、色んなとこホバーすると色んなものが動きます。これぞゲームのサイト！ってくらい仕掛けがたくさんです。文字で効果音が出たりするところが漫画っぽくもありますね。 トゥームレイダー 黒を背景にしていてシリアスな雰囲気や「
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
