position: stickyの面白い使い方と使用時の注意点
スクロールに応じてページ要素を固定表示できるposition: stickyが便利で面白い使い方ができそうなので実験してみました。仕様がまだ草案（Working Draft）の段階 で、将来、細かい部分に変更がないとは言い切れませんが、Edgeを含めた最新のブラウザで、ほぼサポート されています。 position: stickyの仕様 ブラウザ・サポート状況（Can I use…） フィーチャー・クエリ（@supports） と一緒に使えば、position: stickyに対応していないブラウザにも考慮した実装が可能なので、注意は必要ですがちょっとしたエンハンスメントとして使うのに良さそうです。 まずは「こんなのが簡単にできちゃいますよ」というデモからご紹介します。 面白い使い方 基本的な使い方だけでも便利なスティッキーですが、応用するとスクロール効果のような面白い使い方ができます。以
ローカルサイトを外部に公開できるngrokの使い方
ローカル環境で作っているサイトを、ネット経由で見せたいときってありますよね？ そんなときに便利なのが「ngrok 」というコマンドラインのツールです。 自分の端末のローカル環境で作業をしているウェブサイトを同僚に見せたいときや複数端末でブラウザテストをする際、また、BrowserStack やCrossBrowserTesting のような外部のブラウザテストサービスを使うときにも役立ちます。あと、コワーキングスペースなどで作業していてネットワーク環境がコントロールできない時にも便利ですね。 しかも、これが無料で提供されています。ありがたいですね。開発者の方に感謝です。 ngrokでできること ngrokでできることを簡単にまとめると、以下の通りです。 localhostにhogehoge.ngrok.comで外部からアクセスできる マルチデバイスのテストに便利 CrossBrowserT
「WORK RULES!」を読んでマイクロマネジメントに終止符を！
今の職場で中間管理職になってから数年経つんですが、改めて中間管理職って職場や上司が定めたルールのもとで人を「管理」してチームとして最大限の効果を発揮するように導く大変な仕事だなぁと実感しています。相手は人なのでトリセツがあるわけでもなく、人の感情は揺れ動くものだし、そんなに簡単なはずないですよね。 それでも、チームメンバーが毎日気持ちよく、楽しく働いて成果を出せたら最高だよなぁと、部下の上司として、上司の部下として、日々、クソがつくほど真面目に考えながら仕事をしています。だって、人生の大半の時間を働くことに費やすわけですからね。楽しい方がいいですもんね。 そんなとき、ふと目について読み始めたのが、この「WORK RULES! 」という本です。Googleの元人事（GoogleではHuman ResourcesではなくPeople Operationsというらしい）の方が、組織として最高のパ
Fractalを使ったスタイルガイドの作成（中級編）。このジェネレーターかなりいいですよ
先日書いた「スタイルガイドジェネレーターの『Fractal』がかなり良さそう」ではインストールと初期設定からウェブUIの起動までの必要最低限の設定について書きました。今回は、もう少し詳しい設定方法をまとめておきます。 Fractalを使ってこのブログのスタイルガイドも作りはじめてみたので、サンプルとして見ながら設定方法を読んでいくと、わかりやすいんじゃないかと思います。ソースもGithubにアップしてあるので、参考までにご覧くださいませ。 Rriverスタイルガイド Fractal用のソースファイル on Github では、まずはコンポーネントの作成と詳細設定から。行ってみましょう！ コンポーネントの作成と詳細設定 Fractalでコンポーネントを追加するにはcomponentsフォルダ内にテンプレートファイルを追加します。たとえばheadings.hbsというファイルを作ってcompo
スタイルガイドジェネレーター「Fractal」のデモを作ってみた | Rriver
先日ご紹介したスタイルガイドジェネレーターのFractalを使って、試しにこのブログのスタイルガイドを作ってみています。細かい設定方法などは、準備中の記事「スタイルガイドジェネレーター『Fractal』の初期設定（中級編）」でまとめる予定ですが、とりあえずサンプル用に作っているこのブログのスタイルガイド（コンポーネントライブラリ）を公開しちゃいます。 Rriver Component Library まだまだ制作途中ですけど、こういう新しいツールを試すときはサンプルのファイルが見られた方がわかりやすいと思うので、ご参考までに。 Fractalのソースファイル また、fractal.jsなどの設定ファイルを含むFractal用のソースファイルをGithubにアップしておきました。すごくベーシックなことしかやってませんが、Fractalを試す際の参考になれば幸いです。 Fractal用のソース
スタイルガイドジェネレーターの「Fractal」がかなり良さそう
ずっと自分好みのスタイルガイドジェネレーターを探していたんですが、ようやく見つけました！「Fractal 」というツールで、かなり良さそうなのでご紹介します。 初級編、中級編の2回に分けて、初級編ではインストールと初級設定からウェブUIの起動までを、中級編ではコンポーネントのより細かい設定などについてご紹介します。公式ドキュメントは初めてだとわかりづらいところもあったので、その辺を補う形でまとめてみたいと思います。 ※先日、スタイルガイドとパターンライブラリの違いについてまとめましたが、スタイルガイドやパターンライブラリを自動生成するツールは「スタイルガイドジェネレーター」というのが一般的なようです。「パターンライブラリジェネレーター」とは呼ばないみたいですね。 では早速、「Fractalのはじめの一歩」的な感じで行ってみましょう！ Fractalとは まずは、ざっくりとFractalをご
スタイルガイドとパターンライブラリの違い
最近、パターンライブラリの作成ツールを探していて「Fractal」というツールを試しています。で、ふと「スタイルガイドとパターンライブラリの違いってなんだっけ？」という疑問が湧いたので、ちょっと整理してみました。ちなみに、どっちがいいかを書いているわけではないです。 特にウェブ向けのものではスタイルガイドもパターンライブラリもほぼ同じ意味で使われていることが多い気がしますが、あえてスタイルガイドとパターンライブラリを違ったものとして定義するとどうなるか、まとめてみます。 スタイルガイド 企業や組織のブランドイメージを統一するためにまとめられたガイドライン ロゴの使い方、配色パターン、タイポグラフィなどのビジュアルデザインを定義する より総括的なものだと文章のトーン&マナーなどのコミュニケーションデザインを定義する場合もある UIパターンやコンポーネントのデザイン一覧（パターンライブラリ）を
Macの画像管理アプリ「Pixave」が万能でいい感じ | Rriver
Macでなかなか良い画像管理アプリがなくてずっと探してたんですけど、やっと見つけました！「Pixave 」が万能でかなり良いです。以前、Inboard を試したんですが、Pixaveの方が断然良いです。 この記事を書いたのは2017年3月なんですが、2020年5月現在、Eagle というPixaveにすごく似たアプリが断然使いやすいなんていう記事 もあって、ちょっと気になっています。でも、Pixaveのほうが多機能だとのことなので、使い方に慣れているPixaveでいいかなぁ。 この記事の内容は2.2.0の時点でのものです（2020年11月29日現在、バージョンは2.3.13でmacOS Big Surに対応済み、また、M1チップ搭載のMacでもネイティブに動くユニバーサルアプリになったとリリースノート に書いてありました。機能の追加はないですがメンテナンスは行われています）。 管理できる画
読む本を仕分けして効率的な読書を実現！「最強の読み方」で学ぶ情報収集術
これまでの人生で自分なりの「読書法」を確立できていなくて、いつも自分の読書の効率は悪いなぁと思って生きてきました。ネットでのウェブ系の情報収集はかなり効率化してるんですけどね。本は買ったまま放置することが多いし、読み始めても最後まで読まなかったり。1冊読み終わるのにすごく時間がかかることも多くて、ちょっと「自分の読書能力」に悩み始めていたところでした。どうしたもんじゃろなぁ、と。年を取ると時間（いのち）には限りがあることを身にしみて感じますからね。切羽詰まってくるわけですw 運命の出会い そんな時に出会ったのが、この「僕らが毎日やっている最強の読み方 」という本でした。わかりやすい解説で有名なジャーナリストの池上さんと「読書の技法 」という本も出している作家の佐藤さんの対談形式でまとめられた本で、本屋で見かけて半ば衝動買いをしてしまいました。 結果、大満足です。 お二人の情報のインプットと
小説「ザ・サークル」が描く窮屈なネット社会を回避するには
久々に英語の小説が読みたくなって「The Circle 」という小説を読んでみました。ペーパーバックで490ページあるんですけど、1週間くらいで一気に読めちゃうくらい文章やストーリー展開がよくできていて、なによりネットやソーシャルメディアへの過度な依存に警鐘を鳴らす興味深い内容になっています。読み終わった今でも、ネットのこれからや社会のあり方について、すごく考えさせられています。SNSで偽ニュースがはびこりコピペメディアの旺盛で情報発信の倫理観が問われる昨今、すごくタイムリーな内容ではまってしまいました。日本語版 もあってオススメです。 技術への過度な依存が社会にもたらす影響 物語はGoogleとFacebookとAppleを足して5倍くらいにした「サークル」という企業を舞台に繰り広げられるんですが、現在そういったIT企業がやっていることの延長線上にあるようなIT技術やサービスが実現され、
なんでもかんでもpicture要素を使えばいいわけじゃない！レスポンシブ・イメージ実装の際の注意点
画像表示のマルチデバイス対応をHTMLとCSSのみで実現できる「レスポンシブ・イメージ」ですが、効果的な使い方をするには、いくつか注意点があります。プロダクション・サイトで使えるようになるまでにはもう少し時間がかかりそうですが、基礎と注意点くらいは今から覚えておいても良さそうです。 Cloud Fourというアメリカの制作会社のブログ で、<picture>要素の使い方について注意を促していて、とても重要な情報だと思ったのでこちらでもシェアします。先日書いたレスポンシブ・イメージとPicturefill 2のまとめとあわせて、近い将来、レスポンシブ・イメージ実装の参考になれば幸いです。 まずは推奨の記述方法から レスポンシブ・イメージ実装の際に推奨されるHTMLの記述方法は以下のとおりです： とりあえず、これだけ覚えておけば、細かいところはこの記事をはてブ しておいて、使う時にもう一度見な
Gulpを使ったSVGスプライトのアイコンシステムとワークフローの作り方
SVGスプライトって、なんか複雑なイメージがありませんか？ 僕はそうでした。なんか、面倒くさそう。。。どこから始めて良いかわからない。。。といった感じでずっと手をつけられずにいました。 でも、今回やってみて思ったんですが、一度ワークフローを確立してしまえばアイコン管理がかなり便利になります。CSSスプライトの時よりも管理が楽になりますし、表示サイズや今後の高解像度対応を気にしなくて良くなるのも嬉しいですね。 SVGスプライトについての英語のリソースはあるのですが、説明が多く、とっつきにくいものも多い印象なので、ここではできるだけシンプルに必要なことだけをまとめてみたいと思います。 では、SVGスプライト・アイコンシステムのGulpを使ったワークフローの構築、始めましょう！ 目次 達成したいこと デモページ SVGスプライトの仕組み ブラウザサポート 用意するもの 導入ステップ 最後に 達成
もう、レスポンシブでいいんじゃない？
先月末、藤井さん の働く株式会社ザッパラスさん にお邪魔して、レスポンシブWebデザインの基本のキ的なお話しをさせていただきました。 題して「もう、レスポンシブでいいんじゃない？」 いま、改めてレスポンシブWebデザインについて考えるきっかけになれば、という視点で内容をまとめてみました。 4年前に「レスポンシブWebデザイン 制作の実践的ワークフローとテクニック 」という本を執筆したんですけど、そのころからウェブ制作のデフォルトはとりあえずレスポンシブでいいんじゃない？と思っていたのですが、最近、その思いがより強くなっています。職場のウェブサイトをレスポンシブでリニューアルしてから約5年が経ちますが、やっぱり、あの時レスポンシブを選択しておいてよかったとつくづく感じています。おかげで、Googleさんがモバイルインデックスを優先するという昨今のニュース にもあまり翻弄されなくてすんでいます
面倒なレスポンシブイメージの画像作成を自動化してくれる神ツールとブレイクポイントの考え方
レスポンシブイメージ、使ってますか？ ウェブサイトの表示パフォーマンスの最適化をする際に、一番手っ取り早いのが画像の最適化です。そこで、イメージオプティム とかMac Automatorとpngquantなどのツールを駆使して一生懸命に画像自体を最適化したりレスポンシブイメージを使って画像を出し分けたりするわけですけども、特にレスポンシブイメージは手動でやるのは正直言ってかなり面倒です。 そ・こ・で！ 本日ご紹介したいのが「Responsive Image Breakpoints Generator 」です。このツールを使えばレスポンシブイメージの複数画像の作成やHTMLの記述を自動化できて、しかも！アートディレクションまで自動化できるんです。 ということで、今回はレスポンシブイメージについての簡単なおさらいと、画像作成の基本的な考え方、それから自動化について書いてみます。 では、行ってみ
Appleウェブサイトのレスポンシブなナビゲーションが「うまい！」と思う4つの理由
こんにちは。Appleも好きだけどAppleウェブサイトも大好きなRriverの渡辺です。 最近レスポンシブなナビゲーションについて考えていて良いアイディアを探しているんですが、結局Appleのウェブサイトにたどり着きました。Appleのウェブサイトは良く出来ていると思うところがたくさんあって、ナビゲーションも良く考えて作られているんですね。 ということで、今回はAppleウェブサイトのナビゲーションの検証を通して、マルチデバイス時代のレスポンシブなナビゲーションについて考えてみたいと思います。より良いナビゲーション構築の参考になれば幸いです！ 目次 マルチデバイス時代のナビゲーション 理由1： 3段階の「ナビゲーション」で確実にユーザを誘導している 理由2： 見せられるときは、しっかり見せている 理由3： コンテンツ内の「さらに詳しい」コンテンツの見せ方が絶妙 理由4： その時必要なナビ
Autoprefixerの対象ブラウザの選び方
AutoprefixerはCan I Use のブラウザ・サポート情報とStatCounterの全世界のブラウザ利用状況データを参照してBrowserslistの記述に当てはまるブラウザを抽出します。 対象ブラウザ一覧を簡単に確認する方法 Browserslistの記述を入力すると対象となるブラウザ一覧を表示してくれるBrowserl.ist という便利なサイトがあって、2016年9月7日現在、デフォルトの記述で対象になるブラウザは以下になります。 Mobile Browsers Chrome for Android 51 UC Browser for Android 9.9 Android Browser 4.4, 4.4.3-4.4.4 IE Mobile 11, 10 iOS Safari 9.3, 9.0-9.2 Opera Mini all Samsung Internet 4
Flexboxを使うなら知っておきたい「flexアイテム」の幅の計算方法
Flexboxを使っていて「なんでこの幅になるんだろう？」と疑問に思ったことはありませんか？ 僕はFlexboxを使い始めたころ「flexアイテム」の幅がどうやって計算されるのかわからなくて、レイアウトにはまってしまいました。調べて整理したのでシェアします。 仕組みをしっかり理解しておくと、問題が起こったときに対処しやすくなります。ということで、flexアイテムの幅の計算方法、行ってみましょ〜！ まずは結論から — flexアイテムの幅の計算方法 結論からざっくり言ってしまいます。 display: flexを指定した親要素を「flexコンテナ」、その中にある子要素を「flexアイテム」と呼びます。 上図のようにスペースが余っている場合、この「flexアイテム」にはflex-growの指定にしたがって余ったスペースが分配される仕組みになっています。 下図のようにflex-grow（またはf
レスポンシブ・イメージがもうすぐネイティブ実装！いまから使える？ポリフィル「Picturefill 2.x」を検証
レスポンシブ・イメージがもうすぐネイティブ実装！いまから使える？ポリフィル「Picturefill 2.x」を検証 レスポンシブ・デザインの画像の扱いの課題を解決するのが「レスポンシブ・イメージ」です。この「レスポンシブ・イメージ」には紆余曲折あったわけですが、熱心な開発者の方々のおかげでようやく仕様がまとまり、ブラウザでのネイティブ実装も進んでいます。 結論から言うと、ブラウザのネイティブ実装はまだこれからですし、ポリフィルのPicturefill 2.xには大きな欠陥があり、プロダクションサイトでの使用は待ったほうが良いと思います。しかし、多くの開発者が多大な時間を費やして実現しようとしているレスポンシブ・イメージです。この存在が日本でもより多くの人に広まればと思い、いまの状況をまとめてみました。 目次 レスポンシブ・イメージのいま レスポンシブ・イメージで解決できる3つの課題 Pic
表示件数と高さが変わるブロックの一覧を、画面サイズに合わせてカラム数を変えて表示する方法
レスポンシブなサイトで高さが可変のブロック要素の一覧をレイアウトする際にてこずったので、課題になったこととその解決方をメモしておきます。ニュースサイトなどに良くあるサムネイル画像とタイトルのブロック要素の一覧で、画面サイズに合わせてカラム数が変わる以下のようなレイアウトです。ちなみに、Flexboxを使わないやり方です。nth-child()とclearを使った方法、inline-blockを使った方法、さらに、flexboxを使った方法の3つをまとめてみました。 レイアウトの条件 レイアウトの条件を整理しておきます。 表示件数が変わる 表示件数が変わる場合でも同じHTMLとCSSでレイアウトする ブロックによって高さが異なる 画面サイズに合わせてカラム数を変える 上の条件だとli要素をfloatしてメディア・クエリで画面ごとに幅を指定すれば簡単にできそうです。ところが、ブロックの高さが変
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Alfredの使い方とおすすめワークフロー
