横並びのリストのセンタリング
リストを横並びにしてセンタリングというのはよく使う。ただよく使う(われる)わりには「これ！」というようなテクニックがないような気がする。inline-blockで並べた場合は項目の間に隙間ができ、floatで並べた場合はセンタリングがトリッキーすぎる。気分で色々使い分けてたけど最近はdisplay: inline-tableをよく使うようになって、これで良いかなーという感じ。 <nav class="paging"> <ul> <li><a href="foo">Prev</a></li> <li><a href="bar">Next</a></li> </ul> </nav> というようなマークアップの一般的なページング・ナビゲーションだと、 .paging { text-align: center; } .paging ul { display: inline-table; } .pa
枠線付きの吹き出し
ミニブログの隆盛以降ウェブ上でよく見かける吹き出しをCSSで作るお話。単色のものはかなり前に書いた。今回はそれに枠線をつけてみよう！ みよう！ みよう！ Demo: Bordered Speech Bubble 枠線は単なるsolidなborderで少し角を丸めただけ。 尻尾を付ける :before擬似要素を使う。デモの3番目のサンプルのように、まず枠線と同じ色で三角形を作る。三角形は以前のエントリで書いた手法と同じで、左右のborderをtransparentにすることによって作る。 .speech-bubble:before { border-top-width: 16px; border-right-width: 16px; border-bottom-width: 0; border-left-width: 16px; border-color: #369 transparent;
Sass、そしてSassy CSS (SCSS)
CSSを拡張したメタ言語であるSass、そしてその別文法として定義されたSCSSについて、960.gsなどのCSSフレームワークと絡めて、Sass (主にSCSS)の良さを解説する。 CSSフレームワーク Sass Sassy CSS aka SCSS SCSSでCSSフレームワーク 2カラムレイアウトの作成 clearfixやReset CSSの組み込み カラム幅の変更 カラムの入れ替え SCSSで完結することの意義 まとめ 最後に CSSフレームワーク 960.gsやBlueprint、BlueTripなどCSSフレームワークと呼ばれるものは色々ある。フレームワークと名乗るだけのことはあって、それらの生産性はとても高い。テンプレートで適切にクラス名やIDを埋め込むだけなので、複雑怪奇なCSSコーディングを意識することなく誰でも簡潔にきれいなカラム・レイアウトを作成できる。 HTML 4
404エラーページの改善
404エラーページに大幅に手を入れた。今まではフッタに載せていた人気のあるページなどを整理して、URLが間違っていることへの注意の喚起と修正候補の推薦をメインにし、その下に人気のあるページのリストを、最後に大きめの検索フォームを配置ということにした。JavaScriptが無効だとほとんど意味をなさないのが欠点。403や410、500などの他のエラーページにはまだ手をつけていない。 まずはページが見つからないということをよくある理由(ミスタイプとか)と共に訪問者に知らせるメッセージを。これは今までどおりではあるのだけど、箇条書きにして読みやすくした。横に長いと読まれないことが多いので、こういった読んで欲しいメッセージは短く箇条書きの方が向いていると思う。その上でURL修正候補を見つけることができたら、その箇条書きの前に「もしかして」というキャッチーな単語と共に挿入するようにした。この時URL
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
