スクロールは制御するな - Weblog - Hail2u.net

2016/10/02 163 users Weblog スクロール

続きを読む

ブックマークのおっかけ - Weblog - Hail2u.net

2015/10/15 45 users Weblog ifttt HBFav 出来栄え ブラウザー

ソーシャル・ブックマークはまだそれなりに機能するが、いまだに追いかけるのが難しい。その中ではてなブックマークのお気に入り機能は出色の出来栄えと言えそうだが、やはりブラウザーであのページを見るのは辛い。かといってRSSリーダーで読むのもなかなか難しいと感じる。HBFavは良いものだが、やはりデスクトップでどうにかしたい。 ストック型では色々試した末にはてなブックマークのお気に入りRSSからIFTTT... 続きを読む

srcset属性を使ったSVGフォールバック・ハック - Weblog - Hail2u.net

2015/10/03 39 users SVG Weblog SVGファイル バック ガン

SVGをサポートする環境がほとんどになってきた。それでもなんとか8であったり、かんとか2.3であったりのことを考慮せざるをえないという状況はありうる。それにはonerror属性を使った対応が有力だが、srcset属性でSVGファイルを指定するだけというハックのことを知った。将来的に使えなくなるわけではないが、やりたいことと実装に食い違いが少なからずあるのでハックと言って良いだろう。 <img sr... 続きを読む

1文字だけの改行の拒否 - Weblog - Hail2u.net

2015/09/29 63 users Weblog 改行 Twitter Takazudo 拒否

日本語の文章では任意の位置で改行できるため、レスポンシブ・ウェブ・デザインでは多くの場合、望まない位置での改行が起きる。例えば最後の1文字だけ次の行になってしまうと、読みやすさや理解度に致命的な影響を与える。例えば「？」だけ次の行に送られた場合、あるとないのでは大きく印象が変わるだろう。Twitterで@Takazudoと@oosugi20の会話を見て、やはりみな似たようなことは考えるものだと感じ... 続きを読む

レスポンシブ・タイポグラフィーなど - Weblog - Hail2u.net

2015/09/16 38 users Weblog ビューポート デバイス 当初 テクニック

ウィンドウや画面のサイズに合わせて文字の大きさを自動的に変更するテクニックは、俗にレスポンシブ・タイポグラフィーまたはフルイド・タイプと呼ばれている。当初は僕も良いアイディアだと思い多用していたが、重要なのはビューポートの大きさではなくデバイスとの距離だろうと思い直したためもうほとんど使うことはない。当初から嫌いといっていた人はこの辺にしっかりとした意識があったのだろう。 使うことをやめた理由は、... 続きを読む

WebhookからPubSubHubbubへの翻訳 - Weblog - Hail2u.net

2015/06/21 33 users WebHook PubSubHubbub Weblog 行儀

少し前に公開されたIFTTTのMakerチャンネルを使って、GitHubリポジトリーのWebhookをPubSubHubbubの公開POSTリクエストに翻訳するようにした。GETを使った公開リクエストがあまり行儀が良くなさそうなことが前から気になっていたので、Makerチャンネルを使えば良いかなと試したところうまくいった。 Makerチャンネルの有効化 まずはMakerチャンネルのページへ行き、C... 続きを読む

無限スクロール向け雑なローディング画像 - Weblog - Hail2u.net

2015/06/10 17 users 無限スクロール View Demo 実装 Weblog 挿入

無限スクロールはちょくちょく実装することはあるが、追加するコンテンツの読み込みや挿入はともかく、ローディング画像の処理で悩むことがある。その表示の切り替えには実装と処理のどちらにおいてもそこそこコストがかかるからだ。かなり前に色々考えるのが面倒になり、常に表示しておくという雑な手をよく使うようになった。 View Demo: Easy Loading Marker for Infinite Scr... 続きを読む

プレースホルダーのスタイルにおけるノーマリゼーション - Weblog - Hail2u.net

2015/06/02 38 users プレースホルダー Weblog スタイル

