昨日の日記 で書いた通り、こうしたtumblrを始めてみました。 http://96x96.net/ 仕組みとしては、一つの投稿ごとそれぞれ CSS で border-image と 背景画像を指定して実現しています。マウスオーバーで動くのは単純な Transitions ですし、基本的にはそんなに難しいことはやってないですね。対応しているブラウザは新しいものに限られてしまうものの、主要なモダンブラウザなら大抵表示されると思います。 で、問題は背景画像の設定について。 よくある背景画像の指定というと div{ background-color: #FFFFFF; background-image: url(image.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position:

CSS3で大幅に強化されているtext-decorationの実装状況を調べたLine Decoration (CSS3 Text)を見た時に、あんまり関係ないですがtext-shadowとtext-decorationが組み合わさったらその飾りの影は付くのか付かないのかという疑問が湧きました。テストしてみたらブラウザーによって違ったという話です。 Demo: text-decoration and text-shadow Chrome 15.0.874.120 mやSafari 5.1.1、Firefox 8.0だと下線の影も作られますが、Opera 11.52では下線の影ができません。Internet Explorer 9.0.3は……対応してないので関係無いですね！　バグ……な気もしますが、ちょっと判断が難しいところ。 この現象をチェックしていた時に気づいたんですが、text-sha

TwitterのTLで流れてたツイートでこの2つの挙動が違うとかいうのを見て、そんなことあったっけ……あーでもrelativeの中だと違いそうとか思ったら本当に違っていました。両者はスクロールを無視するかしないかというような違いだけだと思ってました……。元発言がこのことを指していたかどうかは知りませんけど、エントリにしておきます。 Demo: fixed and absolute 親のsection要素でrelativeを使っていると、absoluteが親の要素を基準としていますがfixedはbody要素viewportが基準になってますね。 ということはfixedだと常に絶対配置されちゃうのかみたいな感じですけど、topやleftなどの代わりにmarginを使ったりとかすれば、相対配置でかつ固定とかもちゃんと出来ると思います。top等が初期値のautoだと親とぴったり重なる位置に表示され

mediaHACKというサイトで:hover時にpre要素の背景が反転するようになってて、「おっ」と思ったのでパクりました。通常時から暗いとコードが目立ちすぎて気になるし、他の部分と合わせようとコントラストを弱めると読みづらいのでどうにかしたいなーと前々から思っていたのですが、これはなかなか良さそうな解な気がします。 pre { color: inherit; /* rgb(0, 0, 0) */ background-color: rgba(0, 0, 0, 0.2); } pre:hover { color: rgb(255, 255, 255); background-color: rgb(0, 0, 0); } すぐ戻しそうではある。 追記 「チカチカして、目に悪い」というもっともな意見を貰ったので、このサイトでは使うのをやめました。ほぼ反転くらいにしてしまうと明度差が激しすぎるの

before擬似要素を利用したグリッド・オーバーレイを作成してみました。pointer-eventsプロパティでnoneを指定することによって、グリッド画像が手前にあるのにも拘らず普通に文字列を選択したりリンクをクリックしたりできるようになります。 Demo: Grid Overlay: The Lazy Way 詳しくはデモページを読んでください。グリッド画像はCSSグラデーションなので、最後にちょろっと書いてあるようにグリッドサイズは変更可能です。溝とカラムの比率は変更できませんが……。 poiner-eventsプロパティはなかなか奥が深そうです。 追記 ダブルクリックでグリッドをトグル出来るようにしてみたのでデモにも反映させました。 <style> body.hide-grid::before { background-image: none; } </style> <script

文字列を選択した時の挙動というかハイライト周りについて。 ブラウザ毎に挙動が違って面白いというか迷惑。 id:FTTH さんが画像がないとは何事だ。とコメントをくれたのでキャプチャしたよ。これでOK? 上下で背景が黒、白で分けて、それぞれに記述のスタイルを割り当てている。 divに背景色：黒、文字色：白 none: スタイルなし 背景色：画像で白、文字色：黒 背景色：白、文字色：黒 divに背景色：白、文字色：黒 none: スタイルなし 背景色：画像で黒、文字色：白 背景色：黒、文字色：白 Firefoxの場合 背景色によってハイライトが変わる。一番見やすい。 白地の場合 背景色：青、文字色：白 黒字の場合 背景色：白、文字色：青 GoogleChromeの場合 常に背景色：青、文字色：白 黒字の背景色が指定されていると、ハイライトされているか分かりにくかったりする。 そして、複数行選択

