s99e209のブックマーク - はてなブックマーク

HTML の〜内に書くタグの順番にも気を遣ってみた。
今アナタがご覧になっている、このオンズのウェブサイトでは読み込み速度のスピードアップや各種マークアップのクオリティ維持のために随時徹底した改善作業を行っています。これまでも本ブログにて様々なテクニックを紹介してきましたが、今日は<head>〜</head>タグ内のコードにフォーカスして、弊社が実際に行っているHTMLマークアップの考え方を紹介していきます。ブラウザで「要素を検証」して実際にコードを見てもらうのが手っ取り早いのですが、参考までに以下にコードをコピーして記載します。今日（2016年1月20日）現在のオンズのウェブサイトの<head>〜</head>タグは次のように記載されています。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="author" content="//on
s99e209 2016/01/21
たしかにCSSを読み込むためのlinkタグよりもjavascriptを読み込むscriptを下に書いた方が高速化されますよね。WordPressならフック使ってフッターにまとめてはき出すのがいいのかな。

html

seo
リンク
【jQuery】レスポンシヴ対応の高機能・高品質スライダー［slick］の使い方。Ver.1.8.1対応
【jQuery】レスポンシヴ対応の高機能・高品質スライダー［slick］の使い方。Ver.1.8.1対応高機能・高品質なjQueryスライダー［slick］の使い方を紹介します。このjQueryスライダーは「FlexSlider」「BxSlider」「flickity」「Swiper」など、他の優良jQueryプラグインと並んで紹介されることも多く、公式サイトでは「the last carousel you’ll ever need.（訳：あなたが必要とする最後のカルーセル）」と謳われており、実際、オプションの豊富さや安定した挙動が評価され、多くの制作者様がオススメし、また実際のウェブサイトでもよく使われています。公式サイトは以下。公式サイト：slick 「get it now」というリンクを押した後、「Download Now」をクリックすると配布されているファイル一式をダウンロ
s99e209 2015/05/01
たぶんいま一番ホットな、レスポンシブ対応のカルーセルスライダー［slick］の使い方。

jQuery
リンク
【jQuery】フィルターやソート機能にも対応したMasonry風jQueryプラグイン［Isotope］の使い方。
グリッドに沿って各要素をタイル状にレイアウトするプラグインで、有名なものでは［jQuery Masonry］が挙げられます。この分野のjQueryプラグインでは最も知名度が高く、初心者の方でも比較的簡単に導入できるので、使っている方も多いでしょう。ある程度の知識があればカスタマイズも容易にできるので、個人的にもお勧めできるプラグインです。唯一の難点といえば、デフォルトでは要素のフィルタリングやソート機能に対応していないこと。今日紹介する［Isotope］は、超高機能なフィルター機能、ソート機能を兼ね備えた「Masonry風」のプラグインです。実装サンプルまずはサンプルをご覧ください。サンプル・デモ：Masonry風プラグイン［jQuery Isotope］の使い方実はこのプラグイン、弊社オンズのウェブサイトのトップページでも利用しているので、「見覚えのある動きだ」と感じた方
s99e209 2015/01/04
グリッドに沿って写真などの要素をタイル状にレイアウトするプラグイン「Isotope」。これに似た有名プラグイン「jQuery Masonry」の機能に加えて、超高機能なフィルター機能、ソート機能を兼ね備えている。

jQuery

プラグイン
リンク
1