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

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

続きを読む

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

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

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

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

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

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

我慢の期間 - 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というリンクをクリックすると検... 続きを読む

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へ鞍替えする人々も増えた。それと同時に自前でホスティングする人々も徐々にその数を増やしており、どれが最適解なのか一応の結論が出るにはもう少しかかるだろう。まず、ウェブ・フォントの読み込みにおいてどのようなアプローチがあり... 続きを読む

Sassでの色管理 - Weblog - Hail2u.net

2014/07/24 79 users Sass Weblog 変数 関数 定義

Sassでは色を変数として定義でき、また様々な関数でそれを操作することが可能になっている。そのため色を論理的に管理することが可能になっているが、これといった手法が確立されているわけではない。このウェブサイトでは少しややこしい形で管理するようにしている。どういう目的でこういう複雑な構造になっているのかを簡単に書いておきたい。 基本色の定義 基本色、つまりテーマカラーであったり、本文の背景色や文字色と... 続きを読む

CSSで画像を六角形にくり抜く - Weblog - Hail2u.net

2014/05/19 76 users Weblog SWARM CSS CSSグラデーション 六角形

Swarmで使われている六角形のプロフィール画像はちょっと流行りそう。CSSだけで行えるように考えておくとなんかの時に役に立つはず。難しく考えずに擬似要素で三角形を作るテクニックを反転させて重ねるだけでも良かったけど、CSSグラデーションで重ねた方がフレキシブルに作れた。 View Demo: CSS HEX Clip 切り抜きはCSSグラデーションを上に重ねて行うので、何らかの要素で括る必要があ... 続きを読む

CSSのローディング・アイコンのコスト - Weblog - Hail2u.net

2014/05/18 85 users この際 Weblog CSS CSSアニメーション コスト

今までは主にアニメーションGIFで作られていたローディング画像をCSSアニメーションで作るみたいなのが流行っている。面白いとは思うし、ちゃんと作ればスケーラブルなので便利そうでもある。けれどもローディング画像を表示するための空要素が必要になり、かつ後にそれを消さなくてはならない。CSSだけだと面倒くさそうだ。 どういうローディング画像かはこの際、問題ではないのでとりあえずmain要素以下に何かしら... 続きを読む

display: noneとレスポンシブ・ウェブ・デザイン - Weblog - Hail2u.net

2014/04/17 55 users None display Weblog CSS 多用

レスポンシブ・ウェブ・デザインとその設計を語る時にdisplay: noneが引き合いに出されることが多いなと感じる。その多用は設計ミスというような具合だ。そういうところは確かになくはないが、多用自体はCSSの貧弱さからくるHTMLの複雑さを意味するだけなのではないかと思う。 レスポンシブ・ウェブ・デザインはコンテンツを様々なデバイスで「収まる」ようにレイアウトを調整することではない。実装としては... 続きを読む

アクティブなナビゲーション項目とmark要素 - Weblog - Hail2u.net

2014/03/29 62 users Weblog active class属性 ウェブサイト 以下

アクティブなナビゲーション項目、つまり現在のページへのナビゲーション項目はclass属性を使ってactiveなどと付けられることが多い。特に間違ってはいないんだけど、いまいちピンとこない。というかしっくりこない。大体は流されてそうしているけど、このウェブサイトではmark要素を使ってる。 HTML5仕様ではmark要素は以下のようになってる。 The mark element represents... 続きを読む

wildfire.vimでVim力を下げる - Weblog - Hail2u.net

2014/03/04 89 users Weblog クォート カーソル Enter デフォルト

wildfire.vimという、カーソルがある辺りのテキストオブジェクトをなんとなく選択してくれるVimプラグインを使い始めた。Vim力が下がる代わりに魂の平穏が得られる。ような気がする。 デフォルトではノーマル・モードで<Enter>を押すとカーソルのある辺りのテキストオブジェクトを選択してくれる。HTMLファイルを編集中なら属性値の上で発動させると、クオートの間を選択してくれる。その状態でもう... 続きを読む

Webフォントの非同期読み込み - Weblog - Hail2u.net

2013/12/25 83 users Weblog import 並列 レンダリング Webフォント

Webフォントの読み込みは@importだと色々まずいので、主にlink要素を使って並列に読み込むわけだけど、これもまた貴重なHTTPリクエスト数を消費するとか、CSSのパース完了が少し遅れるなどあって、完璧な解というわけじゃない。それを非同期にWebフォント定義の含まれるCSSファイルを読み込むようにして、Webフォントのロードをページのレンダリングと並行して行わせるのはどうか、という試み。 非... 続きを読む

right: 100%か負のマージンか - Weblog - Hail2u.net

2013/12/12 80 users Weblog マージン Right 拡充 CSS

これまでCSSにはレイアウト方法があまりなかった。これからはFlexible Box LayoutやMulti-column Layout、Grid Layoutを始め、positionプロパティーに使える値の拡充などもあり柔軟に行えるようになるだろうが、それはけっして既存のレイアウト方法が不必要になるということではない。選択肢が増えると受け止めるべきだ。例えばright: 100%や負のマージン... 続きを読む

CSSでフォント・ファミリーのショートカットを作る - Weblog - Hail2u.net

2013/11/21 61 users Weblog CSS local ショートカット ヒラギノ角ゴ

