[jQuery]レスポンシブ対応の超クールなカレンダー「pickadate.js」 | Web活メモ帳
レスポンシブに対応したクールなカレンダーライブリーを見つけたのでご紹介。 jQueryプラグインなので、簡単に組み込む事が出来ますよ。 ↑画面のようなカレンダーを表示します。 jQeury UIのようにフォームをクリックした際に表示したりする他に、 常に表示させて置くことも簡単に出来ました。 これはかなり使えそうです。 使い方も簡単でjQueryとPickadate.jsを読み込んだ後に、以下の処理を追加するだけでした。 $('.datepicker').pickadate(); オプションがすごく豊富 オプション設定が非常に豊富で、細かな気遣いが感じられます。 ↑年と月をプルダウンで選択する事も $( '.datepicker' ).pickadate({ monthSelector: true, yearSelector: true }) ↑指定した範囲のみ選択する事も可能です。 $(
![[jQuery]レスポンシブ対応の超クールなカレンダー「pickadate.js」 | Web活メモ帳](https://cdn-ak-scissors.b.st-hatena.com/image/square/cd37ad8b886aff0fa2a7e8630908180bb35c1ebe/height=288;version=1;width=512/https%3A%2F%2Fblog.verygoodtown.com%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F01%2F20130124-01.png)
SEOでランキングを落とさないためのレスポンシブ・ウェブデザインへのリニューアル注意点
[対象: 全員] 想像以上のペースでスマートフォンからのアクセスが増えているサイトも多いのではないでしょうか。 モバイル向けのサイトの構築にあなたも取り掛かっているかもしれません。 Googleがもっとも推奨しているモバイル向けサイトの構成はレスポンシブ・ウェブデザインです。 すでに運用中のサイトをレスポンシブ・ウェブデザインに改修するときのSEO上の注意点を、WebmasterWorldのスレッドを基にしながらSearch Engine RoundtableのBarry Schwartz（バリー・シュワルツ）氏がまとめています。 転載の許可をもらった（というよりわざわざ聞かなくても好きに使っていいと言われた）ので紹介します。 ちなみにSearch Engine RoundtableはSEOの世界では1、2を争うほどに有名なSEOブログですがこれはバリーが個人で運用する完全な趣味ブログで彼
ウェブサイトの制作に必ず役立つブックマークレットのまとめ
ウェブサイトの制作に役立つ便利なブックマークレットを紹介します。 ブラウザの機能拡張も便利ですが、入れすぎると重くなるのがイヤな人にぴったりです。 レスポンシブの確認はこれが一番便利 コードとアクセシビリティをチェック ページに柔軟なグリッドを表示 デザインの確認がピクセル単位でできる CSSの変更をリフレッシュ無しで確認 要素のスタイルを確認 CSSのセレクタを確認 ページで使用しているカラーを抽出 CSS3をサポートしていないブラウザでの見え方 ページの見出しを抽出 ページの構造が正しいか確認 ページをワイヤーフレーム化 コードをシンタックス化して読みやすく スマフォやタブレットでもコードが見たい レスポンシブの確認はこれが一番便利
レスポンシブ・ウェブデザイン - メディアクエリのパワーを使いこなす
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
SEO for スマートフォン [2] レスポンシブWebデザイン ::SEM R (#SEMR)
SEO for スマートフォン [2] レスポンシブWebデザイン スマホと検索のお話。SEO for スマートフォンのお話2回目。今回はレスポンシブWebデザインについて。 公開日時：2013年01月04日 14:57 前回記事『SEO for スマートフォン [1] Google のモバイルに対する考え方』の続きです。今回はレスポンシブWebデザインに対する考え方について。 レスポンシブWebデザインは検索順位的に有利なのか？ Googleが2012年6月に「Building Smartphone-Optimized Websites」という文書を公開して、スマートフォン対応サイトを検索エンジンに最適化させる方法についての Google の意見が表明されました。 この文書について、「Googleで検索順位を上げるためにはレスポンシブWebデザインを採用しなければならない」あるいは「レス
![SEO for スマートフォン [2] レスポンシブWebデザイン ::SEM R (#SEMR)](https://cdn-ak-scissors.b.st-hatena.com/image/square/571c1fec2fe73c3a13b702681e7a8d32f18a18c2/height=288;version=1;width=512/http%3A%2F%2Fwww.sem-r.com%2Fimages%2Fse%2Fsemr-logo-fb-150x210.jpg){kind=logo}
[JS]派手な演出は無し！レスポンシブ対応のレイアウトを素早く構築するスクリプト -jquery.columns
サイズを変更するとアニメーションでパネルが移動するなどの派手な演出は一切無しで、レスポンシブ対応のレイアウトを素早く提供するjQueryのプラグインを紹介します。 jquery.columns -GitHub jquery.columnsのデモ jquery.columnsの使い方 jquery.columnsのデモ 対応ブラウザは、IE9/10, Firefox, Chrome, Safari, Operaです。 まずは、デスクトップサイズとして幅1,200pxでの表示から。 デモページ：幅480pxで表示 jquery.columnsの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.
泣けるほど簡単！おしゃれなサイトができるWEBサービス１０選
作成：2012/12/25 更新：2014/11/01 Webサービス > ちょこちょこっと触っただけで、プロっぽいサイトが無料で作れる 今回はブログじゃないサイトをドラッグ＆ドロップで簡単に作成出来る2012年までに話題となったサービスを用途ごとにまとめました。 使い方をどこよりも詳しく解説してあるサイトのURLもつけてます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ １．まとめサイトを作る ２．ネットショップを作る ３．ホームページを作る ４．ポートフォリオサイトを作る ５．おしゃれなECサイトを作る ６．全部入り企業サイトを作る ７．コーポレートサイトを作る ８．レスポンシブ対応サイトを作る ９．HTML5サイトを作る １０．ビジネス用無料WordPressテーマ - レスポンシブ対応 １１．デザイナー向けポートフォリオページ １２．ブートストラッ
モバイルとも相性が良いWordPressテーマ45「45+ Best Free WordPress Themes for Mobile Friendly Websites」
モバイルとも相性が良いWordPressテーマ45「45+ Best Free WordPress Themes for Mobile Friendly Websites」 最近ではモバイル端末の普及とともに、モバイル端末のインターネット環境も整ってきてPCよりもモバイルを中心に情報を収集するという方も多いと思いますが、今日紹介するのはそんなユーザーもカバーできるモバイルとも相性が良いWordpressテーマ45「45+ Best Free WordPress Themes for Mobile Friendly Websites」です。 DailyPost PRO – Personal WordPress Theme 全部で45ものモバイルとも相性が良いWordpressテーマがまとめられていますが、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。 詳しくは
これは使える！画像をレスポンシブに切り取るサンプルコード:phpspot開発日誌
Focal Point: Intelligent Cropping of Responsive Images | Design Shack これは使える！画像をレスポンシブに切り取るサンプルコード。 ブラウザ幅を小さくした際に、画像も小さくしてしまう、のではなく、元の大きな画像の指定した部分を切り抜いて表示する仕組みが紹介されています。 divのclassにどこから表示するのか？を記述しておくだけで、超簡単に場所を指定できるところもいいです。 ニュース等の画像では、重要な部分以外にも背景などが含まれる場合がありますが、スマホなどでは重要なところを大きく表示したいという事があるかと思います。 そういう時に、これを使えば便利そうですね。 関連エントリ レスポンシブで超クールなカレンダーデモとｊQueryプラグイン「Calendario」 レスポンシブなテーブル作りに役立つjQueryプラグイン
PCサイトをスマホに最適化するツール、Googleがリリース 1年間無料
Google日本法人は11月28日、PC向けWebサイトを簡単にスマートフォンに最適化できるツールの提供を始めた。最初の1年間は無料。2年目以降は月額1180円。中小企業が低コストにスマートフォン向けサイトを作成できるようにするのが狙い。 PCサイトのURLを入力すると、スマートフォンに最適化した画面を自動で表示。テンプレートや色、ボタンの配置などを調整するだけで、スマートフォン版の簡易サイトを作成できる。ワンクリックで電話をかけられるボタンを付けたり、地図を挿入することも可能だ。 サイトデザインが完成するとURLを発行。PCサイトにアクセスしたスマートフォンユーザーを、スマートフォン版にリダイレクトさせる設定もできる。 Googleのモバイル化プロジェクト「GoMo」パートナー企業のDuda Mobileのツールを活用。Duda Mobileのアカウントを登録して利用する形だ。 関連記事
一目で惚れる。WordPressの厳選レスポンシブ・テンプレート5つ – Handmade Future！
[ads1] WordPressはテンプレートも豊富です。無料で利用できるものもたくさんあります。コストが安く済むのもWordPressのメリットですよね。 ……と、思っていたのですが。 最近、ブログのリニューアル作業を経て、考え方が変わりました。「3,000円とか4,000円払ったら飢え死にしちゃう！」という方でなければ、有料のテンプレートをおすすめします！！ なぜなら、一目で違いがわかるほどにクオリティが高いからです。 今回は、リニューアル作業時にチェックして回った有料テンプレートのうち、ベスト5を紹介します。すべて、そのまんまでスマートフォンやタブレットに対応するレスポンシブです。 Core Minimalist Photography Portfolio スーパーかっこいい。いきなりTOPページ全面がスライドです。マウスでクリックするとくるくる動き、中央写真のクリックで全画面表示に
WordPressテーマ（レスポンシブWebデザイン対応）
レスポンシブWebデザイン対応のWordPressテーマの配布を開始します。 １．レスポンシブWebデザイン対応 今回配布するテーマでは、レスポンシブWebデザイン対応として次の6つのレイアウトを提供します。カッコ内の英文字はカラムレイアウトを切り替える文字列になります。カラムレイアウトの変更方法については６項で解説します。 3カラム固定レイアウト（layout-three-column） 3カラム固定レイアウト・右サイドバー（layout-three-column-right） 2カラム固定レイアウト・左サイドバー（layout-two-column-left） 2カラム固定レイアウト・右サイドバー（layout-two-column-right） 3カラムリキッドレイアウト（layout-three-column-liquid） 3カラムリキッドレイアウト・右サイドバー（layout-
CSSレイアウトをWEB上でサクッと作れる「PageBlox」:phpspot開発日誌
CSS Layout Generator | PageBlox - home CSSレイアウトをWEB上でサクッと作れる「PageBlox」。 次のような画面で、カラム幅をクリックで簡単に拡大縮小できたり、ブロック要素を消したり移動したり、追加したりといったことが自由にできます。 基本となるテンプレートを選んで修正すればより効率があがりそうです export で簡単にHTMLコードを生成できます。 とりあえず素早くレイアウトを組むのには便利に使えそうですね 関連エントリ 画像レイアウト関連で便利なjQueryプラグイン等まとめ レスポンシブなレイアウトをON/OFFできるようにするJS「ReView」 アイテムをドラッグ＆ドロップで画面レイアウト出来るjQueryプラグイン「gridster.js」 これは新しい!パネルレイアウトが美しいスライドショー実装デモ レスポンシブなレイアウト実装
レスポンシブなテーブル作りに役立つjQueryプラグイン「FooTable」:phpspot開発日誌
FooTable | Themergency レスポンシブなテーブル作りに役立つjQueryプラグイン「FooTable」 レスポンシブなWEBデザインを作る際に一番やっかいなのではというのが、テーブルですね。 折り返しが出来ないのでどうやってレイアウトしようと悩むところですが、画面が小さい時は主要な物を選んで出す、といった事ができます テーブルのth 要素で出す出さないの定義をすることができて、あとはプラグイン関数で初期化するだけというお手軽さです。 iPhone。主要な部分を見せつつ、折畳みで他の要素もみせるUI ちょっと画面の大きなタブレットでの画面。表示要素は多くなるけどまだ折畳みで他の要素をみせる状態 PCの大きなディスプレイですべて開いた状態 次のように、data-class、data-hide の属性を付けておくことで挙動をカスタマイズ可能です 関連エントリ WEBデザインす
ブラウザサイズに応じてsrcやwidthを置き換えてくれるjQueryプラグイン「Responsive Img」:phpspot開発日誌
ブラウザサイズに応じてsrcやwidthを置き換えてくれるjQueryプラグイン「Responsive Img」 2012年11月22日- Responsive Img - a jQuery Plugin for Responsive Images ブラウザサイズに応じてsrcやwidthを置き換えてくれるjQueryプラグイン「Responsive Img」 単に画像をリサイズするだけではなくsrcも置き換えてくれるそう。 PC版を単に縮小するのではなくて、スマホでは別の画像を使う、といった場合にも使えそうですね ブラウザサイズに応じて別の画像に切り替えて最適化したいという場合はそれなりにあると思うので、覚えておいてもよさそうですね 関連エントリ WEBデザインする人なら入れておきたいレスポンシブWEBサイト作成に役立つブックマークレット「Viewport Resizer」 レスポンシブ
[CSS]JavaScript無し、レスポンシブ対応、背景をコンテンツのスクロールに合わせて変更するスタイルシート
デモを幅780pxで表示 実装 実装は、5ステップです。 Step 1: 背景画像の用意 デモでは4つのコンテンツがあるので、3枚の背景画像を用意しています。一番大きい表示サイズを想定して、1,800x1,200pxの画像です。 Step 2: HTML HTMLは非常にシンプルです。 4つの各コンテンツはrapperのclassを付与したdiv要素で配置し、header, section, section, footerで内包します。 <!DOCTYPE html> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <title>From love for lavender</title> ... </head> <body> <header class=" content"> <div class="wrapper
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
サービス終了のお知らせ - NAVER まとめ
サイトの様々な確認作業に使うチェックツール達！レスポンシブ、パフォーマンス、クロスブラウザ対応等全部！ | バンクーバーのうぇぶ屋
Rails3、Twitter Bootstrap、Bootswatch を使ったレスポンシブなエロサイトをリリースしました
新着記事
