Node.jsとnpmをアップデートする方法
いつも忘れてしまうので書き留めておきます。macOS Monterey（12.4）で確認をして内容を更新しました。この記事で紹介しているツール「n」もv8.2.0になりました！ Node.jsのアップデート n という便利なバージョン管理ツールがあるので、これを使ってバージョンを確認してアップデートします。nの詳しい使い方はこちらの記事 あたりをご参照いただくと良いと思います。n を使う際の注意点もしっかり説明されています。 nのインストール $ npm install -g n Node.jsのバージョンの確認 1行目の「–stable」でStable（推奨版）のバージョン、2行目の「–latest」で最新版のバージョンが確認できます。 $ n --stable $ n --latest Latestのインストール $ n latest latestは最新の機能を搭載した最新版へのアップ
position: stickyの面白い使い方と使用時の注意点
スクロールに応じてページ要素を固定表示できるposition: stickyが便利で面白い使い方ができそうなので実験してみました。仕様がまだ草案（Working Draft）の段階 で、将来、細かい部分に変更がないとは言い切れませんが、Edgeを含めた最新のブラウザで、ほぼサポート されています。 position: stickyの仕様 ブラウザ・サポート状況（Can I use…） フィーチャー・クエリ（@supports） と一緒に使えば、position: stickyに対応していないブラウザにも考慮した実装が可能なので、注意は必要ですがちょっとしたエンハンスメントとして使うのに良さそうです。 まずは「こんなのが簡単にできちゃいますよ」というデモからご紹介します。 面白い使い方 基本的な使い方だけでも便利なスティッキーですが、応用するとスクロール効果のような面白い使い方ができます。以
CSS Gridを使うならマスターしておきたいauto-fillとauto-fitの違い
CSS Gridって本当に便利だなぁと思う今日この頃ですが、そのなかでも特に注目しているのがrepeat()とminmax()です。この2つのCSS関数を使うとグリッドレイアウトの構築が楽になるだけでなく、CSS Gridだけでメディアクエリなしでもレスポンシブなレイアウトが実現できます。 今回はそのrepeat()で使えるauto-fillとauto-fitという値について。ちょっと違いが分かりづらいのでメモっておきたいと思います。 auto-fillとauto-fitの違い auto-fillとauto-fitの違いは実装例を見るのが一番わかりやすいので、まずはデモをご覧ください。repeat()とauto-fill、auto-fit、minmax()を使ったデモです。 デモはこちら デモページをブラウザで開いてウィンドウ幅を変えてみてください（CSS Gridがサポートされているブラ
CSS GridとFlexboxを使ってメディアクエリなしでレスポンシブにレイアウトする方法
レスポンシブなレイアウトにはメディアクエリが欠かせないわけですが、CSS GridやFlexboxを使えばメディアクエリなしでもレスポンシブなレイアウトが可能です。メディアクエリが全くいらなくなるということはないと思いますが、CSS GridとFlexboxを使えば、メディアクエリの記述を減らす方法があります。しかもコンテンツの幅に合わせて中身のレイアウトを調整するようなエレメント・クエリ的な使い方も、ある程度なら実現できます。 応用すれば今後のレスポンシブなレイアウトのCSSの組み方を変えてしまうような方法です。 ※デモはFirefox 58.0.2、Chrome 64.0.3282.140、Safari 11.0.3でテストしています。 CSS Gridを使ったレスポンシブレイアウト CSS Gridで以下の2つのCSS関数を使うと、メディアクエリなしでレスポンシブなレイアウトが実現で
JPEG画像の最適化には85%の品質がいいらしいので画像の最適化プロセスを見直してみた
オリジナルはPhotoshopの「書き出し」で画質を100%にして書き出した画像です。画像によっては81%にしても目視では差がわからなかったので、それくらい下げちゃっても良さそうですけど、ざっくりとしたデフォルトとしては85%が良さそうです。91% → 85%の方が85% → 81%より圧縮率がいいんですね。 サンプル画像 上の表にある「sampleXX.jpg」の画像をまとめて圧縮したファイルを用意しました。ご参考までに以下からダウンロードどうぞ。 サンプル画像をまとめて圧縮したファイル（ZIP / 3.4MB） ちなみに、表で91%と81%になっているのはImageOptimで設定できるのが、なぜかその数値だったからです。90%、80%には設定できませんでした（v1.8.0）。 職場で作業するときのプロセスはだいたい以下のような感じです。 PhotoshopやAffinity Desi
WordPressの投稿にURLだけでYouTube動画を埋め込む際のHTMLをカスタマイズする方法
WordPressにはoEmbed という仕組みが導入されていて、たとえばYouTubeのURLを投稿の本文に入れるだけで、自動的に動画の埋め込みタグに変換してくれます。すごく便利なんですが、埋め込みコードの外側のpタグにclassを追加したり、iframeの属性をカスタマイズしたい場合、WordPressのフィルター機能 を使う必要があります。 今回はそのカスタマイズの方法をご紹介します。 WordPressでoEmbedでYouTube動画を埋め込むには 以下のURLを本文に書くと… https://www.youtube.com/watch?v=IEsunlfXLig 自動的に以下のHTMLに変換されます。 <p><iframe width="500" height="281" src="https://www.youtube.com/embed/IEsunlfXLig?featur
WordPressでレスポンシブ・イメージの自動化を可能に。RICG公認プラグインが公開
追記： 2016.01.29 WordPress 4.4からレスポンシブ・イメージがCoreに実装されました。詳しくは以下をご覧ください： WordPress 4.4以降でのレスポンシブ・イメージ・プラグインはどうなるの？ WordPress 4.4からデフォルトで実装されたレスポンシブイメージってどうなのよ？ レスポンシブ・イメージの仕様策定や普及に努めているRICG（Responsive Images Community Group） が公認したレスポンシブ・イメージのWordPressのプラグイン が公開されましたね。このプラグインを使うとWordPressでのレスポンシブ・イメージの解像度対応の自動化が可能になります。RICG公認のプラグインが出たことでプラグインの開発や普及が加速すると嬉しいですね。 そもそもレスポンシブ・イメージってなによ？という方は、こちらあたりをお読みくださ
WordPressでウィジェット表示をコントロールするプラグイン「Custom Widgets」が便利
2019年11月27日現在、「Custom Widgets」プラグインはプラグインページから検索しても出てきません。この記事の情報は古いのでご注意ください！ ざっと見た感じ「Widget Options（ウィジェット設定） 」というプラグインがなかなか良さそうです。試す機会があったらこちらで紹介します。 WordPressのウィジェットを表示させるページをコントロールできるプラグイン「Custom Widgets」が便利だったのでご紹介。 テンプレートを直接カスタマイズするのも良いですが、プラグインを入れればより手軽にコントロールができます。このプラグインでは特定の個別ページやWordPressのテンプレート・タイプ別での表示コントロールも簡単にできます。 「Custom Widgets」でコントロールできること 特定の投稿やページ、カテゴリなどにのみウィジェットを表示 ホームページにのみ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
