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

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

続きを読む

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

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

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

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

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

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

たった一行で人生が変わった.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ファイルで... 続きを読む

CSSでモーダル・ウィンドウ - Weblog - hail2u.net

2011/10/22 159 users Weblog CSS None pure View Demo

pointer-eventsプロパティでnoneを指定すると最前面に置いた要素を無視して普通にページ操作が可能になります。なので、そういう風にしておいた要素をopacityプロパティで非表示にしておけば、普段は見えないけど特定の操作で最前面に飛び出すモーダル・ウィンドウとかも簡単に出来ます。pointer-eventsプロパティってこういう使い方するためにあるの？ View Demo: Pure ... 続きを読む

CSSでアイコンをデザイン - Weblog - hail2u.net

2011/03/03 770 users グラデーション View Demo 万能 Weblog 背景

ものすごく大雑把に言うと今まで画像編集ソフトでやっていた、角を丸くするとか背景をグラデーションにするなどという作業をCSSでやってしまおうというお話。もちろんCSSでできないことは多くあるので万能というわけではないが、できることに限って言えば数行のCSSコードでスクリーンショットのような効果を柔軟に適用することができる。View demo: Design icon with CSSul li a ... 続きを読む

枠線付きの吹き出し - Weblog - hail2u.net

2011/02/22 473 users Weblog

ミニブログの隆盛以降ウェブ上でよく見かける吹き出しをCSSで作るお話。単色のものはかなり前に書いた。今回はそれに枠線をつけてみよう！みよう！みよう！View Demo: Bordered Speech Bubble枠線は単なるsolidなborderで少し角を丸めただけ。尻尾を付ける:before擬似要素を使う。デモの3番目のサンプルのように、まず枠線と同じ色で三角形を作る。三角形は以前のエントリ... 続きを読む

hail2u.net - Weblog - CSSグラデーションのちょっとしたテクニック #2

2009/12/20 350 users エントリ グラデーション Weblog CSSグラデーション

前回のエントリのような応用するための基本というものではなく、CSSグラデーションはこういう使い方もできるよ的なもので３つ。普通のグラデーションの作り方はcss gradients in Firefox 3.6とかで。#3はない。 以下プレビュー画像のリンク先がデモ・ページになっているのでそちらも参照のこと。もちろん対応ブラウザのFirefox 3.6とSafari 4やChrome 4以降でないと... 続きを読む

CSS のみで吹き出し - terkel.jp

2009/12/06 485 users terkel Demo div Weblog Body

hail2u.net – Weblog – Pure CSS な吹き出し に触発されて、画像や JavaScript を使わずに CSS だけを使って「吹き出し」を作る方法を僕も考えてみた。 Demo: CSS のみで吹き出し マークアップは 2 重の要素があれば OK。ここではそれぞれ bubble と body というクラスを付与した div と p を例に説明する: <div class="... 続きを読む

hail2u.net - Weblog - Pure CSSな吹き出し

2009/11/03 210 users Weblog Pure CSS

Twitterで「CSSで吹き出し作るのブクマし忘れててどこにあったか忘れた……」とかつぶやいたらe_luckさんがImage-free CSS Tooltip Pointers - A Use for Polygonal CSS?を探してきてくれた。このエントリでは枠線をつけるために入れ子になっていたりちょっとわかりづらかったので、ものすごく単純化して解説してみようとかなんとか。 Pure CS... 続きを読む

hail2u.net - Weblog - Web開発周りのVimの設定

2009/10/31 324 users vim vimrc Weblog Make CSS

HTML/CSS/JavaScriptを書くためのVimの設定やスクリプト等をざっとまとめてみた。「VimでWeb開発を100倍効率的する方法」といったような生産性を上げるための設定の類ではない。 HTMLファイルを:makeで文法チェック tidy.vimが用意されているので、HTML Tidyをインストールし、.vimrcに以下のように書くだけで良い。 autocmd FileType htm... 続きを読む

hail2u.net - Weblog - CSSで指定するフォント

2006/09/18 264 users 大抵 マシン Weblog インストール済み CSS

Posted at 2006-09-19T02:22:00+09:00 in Web Design CSSで指定するフォントは、訪問者のマシンにその指定したフォントがインストール済みでないと(大抵の場合は)反映されないため、手に入れやすいまたは多くのOSでインストールされているフォントを指定することが多い。手に入れやすいフォントとして代表的なものはCore fonts for the Webという... 続きを読む

pre 要素のスタイル定義とマークアップ - 2xup

2006/09/06 100 users 2xup スタイル定義 マークアップ CSS com

2006-09-07T00:56:49+09:00 なにやら pre 要素に CSS でどういったスタイル定義をしているのか、また、pre 要素をどのようにマークアップしているのか、様々な意見がでている模様。 ブログにコードを貼り付ける方法で悩むの巻(i d e a * i d e a - Lifehacks by 100SHIKI.COM) pre要素へのスタイル指定(hail2u.net - ... 続きを読む

hail2u.net - Weblog - pre要素へのスタイル指定

2006/09/06 121 users Weblog IDEA エントリ スタイル指定 ちょろ

Posted at 2006-09-06T19:38:00+09:00 in Web Design idea * ideaでエントリになっていたので、言及されていることだしうちのサイトのことだけちょっと書こうかなとか考えてみたら結構色々あって、エントリのネタになりそうだったのでまとめてみた。どっかにもちょろっと書いたけど。 実際にスタイル指定を書く前に抑えておくべき知識として以下のようなものが挙げ... 続きを読む

hail2u.net - Weblog - よく使うライセンス・フリーのフォント

2006/09/01 589 users Weblog 値段 フォント 保存 ライセンス

Posted at 2006-09-01T23:22:00+09:00 in Web Design OSより高かったりする値段のフォントを気軽に使えるわけがないので、ライセンス・フリーのフォントは重要。Webページでロゴやら何やらで使う分にはまるで問題ないクオリティなものを見つけては保存、見つけては保存てな感じ。その中で好んでよく使うものを5つ挙げてみる。 Lacuna Regular Itali... 続きを読む

hail2u.net - Weblog - CSSコーディング・スタイル

2006/08/20 158 users Weblog つづり CSSコーディング コンセンサス CSS

Posted at 2006-08-20T18:33:00+09:00 in Web Design 「こういうスタイルがCSSを記述する時に便利だよ！コンセンサス(つづりは知らない)も取れるし！」とかいう建設的な意見はまるでないんですが、CSSを書く時の自分ルールは結構あるのでまとめがてらエントリにする。もちろんhxxk.jpのCSS の記述ルール記事のまとめというエントリを見たから書く気になった... 続きを読む

hail2u.net - Weblog - FirefoxのuserContent.cssネタ

2005/10/11 160 users Weblog Firefox

Posted at 2005-10-11T06:00:00+09:00 in Software Firefox 1.5 Beta 1よりURLやドメインなどでCSSルールを切り分けることが可能になりました。これによりuserContent.cssがとてもいじりやすくなった(あるサイト向けにテキトウに書いても他のサイトに誤爆しなくなった)ので、userChrome.cssと同じくガリガリいじると楽し... 続きを読む