はてなブログのデザインの裏側 - Uedayworks::HatenaBlog
このエントリーはHatena::Staff Advent Calendar 2011のために書かれたものです はじめまして。最近は映画けいおんが生き甲斐のuedayです。 11月8日にクローズドベータリリースした「はてなブログ」のデザイン全般を担当しました。裏側というほどの話ができるか微妙ですが書いてみます。 開発チーム 開発チームは、エンジニアid:cho45／デザイナーid:ueday／ディレクションid:onishiです。デザインはクオリティチェックをid:tikedaに依頼して、適宜フィードバックを貰いながら進めていきました。このほかに制作スタッフが数名います。プロジェクトが立ち上がったのが8月1日だったので、開発期間は約3ヶ月です。アルファ版完成が異常に速く、開発2日目か3日目で記事投稿ができるようになり、5日目でアルファ版を社内リリース。choさんほんとすごいなって思いました
謎を解いて“o”を救出せよ！ GoogleがHTML5やCSS3を使ったパズルゲームを公開 - はてなニュース
Googleは8月17日（水）、HTML5やCSS3といった技術を活用したパズルゲーム「The Google Puzzle」を公開しました。参加型イベント「リアル脱出ゲーム」の企画、運営を行っている会社「SCRAP」と共同で開発したとのことです。 ▽ The Google Puzzle ▽ Google Japan Blog: 最新ウェブテクノロジーで作った The Google Puzzle を Chrome で楽しもう 「The Google Puzzle」は、Webブラウザで遊べるパズルゲームです。「Google マップ」や「Google 翻訳」「Google カレンダー」などのサービスを活用したパズルを解いて、ウィンドウに閉じ込められてしまったGoogleロゴの黄色い「o」の文字を救出します。問題は全部で5つ用意されており、1つ解くごとに難易度が上がります。答えがわからない場合は、
CSSで描いた「キュゥべえ」が登場 すごすぎてわけがわからないよ - はてなニュース
MBS・TBS系で放送中の人気アニメ「魔法少女まどか☆マギカ」に登場するキャラクター「キュゥべえ」を描いた1枚のイラストがはてなブックマークで話題を呼んでいます。なんとこのイラスト、画像をまったく利用せず、HTMLとCSSだけで描かれているそうです。 ▽ http://jsdo.it/norahiko/m1WT 以前はてなブックマークニュースではHTMLとCSSのソースコードのみで描かれた「ドラえもん」のイラストをご紹介しました。上記エントリーで見られるキュゥべえのイラストも、同じ手法で描かれています。一見画像のようですが、イラストの上で右クリックをしてみると“画像を保存できない”ことがわかります。 ▽ 画像は一切使ってない！？CSS3だけで描いた“ドラえもん”がすごい - はてなニュース このHTMLとCSSだけで描かれたキュゥべえ、作者さんによると、Google Chromeと、Fir
画像は一切使ってない！？CSS3だけで描いた“ドラえもん”がすごい - はてなニュース
こちらの“ドラえもん”のイラスト、どうやって描かれていると思いますか？PhotoshopやIllustratorなどの画像編集ソフトで描かれているようにも見えますが、実はこのイラスト、なんと画像を一切使わずに「XHTML」と「CSS3」のソースコードのみで描かれているとのことです。 ▽CSS3 ドラえもん インターネット上でイラストを公開するには、JPGやGIFといった画像ファイルでアップロードするのが一般的。しかしこちらのドラえもんはそういった画像ファイルではなく、Webサイトを構築する際に使われるXHTMLとCSS3のソースコードのみで作られています。そのため“右クリックで保存”ができなかったり、ブラウザの種類やバージョンによって見え方が異なるのが特徴です。 こちらはFirefox3.6の場合です。FirefoxやGoogle ChromeはCSS3に対応しているので、グラデーションま
その場編集時に切り替わる見出しの背景色の変更が可能になりました - はてなダイアリー日記
その場編集機能では見出しにマウスカーソルを重ねた時に背景が薄い黄色に変化しますが、スタイルシートの設定でデザインを自由に変更できるようになりました。 たとえば背景色をグレーに変更したい場合は、管理ツールの詳細デザイン設定ページのスタイルシート欄に、以下のように指定することで変更できます。 h3.hover { background: gray; } 背景色以外にも背景画像を指定したり、文字色を変更したり、通常のスタイルシートと同様の指定が可能です。現在のところ「h3.hover」と直接指定した場合のみ有効となっており、「div.section h3.hover」など他のタグやクラスを指定をされた場合には反映されません。 またCSSでの指定とあわせて、見出しにマウスカーソルを重ねてから色が変わるまでの間に少しだけ待ち時間を設ける変更を行いました。これまではページのスクロールなどでマウス移動を
チープカ - はてなダイアリーのspan.sanchor問題
はてな, CSS | 23:11 | はてなダイアリーのCSSをいじった事がある人なら誰しも一度はセクションの頭につく■を画像に変えようとすると思いますが、このspan.sanchorっていうのがなかなか曲者で、span.sanchorがaタグの内側にあるためによく画像置換で使われるようなtext-indent:-9999pxとかの技を使うとIEでリンクをクリックできないとか不具合がでてきてしまうという問題があります。僕の場合は以前からフォントサイズを小さくしてpaddingで表示するという方法を使っていたんですが、それだとOperaで正しく表示されないという問題がありましたが無視してました＾＾。なので結局どう頑張ってもうまくいかない部分が出てきてしまい面倒なので最近はその部分についてはいじらないようにしていました。ですが、ようやく解決方法が見つかりました。自分が見つけたわけじゃないですけ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
はてなユーザーで、特定のユーザーの”存在”自体をすべて見たくない場合、対処法はありますか？…