CSSできれいな斜め線
CSSで斜めに線を引くようなことをするには多少なりとも工夫が必要だった。つまりCSSで作る吹き出し(もう5年前の記事だ)のようにborderプロパティーを使って頑張るしかなかったわけだ。今はlinear-gradient()があるので直観的に作ることができるようになった。しかしきれいに引くとなるとまだ工夫が必要そうだ。 Demo: CSS Diagonal Line borderプロパティーを使ったもの、linear-gradient()を背景で使ったもの、Data URI化したSVGを背景に使ったもの、以上の計3つのデモを作った。 .lg { background-image: linear-gradient( to right bottom, transparent 50%, #f0f 50% ); background-repeat: no-repeat; background-si
“マークアップ”するということ ～ HTML5勧告に寄せて ～
HTMLを適切な要素を使って書いていくことは実はそれほど難しくはない。しかし過剰に要素を使わずに、かつスタイリングすることも意識して、と適切に“マークアップ”するのはなかなかの修練を必要とする。いったい“マークアップ”するということはどういうことなのだろうか、そしてどのような思考の元に行えば良いのだろうか。 HTML5での変化 著作権表示のマークアップ small要素 footer要素とsmall要素 p要素とdiv要素 footer要素とp要素 スタイリングとの兼ね合い マークアップするということ HTML5での変化 コンテンツに則した素直な形でマークアップできること。 HTML5で変わることや変わったことは多くあるが、それらをおおまかに俯瞰するとこのような言葉に集約できる。そのために様々な要素や属性が追加され、既存の実装をなるべく壊さない形で要素の意味に変更が加えられた。これらの変化は
CSSグラデーションによるリンクの下線
CSSグラデーションを使った太くならないリンクの下線は、Mediumの詳細な記事やterkel.jpのその解説とも言える記事を見てそのうちやってみようと思っていた。フォントサイズが大きい時に下線が2pxや場合によっては4pxくらいで引かれるようになるのは見た目に結構な負荷を与えるので、常に1pxで引きたいといった希望を持ってる人は多いはずだ。 このウェブサイトでは以下の要件を満たすような感じで実装した。 常に1pxで下線を引く 文字サイズに依存しない なるべくシンプルな実装 a { background-image: linear-gradient( transparent 0, transparent 50%, rgb(91, 172, 208) 50% ); background-position: 0 1.1em; background-repeat: repeat-x; backg
余白の美
Translation of: Whitespace - A List Apart 僕の最初のデザインの仕事はマンチェスターの小さな印刷系のデザイン事務所でのもので、そこでは様々なものをデザインしました。パッケージや出版、ノベルティ、そして…ダイレクトメール。中でも、大きく、太く、そしてゴミゴミさせることが常のダイレクトメールをデザインする時には、大学で習ったグラフィック・デザインの原則はわずかしか役に立ちませんでした。忘れもしませんが、クライアントの一人にこう言われたことがあります。「余白は無駄なスペースだ」と。 ダイレクトメールの依頼者は大衆向けにデザインすれば効果的なので、そうすることを望みます。しかしながらダイレクトメール以外においては、それはまったくの間違いです。 はじめまして、余白さん 「余白」または「間(ま)」とはあるデザインを構成する要素同士の間隔のことです。もっと細かく言
ベンダー拡張プリフィックスヲ削減セヨ
Translation of: Cutting down on vendor prefixes とあるブラウザーで特定の機能を有効化する場合、現在、多くのウェブ開発者たちはCSSでベンダー拡張プリフィックスを使っていることでしょう。そのこと自体は良いのですが、サンプル・コードやプリフィックスを追加するツールで、時々サポートし過ぎでやたらめったら全てのプリフィックス(今まで実装されたことがないようなものまで)を追加しようとしているのを見かけます。最早ベンダー拡張プリフィックスが不要なCSSプロパティーは数多くあると思いますし、そうでないとしてもその数は減らすことができるでしょう。 以下の例ではどのプレフィックスを、使用しているのなら、使用しているかの注釈をつけておきました。だいたいが削除でき1行で済ませられるにも関わらず、様々なベンダー拡張プリフィックスと共に使われてしまっていることが多いC
中央(右)揃えと三点リーダーによる省略
text-overflow: ellipsisではみ出した文字列を三点リーダーで省略できる。画面サイズのバリエーションが増え続けているので、こういったなんとなくどうにかしてくれることを期待できるCSSプロパティーは積極的に使いたい。のだけど、これとtext-align: center (right)を組み合わせた場合、テキストの開始位置がChrome 28だけ変化する。 Demo: text-overflow: ellipsis and text-align Internet Explorer 10とFirefox 23ではtext-alignプロパティーの値はどれでも同じ。Chrome 28ではcenterで少し、rightでは更にもう少しずれる。三点リーダーによる省略で余った余白をtext-alignプロパティーでどう扱うか、またはtext-alignとtext-overflowプロパ
HTMLにおけるimg要素のalt属性
HTML Standardの4.8.1.1 Requirements for providing text to act as an alternative for imagesをざっと把握できるように日本語で箇条書きにしただけのものです。最終的には原文をしっかりと読むべきでしょう。 基本 必ず定義されるべきである その値は空であってはならない その画像に代わりになる最適な文字列である ページ上の全ての画像をそのalt属性の値で置き換えてもページの意味合いが変わってはならない 画像のキャプションや題名、銘とみなされるような補助的な説明を意味するものであってはならない 前後で解説されている情報の繰り返しであってはならない 画像以外に何も含まれていないリンクやボタンで使われる場合 リンクやボタンの目的を明確に伝える文字列を指定する わかりやすく説明するために文章ではなく画像のチャートやグラフを
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
