昨年の11月以降、新規購入したMacBook（アルミ削り出しではなく、従来のポリカーボネートの白モデル）の利用環境を見つめ直して以来、集中的にMacBookやOSXの使い方を調べ続けてきた。 以下は、この2ヵ月間で自分のMacBookの利用環境はどのようになったのか、新規購入したMacBookにインストールしたApple以外のソフトウェアの状態をベースに*1、そこからの変化や新たに気付いた使い方のメモ。 OSXの使い勝手 OSXの利用環境を決定付ける要因としては、どんなソフトウェアをインストールしているかよりも、以下の要素が重要だと思う。 どんなソフトウェアが常時起動しているか（常時起動しているプロセスは何か） どんなソフトウェアが即利用できる状況にあるか ショートカットやマウス操作一発で呼び出せる機能は何か メニューバーアイテムには何を表示しているか Dockに何を登録して、どのように利
エンジニアお茶会 2020/08/19 pastak.icon @pastak この発表のゴール 現代のウェブブラウザの目指している方向性について紹介する モダンブラウザで使える最新の面白便利APIを紹介する ちゃんと仕様に入りそうなもの(Googleの力技で…も含む) （前半の各ベンダの話はpastak.icon個人の見解を含みます） 次ではない フロントエンドなんでも相談室 前提知識のコーナー "WebAPI"とは何を指すのか、標準化について ECMAScript Ecma InternationalにてECMA-262という規格番号 ほぼLiving Standardという雰囲気もあるけど、年に1回タグが付く ES2020: ECMAScript® 2020 Language Specification 最新の様子: https://tc39.es/ecma262/ Array、Nu
CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント - デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記を読んで、ボクなりな最初に指定して置くと良いポイントを上げたくなったので書いちゃいます。 むしろこのサイトの方向性的に有った方が便利だよなーと。 書くきっかけを頂き、感謝いたします。 ちなみに、最初に指定しておくポイントってそれぞれだと思うので、一つの参考として読んでいただければ幸いです。 最初にbodyに指定しておくと便利だと思う3つを。 body { background:#FFF url(../img/share/bg.gif) no-repeat left top; font-family:Verdana, "ＭＳ Ｐゴシック", sans-serif; font-size:80%; } じゃあ、詳細について色々書
iframeを使った地図 Fluidityの使い方 使い方は簡単です。 Step 1: 外部ファイル head内に当スタイルシートを追加するだけで完了です。 <link rel="stylesheet" href="css/fluidity.min.css"> Step 2: HTML あとは、通常通りにHTMLを記述するだけです。 画像の場合 <img src="image.png"> テーブルの場合 テーブルの時はclassを加えます。 <div class="overflow-container"> <table> <!-- table contents --> </table> </div> 地図の場合 <iframe src="https://www.google.com/maps/embed?マップのコード" width="100%" height="450" framebor
年末だからというわけでもないのですが、いつものサイト作りに使う CSS リセットについて見直してみました。今までもちょっとずつ手を入れてはいたのですが、今回はかなり大きく修正しています。というのも、Nicolas Gallagher と Jonathan Neal の両氏による normalize.css を知り、大きく影響を受けたからです。 Normalize.css は「新手の CSS リセット」ではありません。CSS を「リセット」するのではなく「ノーマライズ」する、という新しい考え方です。CSS リセットとノーマライズはどちらも、ブラウザ間で CSS の実装に差異があることを前提にそれらを吸収しようとする、という同じ目的を持っています。ただ、リセットはすべてをまっさらな「さら地」にしようとするのに対し、ノーマライズは使える部分は残しつつ手を入れる必要のある部分だけを整える、という違
夜な夜なBlender生活の始め方
はじめに Blender。めっちゃ楽しいです。 仕事が終わって帰ってきてから、ほぼ朝の時間までBlenderにひたすら打ち込んで 休日の大半もBlenderに捧げるような生活をここ3週間くらい続けてきました。 ここまでの学びの整理と、Blender布教のために この記事に概要をまとめたいと思います。 Blenderの世界観 Blenderを始めるにあたって、まず第一にぶち当たる壁として 「3Dソフト特有の概念」があると思います。 他の、3Dソフトを触ったことがある人はすんなり扱えるかもしれませんが、 僕はなかったので、概念理解にちょっと苦戦しました。 Blenderの世界を構成する主な要素として シーン オブジェクト ライト カメラ これらが挙げられます。 シーンとは、 一つのBlenderファイル内に格納されている要素全てを包含する3Dワールドのようなものです。 オブジェクトとは、 一次
Normalize CSS [ad#ad-2] Normalize CSSの主な特徴 Normalize CSSの対応ブラウザ Normalize CSSのデモ Normalize CSSの使い方 Normalize CSSの主な特徴 Normalize CSSは、他のリセット用スタイルシートとは一味違った特徴を備えています。 有用なデフォルトはそのまま 多くのリセット用スタイルシートは異なり、有用なデフォルトのスタイルは維持します。 スタイルの正常化 さまざまな種類のエレメントのスタイルを正常化します。 バグの修正 各ブラウザごとの異なるスタイルやバグを修正します。 ユーザビリティの改善 ほんのわずかな改良でユーザビリティを改善します。 コードの説明 各コードには詳細な説明があります。 Normalize CSSの対応ブラウザ 対応ブラウザは下記の通りです。 Chrome Firefox
この記事は Vim Advent Calendar 2015 の21日目の記事です． もくてき 本記事では Vim のコマンドの”覚え方”を紹介します． 基本的にはトリッキーな”覚え方”ではなく由来の紹介となります． 例えば J で行連結は Join が元だとか， gfが”goto file”の略だといったことを 知っておくとなにかと憶えやすいと思います． 対象読者 主にこれから Vim を使ってみよう! でもなかなかコマンドを覚えられないっ! という Vim 初心者の方に由来を知ることで少しでも コマンドを憶えやすいようにすることが目的です． 初心者を想定しているのでコマンドの動作などもなるべく紹介していきます． 中・上級者の方には普段何気なく使ってたあのコマンドの由来を知って「フハハハハ」と ほくそ笑んでもらえるような記事になれば嬉しいです． 注意 注意点として公式のものから公式っぽい
div.tucked-corners { background: #f6f6f6; height: 380px; margin: 50px auto; padding: 10px; position: relative; width: 580px; -webkit-box-shadow: 0 1px 7px hsla(0,0%,0%,.2); -moz-box-shadow: 0 1px 7px hsla(0,0%,0%,.2); box-shadow: 0 1px 7px hsla(0,0%,0%,.2); } ...詳細はリンク先を参照 /* Sticky Footer Solution by Steve Hatcher http://stever.ca http://www.cssstickyfooter.com */ * {margin:0;padding:0;} /* must
Posted: 2012.02.21 / Category: javascript / Tag: jQuery グローバルナビゲーションはロゴの下に配置されていることが多いですが、スクロールするとナビゲーション部分だけが上部に固定されるようなものをjQueryでやってみたいと思います。 html & css htmlです。 html <h1><a href="#">タイトル</a></h1> <div class="nav"> <ul class="clearfix"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">LINK</a></li> </ul> <!-- /#nav --></div> <div id="artic
スマフォwebページのスライドメニュー アプリでは当たり前のように実装されているスライドメニューですが、webページではなかなか使い心地のよいスライドメニューが実装されているのは見かけません。 スマートフォンのブラウザではjavascriptでのアニメーションはどうしてもガタガタになってしまうし、ちらつきやスクロール制御のめんどくささからもうwebページでネイティブアプリ並のスライドメニューを実装するなんて無理と思っていました。 Facebookのwebページですらボタンの反応は悪いしアニメーションも動かないし最悪です。 一方Google先生はパーフェクトなスライドメニューを実装していた さすがGoogle先生！ 俺達に出来ないことを( Googleのスライドメニューは以下の点でパーフェクトです。 1. スライドのアニメーションがとても滑らか・ちらつかない 2. ボタンの反応にストレスを感
2012年12月4日：Vim化について指摘と参考になる情報をいただいたので追記しました。 こんにちは、僕はVimユーザーです（ちなみにVimを完璧に使いこなしているわけではありません）。 今更ながら「Sublime Text 2」というナウでヤングなエディタも使いこなせるようになりたいと思い、Sublime Textの基本設定からプラグインやスニペットの作り方まで調べた内容をこの記事にまとめることにしました。 細かい情報までまとめることはできなかったので、より詳しい内容を紹介してくださっているブログやサイトへのリンクを設けています。 この情報以外にもSublime Text 2をVimに近づけるプラグインやカスタマイズ方法があればコメントいただけるとうれしいです。 また、間違いがあればコメントいただければすぐに直します。よろしくお願いします！ Sublime Text 2は有料（$59）の
4月から入社した2011年度新卒社員です。 ハロこんにゃんセヨ がぜんウェブウェブしているほんだです。 今年4月より、意匠部のME課（めか）でマークアップエンジニアとして働いているほんだです。 入社したての新卒社員ですが、PCサイトのHTML+CSSのマークアップや、MovableType（ブログ構築ツール）での組み込みなど、色々な仕事をさせてもらってマークアップリア充です。 そんな中でも最近多い業務はjQueryを使ったビジュアル面でのちょっとしたJavaScript（以下 JS）プログラミングです。 jQueryってとっても便利ですなぁ。HTML+CSSの知識を持っている人なら、簡単に「使える」エフェクトをつくれます。 この記事では僕が入社して2ヶ月間に学んだ、簡単で「使える」jQueryテクニックを紹介します。 jQueryってなんぞってとこと、使う前の準備をざっくり解説 jQuer
よく見かけるタイプのjQueryを使ったスクロールしても上に固定されているメニューを紹介します。最近FC2ブログの上部に現れた検索バー（このブログは非表示にしてます）みたいな感じです。 <script type="text/javascript"> $(function() { $(window).scroll(function(){ var scrollTop = $(window).scrollTop(); if(scrollTop != 0) $('#nav').stop().animate({'opacity':'0.5'},400); //スクロール時 else $('#nav').stop().animate({'opacity':'1'},400); //一番上にあるとき }); $('#nav').hover( function (e) { var scrollTop =
Themes - iOS - Human Interface Guidelines - Apple Developer
iOS Design Themes As an app designer, you have the opportunity to deliver an extraordinary product that rises to the top of the App Store charts. To do so, you'll need to meet high expectations for quality and functionality. Three primary themes differentiate iOS from other platforms: Clarity. Throughout the system, text is legible at every size, icons are precise and lucid, adornments are subtle
Kotaku - The Gamer's Guide
Picking computer peripherals can be paralyzing. When I buy a new keyboard, it takes weeks of research to choose the right one. Buying speakers requires an hour of testing at the store. But when I buy a mouse, I just go straight for whatever Logitech is offering—because I can’t live without their momentum scroll wheel.
人気RSSリーダー「Feedly」はPCブラウザの拡張機能やWeb版だけでなく、iOS・Androidアプリでも利用することができる。 Feedlyレビュー Feedlyアプリは、スマホ・タブレット向けに操作性が最適化されており、ユーザの使い方に応じて多様な詳細設定項目が用意されている。 2013年6月現在、日本語版が提供されておらず、今後の見通しも不明であるため、日本語で詳細設定を解説しておきたい。 PC向けFeedlyの設定方法の解説記事 アプリのAdvanced Settings：詳細設定 iOSアプリとAndroidアプリとで、設定項目の名称や順序、設定可能な項目が異なる場合がある。 もっとも、ほとんど重複する内容であるため、合わせて解説することにした。特に混乱することなくチェックできると思う。 本解説がベースにしているアプリのバージョンは、iOSがVersion 16.0.1、A
シングルページなサイトをデザインする上で、知っておいて損は無いかもしれないプラグインとか色々！ | バンクーバーのうぇぶ屋
最近多いですねー、1ページで完結するタイプのサイト。One Page Loveのサイトなんかから、シングルページの事例も大量に見ることが出来ますし、パララックスやらフリップ型のコンテンツやら、なんか色々出てきてて着いて行くのがやっとです… でも実際シングルページをつくろうとすると、え？何これどうなってんの？って物も多くてビビることもしばし。 ってことで、今日は僕が知ってる中で『お、これ、シングルページ作る時に使えるんじゃね？』って物を幾つかご紹介させて頂きます！ 主にはシングルページデザインの表現の幅を広げるjQueryプラグインの紹介になるかなと思いますが、楽しい物も多いので、是非興味があれば試してみてくださいませ〜！ それではいってみましょー！ パララックススクローリング系プラグイン この辺は以前に紹介したことがあるものばかりなので、ぱぱーっと行きます。 jQuery Waypoint
ブラウザごとに異なるHTMLの各要素のスタイルの相違を吸収し、各要素のデフォルトのスタイルが定義されたCSSリセット用のスタイルシートを紹介します。 normalize.cssを最近のWeb制作にあうようカスタマイズされたもので、対応ブラウザはすべてのモダンブラウザ、IEは8+対応です。 ress -GitHub 参考: normalize.cssの特徴とコード 2015年、Web制作者が押さえておきたいCSSの各種リセット ressの特徴 ress: html, グローバルセレクタの定義 ress: 一般的な要素の定義 ress: フォーム要素の定義 ress: メディア要素の定義 ress: アクセシビリティ用の定義 ress: ::selectionの定義 ressの特徴 ressは「normalize.css」をカスタマイズしたもので、スタイルシートを始める時のしっかりしたベースな
前のエントリーで書くとお約束した WordPressのプラグインや設定に関するエントリーです。 月間20万稼ぐ！僕がブログを書くのに使う“神”ツールをドンッと紹介 今や、MTを抑え不動の人気を得ているWordPressその力はGoogleのマットカッツ氏もお勧めしている事も皆さんご存知だと思います。僕自身、ビジネスワークでも自身のブログでもいろいろ試行錯誤しながらより、SEOに強く効果のあるWordPressを目指して試行錯誤して来ました。その上で、今のベストセッティングだと思えるWordPressテーマ「Stinger」を公開させて頂いているのですが、ここで一度この「Stinger」にしている設定と、その上で僕が使用しているおすすめの「プラグイン」をご紹介したいと思います。 photo credit: opacity via photopin cc 現在、絶賛パーマリンク変更中なので変動
2022年4月27日 CSS CSS小技集シリーズの第3弾！「【第2弾】少しのコードで実装可能な20のCSS小技集」から3年が経ち、さらに便利でサクッと使えるコードが続々登場！特にこれまではJavaScriptで実装していたものがCSSだけで実現できるようになったりと、進化が凄まじいです。初心者さんからベテランさんまで要チェック！ ↑私が10年以上利用している会計ソフト！ 目次 スムーズスクロール スクロールスナップ スクロールすると要素を固定 画像をトリミング CSSで計算式を書く テキストを円形に回り込ませる Webフォントを使った時の表示遅延を回避する テキストに波線を引く テキストの上に記号を表示 表のセルの幅を統一する 入れ子になったリストもカウントする フォームのプレースホルダーの文字色を変更 しましまのライン メディアクエリーを使わずにタイル型レイアウトをレスポンシブに対応
素晴らしいjQueryチュートリアル集 – creamu
AjaxLineで、素晴らしいjQueryチュートリアルがまとまっています。 ざっといくつかご紹介。 » Animated Menu Using jQuery jQueryを使ったアニメーションするメニュー » How to create tab with JavaScript シンプルなタブ切り替えコンテンツの作り方 » Animated Navigation with CSS & jQuery マウスオーバー時にくるっくるっと切り替わるかっこいいメニュー » 5 Sliding Content Techniques, Examples & jQuery How to’s 画像をスライドで切り替える超クールなテクニック » jQuery FAQs: Scroll To and Highlight Tutorial ページ内リンクのスクロール後、対象のコンテンツをハイライトしてくれる »
AppleやNike、Teslaといった誰もが知る大企業のWebレイアウトを、CSSで再現するテクニック集がTwitterで投稿され、話題となっています。 CSSのみで表現できる目からウロコのテクニックが中心で、あの驚くようなエフェクトも実はシンプルな数行のコードで表現されていたりします。 コピペできるCSSコードと一緒に、デモサンプルも確認してみましょう。CSSで解決できるテクニック、増えています。 「これどうやる？」アップルやナイキなど大企業Webサイトで利用中のレイアウト再現CSSテクニック集 ノーコードでレスポンシブなデザインを構築できる Builder.io のCEO @Steve8708は、有名サイトで使われている魅力的なレイアウトが、どのように作成されているのか、コピー用のサンプルコードと一緒にみじかい動画で詳しく紹介しています。 ユーザーの視線を奪うアニメーションやレイアウ
Ajaxに関する日本語の情報をざっと集めてみました。(一部日本語ではないものを含みます) 丁寧な調査ではないので、本当に大ざっぱなものです。 一応、以下の内容は多少メンテナンスしようと思うので、追加削除などのリクエストがあれば、私までメールを下さい。 非常に長くて申し訳ありませんが、頑張って必要な情報を探してみてください。 ★ 出版物 (この部分は現在フォロー仕切れていません) Ajaxイン・アクション (2006/06/20追加) https://www.amazon.co.jp/exec/obidos/ASIN/4844322222/autumnmagazin-22 Ajax イン・アクションの4章が酷すぎる (2006/06/20追加) https://blog.hawklab.jp/item-69.html Googleマップ+Ajaxで自分の地図をつくる本 Google Maps
ThickBox 3.1
ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal. Features: ThickBox was built using the super lightweight jQuery library. Compressed, the jQuery library is 20k, uncompressed it's 58k. The ThickBox JavaScript code and C
Emacs クイックリファレンス
back はじめに このマニュアルは emacs (あるいは mule) を使いはじめてまだ間もない頃の 人のためのものです。emacs を一度も使ったことのない人は残念ながら 対象としていません (そういう人には emacs 付属のチュートリアルをすすめます)。 これを読んでも emacs が快適に使えるようになるかどうかはあなた次第です。 emacs はマウスやカーソルキーで操作することもできますが、 これらを使っているようでは上達しないということも 覚えておいてください。このマニュアルはよその人にも読めるように書いた つもりですが、基本的に csc (東工大 情報工学科 計算機室) で emacs を 使用する人を対象としています。そのため、日本語入力環境やメール環境については 必ずしもあなたのサイトとは一致しないかもしれませんので注意してください。 基本的なこと ファイル操作 カー
こんにちは、にっしーです。 今回は衝撃を受けたスクロールデザインのウェブサイトを紹介します。 一見普通なウェブサイト。スクロールしたら世界変わります。Let's scroll!:) ※ブログ読者のみなさんに教えていただいたサイトも随時追加しています:) http://balloon.am/ http://2011.beercamp.com/ http://bloom.io/ http://www.nikebetterworld.jp/ ここから+α http://www.nintendo.com.au/gamesites/mariokartwii/ via @attripさん http://sai-zen-sen.jp/special/reddragon/ via @satorumurmurさん いかがでしたか？ 「衝撃受けた！」って人はTwitterやFacebookで拡散していただける
商用でも無料で使えるGPLライセンスの 人気CMSなので当然、納品する事も多々 あるかと思います。クライアントさんが管理 する場合と、制作者側で管理する場合があ るかと思います。個人利用ではどうでもいい ですが前者の場合は出来れば管理画面を どうにかしたいところですね。 という訳で、WPの管理画面をどうにかしたい時に覚えておくと探す手間が省けて楽だなぁ、と思ってまとめた記事になります。 左上の「W」のWPロゴが目立つのでこれを変更。 お使いのテーマファイルのfunctions.phpに以下を加えます。 add_action('admin_head', 'my_custom_logo'); function my_custom_logo() { echo ' <style type="text/css"> #header-logo { background-image: url('.get_
片手間のJavaScriptから脱出するためにこれからのWebエンジニアが理解すべきこと - Qiita
はじめに 最近、こういった記事が世間をにぎわせている。こりゃエヴァの話なんてしてる場合じゃねぇ！と思ってさくっとこの辺の事情を理解するために必要なことをまとめてみる。 Railsが時代に合わなくなってきた Javascriptを使うのをやめろ：Railsの時代遅れ云々についての結論 昔ながらの「片手間に書くJavaScript」の限界 GoogleやTwitterでも実現できないのだから使うな問題 この話は、どの地点の何の話をしているのかよくわからないのです。現在ではかなりステップバック＆改善が行われ、Safari自体のクラッシュはアプリのクラッシュと比べて、あまり多いとは思いません。むしろ、一昔前に比べてかなり改善しているという認識です。iOSのバージョンが古いとかでなければ、現状でも十分ユーザビリティの改善につながっているでしょう。 しかし、この問題の結構大部分を占めているのは個人的に
注意 HTML5 からは 見た目は CSS に任せ、HTML は文書の構造（セマンティック）を表すことのみに重点を置かれるようになりました。例えば箇条書きリストを作るのに div と display: list-item; を使って構築するより、箇条書きリストを表す ul li を使ったほうがよりセマンティックです。このように目的にあった HTML 要素を使うようにしてください。 ボックスモデルとは CSS でレイアウトをする際には、 ボックスモデル を理解する必要があります。 CSS の定義するボックスモデルは以下の図のように 4つの領域で構成されています。 ボックスモデル解説図 content（コンテンツ） テキストや画像など、要素そのものの内容が表示される領域です。この領域のサイズは width（幅） と height（高さ）プロパティで指定することができます。 padding（パデ
うわっ...私のEmacs、使いにくすぎ？だったら...ｶｽﾀﾏｲｽﾞｼﾔｯｾｰ!!ﾀﾞｧﾀﾞｧｼｴﾘｲｪｯｽｯｼｪｰｼｮｰﾍｲﾍｲ!!! - 三等兵
日々事あるごとにﾀﾞｧﾀﾞｱ言っとります。たとえばタンスの角に小指をぶつけりゃ、 「ﾀﾞｧ!!!」 扉を閉じるときに指を挟んで、 「ﾀﾞｧ!!!ﾀﾞｧ!!!」 猪木がイチ,ニ,サンと叫ぶものなら、 「ﾀﾞｧ-------!!!」 と言っとりますがあーーー！！！・・・という荒ぶる猪木の気分ではありませんが。 MacになってからCodaと付き合いだして疎遠になっていました。でもやっぱりEmacs使ってたときが一番捗ってたのでまたお付き合いを始めようかと。 ・・・え？Emacsとの馴れ初めですか？気になります？気になります？そうですね、あれは、忘れもしない雪がしんしんと全く降ることがない初秋のある日のことでした。私は当時は日々事あるごとに「ﾍｧ!!!ﾍｧ!!!」とウルトラマンしていました。時々「ﾌｫｯﾌｫｯﾌｫ!!!」とバルタンもしてました。クセなんです。そして出会いました。 ピグモンと。 それ
Tumblrの省メモリーな無限スクロール - 記録
無限スクロールまたはauto pagingと呼ばれるUIには、読み終えたコンテンツがどんどん画面の上のほうに溜まっていってメモリーを食い潰すという問題がある。 なかでもTumblrは画像などのコンテンツが多いため、ダッシュボードダイバーたちは無限Tumblrユーザースクリプトなどのユーザースクリプトをインストールして、読み終えたコンテンツを定期的にページ上から自動削除するといった対策を講じていた。 ところが最近のTumblrのダッシュボードでは、ポストが画面外に出るとその中の要素が一時的にページから削除され、画面内に表示されると要素が再度復元されるようになっている。どうやらこれによって無限スクロールによるメモリーの圧迫が抑えられているらしい。 関連するコードはhttps://secure.assets.tumblr.com/assets/scripts/dashboard.jsの/*! s
新規購入したMacBookにインストールしたApple以外のソフトウェア - ザリガニが見ていた...。
僕のMacができるまで | Macの手書き説明書さんの記事に触発されて、いつか自分でも似たようなことを書き留めておきたいと思っていた。MacBookを新規購入したので、今こそ、そのチャンス！（こういうことって、当り前の環境として使ってしまっていると、何をインストールしていたか忘れてしまう。新規インストールする時に改めてその便利さを再確認することが多い。） インストール前のいい訳 PathFinderというOSの操作感をそっくり代替してしまうような素晴らしいソフトウェアもあるが、日常的にはOSXのFinderを利用している。*1 メールとWEBブラウザについても、（機能拡張するソフトウェアはインストールしているが）OSX標準のMailとSafariをメインに利用するようにしている。そうすると、MobileMe（.mac）を利用してメール設定やブックマークをあっという間に同期できる便利さに惹か
作成：2014/05/7 更新：2014/11/01 Web制作 > ギャラリーサイトやECサイトなどで、最近よく見かけるデザインやエフェクトなど、制作前に知っておくと助かる、「どっかで見たことあるけど何だっけ？」といった感じのjQueryプラグインや最近のトレンドなるものをまとめました。ページにちょっとした工夫を凝らしたいとき、動きのある仕掛けでキャンペーンサイトを作りたいときに。 エンジニア速報は Twitter の@commteで配信しています。 もくじ メニュー １．フィーチャーリスト ２．スティッキーヘッダー 画像エフェクト ３．マウスオーバーで画像にキャプション ４．イメージビューア ５．ズームインエフェクト ６．ブラーエフェクト スクロール ７．Infinite Scroll(無限スクロール) ８．画像シーケンス ９．横スクロール １０．フリック機能 レイアウト １１．画面全
その記事最後まで読まれている？ページの読了率をGoogleTagManagerを利用して取得する方法のまとめ - ゆとりずむ
こんにちは、らくからちゃです。 ここ最近、Googleより『低品質なコンテンツは検索順位下げるからね！』という大本営発表が出されました。 以前より、Googleの検索順位については『コンテンツの量が長ければ長いほうが良い』、俗に長文SEOと呼ばれる仮説がまことしやかに語られてきました。その真偽はさておき、多くのウェブサイトが内容量の充実によるアクセス増を狙った結果、『ただ長いだけで最後まで読まれることのない駄文長文コンテンツ』が増えてきたのも事実です。 おそらくGoogleは『読むに値するコンテンツか否か？』の判断に、ページの滞在時間も採用しているのでしょう。しかしただ長いだけのコンテンツはむしろ価値のない物として評価されている可能性もあります。ネット上に文章を公開するならば、より多くの人に読まれる＝PVが増えることを望むことは自然なことです。しかしPVはあくまで『アクセスがあったかどうか
組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! ブラウザ強化系 拡張機能まとめ Google Chrome自体の機能を便利にしてくれる拡張機能をご紹介します。 最近の更新 2011年12月18日：いくつかの拡張機能を追加、そしてなくなってしまった拡張機能を代替するものに変更。また、見た目を少し変更しました。 目次 ブラウザ強化系以外の項目は、別のページに移動します。 Google系 ブラウザ強化系 基本拡張機能「新しいタブ」を拡張タブを開きすぎる人向けブックマーク系便利機能追加系GTD実践 自己管理系 WEBサービス系 WEB担当者お役立ち系 デザイナーお役立ち系 ソーシャルサービス系 エラーが起こるので気を付けたいもの ↑目次へ戻りたい場合は、画面右下にある「目次へ戻る」ボタンを押してください。
あなたのブログを圧倒的に便利化・効率化する最強のプラグイン40選 | アフィリエイト初心者でも稼げるネットビジネスブログ
仕組みはわからなくても、誰でも簡単にワードプレスのブログを拡張することができる素晴らしいアイテムであるプラグイン。 ネットビジネス＆アフィリエイト＆ワードプレス1年半になる僕が、ワードプレスに絶対に入れておくべきプラグイン40選をまとめました。 目次 1.デザインを強化するプラグイン 1-1.Shadows 1-2.jquery-colorbox 1-3.Newpost Catch 1-4.Smooth Scroll Links 1-5.Category Order 1-6.wp-pagenavi 1-7.WordPress Content Slide 1-8.Browser Shots 1-9.Favicon Rotator 2.ソーシャルメディア活用プラグイン 2-1.Open Graph Pro 2-2.WP Social Bookmarking Light 2-3.ShareBar
15分で設定完了！ Google Tag Managerで記事の「読了率」と「スクロール率」を取得しよう【小川卓のブログ分析入門 第2回】 - 週刊はてなブログ
ブログ運営で大切なことは、公開した記事がきちんと読まれることです。ウェブアナリストの小川卓さんによるブログ分析の入門。第2回は、良い記事を見極める「読了率」と「スクロール率」についてです。 cover photo by Jastrow (2008) - Musa reading a scroll., Public Domain, Link前回の記事では、過去の記事を評価する方法を紹介しました。 過去の記事を「地層」にしよう！ ブログの「初月率」を取得して改善に活かすには【小川卓のGoogleアナリティクスではてなブログ分析入門 第1回】 - 週刊はてなブログ 今回は、公開後間もないものも含めて記事自体を評価する方法を紹介します。良い記事と悪い記事を見極めるには、何を見る必要があるのでしょうか？ わかりやすい指標としては、ページビュー数やはてなブックマーク数などがあるでしょう。そういった数字
【保存版】PC版Feedlyの設定方法を日本語で解説
廃止されるGoogleリーダーの代替RSSリーダーとして人気のFeedlyだが、その設定を自分好みに変更して利用しているだろうか。PCブラウザ向けFeedlyでは、左メニューのPreferencesから、20以上の項目を設定変更することが可能だ。 日々、RSSフィードを消化していくためにも、自分の使いやすいようにFeedlyを最適化しておくと良いだろう。 GoogleリーダーからFeedlyに移行すべき8つの理由 FeedlyでRSSを高速消化するためのショートカット一覧 アプリの詳細設定についても解説したので参考にしてほしい。 【保存版】Feedlyアプリの詳細設定を日本語で徹底解説 Preferences：設定解説 この記事では、スマホ向けの設定変更ではなく、PCブラウザ向けの設定変更について日本語で解説する。英語表記で設定変更が億劫になっていた人の助けになればと思う。 全てのOS・ブ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
MacBookをより使い易くするための基本設定を探る - ザリガニが見ていた...。
面白Web API 100連発 - pastak-pub
スクロールに応じて要素がアニメーションする、視差効果（パララックス）を取り入れたWebデザイン例とTipsいろいろ - かちびと.net
bodyに設定しておくと便利な3つのポイントとおまけ｜CSS HappyLife
たった一行でさまざまな要素をレスポンシブ対応にするスタイルシート -Fluidity | コリス
俺の CSS リセット: 2011 冬
ブラウザのスタイルをリセットするスタイルシート -Normalize CSS
Vim Mnemonic | Vim のコマンドの覚え方大全 - haya14busa
これは便利！コピペで使える実用的なCSSテクニックいろいろ
jQueryでスクロールすると上部に固定されるナビゲーション
Googleから学ぶ ヌルヌルサクサクなスライドメニュー - Qiita
Sublime Text 2の基本とカスタマイズ【Vim風】
HTML+CSS主体のJavaScriptエフェクト！ 簡単で「使える」jQueryテクニック（解説つき）
jQueryでスクロールしても上に固定されるメニュー｜Webpark
【保存版】Feedlyアプリの詳細設定を日本語で徹底解説 #iPhone #Android
CSSリセットはこれで決まり！モダンブラウザによる相違を吸収するようカスタマイズされたスタイルシート -ress
WordPressのお勧めプラグインと設定方法を公開
【第3弾】少しのコードで実装可能な15のCSS小技集
【CSS】「これどうやる？」アップルやテスラのWebレイアウト再現テクニック集
日本語で読めるAjax関連情報のリンク集 【▲→川俣晶の縁側→ソフトウェア→技術雑記】
これはすごい！スクロールすると世界が変わるカッコ良すぎるウェブサイト4選+α
WordPressの管理画面をカスタマイズしたい時に覚えておくと重宝しそうなハックやプラグインいろいろ
今更聞けない！エンジニアのための CSS の基礎講座 〜ボックスモデル編〜 | 株式会社ヌーラボ(Nulab inc.)
見栄えがよくなった！Web制作するなら知っておきたいjQueryプラグインまとめ
ブラウザ機能を強化する Chrome拡張機能 まとめ