画面遷移がすごいサイトのまとめ | バシャログ。
TVKで再放送されているあぶデカにハマっているgamiです。あの時代の関内・馬車道あたり物騒すぎるでしょ…。 さて、以前にも紹介しました、気になるデザインを共有するDesignClipという社内のチャットグループより、画面遷移がシームレスでこいつぁすげえや！となったものを幾つか紹介できればと思います。チェケラ！ 佐久間徹設計事務所 デザインはすごくシンプルで動きもいいと印象によく残ります。 仕事一覧から仕事詳細へ 一覧の写真をクリックするとコンテンツの後ろでニュッと大きくなる感じが好き。 下位ページへ グローバルメニューに注目してるといつの間にかコンテンツが変わってる。 Orenda Security セキュリティ会社のサイト。シャッターのような動きからのロゴアニメーションはまさに鍵をかけてるように感じました。 スタジオスプーン株式会社 四方のボタンをクリックすると、その方向から背景がスラ
最新版！Webページを作成する時のベースになる、最小限の構成で記述されたHTML5のテンプレート
HTML5でWebページを作成する時のベースになる必要最小限の構成で記述されたHTML5のテンプレートを紹介します。 スニペットに登録しておくと、便利ですね。 イラスト: Girls Design Materials HTML5 Boilerplate -GitHub HTML5のテンプレート HTML5のテンプレートの解説 HTML5のテンプレート HTML5 Boilerplateのテンプレートを日本語化しました。 オリジナルライセンスで、商用利用、修正、配布、サブライセンス可です。 <!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>タイトル</title> <met
サルワカ | サルでも分かる図解説明マガジン
レゴランドの水遊びはどれがおすすめ？ウォータメイズとスプラッシュパッドはどっち？ 2024/06/17
Magic Mockups • Free real-life mockup generator
Follow and get notified when new environments are added: Do you like this project? Tell your friends.
[CSS]ページが長くても、ページ全体を角丸のボーダーで囲むスタイルシートのテクニック | コリス
ページ全体を角丸のボーダーで囲み、そのページがスクロールするくらい長くても全体を囲むスタイルシートのテクニックを紹介します。 Body Border, Rounded Inside Step 1: ページ全体を角丸で囲む（スクロール非対応） Step 2: ページ全体を角丸で囲む（スクロール対応） Step 3: ページ全体を角丸で囲む（スクロールバーを変更） Step 1: ページ全体を角丸で囲む（スクロール非対応） まずはシンプルなスタイルシートで、ページ全体を角丸のボーダーで囲んでみましょう。 基本的な考え方は、body要素にborder-imageを使い、4つの角を角丸にします。使用するのは下記の画像です。 角丸用の画像 コードを見てみましょう。 HTML HTMLは、bodyだけで構いません。 <body> <h1>Rounded inside body border</h1>
Facebookの「いいね！」対象はサイト（ページ）とFacebookページ別ってのがわかりづらい / Maka-Veli .com
いいね！（※以下LIKEと呼びます）というかFacebookってわかりづらい点が多いですよね。 ページ、記事へのLIKEはそのままの意味でいいんですが、ドメインに紐付けたLIKEとFacebookページ（※以下Fbページ）を設置しているサイトでFbページへのLIKEが別物って、ユーザーからしたらとってもわかりづらいと思いませんか？ サイト（ドメイン）へのLIKE FbページへのLIKE これ、ユーザーからすると、すっごくわかりづらいと思います。 一般ユーザー層から考えると、そもそも「Fbページ」って概念が理解できない、あるいはサイトと別物だという事も理解できない、なんて事は大いにありえます。 サイト（ドメイン）へのLIKEって、実際にはページなんですよね。 （ドメインなんて書きましたが、わかりやすいようにあえてそうしています） 注意点として、例えば hogehoge.com
Chardin.js
Chardin.js - Simple and beautiful overlay instructions for your apps.
固定ページで子ページのリンクやタイトル、抜粋を一覧表示させるショートコード
固定ページで子ページを持つ親ページに使うショートコード。子ページを一覧表示させる。 出力されるマークアップは$outputの中身ですので変えたい場合はここを弄れば良いですね。
Facebookページのコメント返信をスレッド表示できるようにする
ちょっと出遅れましたが、Facebookページのコメント返信をスレッド表示できるようにする方法を紹介します。 2013年3月末、Facebookページのトップに次のようなメッセージが表示されていました。 「ページで直接コメントに返信できます」というのは、Facebookページでコメント返信をスレッド表示できるようになることのようです。 １．設定方法 上記のメッセージが表示されている場合は、「返信をオンにする」をクリックすれば有効になります。 または、「ページの編集」→「権限の管理」をクリック。 「ページでのコメント返信を許可する」をチェックして「変更を保存」をクリック。 返信が有効になるのは、この設定を行った後に投稿されたコメントからのようです。 ２．コメント表示 １項の設定を行ったあと、Facebookページの投稿にコメントすると「返信リンク」が表示されます。 設定前の投稿 設定後の投稿
競合サイトの被リンクを調査する4つの方法 | 検索エンジン最適化（SEO）情報ブログ
検索エンジンの検索結果内での競合サイトの被リンクを調査する方法を紹介しています。私が普段から使用しているGoogle+で当ブログの記事を毎回投稿しています。すると、昨日投稿した記事に対して質問をされている方がいました。どんな質問かというと以下のようなものです。 初歩的な内容で恐縮なんですが、気になっているサイトの外部リンクを調べるってどうやってやってるんですか？？ ウェブマスターツールからリンク一覧拾ってくる以外に方法を知らなくて。。 https://plus.google.com/u/0/105143303660674368078/posts/cQYUUeMBNnK そこで今回は検索エンジンの検索結果内で競合サイトや気になっているサイトの外部リンクを調べる方法をご紹介します。 link:コマンドを使用する このlink:コマンドというのはどのように使用するのか。それは以下のようになりま
レスポンシブデザインとブレークポイントからこれからのウェブを考える | バニデザノート
googleからNexus7が格安で販売されていたり、microsoftからsurfaceが日本でも発売になったり、 ますますタブレットでのウェブビューイングが広まっていくのは必至でしょう。 そんななか、検索エンジンでもあるgoogleが推奨しているのはレスポンシブ表示。 今回は、そんなレスポンシブなサイトを作る際のブレークポイントをキーにして 実際どんなものが作られているかを交えて考えていきたいとおもいます。 ざっくり言うと、どのサイズでどの表示をするかというのをピクセル幅で切り替えていくポイントのことです。 320, 480, 600, 768, 1024 あたりで区切ります。 googleのドキュメントにもあるように @media only screen and (max-width: 640px) {...} のようなカタチでCSSを切り分けていきます。 1024と320のみのPC
[JS]実装は簡単で高性能、ロード無しでページを次々に表示するスクリプト -Navi.js
複数のページをブラウザのロード無しで、アニメーションで次々に表示するjQueryのプラグインを紹介します。 これ系のスクリプトはいくつか紹介してきましたが、ページタイトルの設定やネスト、戻る・次へボタンの対応など、使い勝手もなかなかです。 Navi.js Navi.js -GitHub Navi.jsの特徴 Navi.jsのデモ Navi.jsの使い方 Navi.jsの特徴 Navi.jsの仕組みは一つのファイルに複数のページのコンテンツを配置し、それをページごとに遷移するように表示します。 タブ、ナビゲーション、カルーセル、ページネーション、パンくずをサポート コンテンツにあったページタイトルを表示 戻る・次へボタンのサポート コンテンツのネストをサポート スライドアップ、スライドレフト、スライドアップ・レフト、フェードのエフェクトを用意 AJAXサポート Google Analytic
Top 10 Best Luxury Watches News | Invisible – 2019 Most Popualr Watches News
An excellent timepiece is a signal of success and confidence. Unfortunately, that also means they come at a hefty price tag. Brands like Omega, Patek Phillipe, and Tag Heuer are extraordinary watches (with extraordinary costs, too). If you want all the style and prestige that comes with a luxury watch but are looking to be sensible with your money, a replica watch might be the right fit for you. G
ページを移動（離脱）するときにjQueryで警告を出す方法
Facebookなどでフォーム入力中にページを移動（離脱）しようとすると警告が表示されます。 この仕組みをjQueryで実装する方法を紹介します。jQueryは投稿時点の最新バージョン1.9.1を利用しています。 １．ページを移動するときに警告を出す ページを移動するときに警告を出すには、onイベントにbeforeunloadイベントを設定します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function(){ $(window).on('beforeunload', function() { return '投稿が完了していません。このまま移動しますか？'; }); }); </script> <form method="post" acti
[JS]最近よく見かける1ページ垂直スクロールコンテンツで、スクロール位置を自動補正するスクリプト -windows.js
スクロールしすぎも補正 windows.jsの使い方 実装は簡単で、既存のコンテンツにclassを加えるだけで適用できます。 Step 1: HTML HTMLは各コンテンツを配置しているdivやsectionにclassを加えるだけです。 classは変更可です。 <section class="window"></section> <section class="window"></section> <section class="window"></section> <section class="window"></section> <section class="window"></section> Step 2: 外部ファイル 「jquery.js」と当スクリプトをhead内に記述します。 <script src="http://cdnjs.cloudflare.com/aja
Sidr
SidrThe best jQuery plugin for creating side menus and the easiest way for doing your menu responsive You will be able to create multiple sidrs on both sides of your web to make responsives menus (or not, it works perfectly on desktop too). It uses CSS3 transitions (and fallbacks to $.animate with older browsers) and it supports multiple source types. Get startedLike any other plugin, you must inc
Google Chrome の履歴をスピーディーに検索できる拡張機能「Holmes」 : 二十歳街道まっしぐら
HolmesはChromeの履歴をスピーディーに検索できる拡張機能です。 Chromeに保存された検索履歴を素早く検索し、そのページを開くことができます。 ショートカットも用意されているので、慣れると非常に便利かと。 以下に使ってみた様子を載せておきます。 まず「Holmes」にアクセスしましょう。 Chromeに拡張機能をインストールしましょう。 このようにChrome内の履歴を検索できます。 とても早く検索してくれストレスなく開くことができますよ。 Ctrl+数字キーで検索結果のページを開けます。 また、Chrome標準の検索バーに「*」を入力してTabキーを押すことで、 履歴の検索をすることも可能。 履歴を検索するときに便利なので入れておいて損はないですね～。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
Googleウェブマスターツール徹底ガイド改訂版（前編） | Moz - SEOとインバウンドマーケティングの実践情報
Account Suspended