違和感
違和感は明確に自分が意識していない感覚に物事が触れた時に感じられるものだ。ただし自分が違和感を感じたことを大々的に「変だ！ 気持ち悪い！」などと感情的に表現してしまうとおかしな人になってしまう。そこで論理的に批判したくなるわけだが、大体において理論武装には穴や見落としがあるので、これまたおかしな人になってしまう。かといって違和感を感じたという事実を封印してしまうと、ストレスでおかしな人になってしまう。 違和感を感じるための感覚は自分の今までの経験に基づいて構成されたものなので、その否定は自分の存在意義を一部崩してしまう。しかし、そういった自分の存在意義を維持するため、延いては自身を守るために理論武装すると、説得したい相手を押さえつけるだけの結果に終わってしまう。 違和感を感じたことを大切にしつつ、かといってそれに自分だけが納得のいくような理由付けを行わないようにすると良さそうだ。つまり違和
Scoop
NYTimesで使われているScoopというCMSについての記事を読んだ。実際に動作しているものを触ったわけではないので、記事で取り上げられている良い所のみを見てだけど、コンテンツを管理できるCMSってあったんだと感じた。巷のCMSはコンテンツの表示はそこそこ管理できるけど、コンテンツの管理自体はまだまだなので、こういうコンテンツを作る過程にフォーカスが当たったCMSは珍しいと思う。インラインDIFFからその変更を許可・拒否できるとか触ってみたい。 CMSにはせいぜいドラフト機能くらいしかコンテンツを管理する機能はないことが多い。プラグインを入れてようやく世代バックアップや写真管理機能を加えることができるくらい。それならローカルでファイル・マネージャーやバージョン管理システム、画像編集アプリケーションを使った方がマシという辺りが、管理を投げ捨てた静的ウェブサイト生成ツールが一定以上の評価受
SassとBEM
SCSSファイルを整理し直している時、一気にBEMなクラスを使って書きなおしてやろうかとも考えていた。けど途中でSassならSCSSファイルの分割とその中での工夫によってBEMの構造を表現できそうと感じたので、今はそういう方向で試行錯誤している。実際BEMのウェブサイトでもファイルシステムを使ったBEMの表現方法という似た話が書かれているので荒唐無稽な考えではなさそう。 SCSSファイル名でblockを表現 その中でplaceholder selectorを使ってelementとmodifierを表現 外からはこのplaceholder selectorは使わない 既存のマークアップを利用したセレクターから@extendでBEM構造を関連付け HTMLファイルではBEMなクラスは振らない 必要な場合はシンプルなクラスを振る イメージはこのような感じ。HTMLでのマークアップの簡潔さは維持で
Lea Verouのフレシキブルな複数行定義リスト
Lea Verouの編み出したフレキシブルな複数行定義リストは目からウロコだった。このテクニックを知るまではfloatを使うと長い時(コンテンツ幅に収まらない時)に途中で改行とかうまくできないけどまぁしょうがないか……みたいな感じで我慢していた。LF(やCR)を擬似要素経由で挿入してwhite-space: preで改行させてしまうというのは頭良い。ただ複数のdd要素を持つケースにはうまく対応できないのでちょっと変えて使い始めた。 このテクニックはつまりdt要素とそれとセットになったdd要素を一行に並べるというもの。表的なものならばそれは単にマークアップが間違っているのでtable要素でマークアップし直した方が適切だけど、dl要素のが適切なケースも多くあるのでこのテクニックが生かされる場面は多い。 dt, dd { display: inline; } dd + dt:before { c
結局どうすればいいの？ - Dive Into HTML5
Translation of: What Does It All Mean? - Dive Into HTML5 Diving In The Doctype The Root Element The <head> Element Character Encoding Friends & (Link) Relations rel = stylesheet rel = alternate Other Link Relations in HTML5 New Semantic Elements in HTML5 A long digression into how browsers handle unknown elements Headers Articles Dates and Times Navigation Footers Further Reading 訳注 Diving In この章で
CSSグラデーションのちょっとしたテクニック #2
前回のエントリのような応用するための基本というものではなく、CSSグラデーションはこういう使い方もできるよ的なもので３つ。普通のグラデーションの作り方はcss gradients in Firefox 3.6とかで。#3はない。 以下プレビュー画像のリンク先がデモ・ページになっているのでそちらも参照のこと。もちろん対応ブラウザのFirefox 3.6とSafari 4やChrome 4以降でないと動作デモは確認できない。 Vista風のテカってるボタン ありがちだけど作れたらなかなか便利そうなので挑戦してみたら、意外に簡単だった。実はdoubleなborderが重要で、これが無いとちょっと間抜けな感じになる。コード的には難しいことはなく、上半分にrgb(138, 138, 138)からrgb(102, 102, 102)、下半分にrgb(36, 36, 36)からrgb(0, 0, 0)と
Web開発周りのVimの設定
HTML/CSS/JavaScriptを書くために行ったVimの設定やインストールしたスクリプト等をざっとまとめてみた。「VimでWeb開発を100倍効率的にする方法」といったような生産性を上げるための設定の類ではない。 HTMLファイルを:makeで文法チェック tidy.vimが用意されているので、HTML Tidyをインストールし、.vimrcに以下のように書くだけで良い。 autocmd FileType html :compiler tidy autocmd FileType html :setlocal makeprg=tidy\ -raw\ -quiet\ -errors\ --gnu-emacs\ yes\ \"%\" tidy.vimのmakeprgでは日本語が化けるので-rawを追加する。 HTMLファイルのインデントをやり直す gg=G ノーマルモードではggでファイ
hail2u.net - Weblog - CSS2 Specificationでのプロパティの出現順序
少し前にCSSコーディング・スタイルというエントリで書いたように、各CSSルールのブロック内でプロパティを書く順序はCSS2 Specificationで出てくる順という縛りでCSSを書いている。大体のところはソラで覚えているのだけど、font-weightとfont-sizeはどっちが先だっけとかは忘れるので、備忘録がてら序列付きリストにしてみた。 margin margin-top margin-right margin-bottom margin-left padding padding-top padding-right padding-bottom padding-left border border-top border-bottom border-right border-left border-width border-top-width border-right-widt
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
