Learn about Pairs’ engineering efforts, product developments and more.
ビューポートを使った単位（vw, vhなど）は、特にスマホの各ブラウザにおいて複雑です。例えば、vwのスクロールバーを考慮する必要がありますか？ サイトのナビゲーションやページコントロールはどうでしょうか？ それらは計算に含まれますか？ スマホで要素をビューポートの高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法を紹介します。 The trick to viewport units on mobile 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ビューポートの高さ（vh）の仕様 高さいっぱいの要素を表示する方法 ビューポートのリサイズにも対応する ビューポートの高さ（vh）の仕様 W3Cの仕様では、ビューポートの単位をどのように計算するかは漠然としています。スマホでは高さが重要になることが多いので、ビューポー
![[CSS]スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/8a5cf0a3bb9540d4d9f77cfb193ce39e28e90836/height=288;version=1;width=512/https%3A%2F%2F2.zoppoz.workers.dev%3A443%2Fhttps%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018080401-02.png)
[対象: 中〜上級] 僕のブログではてブ数がいちばん多いのはウェブページを高速化するTIPSを解説した記事です（まだ読んでない人はぜひ読んでください！）。 その記事では高速化全般を扱っていましたが、今日の記事ではJavaScriptに的を絞って表示速度をスピードアップできる施策を6つ紹介します。 もともとはSearch Engine PeopleブログのOptimizing JavaScript for Better Web Performanceで説明されていたものです。 記事作者のJoydeep Deb（ジョイディープ・デブ）氏に僕のブログでの転載許可をもらえました (Thanks, Joydeep!)。 逐一の翻訳ではなく、書かれている内容をもとに僕の言葉で解説していきます。 1. HTTPリクエスト削減のためにJavaScriptファイルを1つに統合する ウェブページの表示を高速化
Flexible drawer menu using jQuery, iScroll and CSS. InstallationStep 1: Link required filesDownloadDrawer v3.2.2jQuery 1.11.3+ Created by jQuery Foundation and other contributors.iScroll Created by Matteo Spinelli.CDN<!-- drawer.css --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css"> <!-- jquery & iScroll --> <script src="https://ajax.google
Press the icon in the top right corner of this page to run simple-sidebar. A jQuery plugin that allows to create a side nav as in modern mobile apps. It aims to simplicity so that everybody can use it no matter if expert programmers or not. For an even simpler and stable version of this plugin check the simpler-sidebar fork. Download Run one of these commands in your bash according to your needs.
最近の流行りかは分かりませんが、ヘッダー、もしくはナビゲーションだけが スクロールの途中から固定するサイトをつくる機会が増えてきました。 そのデザインを見た時の毎回の悩みは、「ページ内リンクの頭出しがずれるのをどうしよう...」ということでした。 今日もまた同じことで悩んだので少し調べつつ、解決策を考えてみました。 この状況が発生するシチュエーション コンテンツより前に存在する要素（ヘッダー・ナビなど）をposition: fixed;で固定している ネットに載っていた解決策 CSSで解決する方法 頭出しの対象となる要素（見出しなど）に以下のCSSを指定する padding-top: 100px; /* 固定するもののheightと同じpx値 */ margin-top: -100px; /* 固定するもののheightと同じpx値 */ JavaScriptで解決する方法 ページ表示時に
この記事は公開日より9年以上経過しているため、現在の内容と異なる可能性があります。 前回、サイト速度を改善する（その1）でgzipに圧縮することによるサイト速度の向上について紹介しました。今回は、そのgzip圧縮の作業を効率よく行う方法を紹介します。 Node.jsとgulpを使って圧縮の自動化を行います。ローカルのMac環境を例に圧縮の自動化を説明します。 Node.jsをインストールする Node.jsの本家サイトからINSTALLをクリックすると環境に応じたファイルがダウンロードされますので、このファイルをインストールします。 gulpをインストール ターミナルを立ち上げて次のコマンドを実行します。
サイト速度を最適化するために、GulpでJSとCSSの圧縮を試してみました。 Gulpが導入されいることを前提に今回の記事を書いているので、まだ導入していない方は、以下の記事を参考に導入までを行ってください。 takedajs.hatenablog.jp 今回、JSとCSSの圧縮には、以下のプラグインを利用しました。 JS : gulp-uglify CSS: gulp-clean-css CSS圧縮にgulp-minify-cssを利用している記事が多くあったのですが、 gulp-minify-cssは非推奨になっており、gulp-clean-cssが推奨されてるみたいです。 https://www.npmjs.com/package/gulp-minify-css 圧縮プラグイン導入 ・JSを圧縮するプラグインを導入 npm install gulp-uglify --save-dev
今日は気分を変えてタスクランナーを試したいと思います。 タスクランナーといえばGruntとかgulpが有名ですが、 node.jsで動くgulpが後発で使いやすそうなのでこちらで試してみます。 環境はmac os X yosemite 10.10.5 まずはnode.jsをインストール brew install node.js バージョンを確認 node -v gulpをグローバルにインストール npm install -g gulp 作業ディレクトリの作成と移動 mkdir gulp_test cd gulp_test package.jsonの作成 npm init gulpをローカルにインストール npm install -D gulp プラグインをローカルへインストール gulp-cssminとgulp-renameをインストール npm install -D gulp-cssmi
外部JavaScriptファイルを動的に読み込みWEBサイトを高速にしましょう！ JavaScriptは通常の＜head＞＜/head＞タグ内に記述しますが、この場合HTML描画前にJavaScript読み込みが発生し、またJavaScriptの読み込みが終わるまで待機しているので、読み込み終わりを待ってからでないとHTML描画は開始されません。 そこで外部JavaScriptファイルを動的（HTMLレンダリングと同時、またはDOM Ready時）に読み込むよう変更します。 ■ 方法1-1. async をつけて読み込む 今までJavaScriptは以下のように読み込んできました。 <script src="myfile.js"></script> これに async を追加します <script src="myfile.js" async></script> これで非同期読み込みとなり、
本日、無料WordPressテーマ Godios. をリリースしました。 公式サイトを見ていただけるとわかると思うのですがページが一瞬で遷移しています。 どうでしょう、dev.toと同じくらい速いんじゃないでしょうか。 この記事ではテーマを高速化するにあたって用いたテクニックを書いていきたいと思います。 圧縮 テーマに含まれている画像・CSS・JSファイルの圧縮。 画像はOptimizilla・TinyPNG、CSSはCSS Minifier、JSはJSCompressを使用しました。 CSS・JSファイルの遅延読み込み レンダリングをブロックするファイルが大量にあると表示が遅くなりますので、JSファイルはdeferまたはasync属性を付与し、CSSファイルはインライン、またはJSで非同期に読み込んでいます。 無駄なSQLクエリを減らす データベースへのアクセスが多いと負荷が掛かる上、速
スライダーとしてのあらゆる機能を備えた単体で動作する軽量のスクリプトを紹介します。シンプルなHTMLでスライダーを実装でき、ベーシックなスライダーからフルカスタマイズされたスライダーまで、簡単に実装できます。 Tiny Slider Tiny Slider -GitHub Tiny Sliderの特徴 Tiny Sliderのデモ Tiny Sliderの使い方 Tiny Sliderの特徴 シンプルなHTMLで、高性能なスライダーを実装。 他のJavaScript, CSSへの依存は無し。 さまざまなスライダーに対応。水平・垂直・自動再生など、カスタマイズも簡単。 矢印キー、ドラッグやタッチ操作にも対応。 レスポンシブ対応、ブレイクポイントの設定も簡単。 CSS3対応のすべてのモダンブラウザをサポート。 古いブラウザにはCSS2のフォールバックでサポート。 サポートブラウザ Firefo
![[JS]このスクリプト一つで、さまざまな用途に合わせたスライダーが実装できて便利 -Tiny Slider](https://cdn-ak-scissors.b.st-hatena.com/image/square/f9e39760f07a971737ce07c2990fc51b6bdbcff7/height=288;version=1;width=512/https%3A%2F%2F2.zoppoz.workers.dev%3A443%2Fhttps%2Fcoliss.com%2Fwp-content%2Fuploads-201704%2F2017110711.png)
画面をダブルクリックで縦書きと横書きを切り替えることができます。要素を指定して縦書きにしている場合は、次回アクセス時に同じ表示が引き継がれます。 どんなサイトでも縦書きにするブックマークレット。 ↓右クリックで「お気に入り」に保存するか、リンクをドラッグしてブックマークバーにドロップします。 「縦書きにする・iPhone 用リンク」 「縦書き可能にする・iPhone 用リンク」 「段組み縦書き可能にする・iPhone 用リンク」 iPhone に登録するには？ とりあえずこのページを共有ボタンからブックマーク。 iPhone 用リンク を長押ししてコピー。 ブックマークを開いて、追加したブックマークを「編集」。 名前を「縦書き可能にする」などに変更し、URL 欄に上記コードをペースト。 最初の「http://」を削除。 注意！ やや動作が重いです！ うまく変換できなかったときは、画面をダブ
WordPressで特定のページだけに個別のスタイルシートやスクリプトを使いたい、HTML, CSS, JS, PHPを埋め込みたい、ヘッダを変えたり、共通のエレメントを使いたい、しかも特定の1ページや複数ページにも適用したい、それらを叶えることができるWordPressのプラグインを紹介します。 無料版の紹介だけでなく、更に高機能な有料版をプレゼントします！ 有料版の応募期間は、2016年10月20日で終了しました。 CSS & JavaScript Toolbox CSS & JavaScript Toolbox -WordPress.org CSS & JavaScript Toolboxの紹介 プレゼント商品 応募期間 応募要項 当選発表 CSS & JavaScript Toolboxの紹介 CSS & JavaScript Toolboxは、WordPressの投稿記事、固定ペ
LESSをはじめようと思ったらとりあえずBootstrapのmixinsを入れておくと便利 LESSにはMixinという複数のプロパティをまとめる機能があります。 例えばcss3のベンダープレフィックスなど設定しておけば、あとで１行で呼び出すことができます。 で、実際作成するにあたり一から作るより Twitter Bootstrap を利用すれば、よく使いそうな機能があらかじめまとまってるのでいいかもしれないです。 投稿日2012年04月17日 更新日2012年04月17日 css3プロパティ 準備ができたところで早速使ってみましょう。 最初はCSS3で追加された「border-radius」で角丸にしてみます。 たとえば「id="box1"」でマークアップした「div」があります。 html <div id="box1"></div> 通常のcssでしたら次のようになりますよね。 css
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
