[JS]スマホもOK！縦長ページやスライダーでコンテンツをさまざまなアニメーションで表示させるスクリプト -pageSwitch
縦長ページで次のコンテンツを表示する時、画像やテキストを配置したコンテンツスライダーで、すぅーとスライドさせたり、ぱたり、くるり、ぐい～んなど、ブラウザいっぱいのコンテンツやパネルをさまざまなアニメーションで表示させるスクリプトを紹介します。 HTMLは非常にシンプルで、スマホやタブレット、古いIEでも動作します。 スマホで、カーテンを引き上げるように表示させるのも簡単です。 pageSwitch -GitHub pageSwitchのデモ pageSwitchの使い方 pageSwitchのデモ pageSwitchは121種類のアニメーションをサポートしており、さまざまな動きをデモページで楽しめます。 下記はブラウザ表示ですが、スマホでもタブレットでもOKです。
![[JS]スマホもOK！縦長ページやスライダーでコンテンツをさまざまなアニメーションで表示させるスクリプト -pageSwitch](https://cdn-ak-scissors.b.st-hatena.com/image/square/fec6bf67d7730443566e7451a2e74cd7133ab866/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016012501.png)
Gmail, Outlookをはじめ、デスクトップ・ブラウザ・スマホメールにレスポンシブ対応のHTMLメールのテンプレート -Cerberus
HTMLメールのコードは通常のWebページより難しい、という人は少なくないと思います。しかもレスポンシブ対応のHTMLメールになると、更に難易度があがります。 メールでよく利用されるレイアウトのパターンをシンプルにまとめた、レスポンシブ対応のHTMLメールのテンプレートを紹介します。 Cerberus Cerberus -GitHub Cerberusの特徴 CerberusのHTMLメールのテンプレート Cerberusの特徴 Cerberusは現在主流のメールクライアントをサポートしたレスポンシブ対応のHTMLメールのテンプレートで、MITライセンスで無料で利用できます。 サポートしているクライアントは、下記の通り。 デスクトップ Outlook 2000/02/03/07/10/13 (Windows) Outlook 2011/16 (Mac) Apple Mail Thunder
[JS]スマホ・タブレット・デスクトップ時代のクロスブラウザ対策にかなり役立つ便利なスクリプト -Feature.js
スマホ・タブレット・デスクトップのブラウザがさまざまな機能（WebGL, Canvas, rem unit, async属性、タッチイベントなど）に対応しているか判別し、その判定を利用することができる超軽量（1kb）スクリプトを紹介します。 ModernizrはHTMLとCSSの機能で判別を行っていましたが、それを更に拡張した感じです。 Feature.js Feature.js -GitHub Feature.jsの特徴 Feature.jsの使い方 Feature.jsの特徴 Feature.jsは、ユーザーが利用するスマホ・タブレット・デスクトップのブラウザの機能を判別し、利用することができます。 WebGL, Canvasをはじめ、単位にremが使えるか、async属性は利用できるか、といった実用的なものが多数揃っています。また、いくつか補足事項があります。 touch タッチイベ
![[JS]スマホ・タブレット・デスクトップ時代のクロスブラウザ対策にかなり役立つ便利なスクリプト -Feature.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/02491c4eeaaee338bf6a3bba36d56f47a7ba450b/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016011204.png)
IE8・9にもFlexboxを対応させる、flexibility.jsがとっても便利！
2016年1月5日 CSS, JavaScript 昨年からいろんなサイトで続々と実装されてきているFlexbox。従来の方法とは違い、簡単にCSSでレイアウトを組めちゃう素敵技です。しかし、Internet Explorer8や9等の古いブラウザーには対応しておらず、Flexboxを使いたくても使えない…というWeb制作者さんも少なくないはず。そんな悩みを今回の記事で解消します！ ↑私が10年以上利用している会計ソフト！ Flexboxって何？ FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃうボックスです。具体的には主に以下のような事を手軽に実装できます。 CSSを一行プラスするだけで横並びにできる！ 横並びになった要素の高さが最初から揃ってる！ 要素を上下左右、好きな順序に並び替えられる！ スペースの
ResponsifyJS - 画像の表示をレスポンシブに変化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました レスポンシブコンテンツの中で最も扱いづらいのは画像と言えます。バイナリファイルであるために画面の大きさに関わらず同じサイズですし、画面幅の変更に対してレスポンシブに変化することができません。 そこで使ってみたいのがResponsifyJSです。画像をレスポンシブにするjQueryプラグインで、単に縮小されてしまう表示とは一味違った演出が見ものです。 ResponsifyJSの使い方 ResponsifyJSを使った例です。これは普通の表示です。 画面幅を変えました。写真は小さくなりましたが、メインとおぼしき部分の大きさはほとんど変わっていません。 実際にブラウザのウィンドウを動かしてみると、画面幅に応じて画像の内容が若干動いているのが分かるはずです。 ResponsifyJSは画像
WordPressでCSV登録が出来るReally Simple CSV Importer | 稼げる副業でお小遣いを稼ぐ方法
とにかく沢山のデータをワードプレス上に登録しなければいけない場合、1つづつ入力するのってバカらしいですよね。 はじめに ワードプレスに数百件はあるであろう情報を登録しなければいけず、またカスタムフィールドも使用しているので、エクセルなどで情報を入力しCSVファイルとしてまとめてアップロードしたいと言う人にオススメのプラグインが「Really Simple CSV Importer」です。 注意事項 CSV登録する時の文字コードに気をつけて下さい。 すべてCSV対応してます 記事や固定、カスタム投稿全てOK タグやカテゴリー、カスタムターム全てOK カスタムフィールドの内容や項目も全てOK 公開日時や公開下書きなどの設定も全てOK 画像の登録やや画像などの指定もOK とCSVでしたい事が全てOKなすんごいプラグインなんです。 インストールしよう いつも通りです。 プラグイン > 新規追加 >
多言語Webサイトを制作する時に気をつけたいポイント
2015年12月9日 Webサイト制作, Webデザイン, Wordpress Web業界は他のどの分野よりもグローバル化が進み、今や日本のサイトやサービスを海外の人が楽しんでいることも自然なこととなってきています。これから海外に向けて情報を発信していきたい人も、すでにWebサイトをお持ちの方も、「多言語化」を視野に制作してみませんか？ ↑私が10年以上利用している会計ソフト！ 多言語サイトを作る時のポイント 見えやすい場所に言語選択リンクを置く 時々ページの一番下に言語オプションリンクを設置しているサイトを見かけますが、実際にその機能に気づける人は少ないでしょう。なるべくすぐに目につくような、例えばメインメニュー内や記事タイトルの直下等に置くといいと思います。 CacooのWebサイトではロゴのすぐ隣に言語オプションが設置されています。 国旗アイコンは使うべき？ 言語選択メニューにて、国
querySelector()を使うとjQueryみたいにセレクターで要素を取得できるよ。（DOMおれおれAdvent Calendar 2015 – 02日目） | Ginpen.com
DOMおれおれAdvent Calendar 2015 – 02日目 ちょっとだけ要素を操作したくてそれだけのためにjQuery読み込むのもちょっとアレよね、みたいなときに便利なやつです。 こんな具合です。
[JS]一歩進んだレスポンシブ用の画像配置！見せたいエリアを中心に配置を美調整するスクリプト -ResponsifyJS
レスポンシブ用に画像の表示幅・高さを変更する際に、その画像の主題にフォーカスエリアを設定し、そのエリアを中心に画像を表示できるスクリプトを紹介します。 フォーカスエリアは、それぞれの画像ごとに異なる指定が可能です。
![[JS]一歩進んだレスポンシブ用の画像配置！見せたいエリアを中心に配置を美調整するスクリプト -ResponsifyJS](https://cdn-ak-scissors.b.st-hatena.com/image/square/a809e86259b72db3d0f0346bf48e65e038b82a7d/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201504%2F2015113001.png)
[CSS]レスポンシブ対応ページに役立つ機能がまとめられたFlexboxを使ったスタイルシート(Sass対応) -Ocssipital
レスポンシブ対応の柔軟なグリッドをシンプルに、そして簡単に実装することを目的に制作されたひな形として利用できるスタイルシートを紹介します。 レイアウトのベースに最適で、グリッドの設計、デバイスごとに異なるレイアウトや表示・非表示など、レスポンシブ対応ページに役立つ機能が揃っています。 Ocssipital Ocssipital -GitHub 補足: Flexboxの各プロパティの使い方は、以前の記事が分かりやすいと思います。 CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 Ocssipitalの特徴と使い方 基本のグリッド ビューポートごとにカラムのサイズを変更 カラム間の溝のサイズ、左右どちらにつけるかも可能 デスクトップでは表示、スマホでは非表示の設定も簡単 Ocssipitalの特徴と使い方 MITライセンスで、商用利用、修正、配布、サブライセンスも許可
![[CSS]レスポンシブ対応ページに役立つ機能がまとめられたFlexboxを使ったスタイルシート(Sass対応) -Ocssipital](https://cdn-ak-scissors.b.st-hatena.com/image/square/85c7ac74adf21dfa1eefc8107e751ebe22fc1082/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015112604.png)
Reduce email development time by hours » MailDeveloper
Reduce email development time by hours Start using MailDeveloper, the advanced email template editor. For developers and marketers alike. Since 2015, 1,000,000s of recipients* have received MailDeveloper-built emails in their inbox It is advanced: unlike most builders, you are not limited to stacking pre-built components on top of each other. You build the components yourself and arrange them howe
[JS]レスポンシブ対応、画像の配置を文字のツラにぴったり揃えるスクリプト -Baseline Element
画像やテキストなど、コンテンツのデザインで重要なのは縦のリズム。 ページ上の指定した要素を文字のベースラインにツラをあわせて配置し、縦のリズムを簡単にデザインできるスクリプトを紹介します。 デモのように罫線を背景にした時には、画像・文字ともに罫線に揃えることも簡単です。
![[JS]レスポンシブ対応、画像の配置を文字のツラにぴったり揃えるスクリプト -Baseline Element](https://cdn-ak-scissors.b.st-hatena.com/image/square/377f2ddc69b2ef9572766d48a6b972e09609fa5a/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015110601.png)
レスポンシブサイトでクリッカブルマップを使う時に超便利な「jQuery RWD Image Maps」
業務メモ。 最近はかなり減りましたが、Webサイト作成時たまに使用せざるを得ないあいつ。そう、クリッカブルマップ。 画像の好きな場所にリンクを仕込めるのは便利ですが、レスポンシブの案件ですとリンクエリアが指定した座標からずれてしまうため困っちゃう。 jQuery RWD Image Mapsはそんな悩みを一発で解決してくれる便利なjQueryプラグインです。 使い方 使い方は非常に簡単。まずはstowball/jQuery-rwdImageMapsからjsファイルをDL。適宜アップロードします。 HTML [html] <script type="text/javascript" src="jquery-1.11.0.min.js"></script> <script type="text/javascript" src="jquery.rwdImageMaps.js"></script>
商用利用無料、紙・布・生地・黒板などのテクスチャをシームレスに使えるパターン素材のまとめ
紙・布・生地・黒板・皮・木目・石こうなど、繊細な質感を表現したテクスチャをシームレスに使えるパターン素材を紹介します。 下記の素材は全て個人でも商用でも無料で利用できます。 詳しくは下記ページをご覧ください。 ライセンスページ ダウンロードできるファイルには小さい画像とPhotoshopのパターンファイル（.pat）があり、シームレスに利用できます。
IE9+もサポート、CSS3 Flexboxを始める人にぴったりな極めてシンプルな使いやすいフレームワーク -FOX CSS
そろそろFlexboxを使ってみたいな、と考えている人にぴったりなCSS/Sassの超軽量フレームワークを紹介します。 もちろんFlexboxをバリバリ使っていて、シンプルなのが必要な人にもぴったりです。 FlexboxはIE11+対応ですが、IE9+にも一行加えるだけで同じHTMLで実装できます。 FOX CSS FOX CSS -GitHub Flexboxの各プロパティの使い方は、以前の記事を参考にしてください。 CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 FOX CSSの特徴 FOX CSSの使い方 FOX CSSのリセット FOX CSSのFlexbox FOX CSSの特徴 FOX CSSはモバイルファーストで設計されており、その半分がCSSリセット、もう半分がマイクロフレームワークで構成されています。 ライセンスはCC BY 3.0で、個人でも
ウェブサイトで事前レンダリングする方法
ウェブサイトで事前レンダリングする方法を紹介します。 １．はじめに 先日発表された、モバイルウェブ高速化を目的としたプロジェクト「AMP」の記事を読んでいたところ、事前レンダリングという手法が使われていることを知りました。 AMPプロジェクト ということで、本エントリーで事前レンダリングについて紹介します。 ２．事前レンダリングとは 事前レンダリング（Prerendering）とは単語が示すとおり、あるページを表示している間に別のページの読み込みとレンダリング実行するものです。 Google検索では、検索結果の1番目に表示されたサイトは、この仕組みを使って事前レンダリングされています。 ３．ウェブサイトで事前レンダリングする ウェブサイトで事前レンダリングするには、ページに下記のlink要素をページに埋め込みます。 <link rel="prerender" href="http://us
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
20 Free Seamless Icon Patterns for Designers
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
[JS]デスクトップでもスマホでも操作が軽快！画像の拡大表示をシンプルなコードで実装 -simplebox.js![[JS]デスクトップでもスマホでも操作が軽快！画像の拡大表示をシンプルなコードで実装 -simplebox.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/9650eece0f156d58c749a4875823912b7f1dcad1/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015111301.png)
WordPressでミニマルなかっこいいページが簡単に作成できる！無料で高品質なテーマファイルのまとめ