/* * CSSでキュウべえ(FULL)を描いてみた * ※Google Chrome, FireFox, Safari, Operaに対応しています。 */ <div class="qb"> <!-- tail --> <div class="tail"> <div class="parts-1"></div> <div class="parts-2"></div> <div class="parts-3"></div> <div class="parts-4"></div> <div class="parts-5"></div> <div class="parts-6"></div> <div class="parts-7"></div> <div class="parts-8"></div> <div class="parts-9"></div> </div> <!-- ear --

そろそろCSS3・・・という人におすすめのサイトのご紹介。 CSS3 Filesを見れば、どの機能にどんなオプションがあるかが一目瞭然だ。 また説明が妙にグラフィカルで素敵なデザインなので見ていて楽しいのが特徴だ。 こうしたサイトは他にもあるが、同じ情報なら楽しく見たいところですな。

ものすごく大雑把に言うと今まで画像編集ソフトでやっていた、角を丸くするとか背景をグラデーションにするなどという作業を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がアイコンの前景をつなげたスプライ

Vimperatorの色を変えるための要素名のメモめもめも Vimperator1.1版用にuserChrome.cssを書き直しちゃったぜ Vimperatorのソースを見て、 そこか!見える!な感じでやったのでちと適当ですが、、、 尚、userChrome.cssの記述では、 必ず!importantを記述してください。 Firefoxちゃんを僕らの色で染めてやる (1): ステータスライン (4): コマンドライン (2), (3), (5)〜(7): バッファ vimperator全体 #liberator-container {} /* display: none; とすると切なくなります */ (1), (5) ステータスライン #status-bar {} #liberator-statusline {} #liberator-statusline > label {} #l

なんとなくブログの見た目を少しいじった(テスト前になると部屋を片付けたくなるアレ)。 シングルカラムだと横に間延びするのは前から気になってたので、max-widthを1000pxで設定して、あとフッターをシンプルに。 で、はてなスターってデフォルトだとマウスを乗せるまで誰のだかわからないのが気になってて、自分ではGreasemokey Scriptでユーザーのアイコンに置き換えてるんですが(hatena big profile star)、そういうことをしてない多くの人はが並んでいるだけで、わかりにくいなーと。 ってことで、装飾してやろうと思ったけど、CSSだけだとやはり厳しい。まあ、IEを考えなければ(IEだと普通の表示のまま)ってことで、afterとか使って強引にIDを表示してみた。 CSSはこんな感じ(ネガティブなtext-indentとoverflow:hiddenというよくあるバ

はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28

今回はmixiアプリ for Touch限定ではなく、スマートフォンにおけるHTML5の対応状況について。 まず、基本的にiPhone・Android共に標準のブラウザではWebkitを描画エンジンとして用いており、共通する仕様が非常に多いです。 それらはSafari・Google Chromeを使ってご存じの方も多いかと。 webkitと言えば常に新しい規格を作り標準規格として採用された実績を持つブラウザ、HTML5の対応にも期待が持てます。基本的にhtml5の技術は進んでバリバリ使ってOKと考えましょ。 ただ、XPERIAはAndroid1.6ということで、現存するAndroid端末の中でもかなり古いため、webkitのバージョンが古いのでしょう。ちょっと心配な面もあります。 また、HTML5と言っても実はかなり広義にわたる意味を持っており、今までのXHTMLと違いCSSやJavaSc

body 要素のデフォルトスタイルは position:static なのだが、サイトによっては position:relative とかが付いていたりする。以下では、そういうサイトで起こる問題を説明する。 例えば何か適当な要素をドキュメントの一番左上に置くとき、その要素の position を absolute にして、top と left で座標を指定することがある。特に JavaScript で動的に作る要素はこういうことをする場合が多い。左上に限らず、マウスでクリックした位置に要素を置く場合の常套手段でマウスイベントの pageX と pageY を使ったりもする。 そういうとき、body の position が static なら のようにちゃんとドキュメントの左上基準で要素が置かれるところが、relative や absolute だったら、 のように body の左上基準で

div.display_works li+li+li+li+li{clear:both;} div.display_works li+li+li+li+li+li{clear:none;} div.display_works li+li+li+li+li+li+li+li+li{clear:both;} div.display_works li+li+li+li+li+li+li+li+li+li{clear:none;} div.display_works li+li+li+li+li+li+li+li+li+li+li+li+li{clear:both;} div.display_works li+li+li+li+li+li+li+li+li+li+li+li+li+li{clear:none;} div.display_works li+li+li+li+li+li+li+li+l