個人ウェブサイトへ
TwitterやInstagram、Pinboardのアカウントを消したので、それらでやっていたことを自前でやりはじめている。それぞれの過去の投稿をインポートし、RSSもそれぞれ作った。あとは/feedを全部入りにするつもりだが、ちょうど1年くらい前に購読先を変えさせたので、ちょっとやりづらい。でももう少ししたら変える。こうして個人ウェブサイトへと回帰した。 ポートフォリオではない個人ウェブサイトが、どういうものだったか、はっきりと思い出せない。カウンターとかリンク集があったとか、フレームで作られていたとか、ウェブリングとか、些末なことは思い出せる。しかし、どういう雰囲気だったのかまったく思い出せない。 外に放つというより、内に向かうものだったような気はする。そういう感じが出していけるとうれしい。 コンテンツが大きく追加された関係上、ホーム・ページや完全なログのページなどをいじっている。ま
普通のHTMLの書き方
保守しやすく、規模に依存しないHTML文書のために 一般 DOCTYPEで始める 置き換えられるべきまたは旧式のDOCTYPEを使わない XML宣言を使用しない 文字参照はできる限り使わない &と<、>、"、'は名前文字参照を使ってエスケープする 制御文字や不可視文字は数値文字参照を使う コメントではその内容の前後へ空白文字を置く 終了タグを省略しない 空要素の書き方を混ぜない タグや属性値の前後へ空白文字を置かない 大文字・小文字を混ぜない 引用符を混ぜない 属性を2文字以上の空白文字で区切らない 真偽値を取る属性の値は省略する 名前空間は省略する XML属性は使わない data-*とMicrodata、RDFa Lite用の属性と通常の属性を混ぜない デフォルトの暗黙のARIAセマンティックスを尊重する 文書要素 lang属性を追加する lang属性の値はできる限り短くする できる限り
CSSプリプロセッサーの必要性
やはりSassは必要だと考えている。あるいはLESSでもStylusでも良い。それはCSS Variablesの実装が落ち着き、行き渡っても、だ。もちろんその時にはCSSプリプロセッサーの変数を使わずに、CSS Variablesを使って書いた方が良いけれども。 CSSプリプロセッサーの変数やネスト、そしてミックスインはショートカット記法に過ぎない。DRYを加速させるだけで、それ以上特に付け加えられる何かはあまりない。変数への命名規則の採用による意味付けやネストでの構造化は有用・有益であることには気づくが、本質的な意味付けや構造化をもたらすものではない。これらの機能はCSSの貧弱さと比較すると輝かしく見えるものの、プリプロセッサーを使ってまで利用する価値があるかというと疑問が残る。 ならばなぜ必要だと考えるのか。 それはウェブページの要素間でのルールセットの共有ではなく、セレクター同士での
GitHubのエラー・ページ
GitHubのStyleguideにエラー・ページのセクションがあるのを知った。それによると外部ファイルに依存しないように書いているらしい。CSSはstyle要素で、JavaScriptはscript要素で、画像ファイルはBase64エンコードしてData URIで、それぞれHTMLに直接埋め込むというスタイル。 実際に404のテンプレートでもちゃんとそうなっていた。フロントエンド脳なので、HTTPリクエストを減らして、エラー・ページのコストを下げたいのかなと単純に考えてしまったけど、Not Foundの連鎖を避けることとか外部ファイルがCDN経由の場合の確実性を上げることとかの方が強い理由のようだ。エラー・ページを単独で機能するようにしておき、エラー時に余計な負荷を与えないようにすることにより、より速やかに復帰できるように、ということになりそう。 HTTPエラー・ページの意味も重要だけど
CSSでアイコンをデザイン
ものすごく大雑把に言うと今まで画像編集ソフトでやっていた、角を丸くするとか背景をグラデーションにするなどという作業をCSSでやってしまおうというお話。もちろんCSSでできないことは多くあるので万能というわけではないが、できることに限って言えば数行のCSSコードでスクリーンショットのような効果を柔軟に適用することができる。 Demo: Design icon with CSS ul li a { display: block; width: 32px; height: 32px; background-image: url("icons-w.png"); background-repeat: no-repeat; text-indent: -10000px; } 各アイコンになるa要素へのスタイルは以上のような単純なものがベースになる。icons-w.pngがアイコンの前景をつなげたスプライ
枠線付きの吹き出し
ミニブログの隆盛以降ウェブ上でよく見かける吹き出しを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;
hail2u.net - RSS - Pigeonhole
Pigeonholeとは？ 多くのRSSリーダーではOPMLというフォーマットを利用して、RSSの購読状況を管理しています。RSSリーダー開発者の尽力によって、それなりにRSSリーダー間で互換性も保たれており非常に有用です。 PigeonholeはRSSの購読状況が羅列されているOPMLファイルを編集するソフトウェアです。ブックマーク管理ソフトウェアと同じようなものだと考えていただければわかりやすいと思います。RSSファイルの購読状況の管理はこのソフトウェアで行い、保存し、利用している各RSSリーダーでその保存したOPMLファイルをインポートして利用というのが主な利用環境になると思います。 ひとつのRSSリーダーしか使っておらず、そのRSSリーダーに高度な購読管理機能が実装されている場合は、このソフトウェアの出番はほとんど無いと思います。しかし、購読管理機能が弱いRSSリーダー(Webサー
hail2u.net - Weblog - Firefoxで素早くdel.icio.usへ投稿
Firefoxでは各ブックマークにKeywordを割り当てることができ、割り当てたKeywordをロケーション・バーで入力してEnterまたはGoボタンを押すことによってそのブックマークを開くことが出来る。このSmart Keywordsと呼ばれている機能はロケーション・バーから検索エンジンを利用した検索を行う場合などに利用する場合が多いが、Bookmarkletなどを含めどんなブックマークにも割り当てることが出来るので、del.icio.usへ投稿するBookmarkletにKeywordとしてdを指定すると、Alt+D D Enterという連続したキー・タイプでdel.icio.usに投稿できるようになる(Alt+Dはロケーション・バーにフォーカスを当てるショートカット)。知人が見ている時にこれを使ってdel.icio.usにササッと投稿するところを見せつけると「デキる男(女)」を演出
FirefoxのuserContent.cssネタ #3
FirefoxのuserContent.cssネタで内輪受けしたネタがあったので久々にエントリに。してみた。なお「某所とネタがかぶってるよ」とか「某所で書いたのを今さら引っ張り出してくるなよ」とかいう苦情は受けつけません。 Mac OS Xのフォームにフォーカスを当てると枠に青く色が付く機能をちょっとだけパクる input:not([type]):focus, input[type="text"]:focus, input[type="password"]:focus, input[type="file"]:focus { outline: 2px solid #3D80DF !important; } outline-styleプロパティを工夫すると見目良くなるかも。borderプロパティではなくてoutineプロパティなのは、borderプロパティに比べてレイアウトを崩す可能性が少ない
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
