意外と目に優しい配色じゃないかなぁ～と自分では思っていたりもするので、一覧でまとめてみます。
逆に少しコントラストが薄くて見えにくい部分があるかもしれません。
これくらいですね。
16進コードばかりを並べられてもよく分かりませんが、モノクロほど明確なコントラストは作っていません。
やっぱり、ちょっと薄すぎるかな…
リンクをクリックしたときに横に伸びる点線を消す方法（Firefox） - IDEA*IDEA
FirefoxだとCSSで文字を画面外に追いやって、画像を配置している場合リンクだったらクリックした時に元の文字がある部分まで点線が表示されちゃいます。
上の画像みたいな感じです。
それを消すのにはa要素に
overflow:hidden;
outline:none;
を使うそうです。
しかし、確かにマウスでクリックした時に点線が表示されなくなりますが、同時にTabキーを押してフォーカスを合わせた時にも点線が表示されなくなり、どこにいるのか分からなくなるという事態になります。
もちろんきちんとフォーカスが当たっている場合は画像を変化させるなどの対応が必要です。a:hover要素がある場合はa:focusを指定してやるなどの対策です。
元々文字を追いやって画像を表示させるCSSのテクニックは最近では「ちょっとどうなの?」というテクニックです。
何かしらの事情があって画像が表示されていない場合、利用者にきちんと情報が伝わらない事が考えられるから。
どうして自分は画像置換のテクニックを使っているかだって?
これは1度作ると楽なんですよね;p
点線を非表示にするくらいなら、別の方法を用いた方が良いかもしれません。
バグって言うほどでもないですが、JavaScriptが正しく処理されていません。
ちなみにバージョンは2.0.157.2です。いわゆる開発版
他のブラウザだとちゃんと交互に色がついているんですが…
最初にCSSを用いている時は問題が無かったんですが、JavaScript(jQuery)に切り替えてから上の様になってしまいました。
何が問題なんでしょうか?
ちなみにjQueryに切り替えた理由は、CSSだとIEなど対応していないブラウザだと残念なことになっているので…
今のところ自分が感じているバグかなと思うところはこんな所でしょうか。
結構Chromeはバックエンドで勝手にアップデートされることがあるので、気がついたら直ってたなんてことを期待しています。
根本的にJavaScriptの書き方が悪いなんて事だったら;p
Transcending CSS: The Fine Art of Web Design on Flickr - Photo Sharing!
要するに綺麗なって所が問題なわけです。
面白いのはweb屋が主張する「リキッドレイアウト」に騙されないためにと言う記事。
注意して欲しいのは、自分も最初考えてしまったのですが「Web屋のネタ帳」というBlogをしている人が書いているだけであって、「Web屋」が言っていることではないようです。
でも、BlogにWeb屋という言葉をつけているんですからWeb屋さんを代表して意見を言っているのかも知れません。
じゃなくて、Webのリキッドレイアウトにしないのは勿体ない! と言う話に対して反論? しています。
リキッドレイアウトは反対と言えば反対派ですね。
無駄にディスプレイが大きいと横に広がりすぎて読みにくいったらありゃしない。
あと、min-widthなどのプロパティを使って居らず、小さい画面の時にサイドバーしか表示されないようなコンテンツのサイトもありますが…
確かにこのあたりは観覧するユーザーが自由に選べるのがベストなのかも知れません。
このBlogも横幅960pxぐらいですが、最近の主流が1280pxの横幅を持っているので安心していましたが、よくよく考えるとVistaはサイドバーが標準ででてるんですよね。
その環境でWebブラウザのサイドバーを出されたらコンテンツの領域が960px以下になってしまい、横スクロールしていただかないと観覧出来ないと言った情けない事態になってしまいかねません。
ただ、多くの「Web屋」は固定幅を勧めると思います。
なんせ作り易いですからね;p
そろそろリニューアルのシーズンかなぁ～
なんて考えちゃいます;p
バレンタインまであと1ヶ月ですし、もうちょっとビターチョコレートなデザインにしても良いかもしれません。
このBlogでも行っているラベル（タグ）を2列で並べていますが、それを簡単に行う方法です。
基本CSSです。
テンプレートその物を修正するので、バックアップは忘れずに。
まずテンプレートの部分
ウィジットのテンプレートを展開 のチェックを入れます。
<b:widget id='Label1' locked='false' title='ラベル' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
この部分を探し出します。
この中の<ul>の部分に
<ul id="tags">
id="tags" を追加します。
これともう1点。
<span dir='ltr'>(<data:label.count/>)</span>
を削除します。
その代わりに <data:label.name/> の後ろに
<data:label.name/> (<data:label.count/>)
(<data:label.count/>)を追加します。これはそのラベル（タグ）に関連している記事の総数を表示するものです。必要が無い場合は追加しなくても問題ありません。
次にCSSです。
.sidebar #tags li {
float:left;
width:70px;
}
これをお使いのCSSに追加します。
これで、上の画像の様に2列で表示されます。
実際に以上の指定のみをしたサンプルはこちらです → カテゴリーサンプル
width:70px が指定されていますが、これはお使いのサイドバーの横幅に合わせて下さい。
itFun.jpではサイドバーの横幅が300pxなので、この部分では150pxを指定しています。
なお、今回のは本当に最低限度のサンプルになっています。
後はCSSでこのblogのようにマウスオーバー時の処理や、交互に色分けしたりなどの表現が可能です。
このBlogのCSSで良ければご自由にお使い下さい;p
Opera / Safari / Chrome でこの表現が可能です。
CSSの無限の可能性;p
ご不明な点がございましたら、コメントなどでご指摘下さい。
なんか英語圏のまとめ記事って、大体こんな感じのタイトルですよね;p
よく、日本のサイトでも海外のデザインサイトがまとめた25個の素晴らしいデザインのサイト! なんて事をパくって書いています。
でも、海外のサイトはフォントの問題とか、比較的日本語圏に比べると扱いやすいです。
…そこで、自分が知りたいのは 「日本語で書かれている素晴らしいBlogのデザイン!」です。
日本でも非常にハイクオリティなWebサイトは沢山あります。
しかし、自分が欲しいのはコンテンツをドンドン更新していく事が出来るBlogのデザインです。
Blogのデザインやインターフェイスの流れなどを勉強させて頂こうと、今回5つの素晴らしいデザインの日本語で更新されているBlogをピックアップしてみました。
かなり自分の好みや理想としているものを選んでいます。
BlogシステムにWordPressを使用。
モノクロの中に立体感があります。掲載している画像のカラーが際立ちます。
BlogシステムにWordPressを使用。
Macのインターフェイスのようなデザイン。Blogの記事1つ1つにも非常に時間をかけていることが分かります。
BlogシステムにMovable Typeを使用。
Web技術に関する記事も書かれています。横幅はこのサイズの方が読みやすいかも。
BlogシステムにWordPressを使用。
ユーザーインターフェースに関する記事を書かれています。非常に自然なグラデーションです。
BlogシステムにMovable Typeを使用。
規格外の横幅1000pxオーバーのデザインです。現在の配色はこのサイトを参考にしています。
今回は5つでしたが、恥ずかしいながら自分が知らない素晴らしい日本語のBlogサイトは沢山あると思います。
皆さんがご存じなサイトを紹介頂ければ嬉しいです。
IE6で見ると画面の右上にこんなのが表示させるそうです。
IE6で閲覧すると。｜CSS HappyLife
自分のBlogの観覧者は37%がIEシリーズで、その内37%がIE6です。
さらに改良したのはこちら
px*blog | 「IE6で閲覧すると」を使ってIE7にアップグレードうながしてみる
IE7へのダウンロードリンクも表示されています。
かなり強引なやり方ですが、これも
IE6で閲覧するとモノクロ - lucky bag
Windows IEのフィルター機能を使って強引に灰色にしています。
ちなみにきちんとした作り方で、IE6ユーザーを歓迎するサイトもあります。
説明不要なほど有名なStuff and Nonsense | Creative web site design specialists based in North Wales, UKです。
これはIE6がセレクタに対応していないことを使ったものです。
簡単な話<body>にIdをかませるやり方です。
自分のBlogでもやってみようかな;p
でも、これって…お節介?
IE6しか使えない環境にいる人にとっては、迷惑この上無いですよね。
Livres XHTML et CSS on Flickr - Photo Sharing!
今日で3日目です。
デザイン等の一部修正を行いました
デザイン等の一部修正を行いました その2
たぶん今日が今までで一番変化があったと思います。
なんせカラーを小麦色に統一してみました。
是非ともsafariで見て欲しいです。
今回はCSSをかなりいじってみました。
safariで見るとそれぞれの記事の下にドロップシャドウが効いて、良い感じに立体感が…出ていると思いませんか?
これは-webkit-box-shadowを使用しました。
-webkit-box-shadow:0px 0px 3px #1B1310;
これの場合は、横軸に0ピクセル、縦軸に0ピクセル、ぼかし3ピクセル、色#1B1310 という指定になります。
PhotoShopやFireWorksを使った事ある人ならこの指定でも分かると思います。
現在の所サポートされているのがsafariだけとなっています。
（Opera はtext-shadowはサポートしていますが、box-shadowはまだのようです）
しかし、Firefox3.1でサポートが確実となっているので今後一般的になるのではないでしょうか。
使用してもサポートしていないブラウザで問題が発生するわけではないので、safariユーザーを歓迎してみてはいかがでしょうか;p
ちなみにFirefoxの場合は-moz-box-shadowという記法になります。
日付の表示をちょっとリッチにしてみました。
タイトルバーと被るようにしてみました。
やり方は単純でz-indexで日付部分を上にして、タイトルバーのをそのままマイナス・マージンで上に引っ張ってきているだけです。
CSSを見れば一発で分かります。
safariで見た時にリッチになるようにtext-shadowを付けた方が良いかな?
今回一番複雑だった点。
やりたいことは、「特定のリンクされているサイトの画像に対して、背景に背景画像を設定したい」という事なんです。
すでに、画像は<img>で指定していますし、その親にも特殊な設定をしているわけではありません。
これは困りましたが、今の形で落ち着きました。
まずはFlickrにリンクしてる画像を見つける方法ですが、CSSだけでも出来ちゃいました。
img[src*=".static.flickr.com/"]{
hogehoge
}
これで、<img>の中のsrcがFlickrのものをだけにhogehogeを適用することが出来ます。
CSSのセレクタというらしい…
ちなみにこの指定の方法ですが、
これ以外にもありますが、よく使いそうなものを選んでみました。
もちろんこれはimgタグ以外にも用いることが出来ます。
詳しくはCSS セレクタに関するおさらい | WWW WATCHで丁寧に解説されています。
使ってみると特定の要素を狙い撃ち出来るので、非常に便利です!
ただし、現状ではIE7から対応していると言うことですが、根強い人気のIE6はサポートしていません。
IE6では無視されますので、最初にこちらを作ってしまえば問題ないでしょう。
ただ、画像を無理矢理このような表示のさせ方をしていますので、過去記事のいくつかでは不具合が出る場合も考えられます。
見つけたら教えて頂けると嬉しいです;p
随分自分の納得のいくものになってきました。
最終的にはBloggerテンプレートとして配布できたらなぁ とか思っています。
昨日のautopagerize対応したので、この勢いを忘れないうちにもっと改造を!!
今日ポストが少ないのは朝からずっとこれにつきっきりだったからです;p
これまで目立たなかった、タグをページタイトルの真下に持ってきました。
ちなみにこのスタイルはどこかで見たことがある方もいらっしゃるかと思います。
実は…
Deliciousのデザインを参考にしてみました。
同じタグつながりと言うことで;p
Deliciousみたいにキレイに付けることが出来ず、なんとなくという結果になってしまったのが残念です。
もっと計画的にCSSは書くべきですよね。
B! ははてなブックマークへの追加です。
その隣の数字は、もしもブックマークされている場合そのユーザー数が表示されます。
これからも少しづつ手を加えていきたいと思います。
格好いいBlogデザインや、お薦めのBlogパーツなんかを教えて頂ければ嬉しいです;p
Syntax Error - Folded Up Beyond All Recognition on Flickr - Photo Sharing!
そういえば、このBlogの前のデザインの時に使っていましたね。
webkit-transform を使ってみた | itFun.jp
Appleは先日、CSS TransitionsとCSS Animationの2種類の仕様について提案。
CSS Transitionsは比較的単純なアニメーションが可能です。
拡大、縮小、回転など。変化にかかる時間を指定することが出来るので、アニメーションが発生します。
ただ、これは比較的簡単にCSSに書き込むだけで実現できますが、その代わりに読み込まれた順に開始されてそれらが終了したらそこでお終い。という高度なアニメーション効果を実現するには役不足です。
CSS AnimationはTransitionsを拡張する機能を定義しており、@keyframesという指定を行うことで、javascript側からCSS Transitionsを呼び出すことを可能にしています。
想定としてはデザイナーがCSS Transitionsを用いて、動きのある部分はAjax libraryでCSS Animationを使うという感じでしょうか。
ただ、Flashを用いないというのは良いですね。
Flashの利用を見ていると、ちょっとしたアニメーションのために使っているのが結構な割合を占めているのではないでしょうか。
それが、CSS Transitionsに変わればWebのローディング短縮にもなりますし、Flashの上からだと分かりにくいリンク先の表示や、なによりもマウスジェスチャーが使えるというのが:p
逆にFlashという共通な環境を用いないので、それぞれが別のエンジンでCSS Transitions等を実装した場合さらにデザイナー/デベロッパーの負荷が大きくなってしまうような気がします。
さらに、きちんと実装されていない（IEとかIEとかIEとか）ブラウザーに対しての動作確認も怠るわけにはいきません。
モバイル環境においても同じと思います。
第一ユーザーがWebその物がアニメーションする事に馴れていないんじゃ…
冗談でも良いから、WebKitを採用するって言ってよスティーブ！
なぜMicrosoftはIEにこだわるのか? | itFun.jp
via CSS TransitionsとCSS Animations、Apple提案のCSSアニメ機能| マイコミジャーナル
正直たまげた!
inside looking out » Blog Archive » Building CoverFlow for Safari on iPhone
もちろんiPhoneなのでFlashは利用できません。
ですので、javascriptとCSSによって実現されています。
safariのWebKitはCSSをかなり独自に先行実装していますので、なんとCSSを用いるだけで3D表現が可能です。
3Dのような表現も可能ですが、この場合は<canvas>を利用しているようです。
使用してみた感じは、まさにCoverFlow。変にFlashで実装したよりかはレスポンスが良いような気がしました:p
このデモはFlickrから動的に画像を取得し表示するというモノです。
CSS VFX Example - 3D Coverflow | Flickr
PCで見ても全然なにも起きませんが、iPhoneでみるとまか不思議!!
CSS-VFXなるモノがコアに使われているらしく、それはオープンソースで開発されています。修正BSDライセンスという一番緩いやつです。
Introduction - css-vfx - Google Code - Introduction to CSS Visual Effects
基本の説明記事もありますが、どうやってダウンロードするのか解らず…
そのうちiPhone系のBlogで解説されると思うので、そのときを待ちましょう:+
縦にしたときはちゃんとURLバーは隠れてくれますよ。
MacやFlashで実装しているのと違って、使い所が難しい気がします。
写真のギャラリーというのが無難ですが、やっぱり一捻りした使い方で「あっ!!」と言わせて欲しいです:p
The <hr>-Contest Results - Download your fresh <hr>-line now! | Graphics | Smashing Magazine
世界中から集まってクリエイティブな<hr />が一同に介すコンテストです。
そして、嬉しいことにそれら作品のソースファイルダウンロードすることが出来ます:P
PSDやAI、Fireworks Pngなどです。
たかが<hr />ですが、アイデア一つでここまで変わるのか…と思わせてくれます。
itfun.jpでは現在上のような区切りを使っています。
ちなみに<hr />を使用していないですが…
参考所か、今からまさに使える素材でいろいろい試してみたいと思います。
実際にSafari 3.1で見たところ
text-shadowはFirefox 3.1で対応要諦ですので時間が解決してくれますが、CSSで要素を回転してくれるプロパティはいつ対応になるのでしょうか。
今回、Webkitの独自実装のwebkit-transformを使ってみました。
webkit-transform はCSSを使ってコンテンツを回転・縮小・拡大などが出来るようになります。
それだけでなく、実はTweenみたいな簡単なエフェクトをつけることが出来ます!!
上のようにコンテンツを傾けるのは
-webkit-transform: rotate(-12deg);
このように指定しました。
text-shadowも問題なく適用されています。
今回は基点を中央にしたため特に指定はしていません（デフォルトが中心）
主なプロパティは
他にもあるけど、簡単に使えそうなのはこれ。
アニメーションの指定
-webkit-transition: all 1s ease-in-out;
まず、親要素にこれを指定しておく。（親じゃなくても良いかも）
あとは上に書いてあるCSSを:hoverにでも仕込んでおけば、マウスオーバーしたときに1秒かけて上の条件になるようにアニメーションします。
マウスアウトしたときも、元に戻るアニメーションがあります。
詳しくはこのサイトにSafari3.1でアクセス!
Safari3.1はCSSアニメーション付き。 [css,safari] - BlurBlue-Note
もちろん同じWebkitを採用しているGoogle Chromeでもアニメーションさせることが出来ます。
ただし、アンチエイリアシングの処理が汚いので…
問題はWebkitの普及率だけですが、使用していたとしても他のブラウザで表示が乱れるわけではないのでちょこっと仕込んでSafariユーザーを歓迎するのも良いかもしれません:P
NorthColour create websites and viral playthings for clients of all sizes.
非常に透明感のあるデザインです。
IE6でもちゃんと透明なデザインが適用されています。
なんのサイトがパッと見分からないですが…
このサイト自体は去年話題になったみたいです。
ウェーブの反射がこんなにもキレイなものだとは!!
透過部分の処理が参考になります。
Safariで表示した例 （Safari以外のブラウザはドロップシャドウが見られません）
aiAlexのサイトデザインのように 目に付くことをイメージしました。
かなり古くて少しばかり違いますが、これまでのデザインはこちら
右下の変な生き物はなんだ!?
お気づきになりにくいかと思いますが、唾を飛ばすほどサイト名を力説しています:p
やっぱりCSS3のドロップシャドウがないと何とも味気ない感じになっちゃいますね。firefox3.1では採用される見通しなので、期待が出来そうです。
ただ、あくまでも自分の環境でしか確かめていないので、もしかするとブラウザによってはずれたり表示されなかったするかもしれません。
そのときは教えていただけると幸いです。
これまで使用していたYouTubeのやつは広告の一部である以上作業用BGM（動画を見るだけだと料金は加算されません）に推薦することも出来ず、なんだかいつ見ても同じでしたので、廃止しました。
ただ、表示部分を余らせている感じなので、もしかしたら面白いコンテンツを組み込むかもしれません。
かっこいいサイトを参考にしていきたいです。
何はなくとも
こいつの名前募集です:-P
はなみち舎 ― 岡山市のレトロモダンな雑貨・和風ファッションのお店
正直すごいです。
ナビゲーション部分はスクロールに合わせて付いてくるFlashです。風鈴という演出で、クリックする度にどことなく風鈴の音が聞こえてきます。
サイトの内部には至る所に動的なコンテンツを組み込んでいます。Flashを使用しているのですが、これがCssデザイン部分とキレイに溶け込んでいるので、違和感がないです。
圧倒的なセンスです。
Web Designingは訳の分からない海外サイトじゃなくて、こういった日本のサイトを特集して欲しい。
2月に現在のデザインに変更しましたが、そのときから分かっていつつも修正しないでいた 超巨大 なバグをやっと修正しました。
バグが発生するのはIEでblockquoteタグの入った後にきちんと解除されないというバグです。
なんだかすごい斜めな格好いい感じなんですが、はみ出し部分は表示されないのでこれでは困る。
そして、たった今修正してIEでもfirefoxなどのブラウザで見るようにきちんと表示されるようになりました。
もともと使用していたCSS
.post blockquote {
background: 略;
border-left:4px solid #C1BBAA;
line-height:2;
margin:20px;
padding:5px;
}
IEでborderとpaddingを同時にblockquoteタグに適用した場合に発生するバグみたいです。
革命の日々！ ＩＥはborderとpaddingを同時に使ってはダメ
* cuteblog * blockquoteを使うと不具合が
回避方法は非常に単純でborderを全部していしてしまえば良いのです!!
と言うことで、修正したCSSは
.post blockquote {
background: 略;
border-left:4px solid #C1BBAA;
border-top: 1px solid #F7F4EA;
border-right: 1px solid #F7F4EA;
border-bottom: 1px solid #F7F4EA;
line-height:2;
margin:20px;
padding:5px;
}
としました。
これまではleftしか指定していませんでしたが、top/right/bottomも要素追加しました。
背景の色と同じにすることで違和感なく追加できたと思います。
最後にこれまでIEで見て下さった方、本当に申し訳ありません。
音声認識技術で議事録を簡単作成――NECがソフトの新版提供 - ITmedia エンタープライズ
http://www.itmedia.co.jp/enterprise/articles/0804/22/news024.html
議事録が出来るくらいだから、普通の人の会話程度ならもうテキスト化が出来ているんだと思う。
ないかな。そういうフリーソフト。
ICレコーダーに独り言吹き込んで、それをテキストに起して投稿みたいな。
GIGAZINEを支えるサーバ「IBM System x3200」フォト＆ムービーレビュー - GIGAZINE
http://gigazine.net/index.php?/news/comments/20080422_ibm_system_x3200/
普段見ることのないサーバ
SANYOブランドのフルスライドKCP＋端末「W61SA」の予価、3万円台の前半 - ITmedia +D モバイル
http://plusd.itmedia.co.jp/mobile/articles/0804/22/news086.html
3万円ですか。w54saよりもはるかに高い。
でも、今のauならQVGA程度で十分と言うことが分かったので、ちょっと惹かれていたりもするんですよ。
ワコム、Windows画面上に手書きで書き込みできるソフトの無償提供を開始 | クリエイティブ | マイコミジャーナル
http://journal.mycom.co.jp/news/2008/04/22/061/index.html
ペンタブを買った時用。
[CSS]スタイルシートの記述簡略化のチートシート | コリス
http://coliss.com/articles/build-websites/operation/css/1023.html
CSSの簡略化
ふとしたときに思い出せないので。
ちなみに↑→↓←の順番に数値は指定してきます。
いままで、何となく分かっていたような言葉「サンドボックス」の意味は
サンドボックス（sandbox）とは、外部から受け取ったプログラムを保護された領域で動作させることによってシステムが不正に操作されるのを防ぐセキュリティモデルのこと。
実行されるプログラムは保護された領域に入り、ほかのプログラムやデータなどを操作できない状態にされて動作するため、プログラムが暴走したりウイルスを動作させようとしてもシステムに影響が及ばないようになっている。
VMとかそういった物だそうです。
総務省がWeb2.0にかぶれた。
ただ、ご利用方法のリンクでPDFを使うのは正気の沙汰じゃねぇ
本を立ち読みした。
色々考えて、メモ帳を買った。
メモをつけられる癖をつけようと思う。
一気にIE8が他のブラウザよりも先進的なものに見えてきました:P
ダウンロードは下記のページから
Internet Explorer 8 Readiness Toolkit
http://www.microsoft.com/windows/products/winfamily/ie/ie8/readiness/Install.htm
機能一覧は
【詳報】セマンティックWebに向かうIE8の「8つの強化点」：ITpro
http://itpro.nikkeibp.co.jp/article/NEWS/20080306/295541/
CSS2.1を完璧に対応できている点はすばらしいでのすが、今度はこれまでの駄目だったツケを誰が払うことになるんでしょうか?
IE7エミュレートなんてそれなりの知識のあるユーザはそもそもIEを使用していないと思いますが…
あと、Microformatsを最大シェアを誇るWindowsに標準で搭載されるようになるというのは無視できなことです。
ただここでも、WebSlices仕様を作り出したこと。でも、便利そう。
ただ、シェアが大きいだけにこれら機能でもいろいろと揉めそうな気がします。