最近のブラウザーではlocal()を使ってフォント・ファミリーのショートカット(的なもの)を作ることができる。CSS Fontsモジュール仕様のsrcプロパティーの項にも思いっきり書いてあるんだけど、今まではそんなに必要なかったのであまり使われていない。5ウェイト展開なヒラギノ角ゴのiOS 7へのバンドルと、3ウェイト展開の游ファミリのWindowsへのバンドルにより必要性が少し増えた気がする。 ... 続きを読む

Sass 3.3の新しいデータ型: マップ - Weblog - hail2u.net

2013/10/17 52 users Weblog Sass changelog コロン ハッシュ

SassConfに合わせたのか、Sassの3.3 RC.1が出た。これで3.3での追加機能も固まったようなので、CHANGELOGをちゃんと読んだところ、1ヶ月ほど前に取り込まれていた新しいデータ型であるマップについてもちゃんと入っていた。マップは、いわゆるハッシュとか連想配列とかいう名前で呼ばれるもの。 マップの書き方はリストとほとんど同じで、リストの各要素にコロン(:)区切りでキーと値をワンセ... 続きを読む

GitHubのエラー・ページ - Weblog - hail2u.net

2013/10/06 70 users GitHub HTT Weblog Styleguide

GitHubのStyleguideにエラー・ページのセクションがあるのを知った。それによると外部ファイルに依存しないように書いているらしい。CSSはstyle要素で、JavaScriptはscript要素で、画像ファイルはBase64エンコードしてData URIで、それぞれHTMLに直接埋め込むというスタイル。 実際に404のテンプレートでもちゃんとそうなっていた。フロントエンド脳なので、HTT... 続きを読む

ID使っても別に問題ない - Weblog - hail2u.net

2013/09/13 199 users Weblog OOCSS 一端 CSS CSS Lint

CSSでID使うの良くない……どころか、ID使うのはゴミクズカスみたいな風潮で辛い。その根拠はいくつかあり、それらはCSSだけをただそのまま書く場合には納得出来ないこともないかなーと思うので余計に辛い。特にOOCSSのようなアプローチではIDは混ぜるな危険。だからといってIDを使わないのがベスト・プラクティスなわけじゃない。 CSS Lintの利用が広まり、これがID使うなって怒るのも原因の一端な... 続きを読む

フォントの読み込み完了を検知する - Weblog - hail2u.net

2013/08/22 73 users Weblog フォント

TypeKitとかがやってるWebフォントの読み込みが終わったらhtml要素にクラス名を振るアレの話。TypeKitがオープンソースでリリースしているWebFont Loaderを使う方法が安全で安定。Googleがホスティングしているのもあるので手軽でもある。でも読み込み完了の検知以外にも機能があってパワフルすぎる気がするので、Adobe Blankを使って自前で書いてみることにした。 Adob... 続きを読む

Feedlyに引越してはいけない(今は) - Weblog - hail2u.net

2013/06/21 75 users Feedly Weblog OPML エクスポート タブ

Feedlyはなかなか素晴らしいフィード・リーダーだと思う。カード・レイアウトでざっと流し読みしつつ気になったのがスッと取り出せるまたはタブで開けるというスタイルは好き。最近はここが勝負とばかりにGoogle Reader互換APIを提供したり精力的で良い。それでも引っ越してはいけない。購読しているRSSのリストをOPMLでエクスポートできるようになるまでは。 OPMLでのエクスポートをサポートし... 続きを読む

Google Web Fontsにあるお気に入りのフォント5つ - Weblog - hail2u.net

2011/12/06 60 users Weblog Typekit View Demo 参考 機能

Google Web Fontsのフォント登録数も随分増えてきてチェックするのが大変になってきました。一応絞り込みとかそういう機能もありますけど、Typekitのようにかゆいところに手が届く感じではありません。そこで…というわけではないですけど、なんかの参考にでもなればと私のお気に入りを5つだけ簡単な説明付きで紹介してみます。 View Demo: Five Favorite Google Web... 続きを読む

たった一行で人生が変わった.vimrcでの設定とその意味 - Weblog - hail2u.net

2011/12/05 327 users vimrc キーバインド emacs vim Weblog

僕はVimを使うまでは秀丸エディタを長いこと使用していました。両者の間に設定の項目数やキーバインドに割り当てられる機能に大きな差があるとも思わなかったので、使い始めた当初は「そんな言うほど高機能でもないよなー」とか思っていました。しかし色々なプラグインを試したり、様々な設定を.vimrcに書いているうちに、Vim(やEmacs)がその他エディタと決定的に違うのは設定の豊富さではなく、設定の自由さが... 続きを読む

(S)CSSの書き方メモ - Weblog - hail2u.net

2011/10/24 142 users Weblog SCSS CSS SCSSファイル モジュール式

HTML5時代に向いていそうな(S)CSSの書き方を模索しています。SCSSで書くのでモジュール式に色々分割した方が良さそうだな…とか色々試してますが、なかなかこれ！というものに辿りつけません…。ということで、ここ最近の書き方をメモがてら晒してみる試みです。 実際にこのサイトで使っているSCSSファイルを抜粋しつつ列記していきます。 style.scss style.cssになるSCSSファイルで... 続きを読む