テキスト入力コントロールにplaceholder属性を使って入力例を表示することができるようになってから、もうかなりの年月がたった。悪用されてもいるが、わかりやすいフォームには不可欠になりつつある程度には浸透したと言ってよいだろう。ただMozilla Developer Networkのグローバル・ナビゲーションに設置されている検索フォームのようにそのスタイリングに失敗しているケースはままある(C... 続きを読む

CSS Transformによるセンタリングのベスト・プラクティス - Weblog - Hail2u.net

2015/05/23 42 users センタリング コンテナー Weblog プラクティス 上下左右

上下左右のセンタリングには様々な手法が編み出されてきた。最近はCSS Transformを使う方法がメジャーになりつつある。コンテナーとセンタリングしたい要素のサイズが共に不明でもうまくいくところなど、そこそこ万能感があるのがポイントだろうか。このCSS Transformによるセンタリングは左下に動かしてから右上に戻すパターンと、その逆の右上に動かしてから左下に動かすパターンがある。どちらでも理... 続きを読む

CSS Transitionを使ったスムーズにスクロールしてトップに戻る機能 - Weblog - Hail2u.net

2015/05/10 74 users マージン Weblog CSS View Demo 試行錯誤

前に作ったスクロールした時に位置固定のロゴをトップに戻る機能にすり替えるものを少し手直しして再導入した。今回はスムーズにスクロールさせようかと色々考えていたが、やはりJavaScriptでscrollTo()を制御するのはコストが高い。CSSならどうだと試行錯誤したところ、どうやらbody要素への負のマージンをCSS Transitionで滑らかに変化させれば良いようだ。 View Demo: S... 続きを読む

Vimで小数を四捨五入して置換 - Weblog - Hail2u.net

2015/04/21 12 users vim SVGO 小数 Weblog 置換

渡されたSVGファイルを見たらpath要素のアンカーポイントの数字が小数点以下6桁くらいから30桁まで混在していて、無駄な感じがあった。SVGOでできるのでそれでやっても良かったが、まずは単純に小数を指定桁(3–5桁)で四捨五入したいだけなので他に何かされてしまう可能性があるツールはちょっと避けたい。ということでVimの置換でどうにかした。 コマンドとしては長いがやっていることは普通なので、後述の... 続きを読む

Chrome 42におけるフォント設定とlang属性 - Weblog - Hail2u.net

2015/04/17 30 users Weblog lang font-family フォント設定

Chrome 42でこのウェブサイトの日本語部分が変わってしまった(かもしれない)。内部的な標準フォント設定が変わったことにもよるが、それだけではない。設定で指定したSans SerifフォントがCSSのsans-serif汎用ファミリーに反映されなくもなった。lang属性がある要素のみで再現する。 View Demo: lang="ja", font-family, and Chrome 42 ... 続きを読む

我慢の期間 - Weblog - Hail2u.net

2015/04/16 77 users Weblog 我慢 期間

MovableTypeとWordPressとJekyllとHugoや、Gruntとgulp、SassとLESSとStylus、果てはjQueryなどの話はスケールやパターンを変えて繰り返される。その話はあたかも特定の何かに依存することが良くないとか新しいこっちのがすごいぞというように結論づけられることが多くて、僕にはちょっと頷けないこともあったりする。大切なのは何を解決しようとしていたかを忘れない... 続きを読む

max-widthを否定するクエリー - Weblog - Hail2u.net

2015/03/20 53 users min-width クエリー not max-width 実装

モバイル・ファーストが浸透して久しくなり、めっきりmin-widthクエリー以外を見かけることはなくなった。そんな中、not (max-width: 768px)という書き方を見かけて、なるほどなと思った。現状のブラウザーにおける実装(と安定した仕様)では768pxを含まずそれより大きいという表現がmin-widthでは書くことができないが、notキーワードとmax-widthを組み合わせることで... 続きを読む

フルスクリーンでオーバーレイの検索ボックス - Weblog - Hail2u.net

2015/02/11 62 users Weblog トグル vmin オーバーレイ フルスクリーン

増えてきたフルスクリーンでオーバーレイの検索ボックスだが、まだこれといった無難な実装方法はないように見える。今だとvw/vh/vmin/vmax単位を使ってレイアウト、:target擬似クラスを使ってトグルという形にすれば、ほぼCSSで実現できそうだ。 View Demo: Fullscreen Overlay Searchbox デモではShow Searchboxというリンクをクリックすると検... 続きを読む

画像の縦横サイズの追加 - Weblog - Hail2u.net

2015/02/01 24 users Weblog width height属性 自前 CSS

自前の画像を参照する時にwidthとheight属性を追加すると激しい腹痛におそわれる病を長く患っていたけど、どうやら完治したようなのでバッチ処理で追加してた。ついでにimg要素の各属性の記述順序なども書きかえたりして、楽しく時間を浪費した。大いなる無駄だが、他人には迷惑をかけないし、途中から段々トランスしてきた。 サイズを明示した画像がはみ出すことへの対策にはCSSでmax-widthプロパティ... 続きを読む

rel=subresourceを併用したCSSの遅延読み込み - Weblog - Hail2u.net

2015/01/28 43 users rel Weblog stylesheet CSS 気運

クリティカルなんとかの関係やウェブ・フォントにおいて、CSSの遅延読み込みを行う気運は高まっている。様々なアイディアがあって、普通にCSSの中身を読み込んでhead要素に追加するものや、link要素を動的に追加するもの、予めlink要素をrel=stylesheetなしで書いておいて後で追加するものなどがその主なものだ。最後の手法ではrel=subresourceを追加して書いておくと、一部ブラウ... 続きを読む

厚いレイヤー - Weblog - Hail2u.net

2015/01/18 16 users Weblog

Sitepointに書かれたBEMやSMACSSを使っている開発者たちからのアドバイスを読んでいた。僕は今いかにして命名規則をなくすかといったことを考えている最中のため否定的に読んだが、それでもここに書かれたアドバイスは正しいとは感じた。BEMやSMACSSが概ね想定以上に機能することは確かだし、スケールするし、指揮もとりやすい。 僕が避けたいのは何かしらへの強い依存だ。薄いレイヤーならともかく、... 続きを読む

OOCSSの欠点とEvery Declaration Just Onceのもたらすもの - Weblog - Hail2u.net

2015/01/15 56 users OOCSS Weblog CSS 欠点 HTML

昨日も少し書いたEvery Declaration Just Onceアプローチ(以下EDJOと略す)について、皆が目を瞑っているOOCSSの欠点、CSSが持つ特徴、HTMLとの兼ね合いという点からもう少し書いてみたい。これについては未だ誰ともちゃんと議論していない。機会があったらこの記事をベースにでも誰かと話してみたい。 OOCSSとは まずはOOCSSについてざっと触れておく。OOCSSではい... 続きを読む

ウェブ・フォントの読み込み - Weblog - Hail2u.net

2015/01/09 185 users Weblog Typekit 自前 結論 Fonts.com

ウェブ・フォントも完全に行き渡り、今はどう効率的に配信するかについて多くの時間を割くようになった。Google Fontsの低め安定路線を見限り、TypeKitやFonts.comへ鞍替えする人々も増えた。それと同時に自前でホスティングする人々も徐々にその数を増やしており、どれが最適解なのか一応の結論が出るにはもう少しかかるだろう。まず、ウェブ・フォントの読み込みにおいてどのようなアプローチがあり... 続きを読む

HTTPからHTTPSへ - Weblog - Hail2u.net

2015/01/07 13 users https http Weblog 真っ二つ 事象

HTTPSへの移行が今年は加速するだろうというのは言うまでもないが、それに伴い起こりうる事象については真っ二つな印象がある。僕は特にもうCool URIとか言いたくないので、301すれば良いだろう派だ。HTTPSという記事ではそれはおいておいてブラウザーのデフォルトは変えるべきなのかなど、移行の加速がもたらす環境の変化について指摘している。 ブラウザーのデフォルトは早々にHTTPSに変わるものとそ... 続きを読む

URLUtils.hash (location.hash)とその返す値 - Weblog - Hail2u.net

2014/12/23 27 users Weblog location.hash 挙動 ブラウザー

URLUtilsインターフェイスのブラウザーにおける実装であるLocationオブジェクトのhashプロパティーによりURLのフラグメント識別子(と#)を取得・代入できる。最近のブラウザーは非ASCII文字列もURLエンコードせずに扱えるようになっているが、この辺りの挙動がFirefoxだけ少し違うようだ。それはhashプロパティーの返す値で、常にデコードされた形で返ってくるようになっている。 例... 続きを読む

タスク・ランナーをnpm run-scriptでラップ - Weblog - Hail2u.net

2014/11/30 19 users Weblog タスク npm Grunt ランナー

npm で依存もタスクも一元化するという記事を興味深く読んだ。僕もしばらく前、具体的にはnpm v2出た時からGruntをnpm run-scriptでラップして使っている。概ね良好に機能すると感じている。懸念であった引数で特定の処理を行わせたいようなケースもnpm v2で引数を解釈できるようになったので解決した。 npm run-script経由にすることによる大きなデメリットとしては、そんなに... 続きを読む

Markdownの参照形式によるリンク - Weblog - Hail2u.net

2014/11/19 32 users Markdown Weblog 格段 HTML 本文

Markdownでリンクを作成する方法には2種類ある。インラインで記述する方法が最もよく使われており、必ずHTMLに変換するということならばこれだけで十分とも言える。もう一つの参照形式で記述する方法はほとんど使われていないが、Markdown文書をテキストとして読む場合に、ともすれば長くなりがちなURLが本文に挟まらないので格段に読みやすさが向上する。 This is [an example re... 続きを読む

CSSライブラリーはそのままでどうぞ - Weblog - Hail2u.net

2014/10/30 41 users Weblog

Normalize.cssを始めとして、Twitter BootstrapやPureに至るまでCSSのライブラリーは数多くある。それらはそれなりに気をつけて作られているが、他のライブラリーと混ぜることはもとより、ページ制作者のCSSと混ぜることは想定されていない。単純にlink要素を使って先に読ませるか連結するだけで使わないと、開発者はもちろんそれらが使われているページのユーザーにも意図しない不具... 続きを読む