「aquapple」バージョン9、細かいパーツをRetinaディスプレイに対応＆お祝いイラストを頂きました | aquapple
2013年4月に当サイトをリニューアルしてから1ヶ月。サイトの外観は大きく変わりました[1]が、実は細かい部分の更新が追いついていませんでした。 それが、「アイコン画像」だったり「特定のdiv要素の背景画像」でした。ゴールデンウィークの前半を利用してこれらのパーツも合わせてリデザイン、同時にRetinaディスプレイに対応しました。 今回リデザインしたパーツの一部をご紹介します。 h4タグとh5タグ h4タグは従来、左側に背景画像を用いていましたが、今回から画像の使用をやめ、css3のlinear-gradientに切り替えました。 Amazonの商品紹介 Amazonの商品紹介の背景画像もRetinaディスプレイに対応しました。ヘッダー部分の画像は2倍のサイズで作成し、background-sizeで縮小させています。細かいところですが「Amazon.co.jpで詳細を見る」ボタンも、Re
基礎から理解するためのCSS3に関するサイトのまとめ｜Webpark
CSS3はIEが対応できていないこともあって、今まであまり紹介してませんでしたが、使いこなせると面白そうなのでまとめてみました。 CSS3リファレンス 有名なサイトですね。CSS3に限らず、HTMLやJavaScriptなど膨大な情報量です。 CSS-EBLOG 各ブラウザで先行実装しているCSSプロパティがまとめられています。 CSS3 Files 【2010.4.25 追加】海外サイトですが非常に見やすいです。各ブラウザの対応状況の載っていて重宝します。 次にブラウザごとの対応状況を確認するサイトを紹介。 HTML5 & CSS3 READINESS HTML5とCSS3のブラウザごとの適応状況を視覚的に見ることができます。2008年からの年別でも見ることができます。 HTML5 & CSS3 Support こちらもブラウザごとの対応状況がまとめられています。CSS3はプロパティ、セ
枠線付きの吹き出し
ミニブログの隆盛以降ウェブ上でよく見かける吹き出しを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;
FBMLアプリではインラインCSSに「-webkit-border-radius」を記述しても無視される
先日、フェイスブックに「aquapple」のファンページを開設しましたが、そのときに一緒に勉強することになった言語に「FBML」があります。FBMLはHTMLをFacebookが独自に拡張した言語で、一般にも公開されておりFacebookのサイト外で使うことも可能です。 例えば、上記のファンページへのリンクボックスはFBMLで記述されており、そのコードは次のようになっています。 <fb:like-box href="http://www.facebook.com/aquapple.fb" width="292" show_faces="true" stream="false" header="true"></fb:like-box>もちろん、FBMLはHTMLタグの多くが使用でき、上記のような特殊なタグを覚えなくとも十分デザインを行うことが可能です。 で、本題。フェイスブックのファンページ
Lucky bag::blog: dt と dd を横並びのサンプル その1
最初に全称セレクタを使って全ての要素を margin: 0; padding :0; line-height: 1.6; としている。 デフォルトの状態 定義用語 定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。 定義用語 定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。 case:1 float を使った方法 定義用語 定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。 定義用語 定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。定義用語の説明。
Googleの新しい検索結果ページに採用された「ナビゲーションパネル」を非表示にするuserContent.cssを公開します | aquapple
Googleが2010年5月5日頃から本格的に検索結果のページをリニューアルしています。ネット上では賛否両論となっていますが、私はどちらかというと今回のリニューアルは改悪と考えています[1]。 特に左側に新設された「ナビゲーションパネル」が常時表示されているため、検索結果の1件目の表示領域が狭くなってしまい閲覧性が著しく低下していると考えています。 数日間静観していましたが、Google側で非表示にする選択肢が与えられませんでしたので、FirefoxのuserContent.cssを使ってスタイルを書き換えることにしました。このスタイルシートを使うとどうなるかというと… 改悪された検索結果ページが… こうなります。左側に常時されていたナビゲーションパネルが非表示になり、代わりにボタンを設置しています。このボタンにマウスを乗せると… 従来左側に表示されていたパネルが現れる仕組みです。 このス
Googleが検索結果のCSSを微妙に変更、userContent.cssを修正しました | aquapple
先々月のサーチウィキ機能導入に続き、今月もGoogleの検索結果が一部変更されています。 まずこちらが2009年5月、サーチウィキ導入直後の検索結果です。 そしてこちらが今日、同じ単語での検索結果。Googleのロゴマークが小さくなったほか、左側の余白が微妙に変化しています。 わかりやすく、2枚の画像を重ねてみました。これを見れば一目瞭然。代表的な変更点として、 Googleのロゴは縮小 ウェブの横に「＋検索ツールを表示」が追加 検索ボックス・ラジオボタン・検索ボタンはロゴ縮小に伴い、それぞれ大幅に左上へ移動 1件目の検索結果は左へ2ピクセル、上へ6ピクセル移動 などがあげられます。 前回は太字の部分が反対に下に押し下げられており、たまらずuserContent.cssを公開したわけですが、今回は逆にロゴが縮小されたため、かなり好印象。 しかし、「＋検索ツールを表示」のように余計な機能が追
WordPressに移行しました | aquapple
約4年半お世話になったレンタルブログサービス「JUGEM」に別れを告げ、CMSにWordPressを採用しました[1]。 過去の全ての記事を引き継ぎつつ同時にリデザインを行ったので、以下、以前のサイトからの変更点をつらつら。 CSSブラッシュアップに伴い、本文中のHTMLタグを削減しました これまで、本文はPタグで囲っていましたが、このPタグの余白を0としていたため、実際には改行を多用していました。 このため、CSSを解釈できないRSSリーダで見たときに余白が非常に多くなり、無駄になっていました。 今回、CSSでPタグの余白を調整したことにより、PタグとPタグの間の改行を取り除きました。これにより、本文中のHTMLを約2割削減しました。 リキッドレイアウトを調整しました 2008年8月より、このサイトはリキッドレイアウトを採用してきましたが、フッタの位置調整がうまくいかず、左右のサイドバー
NHKオンラインがリニューアル | aquapple
NHKオンラインがリニューアル 2009/03/17 15:40 NHKオンラインがリニューアルしました。主な変更点はリニューアルのポイント！から、過去のNHKのサイトデザインはNHKオンライン 「ヒストリー」 1995-2008から見ることが出来ます。 1995年のサイト開設からほぼ毎年リニューアルされており、今回が10回目になります。 驚いたのがそのソース。 実はコンテンツのほとんどはリストタグでくくられており、これらが14個の外部CSSによってレイアウトされています。リストタグと言えば、 リスト1リスト2リスト3 の様に、項目を羅列する際に使用したり、CSSと組み合わせてメニュー部分を構成するのに使う程度だと思っていましたが、ここまでも大胆にリストタグでサイトを構成するのは初めて見ました。 見た目もコーディングも美しいサイトリニューアルと言えるのではないでしょうか。 Tweet
IE6で閲覧すると砂嵐が表示される | aquapple (archives)
IE6で閲覧すると砂嵐が表示される 2008/12/17 18:12 IE6で閲覧すると右上に「アナログ」と表示されるネタがtwitterで出たので、乗っかってみます。 用意するのは砂嵐(アナログテレビで放送していないチャンネルをまわすとザーって出るやつ)の画像。Googleで「素材 砂嵐」と検索するとたくさん出てきます。それを自分のサーバにアップロードしてから、次のCSSを追加。 * html * { color: #000 !important; background: url('砂嵐画像のURL') !important; } * html img { display: none !important; } 最初のセレクタは「全ての文字を黒色に塗りつぶし、背景を砂嵐の画像で埋め尽くす」で、次のセレクタは「画像は非表示に」する仕掛け。 それぞれスターハックを用いているので、「Win版I
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Googleが検索結果ページの余白を広めに調整、ヘッダー周りを元に戻すuserContent.cssを公開します | aquapple (archives)
App Storeの10億ダウンロードカウンタがかっこいい | aquapple (archives)
ブログのデザインをブラッシュアップしました | aquapple (archives)
ブックマークツールバーからテキストを消してFaviconのみにする方法 | aquapple (archives)
フッターの表示がFirefox 2と3で違う？ | aquapple (archives)
新しいはてなブックマーク、デザイン面で制限が | aquapple (archives)
はてなブックマークをカスタマイズ | aquapple (archives)
リデザイン終了。 | aquapple (archives)
リデザイン中 | aquapple (archives)
のび〜るのび〜るtextareaが伸びていく(IE 5.5/6) | aquapple (archives)