レスポンシブ対応のHTMLメールの無料テンプレート
レスポンシブ対応のHTMLメールの無料テンプレートを紹介します。 Outline Mailはレスポンシブ対応のHTMLメールのテンプレートです。 レイアウトパー...
コーディング
JavaScriptを使ったSEO対策まとめ、など注目のJSライブラリ・チュートリアル12選
JavaScriptを使ってインタラクティブにコンテンツを読み込むサイトが増えています。Googlebotは大分進化していて、JavaScriptを実行できるよ...
Flexboxはfloatよりも高速だった、など注目のHTML/CSSスニペット・チュートリアル9選
モダンブラウザの普及により、floatではなく、flexboxを使った横並びレイアウトの実装が増えています。実装はflexboxの方が簡単で、応用範囲も広いです...
そのままサービスサイトに使えるBootstrapベースのHTMLテンプレート
新しくリリースされた、BootstrapベースのHTMLテンプレートを紹介します。 GuideはBootstrapベースのHTMLテンプレートです。 Index...
任意のテキストに簡単にツイートを実装できるJSライブラリ InlineTweet.js
任意のテキストに簡単にツイートを実装できるJSライブラリを紹介します。 InlineTweet.jsは、任意のテキストに簡単にツイートを実装することができるJS...
CSSでレーティング評価の星を実装する3つの方法
CSSでレーティング評価の星を実装する3つの方法を紹介します。 1. CSSとSVGでレーティング評価の星を実装する方法 CSSとSVGを使ってレーティング評価...
無料でダウンロードできるレスポンシブ対応のHTMLテンプレート
Free Bootstrap Themeは無料でダウンロードできるシングルページサイトのHTMLテンプレートです。（デモサイト） レスポンシブ対応で、PC、タブ...
CSSだけで実装できる28種類のローディングアニメーション Loaders.css
Loaders.cssは、CSSだけで実装できる28種類のローディングアニメーションのライブラリです。 ↓様々なローディングアニメーションを実装できます。 デモ...
リッチなHTMLの無料管理画面テンプレート
棒グラフや円グラフ、表などのデータ表示に最適な管理画面用HTMLテンプレートを紹介します。 ダウンロード | デモ RazorFlowは、リッチなHTML5 製...
最近のWebサイトで見かけるHTML/CSSスニペット・JSライブラリ33個まとめ
最近のWebサイトでよく見かけるアニメーションやインターフェースを簡単に実装できる、便利なHTML/CSSスニペット、JavaScriptライブラリを紹介します...
ボタンにホバーするとツールチップを表示するCSS Balloon.css
Balloon.cssはボタンにホバーするとツールチップを表示するCSSです。 JavaScriptを使わず、CSSだけで実装できるのが特徴です。 デモ デモペ...
キーボードで操作できるSVGのドラムアニメーションが凄い！
SVG画像とJavaScript、html5のaudio要素で実装されたドラムキットのアニメーションを紹介します。 まずは、こちらのデモをご覧ください。 キーボ...
Google純正のレスポンシブデザインのテストツール Resizer
ResizerはGoogle純正のレスポンシブデザインのテストツールです。 URLを入力すると、様々なブレークポイントでサイトを見ることができます。同様のツール...
ドラッグ＆ドロップでファイルをアップロードできるライブラリ DropzoneJS
DropzoneJSはドラッグ＆ドロップでファイルをアップロードできるライブラリです。 最近よく見かける、ドラッグ＆ドロップでファイルをアップロードするUIを実...
シンプルなモーダル表示用jqueryライブラリ Remodal
Remodalはシンプルなモーダル表示用jqueryライブラリです。 シンプルに実装できて、使いやすいのが特徴です。 デモ デモページを用意しました。 ダウンロ...
カード型のUIを実装できるBootstrapテンプレート Bootcards
Bootcardsはカード型のUIを実装できるBootstrapテンプレートです。 最近流行りのタブレットやスマホベースのアプリケーションを作成する際に使えそう...
横幅に応じてメニュー数が変動するjQueryナビゲーション okayNav
okayNavは横幅に応じてメニュー数が変動するナビゲーションです。 レスポンシブなナビゲーションで、横幅を変えると表示されるメニュー数が変動します。 レスポン...
Chromeのデベロッパーツールにhttps通信の安全性を確認できる「Security」が追加
Chromeのデベロッパーツールにhttps通信の安全性を確認できる「Security」パネルが追加されました。 https通信が安全な場合、「This pag...
AMPが正しく設定できているか確認する方法
Googleが検索結果にモバイルサイトを高速表示する仕組み、AMPを正式に導入しました。 しかし、現状では、検索結果にAMPとして表示されるのは、ニュース性の高...
ラインを使ったスタイリッシュなメニュー26パターン Line Menu Styles
Line Menu Stylesはラインを使ったスタイリッシュなメニュー26パターンです。 ライン要素をデザインに取り入れることで、斬新なメニューを実装していま...
HTMLの閉じタグをチェックできるオンラインツール Page Scanner Tool
Page Scanner ToolはHTMLの閉じタグをチェックできるオンラインツールです。 サイトのURLを入力するだけで、開始タグと閉じタグの数が分かります...