この文書について この文書は、画像の使用を控え、スペース、ボーダー、配色などを駆使し、どれだけ美しいCSSのデザインが作れるか、皆で挑戦しよう!という試みです。 CSSといくつかの画像を用いてレイアウトを行っています。 まとめサイトが無い気がするよ 世間には、イケてるCSSデザインを集めた、CSSショーケース、CSSギャラリーと呼ばれるサイトがいくつか存在します。 ところが、そういったサイトの多くは、画像を沢山用いたグラフィカルでリッチなデザインのCSSデザインばかりです。私は、そんなギャラリーを見るのが趣味だったのですが、次第に飽きてきてしまいました。そして、シンプルなデザインを好むようになりました。 誤解をして欲しくないのですが、CSSのショーケースやギャラリーに掲載されているサイトのデザインはとても優れています。単に、私が求めているものとは、違ったというだけのお話です。 そこで私は、

Howdy! Welcome to our vaping tribe. We are a group of American Indians who take a keek interest in vaping. For many years, our people have suffered under the harmful health effects of tobacco cigarettes. We are now pushing for everyone to start vaping, as some studies have shown that it is slightly less dangerous than tobacco itself. Our tribe recognizes that not all vaping manufacturers are creat

CSS | 01:06 | はてなダイアリーのデザインをいじる上ではてなダイアリー独自に気をつけなくてはいけないものについて例をあげてみます。DOCTYPE宣言が互換モードまず一番問題になるのがここでしょうか。気をつけなくてはいけないのはなんといっても「IEで見るとwidthにpaddingがふくまれる」という点です。これはIE7になっても変わりません。そのためwidthとpaddingを同居させた要素を記述した場合にIEと他のモダンブラウザでは表示が変わってしまいます。回避策で一番簡単なのは同じ要素にwidthとpaddingを同居させないということです。ただしはてなダイアリーの構造上h1とかでwidthとpaddingを一緒に使わざるを得なくなったりするのでそん時はハックするしかないです。はてなのヘッダを透明にするはてなのヘッダは配色がしやすいように、画像部が透過されるようになりました

hatena毎日使っているのにデフォルトのスタイルのままになっていた「はてなブックマーク」の CSS を変えました。こんな感じです。 b:id:nitoyon「はてブ」の何となく分かりにくい部分を、分かりやすく見せることを目標に作ってみました。以下では、今回のデザインでこだわった「タイトル部分のアイコン」と「コメントのふきだし」について簡単に説明してみたいと思います。 タイトル部分のアイコンまずは、タイトル部分。デフォルトのタイトル部分のアイコンや数字の羅列は意味が分かりにくいですよね。マウスを乗せたらツールチップで説明が表示されるのですが、なんか直感的じゃない。この部分の数字の意味を分からずにはてブを使ってるひとも多いのでは…。 なので、画像を書き換えて分かりやすくしてみました。RSS の青くてかっこ悪いアイコンも、オレンジ色のおしゃれなやつに。いろんな人にお気に入りにいれてほしいので、

World & Sociery ゲリラ・オープン・アクセス宣言 last modified on 2024-01-12 アーロン・スワーツの「ゲリラ・オープン・アクセス宣言」の日本語訳と解説です。 冒頭に戻る World & Sociery On “Google’s Ideological Echo Chamber” last modified on 2021-04-03 Google の元技術者であるジェイムズ・ダモーアが回覧用に社内で発表した “Google’s Ideological Echo Chamber” という文書を発端にして展開している論点をとりあげています。 「街場」なんて存在するのか last modified on 2015-10-27 以下の文章は、何度か途中まで書いて「くだらない」と思いながらも、再び書き直してきたものである。どうして書き直すたびに「くだらない」と

html { margin:0; padding:0; border:none; } body{ font-size: 100%; font-family: Verdana, Osaka, sans-serif; line-height: 1.5; color: #333333; background-color: #ffffff; text-align: center; margin: 0; padding: 0; word-break: break-all; word-wrap: break-word; background-image: url("body.gif"); } div.body{ width: 740px; margin: 0 auto; padding: 0; text-align: left; position: relative; background-color