“マークアップ”するということ ～ HTML5勧告に寄せて ～
HTMLを適切な要素を使って書いていくことは実はそれほど難しくはない。しかし過剰に要素を使わずに、かつスタイリングすることも意識して、と適切に“マークアップ”するのはなかなかの修練を必要とする。いったい“マークアップ”するということはどういうことなのだろうか、そしてどのような思考の元に行えば良いのだろうか。 HTML5での変化 著作権表示のマークアップ small要素 footer要素とsmall要素 p要素とdiv要素 footer要素とp要素 スタイリングとの兼ね合い マークアップするということ HTML5での変化 コンテンツに則した素直な形でマークアップできること。 HTML5で変わることや変わったことは多くあるが、それらをおおまかに俯瞰するとこのような言葉に集約できる。そのために様々な要素や属性が追加され、既存の実装をなるべく壊さない形で要素の意味に変更が加えられた。これらの変化は
CSSの簡略プロパティー - Weblog - Hail2u.net
CSSの標準仕様では一部のプロパティーに簡略(ショートハンド)プロパティーが用意されている。marginやbackground、fontプロパティーなどがそれ。うまく使うとCSSをかなり短くできるので、積極的に使いたいけど、なかなかの複雑さでそうもいかない。かといって機械的に処理するのも、CSSは人が簡単に書けることを想定して仕様が作られている節がある(根拠はない)のでまた難しい。 先日知ったCSS Shorthand Generatorの内部で使われているshrthndパッケージはまさに機械的に処理するためのもの。でも予想通り、全然ちゃんと機能するものではなかった。 例えばshrthndパッケージでは複数のfont-*プロパティーをまとめることができることになっている。 .test { font-family: serif; font-size: 1.5em; } このように書くと、以下
wildfire.vimでVim力を下げる
wildfire.vimという、カーソルがある辺りのテキストオブジェクトをなんとなく選択してくれるVimプラグインを使い始めた。Vim力が下がる代わりに魂の平穏が得られる。ような気がする。 デフォルトではノーマル・モードで<Enter>を押すとカーソルのある辺りのテキストオブジェクトを選択してくれる。HTMLファイルを編集中なら属性値の上で発動させると、クオートの間を選択してくれる。その状態でもう一回<Enter>を押すとその上位にあるテキストオブジェクトをなんとなく選択してくれる。属性値のクオートの間を選択した状態だと、HTMLタグで括られた全体(など)まで拡大される。 逆方向に縮小することも出来るので、適当にタカタカ<Enter>を押して拡大しつつ、広げ過ぎたら<BS>で狭めるみたいな感じで使えて、とてもいい加減に使える。僕は狭める方だけを<S-Enter>に変えて、サクサク感を上乗せ
つまらないGruntタスク
Gruntfile.jsをサッと開く手段としてeditという簡単なタスクを勢いで書いたんだけど、無意味でつまらないGruntタスクだった。Gruntには様々なタスクがあり、自分でもNode.jsを駆使して自由に書けるので、色々やりたくなる。けれどもグッとこらえて、ワークフローにおける定型作業の自動化に絞った方が、ワークフローと開発環境、そしてGruntfile.jsに優しい。 grunt-contrib-watchを使ったSassの自動コンパイルやLiveReloadのタスクは確かに便利なんだけど、開発から公開までのワークフローの段階として必須というわけじゃない。これらはタスクというよりも環境なので、別に自分好みの環境を作った方が集中できるし、好みでない環境を押し付けずに(そして押し付けられずに)済む。 また、Gruntでなんでもやることに慣れてしまうと、設定されてるしそれで良いかみたいな
Webフォントの非同期読み込み - Weblog - Hail2u.net
Webフォントの読み込みは@importだと色々まずいので、主にlink要素を使って並列に読み込むわけだけど、これもまた貴重なHTTPリクエスト数を消費するとか、CSSのパース完了が少し遅れるなどあって、完璧な解というわけじゃない。それを非同期にWebフォント定義の含まれるCSSファイルを読み込むようにして、Webフォントのロードをページのレンダリングと並行して行わせるのはどうか、という試み。 非同期化することによりWebフォント定義の含まれるCSSファイルのリクエストとパースが、ページのレンダリングと並行して行われるようになる。head要素内でlink要素を直接書いた場合は、Webフォント定義の含まれるCSSのリクエストとパース後にページのレンダリングが始まることが多いので、体感速度(ページのレンダリングの開始までの所要時間)は向上する可能性が高い。 動的なlink要素の追加 いわゆるソ
CSSポストプロセッサー時代の到来
SassやLESSといったCSSプリプロセッサーは市民権を得たと言って良いと思う。しかしそれらCSSプリプロセッサーは開発という段階にのみ利をもたらすもので、今のところはそれ以上ではない。CSSを実際にユーザーに届けるまでには、開発だけではなくレビューとリリースという段階もある。レビューとリリースも確実性を持って効率的に行うためには、CSSポストプロセッサーと総称されるようなツール群が必要になるだろう。 この文書はFrontrend Advent Calendar 2013の4日目への記事として寄稿した。明日は@hilokiさんがスタコラサッサと書くようだ。 目次 CSSポストプロセッサーとは CSSプリプロセッサーの出力するCSS CSS Lint 開発用とレビュー用、リリース用のCSS CSSポストプロセッサーのユースケース ベンダー拡張プリフィックスの付加 Media Queries
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
