タグ

web制作に関するjnytriのブックマーク (60)

  • 新任SEO担当者に必須のチェックリスト20項目 - SEO Japan|アイオイクスのSEO・CV改善・Webサイト集客情報ブログ

    無料で資料をダウンロード SEOサービスのご案内 専門のコンサルタントが貴社サイトのご要望・課題整理から施策の立案を行い、検索エンジンからの流入数向上を支援いたします。 無料ダウンロードする >> 仕事や会社が変わったり、社内の担当が変わったり、とある日突然新しいサイトのSEOの任されることになった、という話はネット業界では良くあるでしょう。もちろん任される限りには多少のSEOの知識は持っている場合が多いでしょうが、実際にこれまで他の誰かがやっていたSEOを引き継いで行うことは意外とチャレンジングだったりもします。今回はサーチエンジンランドが、SEO仕事を引き継ぎ際に気をつけるべきポイントをチェックリストでまとめてくれました。流石に上手くまとめられたリストとなっており、これで次にSEO仕事を引き継ぐ時の不安は無し?! — SEO Japan もしあなたが、ウェブサイトの新任“SEO担当

    新任SEO担当者に必須のチェックリスト20項目 - SEO Japan|アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
  • [CSS]classを加えるだけで多彩なアニメーションが簡単に使用できるスタイルシート -Animate.css

    フェードイン、フェードアウト、バウンド、シェイク、回転などのアニメーションを簡単に使用できるクロスブラウザ対応のスタイルシートを紹介します。 ※JavaScriptは一切使用していません。 Animate.css - a bunch of plug-and-play CSS animations [ad#ad-2] Animate.cssの使い方 「animate.css」を外部ファイルとして指定し、アニメーションを加えたいエレメントにclassを付与するだけです。 外部ファイル <link rel="stylesheet" href="animate.css" /> エレメントにclassを付与 <p class="flash">Live long and prosper.</p> Animate.cssの実装 デモでは、classを付与するだけで、多彩なアニメーションが簡単に利用できま

  • YouTube人気急上昇

    【ゆっくり実況】整地楽しいヤミー❗️✨🤟😁👍感謝❗️🙌✨感謝❗️🙌✨またいっぱい掘りたいな❗️⛏️😋✨デリシャッ‼️🙏✨シャ‼️✨ シャ‼️🙏✨ シャッッッ!!!!【マインクラフト #6】

    YouTube人気急上昇
  • iPhoneやAndroidなどスマートフォンのスワイプ操作で動かせるカルーセルを実装する非依存型スクリプト・SWIPEVIEW

    iPhoneiPadなどのスワイプで動かせる カルーセルを実装する軽量なライブラリ・ SWIPEVIEWのご紹介。jQueryやmootoolsな どのライブラリにも依存しない、非依存型 の軽量スクリプトですので既存のサイト にも導入もしやすいかもしれません。 スワイプで動かせるカルーセルです。他ライブラリに依存しませんので使い勝手はなかなか良いかなと思いました。この手のはカクカクしがちですけど、これは動作も結構スムーズです。多少はありますけどね・・ まだ画像しか対応していませんが、今後対応していくとの事です。jsファイル自体も8KBほどの軽量スクリプトですよ。完璧とは言いませんが今まで触った中でもなかなかスムーズな方ではないかと。 サンプル作りましたので以下よりお持ちのスマフォでどうぞ。 Sample お持ちではない場合はスクリーンキャストをご覧ください。 エミュレーターですけど、動作

    iPhoneやAndroidなどスマートフォンのスワイプ操作で動かせるカルーセルを実装する非依存型スクリプト・SWIPEVIEW
  • いますぐ使えるCSS3テクニック集! コピペ用サンプル付き!

    面白法人カヤックがサイトリニューアル! いきなり手前みそで恐縮ですが、今年の夏、面白法人カヤックがコーポレートサイトを2年ぶりにリニューアルしました。 「世界一更新頻度が高く、カヤックの活動がひと目で分かるコーポレートサイト」をコンセプトに、可読性が高く容量も軽いサイトに仕上げました。 ひと目見るだけで、最近のカヤックの動向が分かるようにニュースでTOPページを構成し、日々リアルタイムにカヤックの最新の情報を発信します。 技術的には、ブラウザのウィンドウサイズによって拡縮する画像はベクターファイルであるSVGScalable Vector Graphics)画像で置き換えたり(SVGはベクトル形式の画像のため、拡大してもボケない)、CSS3を用いることで画像の使用を極力控えたりするなど、ページの軽量化を実現しています。 カヤックサイトのCSSテクニックを丸ごと伝授! 稿では、サイトリニ

    いますぐ使えるCSS3テクニック集! コピペ用サンプル付き!
  • jQuery Mobileの紹介 | Lab by engineering@dwango.jp

    今回は、jQuery Mobileを用いたアプリケーションについて解説します。jQuery Mobileを用いることで、非常に簡単にリッチなインターフェースを持つwebアプリケーションを作ることが出来ます。 対象読者 JavaScriptでの開発経験がある方 jQueryを使用したことがある方 jQuery Mobile jQuery Mobileは、jQueryを開発しているThe jQuery Projectによって開発されたスマートフォン向けのJavaScript UIフレームワークです。iOSやAndroidWindows Phone、BlackBerry等の様々なモバイルプラットフォームとデバイスに対応していて、OSに依存しないUIを提供しています。 jQuery Mobileでは、独自に定義したHTML5のカスタムdata-*属性を指定することで、リストビューやナビゲーション

  • 保存版!CSS3セレクタの説明書

    CSSセレクタについての基礎知識 このブログで何回も説明していますが、念のために説明します。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの1つです。 セレクタ表の説明には属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 あと親子関係や兄弟関係などもあまり聞きなれないかもしれません。下の階層にある要素との関係が親子関係で、同じ階層にある要素同士の関係が兄弟関係です。 あと、CSS3と聞いて「どうせIE8以下はダメだし使えない」と思う方もいるかもしれませんが、セレクタに関しては簡単に対応できます。 IE6~8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」をご参考に。 それ

    保存版!CSS3セレクタの説明書
  • ユーザーが使いやすいフォームを設計するのに役立つチップス -Form design crib sheet

    Free Download: Cheat Sheet For Designing Web Forms [ad#ad-2] チートシートはPDF, PSD, Omnigraffle形式で配付されており、内容を簡単に紹介します。 Simple form field フォームのラベルは入力フィールドの左側に配置し、すぐに理解できるようシンプルな文言にします。 Buttons ボタンはプライマリとサポートの2種類用意し、プライマリボタンはより目立つよう大きくて異なるデザインのものにします。 Optionals fields 任意入力の箇所でよく利用される「*」印は、全てのユーザーに理解されるサインではありません。可能であれば、はっきりと任意であることを明記します。 Support text 入力をサポートするテキストは、ユーザー目線で分かりやすい文章にします。 Help text アドバイスするテ

  • 表示サイズに合わせてフォントのサイズやレイアウトを最適化できるjQueryプラグイン・jFL

    ちょっと気になってたjQueryプラグイン だったのでテストしてみました。表示 しているサイズに応じてレイアウトや フォントサイズを最適なものにしてく れる、というもの。Media Queryは使用 していないのでcssも綺麗に保てます。 場合によっては軽量化に繋がるかも、と思ったのでちょっとテストしてみたかったライブラリ。説明されてもあんまりピンとこないライブラリですけどwなんというか、かゆいところに手が届く的なやつです。 このようにサイズを表示変えるとフォントサイズやdivの幅も指示通り変わってくれます。Media Query択一だと、どうしても面倒になってくることもあるので、こういうスクリプトも覚えておくと保険になるかもですね。スクリプトはたったの6KBですので軽量化にも役に立つかもしれません。 尚、IE6と7には対応していません。 日語でも問題ありませんでした。以下サンプルどうぞ

    表示サイズに合わせてフォントのサイズやレイアウトを最適化できるjQueryプラグイン・jFL
  • リッチなオートコンプリートを実装できるjQueryプラグイン「ComboGrid」:phpspot開発日誌

    jQuery ComboGrid Plugin リッチなオートコンプリートを実装できるjQueryプラグイン「ComboGrid」。 input type="text" に文字を入れて、候補が表示されたりするオートコンプリートがありますが、そのオートコンプリートをグリッドにしてリッチにし、よりヒントを多くすることでユーザビリティを上げるような使い方が可能。 表データがあって、その中から選んでもらいたいようなケースに使えそうですね。 中身のデータは当然ですがAjaxで読み込んで表示しています。 基的には $(element).combogrid(options); というので利用が可能です。 サンプルコードは以下。 関連エントリ クールで高機能な次世代検索ボックスを作成できる「VisualSearch.js」

  • パスワードの強度チェックを簡単に導入できるjQueryプラグイン「jQuery Strong Password」:phpspot開発日誌

    パスワードの強度チェックを簡単に導入できるjQueryプラグイン「jQuery Strong Password」 2011年10月03日- jQuery Strong Password Plugin: Power PWChecker | EGrappler パスワードの強度チェックを簡単に導入できるjQueryプラグイン「jQuery Strong Password」 自分で実装しようとすると面倒そうな機能ですが、これを使って比較的簡単に実装できます。 記号などを入れないとStrongにならないように設定されているみたいです 日サイトへの適用は翻訳のカスタマイズが必要かもしれませんが1から作るよりはるかに楽に導入できそうですね。 各種コールバックの設定も可能なので柔軟に使えそうです 関連エントリ 中身が画像のselectボックスを作るjQueryプラグイン リッチなドロップダウンメニュー

  • 分析を容易にするWordPressの3つのプラグイン | ブログヘラルド

    ユーザーがどこから来ているのか、ユーザーはどのページにアクセスしているのか、そして、どのコンテンツを最も時間を割いて消化しているのかを理解することは、ウェブサイトのコンテンツを向上させる上で大いに役立つ。 グーグルアナリティクス等の無料の分析プログラムを選ぶ場合も、またはゲットクリッキー等の有料のプログラムを選ぶ場合も、統合を容易に行えるように支援する複数のワードプレスのプラグインが存在するので活用してもらいたい。 以下に、個人的に好きなワードプレスの統合分析プログラムを挙げていく。これらのプログラムに関しては、全て個人のウェブサイトおよびビジネス関連のウェブサイトで実際に利用している。 1. グーグルアナリティクス・フォー・ワードプレス ジュースト・デ・ヴォルク氏が開発したグーグルアナリティクス・フォー・ワードプレスは、ワードプレスの管理者パネルからスタッツに直接アクセスすることが出来る

  • はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知

    はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28

    はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
  • HTML5+CSS3ベースのテンプレート集12:phpspot開発日誌

    12 HTML5 CSS3 Beautifully Designed Themes HTML5+CSS3ベースのテンプレート集12 色々とテクニックが使われており、学習後の実用例として参考にできそうです。 スマホ主流の流れでますます重要度が高まっているので格的に学んでおきたいですね 関連エントリ ほんとにフリー?というクオリティのXHTML/CSSテンプレート20 綺麗にデザインされたフリーのHTML/CSSテンプレート10 34のフリーで綺麗なXHTML/CSSテンプレート フリーの(X)HTML/CSSテンプレート50

  • 長いフォームをステップ式にして省スペースに収めるクロスブラウザ対応でシンプルなjQueryプラグイン・BabySteps

    使いやすそうだったので備忘録。 フォームをステップ式にして、 コンパクトに収められる、という jQueryプラグイン。シンプルなの でカスタマイズも割りとしやすく、 クロスブラウザでも動作してく れます。 高機能なプラグインは沢山ありますけど、既存サイトに組み込む必要がある場合はシンプルでカスタマイズしやすい方が落とし込みやすいのですが、探してみるとなかなか無いので個人的にはこういうプラグインが結構貴重です。 ライセンスはMITとなっています。縦長のフォームを見ただけで離脱するレベルで、フォームの入力はストレスなのでこうして見た目をすっきりさせれば離脱率を防げそう。 店かなんかに出来る行列も直線ではなく、蛇行した列にすると、混んでないような錯覚が生まれる、というのは聞いたことがあるので同じ理由でストレスを軽減できるのではないかなと。 Sampleデモを用意しました。日語にしただけですけど

    長いフォームをステップ式にして省スペースに収めるクロスブラウザ対応でシンプルなjQueryプラグイン・BabySteps
  • フォーム周りのエレメントのデザインを見やすいインターフェースに変更できるjQueryプラグイン・jNiceItと、似たようなやつ何個か

    どこかで使いたいなと思ってメモ。フォーム で良く使うラジオボタンやチェックボックス などのデザインを割りと簡単に見やすいデザ インに変更できるjQueryプラグインです。 この手のプラグインは沢山あるので選択肢の 一つとして、ですが、個人的には使いやすい 印象でした。 昨日に続き、今日もフォームのスクリプト。今日はフォームデザインを変更できるやつです。IE6だけちょい崩れるけどそれ以外は共通したデザインに変更できます。 ラジオボタンとかチェックボックスを画像に置換するプラグインですかね。なので、デザインの変更は基的に画像とCSSを少し変えるだけです。尚、画像の指定もcssで行います。 左が普通で、右がリア充ですね。シンプルでいい感じです。見た目がいいほうが愛されるんですねきっと。世知辛い世の中ですこと。 マークアップも特別なことはしなくて済むのも楽かも。デザインの変更は基的に画像を変え

    フォーム周りのエレメントのデザインを見やすいインターフェースに変更できるjQueryプラグイン・jNiceItと、似たようなやつ何個か
  • 画像もFlashも無し! スタイルシートでローディング時のスピナーを生成する -CSS load.net

    画像もFlashも無し! スタイルシートでローディング時のスピナーを生成する -CSS load.net

  • jQuery Mobileでサクッと作るスマートフォン向けWebアプリの基本 ─ @IT

    大日印刷 森川 裕美 2011/9/29 jQueryMobileを使って、スマートフォン向けのWebアプリケーションを手軽に作成する方法をおばかアプリを例に紹介します おばかアプリの開発にjQuery Mobileを使ってみました 先月8月20日に開催されました「第5回おばかアプリ選手権(見よ! コレジャナーイアプリの数々を!)」にて、jQuery MobileとHTML5の要素を使用した、iPhoneのMobile Safariで動作するミニアプリiBooNを紹介させていただきました。記事では、jQueryMobileを使って、お手軽にスマートフォン向けのWebアプリケーションを作成する方法をiBooNを例に紹介します。 iBooNは、iPhoneの傾きに応じて車の音が変わるミニアプリです。まず、Color Select画面から好きな色の車を選びます。ミニカーの画像が表示された画面

  • [CSS]用途に合わせて必要な機能を拡張できるCSSのフレームワーク -Cabin

    デモ:テーブル ベーシックなデザインのテーブルのデモ Media Queriesはデモがなく、下記ページより利用できます。 Media Queries -Cabin-Extensions -GitHub [ad#ad-2] Cabin CSS Frameworkの使用方法 Cabinは一つのコアファイルと複数の拡張ファイルが構成されています。 拡張ファイルは必要なもののみ使用します。 <head> <!-- Cabin コアファイル --> <link rel="stylesheet" href="css/cabin.css" /> <!-- Cabin 拡張ファイル --> <link rel="stylesheet" href="css/extension-name.cabin.css" /> </head> Cabin CSS FrameworkのIE6のサポート IE6とそのユーザ

  • リッチなドロップダウンメニュー実装ができるjQueryプラグイン「Mega Drop Down Menu」:phpspot開発日誌

    リッチなドロップダウンメニュー実装ができるjQueryプラグイン「Mega Drop Down Menu」 2011年09月27日- jQuery Mega Drop Down Menu Plugin ? Downloads Design Chemical Lab リッチなドロップダウンメニュー実装ができるjQueryプラグイン「Mega Drop Down Menu」。 次のような商用サイトでそのまんま使ってもかなり便利になりそうなドロップダウンメニューが作れます メニューバーのカラーは色々選べるようになっているのでサイトのイメージにマッチしたものを使うことが出来ます 垂直バージョンもあるみたいです 画像も組み合わせることで分かりやすいメニューが作れますね 関連エントリ スマフォでもイケてるクールなドロップダウン実装jQueryプラグイン「DropKick」 Googleスタイルのシンプ