3.5ping.org

Zen-Codingで楽々コーディング! + コツ1つ

2010-02-23T09:16:13Z

話題のHTMLやCSSコーディングあしすとツールのzen-codingを触ってみました。すごい楽ちんこ!

zen-codingって何？使い方は？という人は以下のページを見てくださいね。

ある程度HTML/CSSのコーディングに慣れた人なら、ビジュアルデザインを含んだ文書があれば、それをもとに脳内でHTML構造に置き換えられますよね。デザインから興す人は、Photoshopを触りながら、同時に頭の中でHTMLを組み立ててる人も多いんじゃないでしょうか。

たいていの文書は、小さなパターンと大きなパターンの繰り返しだし、コンテンツに関しての試行錯誤はあっても、HTMLの記述で試行錯誤するってことは少ないですよね。(CSSのブラウザの実装の関係とかこの際忘れよう)

だから、HTMLの設計は楽しんでも打ち込む作業はできれば飛ばしたい。だいたいさ、HTMLなんてほとんど<と>ばっかりだし、薬指とか小指とか、ブラインドタッチのウィークポイントを狙ったような書式になってるってのが、なーんか、何となく、ま、別にいいか。

たぶん、zen-codingを少し使ったら、普通にタグ打つの絶対いやんなると思うから、みんなとっとと触ろう。色々なソフトに対応しているよ。

ちょっとしたコツ

zen-codingを使い始めれば自ずと、どんなに複雑な脳内HTMLでも、それを1行で、そして1発でエディター画面に出力させようと魂を燃やし始めます。

みんなの反応を見ていると、「凄い！革命的だ！でも、ちょっと思ったように書けない時がある」と、変な動作をしてると感じる人がいるようです。触ってみて、なんとなーくそのシチュエーションの予想がついたので、ちょっとしたコツを書いてみあす。

zen-codingの基本的な使い方は、前述したサイトを見てください。

まずは簡単なの

以下のHTMLの場合は、

<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>

zen+codingのルールでは以下のように記述します。

#header+#content+#footer

+で兄弟要素を追加しています。+は、CSSの兄弟セレクタ (E + E)と似たルールで、超近未来にはCSSで当たり前に利用するものになるし、きっとCSSの選択肢のルールに沿ってzen+codingも拡張されると思うから、良く分からない人は調べちゃおう!

最初つまづきそうなとこ

次は、div#header内に子要素(h1)がある場合はどう書くか考えてみる

<div id="header">
 <h1></h1>
</div>
<div id="content"></div>
<div id="footer"></div>

単純に#headerの後に>h1を追加すると、

#header>h1+#content+#footer

h1以降の要素もdiv#headerの子要素という意味になり、div#headerが全てを包み込んでしまいます。

<div id="header">
 <h1></h1>
 <div id="content"></div>
 <div id="footer"></div>
</div>

こういう場合は()を使って階層を示せばいいようです。

(#header>h1)+#content+#footer

複雑な構造を1行で書くならこれがいいかも

「bodyの中に#header, #content, #footerのdivを作って、#contentの中にdiv.sectionが5こあって〜」みたいに、深くネスト(入れ子)した構造を1発で書く時は、大きな構造はあらかじめ()つきで書くとやりやすそうですね。

(#header)+(#content)+(#footer)

さらに中に記述する要素も、大きな親要素として君臨・発展しそうなものは、()付きで書いちゃう。(#mainと#utilitiesに注目)

(#header>h1)+(#content>(#main)+(#utilities))+(#footer>address)

これを1発で左から書くのは難しいだろうけど、各()の中を少しずつ追記するようなやり方なら、かなり複雑で巨大なHTMLでもいけそう！

Twitterに、1回発言するぐらいの文字数と時間で、Webページが1つ完成する!

(#header>h1)+(#content>(#main>h2+div#entry$.section*5>(h3>a)+div>p*3+ul+)+(#utilities))+(#footer>address)

出来た!と思ったらこれを ZEN! すると

情報結合開始。

<div id="header">
 <h1></h1>
</div>
<div id="content">
 <div id="main">
  <h2></h2>
  <div id="entry1" class="section">
   <h3><a href=""></a></h3>
   <div>
    <p></p>
    <p></p>
    <p></p>
    <ul>
     <li></li>
    </ul>
   </div>
  </div>
  <div id="entry2" class="section">
   <h3><a href=""></a></h3>
   <div>
    <p></p>
    <p></p>
    <p></p>
    <ul>
     <li></li>
    </ul>
   </div>
  </div>
  <div id="entry3" class="section">
   <h3><a href=""></a></h3>
   <div>
    <p></p>
    <p></p>
    <p></p>
    <ul>
     <li></li>
    </ul>
   </div>
  </div>
  <div id="entry4" class="section">
   <h3><a href=""></a></h3>
   <div>
    <p></p>
    <p></p>
    <p></p>
    <ul>
     <li></li>
    </ul>
   </div>
  </div>
  <div id="entry5" class="section">
   <h3><a href=""></a></h3>
   <div>
    <p></p>
    <p></p>
    <p></p>
    <ul>
     <li></li>
    </ul>
   </div>
  </div>
 </div>
 <div id="utilities"></div>
</div>
<div id="footer">
 <address></address>
</div>

一瞬でオワタわー。

...。

展開とCtrl+Zの「やり直し」を繰り返しながら、色々な構造を頭に描いてナゾナゾみたいに挑戦していくと覚えるまでが楽しいです!

以下の行をZEN!すると、Vicunaテンプレートの基本構造が情報結合されます!

(#header>(p.siteName>a)+p.description)+(#content>(#main>((p.topicPath+h1+(.section.entry#entry$*3>(h2>a)+(ul.info>li*2)+(div.textBody>p*3)+ul.reaction>(li.comment>a)+(li.trackback>a)))+p.topicPath)+(#utilities>(dl.navi>dt+dd)+(dl.others>dt+dd))+p.return>a)+(#footer>address)

そのうち配布するものがこれ1行だけになったら楽だなぁ... でもやだな！

コツ1つ　の　まとめ

左からツラツラ書いて1発1行で複雑な構造のHTMLを書く場合は、大きな要素を書くときに予め()で囲っておくと、後で親の兄弟要素を追加したくなったときに、わざわざカーソルで行を戻ったりしなくていいから、いいかも！　

本記事は、Zen-Coding 0.6.01を用いました。バージョンによっては対応していないスニペット・コマンドがあります。

HTML5 と CSS3 で死にたい

2009-08-14T12:52:57Z

CSS3の「変形・アニメーション関連」のプロパティは面白いですね。これらのプロパティの登場によって、CSSの持つ表現力が「どかーん」と拡大するように感じました。この記事では、WebKit Nightly Buildsでの表示を対象に、CSS3で新たに定義されたプロパティを色々と使ったサンプルを作ったので、それを紹介したいと思います。

Webkitのバージョンアップで音が同期されなくなっちゃったようです。表示も少しおかしい。動画を見てくださいね。

サンプルページは、CSS3のプロパティの練習として作っていたので、表示の対象はこれらのプロパティを先行実装しているWebKitエンジンのブラウザーの中でも、描写速度が激的に改善されている開発者向けのWebKit Nightly Buildsになります。 Safari4やGoogle Chromeでも見られますが、アニメーションはスムーズに再生されません。また、HTML5のaudio要素に対応していない場合は音が出力されないようです。負荷の高めなスタイルが当てられているため、スムーズな描写にはある程度のスペックが要求されます。

おそらく、描写に関しては、Safari,Google Chromeの次のメジャーアップデートでスムーズになると思います。( Nightly Buildsでは改善され続けているので)

みんなもCSS3のプロパティで遊んでみてもらえたらなーという願いもこめて、これを機会に WebKit ブラウザをインストールして観て下さい。

WibKit Nightly Buildsのダウンロード

HTML5 CSS3 DEMOっアニメーション

Windows OS向けの WebKit Nightly Builds だと、見え方がだいぶ違うようなので、純粋にCSS3のアニメーションでどんなことできるんだろって思っている人のために、動画にしてみましたみてください。動きはすべてCSS3でコントロールしています。

ぜひ、WebKitをいれて実際のページもみてくださいね。

サンプルページ: HTML5 CSS3 DEMOっアニメーション

わーるど・わいど・うヱっヴ : 序

2009-08-05T19:51:56Z

僕は以前、こんな妄想をしたことがあります。

ある時、宇宙人からメッセージが届いて、

「キミタチノコトヲ, シリタイ.
ヨッテ,ゲンダイノシンカカテイト,
シャカイコウゾウヲ,ワレワレニオシエヨ.
ナオ,ショシキハキミタチノ
ダイタスウガアツカエルコウゾウカゲンゴデ,
イイカンジニタノムヨ.
マ,スキニヤッテクレ.ピーガシャ」

世界中の科学者は慌てて会議し、宇宙人に返すメッセージの書式にHTMLを選択します。

ま、細かい事をすっ飛ばし、

あるとき、僕の Gmail　の受信箱に「政府からのお願い」という題で次のようなメールが届きます。

「前略、世界各国からあらゆる分野の博士を揃えた。HTMLの記述部分を、もっとも時間のあまってそうな君に頼みたい。これは極秘任務となるが、だからこそ、孤立した世界から出られていない君が必要なのだ。」

そんなこんなで、僕は科学者と協力して、地球上の全ての生物の進化過程を、DNA ゲノム情報としてHTMLでまとめるためのガイドラインを考える事になります。

細かい事をすっ飛ばし、

まとまってきた the_earth.html に対して、科学者の中から、

「こんな数字と記号の羅列で宇宙人わかるんスかねー？
俺でさえこれ見てもなんだか良くわかんないんスけど。ワロタ」

という意見が聞こえはじめ、その後、各国政府首脳陣を交えた会議の中、僕は次の発言をします。

「なんか、思ったんですけど、
形とか色とか、関係性っていうか、なんか、そういのも、
パっと見たときとかに、あ！ってわかったほうが、
うちらは、あ、宇宙人は、見やすいんじゃないかなぁって...」

巨大ホールの中に、沈黙とヒソヒソ話が充満してると感じた直後、どこからとパチパチという音が沸き始め、それは一瞬にして「うーたんキタコレ！」の大合唱へと変わります。

細かい事をすっ飛ばし、

学者達は、生物の外見的性質に関するゲノム配列を、すべてCSSのプロパティに置き換え、僕はその仕様書を利用しながら、これまでに作った the_earth.hmtl　をブラウザで何千回も「プレビュー」して、現代の生物の姿に出来るだけ近付くようにCSSのコーディングを進めます。

滝の流れのように、上から値を伝播する、という、CSSの単純で固いルールは、DNAの改変よって変化してきた生物の表面的性質と完全にマッチし、神様の考えたデザインを模写させてもらう感激に包まれながら、僕たちのチームは遂に、 the_earth.html とその視覚情報を示した optical.css を完成させ、2つのデータを宇宙人に送信します。

細かい事をすっ飛ばし、

その後、宇宙人から送られてきた返信はこうだった。

「もしもし? 地球さん？宇宙人ですけど、
あのですね、これじゃ、全然意味がわかりませんよ。
はぁ.. そもそもですよ、the_earth.html　ってなんですかこれ。
全く Earth　についての情報が伝わってきません。
私達は「構造化言語」で頼むといったんです。これじゃアバウト過ぎますよおたくさん。
optical.cssについてもですね、
まぁ、地球人の親切心でしょうから文句を言うつもりは御座いませんが、
私達は貴方達のように視覚情報だけを頼りに生活してるわけじゃねーから(笑
ピーガシャ」

全体的にちょっと脚色したけど、こんなオチで僕の妄想は終わるのです。

この妄想は、今僕の頭の中にある「わーるど・わいど・うぇっぶ」　のイメージの背景として残っていて、今では、「めた・せまんてっく・ゆにばーす構想」となって電車の中で眠い時にたまに考えています。（すぐ寝れるから。

「めた・せまんてっく・ゆにばーす構想」とは

「人類が操作する bit」がテーマの、SFファンタジー推理アドベンチャー小説。

中盤で僕がビット・ドラゴンという情報生物に乗って銀河系を駆け巡る描写があるため、恥ずかしいので公開する予定はありません。

最後に

こんな長ったらしい文章をここまでちゃんと読んでくれた人は、僕が後に書こうと思っているエントリーも楽しく読めると思う(あ、やっぱ「そこそこ楽しく」)。そして、HTMLやCSSに興味のある人(特に仕事で扱ってる人)なら、そこになんらかのプラスになるものがあるような気がして、ほんとはそっちを読んでもらいたいと思っています。Web標準やセマンティック、再利用性をテーマにした話です。いつ書けるかわからないけど、またおつきあい下さいね。

CSSの実装状況で変わるボックスのデザイン方法

2009-08-01T03:59:14Z

Web制作において、対応しなくてはいけないブラウザの中には、未だしぶとくIE6が残っています。IE6が2001年に登場したことを考えると、もう8年もその時代の「縛り」を(健気に)守りながら作っていることになるんですね。

いま良く使われているCSSのテクニックも、ほとんどはこの「縛り」の範囲内で有効な手法なわけですから、突然2001年にタイムスリップしてサイトを作る事になったとしても、今も昔も変わらない１つの古文書に従えばいいので、きっと活躍できます。

しかしたまらん、流石に~~疲れた。~~飽きた

ボックスひとつができること

CSSでは、文書を構成する各要素は、ボックスという矩形領域に置きかえられ、それらの持つプロパティを操作して装飾します。つまり、ボックスはページデザインを構成する最小単位と言えるわけですね。

そこで今回は、最小単位となる1つのボックスに対して、どのような装飾手法が有効かという点を、CSSの実装状況を追いながら段階的に解説します。

サンプルのHTMLはすべて以下を使います。１要素、１ボックスですね。

<div>Box Design.</div>

その1. IE6を考慮したボックスデザイン

先にも書いた通り、IE６を考慮した現在の一般的なデザイン手法になります。

1つだけ置ける背景画像を工夫する事で、アイコンの表示やグラデーション、角丸をなどを表現できますが、背景画像のサイズは固定なことから、ボックスのサイズの伸縮などに対応できないデザインがあります。

ボックスのサイズに追従させることを考え、デザインは以下のようになりました。

サンプル

<div>Box Design.</div>

background-imageに　　をrepeat-xし、四辺のボーダーで立体感を出しています。地味だけど、1つのボックスに対してはだいたいこんなの感じの手法が精一杯なんですね。

その2. IE6を考えないボックスデザイン

透過PNG
:after, :before疑似要素
contentプロパティ

を利用したデザインが可能になります。

背景色 + 透過PNG

透過PNGを用いることで、背景色と組み合わせた装飾が出来ます。前のサンプルでは青いグラデーション画像を用意しましたが、白いグラデーションの透過PNGを用意すれば、背景色の指定だけで色々なグラデーションに対応できます。

サンプル

以下の透過PNG画像を作って適用してみました。色はbackground-colorで定義しています。

:after :before疑似要素, contentプロパティ

:after :before疑似要素とcontentプロパティを用いれば、１つのボックスの中にさらに2つのボックスを生成することができます。生成されたボックスは、通常のボックスとほぼ同じ感覚で装飾できますので、１つのボックスに予備のボックスが2つあるようなものなので、「あーここにあと１個ボックスがあればなー」なんていうパズルコーディングからだいぶ解放されるでしょう。

長くなりそうなので、細かい部分は別エントリーにすることにしました!

サンプル

これだけでだいぶ見違えてきましたね。

左のはcontentプロパティでアイコン画像を表示してさらに透過PNGをかぶせています。右下はcontentプロパティによって適当に文字を出しています。

その3. CSS3の新機能

さて、ここまではCSS Level 2の機能で、まともに実装してるモダンブラウザでなら有効な方法でした。ここからはCSS Level 3の新機能を使ってみます。とはいっても、この記事を書いている時点ではCSS3はまだ勧告されていないので、WebKitやFirefoxが独自に先行実装している以下のCSS3のプロパティを使ってみます。

text-shadow - テキストの影 (追記: ~~これはCSS2.1からありましたね~~ 2.1で撤廃され、CSS3で復活でした、重ね重ねすみません。hirasawaさん有り難うございます。)　
box-shadow - ボックスの影
border-radius - ボックスの角丸

サンプル

ずいぶんとかわいくなりました。今までこのような装飾をするには、複数のボックスを利用するか、アイコンや背景画像、角丸処理を１枚にした画像を固定サイズのボックスの背景として表示するしかありませんでした。上記のサンプルは内容量に追従したサイズを保持でき、さらに、それぞれのパラメータとパーツが分離していることで細部の変更が用意という特長があります。

CSS2では１つしか置けなかった背景画像は、CSS3でいきなり４つ置けるようになります。(こんな時間かかるなら小出しに2つ3つ置けるようにして欲しかったです！)　それに加え、ボーダーに画像を利用する事ができるので、考えられる平面のデザインはだいたい実現できるようになるでしょうね。さらにはその名の通りグラデーションを表現できるプロパティバリュー、色と透明度を指定できるRGBAプロパティバリューがあり、これらは値なので様々なプロパティに利用できます。

CSS3 アニメーションプロパティ

ウェブデザイナーは新たに「時間」という次元をコントロールできるようになります。

詳しい解説は別のエントリーでするとして、以下はマウスホバーでクルっと回りながらポワっと出てきてちょっとピカっとするアニメーションの記述です。

div:hover {
 background-color: #0092c3;
 -webkit-animation-name: kurutto;
 -webkit-animation-duration: 1s;
 -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
 -webkit-animation-iteration-count: 1;
}

@-webkit-keyframes kurutto {
  0% {
   background-color: #006f95;
   -webkit-transform: perspective(800) scale(0.9) rotateY(90deg);
  }
  50% {
   background-color: #3fc9ff;
   -webkit-transform: perspective(800) scale(0.9) rotateY(0deg);
  }
  100% {
   background-color: #0092c3;
   -webkit-transform: scale(1.0);
  }
}

画像では実際の動きを見せる事ができないのが残念ですが、WebKit Nightly Buildsをインストールすればサンプルページで少しだけアメーションを見る事ができます。

最後に

サンプルのHTMLはすべて <div>Box Design.</div>という単純なものですが、これだけやれることが違うんですね。

LimeChatのテーマ作成で遊ぶ、WebKitのCSS3

2009-07-31T17:08:25Z

iPhoneの購入と同時にWebKitを触り始めたのですが、CSS Level 2と3の一部の機能を、何の不安も無く使える製作過程に感動しました。ちょっと未来のテクニックを先取りして発見しちゃったような気分にもなりました。

(中略)

MacのLimeChatがWebKitを使っていて、CSSで自由にテーマを編集できることを思い出し、ひとつ実験的なものを作ってみました。:after, :beforeプロパティから、WebKitが独自に先攻実装しているCSS3のAnimation、Transition, Transformプロパティ、IE6がくたばれば使える透過PNGを使ったエフェクト、新たな色の値のRGBAプロパティバリューなど、CSSの記述も今まで馴染みの無い不思議な感じになってたりするので、興味のある方はテーマを使ってみて下さい。

Mac OSX LimeChat ver.1.0 用テーマ

Mac OS X 用の IRCクライアントLimeChatを手に入れる。

テーマファイルのダウンロード

Mac OSX LimeChat 1.0 用テーマ Vicutake.zip ver.0.8

適用方法

ダウンロードしたvicutake.zipを解凍すると以下のファイルが出てきます。

vicutakeフォルダ (アイコン等の画像ファイル)
vicutake.css (デザイン、アニメーション定義CSS)
vicutake.yaml (あんまいじくれない領域のデザイン定義)

LimeChatの環境設定(Preferences)からThemeタブを選択し、Open in Finderボタンを押すとテーマファイルの置き場所が開くので、そこに先に解凍して出てきたファイルを全部つっこんでください。その後、再度環境設定画面を開き直しCurrent theme項目から vicutake　を選択してください。

以下の画像のようになっていれば正常に適用されています。

画像ではわかりませんが、Joinイベントでは行がクルリと回ったり、キーワードがボインボイン脈打ったりと色々と愉快でうざいかもしれないアニメーションが指定してあります。動きも含めてすべてCSSで定義しているって思えないかもしれません。興味のある方は一時だけでも使ってみて下さいね。気分悪くなったらすぐにさっきのThemeタブから元に戻せますから安心してください。

ブラウザで表示を見る

テーマの作成は、Riszwとその仲間達に色々とアドバイスもらい、LimeChat for OSX のテーマを作ろうで公開しているテンプレートを元にCSSを書きました。ありがとごじます！

Safari 4であれば、以下のページでIRCのインターフェイスとほぼ同じ画面で確認することができます。また、アニメーションはWebKit Nightly Buildsでより奇麗に見られるようになっています。

WebKitで表示を見ると良い確認用ページ。Firefoxはまぁまぁだけど動かない、IE6,7でみちゃダメ！

今よりももっと細かく正確に、ビジュアルのデザインルールをCSSの記述ルールに置き換えられるコーディングができるようになると思うと、とってもわくわくしますね。CSS3のアニメーション関連のプロパティは面白かったので、他の便利なテクニックと合わせてここで紹介していく予定です。

では、また１年後ぐらいに。

目つむると上からタマが振ってくる　＠＠

2009-07-09T15:03:33Z

iPhoneの『Tap Tap Revenge 2』面白いね。

賢者タイムにプレイしたらなんかタマを手に取るようにタップできた。

そしたら世界ランキングにはいってた！！　しんじられない！　はずかしい！

いちお、やったー！

Arrow 無し - Hard - 『Double Down Under』

Optionの設定で In-Game Arrow をOFFにしないとランキングボードが違うようです。

追記

ここまできたら一位とりたいけど、電車の中で冷静な面持ちでやってるから、ついハイスコアいきそうになるとバシバシ音だして叩くようになってとても恥ずかしい。

俺才能あるみたいだから、指先とタイミングを生かしたウェブデザイナーになるわ...

【絶版】実践 Web Standards Design【再出版】

2008-08-31T16:17:50Z

出版社の破産宣告により絶版となってしまった「実践 Web Standards Design」ですが、半月ほど前から Amazon での売り上げランキングが急激に落ち始め、とうとう在庫も切れたようで、中古本が高値で売られているようです。欲しいけど買えないというメールもいくつか届いているので、なかなか複雑な気分です。デッドモノってやつですかこれは。

さすがにこんな値段で購入する方はいないと思いますが、11月頃には別の出版社から再出版される予定でおりますので、それまでしばらくお待ちくださるようお願いします。

現在、それに向けて校正ゲラを見ながら修正・加筆をしている段階です。

著作権や印税のことで突然弁護士事務所からお手紙や電話がきてびびったり、書いたことも見たこともない文書の署名に戸惑ったりとありましたが、なんとかまた世の中に送り届ける事ができそうなのでとても嬉しいです。

ヤッ＼(⌒∇⌒(⌒∇⌒(⌒∇⌒)⌒∇⌒)⌒∇⌒)／タァ

今日で夏休みも終わって明日から学校だけど、「せんせー教科書なくしちゃいました＾＾；」という生徒がいたら、Amazon のアカウントネームチェックして、それらしい人がいたら僕が中古を購入して生徒の指紋と書籍についた指紋を照合して、ついでにうちの犬に嗅がせて、吠えるかどうか試して、もし吠えたらデコピンです！！！。教科書は間違っても売らないように。(ノ◇≦。)

実践 Web Standards Design の再刊行のお知らせ

Web デザインに関するアンケート結果

2008-08-30T16:20:06Z

Web サイトの主にレイアウトに関するアンケートを行いました。

アンケートにご協力くださり、ありがとうございます。ブログや Twitter、Mixi 等でアンケートを紹介して下さった方々にも合わせてお礼申し上げます。ありがとうございます。おかげさまで思った以上に回答数が集まりました。

以下、アンケートの結果報告となります。(ちょと時間が無くて調整できていないので見辛いかもしれません。すいません。)

実施期間

2008.8/31～2008.9/3

回答数

544

主な掲載場所

Web デザイン・情報系ブログ
Mixi
Twitter

あなたの Web との関わり方を教えてください (複数回答可)

回答
選択肢	回答数	割合(%)
ほぼ閲覧のみ	63	12%
自分でサイト(ブログ)を公開している	407	75%
趣味での Web 製作者	241	45%
仕事での Web 製作者	233	43%
その他	9	2%

複数のチェックボックスを選択できるので、割合が 100% を超えることがあります。

閲覧時の好みのコンテンツ領域の幅を教えてください。(1つ選択)

回答
選択肢	回答数	割合(%)
600px 以下	28	5%
700 px	43	8%
800 px	218	40%
900 px	142	26%
1000 px	80	15%
1100 px 以上	33	6%

閲覧時の好みのレイアウトを教えてください。(1つ選択)

回答
選択肢	回答数	割合(%)
可変幅	209	39%
固定幅	274	51%
エラスティック	46	9%

閲覧時の好みのカラム(列)数を教えてください。(1つ選択)

回答
選択肢	回答数	割合(%)
1カラム	73	13%
2カラム	402	75%
3カラム	60	11%

公開している(またはしたい)コンテンツの内容を教えてください。(複数選択可)

回答
選択肢	回答数	割合(%)
自分の創作物	313	59%
自分の興味のある技術的情報	334	63%
なんらかのまとめ系	149	28%
自分の周りで起きた出来事などの日記	262	49%
時事ニュース	62	12%
人には話せない自分の考え	87	16%
その他	26	5%

複数のチェックボックスを選択できるので、割合が 100% を超えることがあります。

他のデータ形式

アンケート結果の xls ファイル

以下はアンケート結果のソート機能つき表示です。

表上部のプルダウンメニューから回答の絞込みができるので関連性を見るのに役立つでしょう。「でかい表示でみる」

以前 lomo (caramel-tea.com) さんが行われたカラム数のアンケート結果も参考になります。

[アンケート結果] 見やすいと感じるblogのレイアウト

ZenPhoto * Vicuna CMS

2008-06-25T15:59:51Z

Planting Field Web Log にて、 Vicuna CMS を ZenPhotoというアルバム構築ツールに移植したテンプレートが配付されています。

ZenPhoto+Vicuna

ZenPhoto は CMS ツールではありませんが、ブログとは別に、写真・画像管理用に利用し、1つのスキンを読み込んでデザインを統一したい場合など、オール Vicuna で構築できるようになりますね。

qozy さん、ありがとうございます！

/* 名称は zp.Vicuna でいいのかな...? */

Vicuna Adaptor

2008-06-18T09:59:19Z

wp.Vicuna Ext. は、ma38su さんが作られた wp.Vicuna のカスタマイズをより手軽にした拡張版ですが、先日それに対応する Vicuna Adaptor という wordPress プラグインがリリースされました。

wp.Vicuna Ext.の機能を拡張するためのプラグインです。テーマを頻繁にアップデートすると、カスタマイズされていたユーザの方にとっては大きな負担になっていましたが、プラグインの更新だけであれば、比較的簡単に行えるため、今後、テーマの更新による負担の軽減が期待できます。またプラグインで機能拡張に対応していくことで、必要な機能を取捨選択できるようになります。

対応している拡張機能 (2008.6/18)

はてなスター
はてなブックマーク
hatena-bookmark-anywhere.js / はてなブックマークコメントの表示
del.icio.usへの登録
フォントサイズの切り替え / Fontsize Switcher

wp.Vicuna Ext. を利用されている方はチェックですね!

Vicuna Adaptor

Vicuna カスタマイズサイト Part3

2008-06-08T05:37:54Z

Vicuna CMS ををカスタマイズして使用しているユーザーの中から「!?」となったものをピックアップ

Feedback ページで他にもたくさんの素敵なカスタマイズサイトを見ることができます。

FC2ブログ用 Vicuna スキン

FC2ブログはレンタルブログなので、Vicunaのスキンを構成するCSSファイルは他のCMSツールとは異なります。

そのため、Vicunaのスキンがfc2.Vicunaで使えるまでには大きなタイムラグがあったのですが、Vicunaユーザーのphiさんにご協力をお願いし、それまで対応していなかったスキンをすべてFC2ブログ用に作っていただき、さらに、配布を委託していただきました。

phi さん、ありがとうございます！

Black Vicuna
- スキン

fc.Vicuna のカスタマイズ方法や専用プラグインも解説して下さっているので、FC2ブログのユーザーさんは是非ごらんになってください。

HTML たん。

2008-04-21T22:08:26Z

生徒の作品がおもしろかったので、作者のとみじさんの許可をもらってキャラクターの絵と設定の文章だけ載せさせてもらいました。

HTML(ヒトミル)たん

HTML電子が具現化して生まれた少女。

まっすぐな性格で純粋無垢。しかし、常にネットワークに繋がっている為単純で、すぐ何かに影響されやすく、すべてにおいて騙されやすい。

そのせいか、具現化してから未だに内感性(コア)を完成させていない未完成の状態にある。

電子世界が人間界へ与える調査を終え、ワールドワイドに帰還する。

CSS(シース)

CSS電子が具現化して生まれた少女。HTMLたんとは従姉妹にあたる。

元々HTMLたんの無報告に心配になったtherdWからお目付役を命じられ人間界に送られてきたが、人間界のファッションやセンスに味をしめ、結局居座るようになってしまった。

心優しく温厚な性格だが、あと一押しが言えない引っ込みじあんな性格。

美的センスには人一倍うるさい

CG(シガ)

CG電子が具現化して生まれた少女。

HTMLたん一行が人間界へ調査している間Web界の調査をしていた一人、therdW直々の部下でもありmeta(メタ)とは同僚の仲である。

上品でセクシーな見た目とは裏腹に、意外と姉御肌で面倒見が良い。ヒトミルたんやシースを妹のように可愛がっている。

ぴーたぐ

HTMLの細胞電子から生み出された生命体。

一期ではシースの後に続いて送られてきた第2のお目付役だったが、ヒトミルたんの自由奔放な行動に振り回されるようになってしまった。

その上ぴーたぐが自分の細胞電子だと知るや否や今では立派なパシリ(お世話役)としてこき使われている。

Meta(メタ)

meta電子が具現化して生まれた少年。

ヒトミルたん達が調査に来る前から、人間界に潜入していたルーキー。therdW直属の部下の一人で、かなり秘密裏な仕事を任され、信用されている。

始めはヒトミルたん一行を毛嫌いしていたが、共に調査を進めるにつれ次第に打ち解けるようになる。だがヒトミルたんだけは未だ苦手で、目を合わせる事ができずにいる。それが一体何故なのか、本人はわかっていない。

therdW(サードウェブ)衆

ワールドワイドを見守る者。管理システムが具現化されたと思われる3人衆

仮面にそれぞれA(アルファ),B(ベータ),C(ガンマ)と記され、一期では人間界と自身を通して正式なコンタクトが出来る唯一の存在として明かされている。

内感性(コア)が元々無い彼らは、ログアウト後は殆ど無口になるのだが・・・？

セクシー Web Teacher

僕の受け持つ Web コースの授業では、1年次に HTML と CSS の基本を徹底的に教え、2年生にかけてひたすら既存サイトを HTML と CSS で再現する授業が続きます。2年生になってからはとにかく作品作り。文章を書くのが得意な人、絵を描くのが得意な人、1年次に覚えた知識を使い、自分の用意したコンテンツを人に伝えるための Web サイトを作っていきます。

みんなやりたいことは沢山あるとおもうけど、専門学校の2年間はとっても短くて、今みたいに毎日会える時間もあと残りわずかだから、１日１日大切にいこう！！！

僕のプロとして仕事をする知識や心構えは、日々の講義を通してしっかりと生徒達に伝わっていることでしょう。

凹○ ｺﾃｯ

はてブのコメントを好きな場所に表示する

2008-04-17T15:43:57Z

ブログを書いていると、はてなブックマークにいいコメントが付くことがあって、これが多くの人にみれないのは勿体ないなぁーと思うことがたまにあります。本当はブログのコメント欄に残してもらえるとうれしいのですが、敷居が高いのかなかなか書いてもらえません。

それなら、ブログにはてなブックマークのコメントを表示すればいい！と思って作ってみました。

これはいいですね！

僕は他人のページでも、必ず記事内容と合わせてはてブのブクマコメントを読んで消化・吸収の手助けとしてるので、これが色々なサイトに設置されてたら楽ちんでいいな。サイト管理者からしても、ブログにコメントがつかなくても、比較的書きやすいブクマコメントが出てきてくれてにぎやかでいいし、はてブとか知らない人も色々な人の意見を見られるからいいね！

ということで早速設置してみました。3ping.orgの他の記事を見てみてね。

mt.Vicuna for MT4 での設置方法

このような1つの機能は1つのテンプレートモジュールとしてまとめましょう。

MT4 の管理画面からデザイン → テンプレート → テンプレートモジュール画面へ進みます
「モジュールテンプレートを作成」、新規モジュールのタイトルを「はてブコメントの表示」とし、内容に hatena-bookmark-anywhere.js の読み込みと設定のスクリプトを記述します。(詳細は「ブログにはてブのコメントを表示するhatana_bookmark_anywhere.js」を参照してください。)
テンプレートモジュール画面に戻り、「コメント」テンプレートモジュールを開きます。

以下のように、2.で作成した「はてブコメントの表示」モジュールテンプレートをインクルードする記述を追加します。

<MTIfCommentsActive>
<div class="section" id="comments">
    <h2>Comments:<span class="count"><$MTEntryCommentCount$></span></h2>
    <$MTInclude module="コメント入力フォーム"$>
    <$MTInclude module="コメント詳細"$>
    <$MTInclude module="はてブコメントの表示"$>
</div>
</MTIfCommentsActive>

再構築して完了!

MT4 なら上記のような設置方法になるとおもいますが、利用テンプレートによってコメントモジュールテンプレートの内容が若干違いますので注意してください。

また、上記のサンプルではブログコメントの下に挿入していますが、エントリーの末尾でも目に入りやすくていいですね。

ブログにはてブのコメントを表示するhatana_bookmark_anywhere.js

スキンカスタマイズの手引き

2008-04-15T20:45:02Z

Vicuna CMS で用意してあるスキンの利用方法を解説します。

土台用スキンの特長

Vicuna CMS で配付しているスキンは、レイアウトや配色変更等のカスタマイズを簡単に行えるよう工夫しています。どのスキンも一般的なレイアウトパターンには対応しているので、カスタマイズのベースとするスキンは、以下に説明する各スキンの特徴を考慮して選択してください。

Origin Skin

もっともシンプルな形状のスキンで、 Vicuna のスキンは全てこの Origin スキンを土台に作られています。

コンテンツの領域と背景, メニュー領域と本文領域が色で区切られているスキンを作成する場合に土台として利用すると楽にカスタマイズできます。

画像を一切使っていないので、シンプルなデザインや、ポイントとなる画像をここから付け足していく場合にも、他のスキンよりも比較的楽に進められます。

Smart Canvas Skin

Origin スキンに、コンテンツ領域と背景のボーダー(左右6px)と、メニュー領域と本文領域のボーダー(1px) をつけたしたデザインです。

ボックスにボーダーを付けることで発生するIE6 でのずれを緩衝するための記述が各モジュールに書き足されています。

領域をボーダーで区切ったデザインを作る場合に利用してください。背景が黒ベースのものを作る時も、サブスキンモジュールセット(後述)に Galaxy というのを用意しているので、ここから付け足すと作りやすいと思います。

Ninja Skin

Smart Canvas から左右のボーダーを抜かし、ポイントとなる箇所に画像を使ったデザインです。

メニュー領域と本文領域は、Smart Canvas 同様、1pxのボーダーで区切られており、IE6 での処理が各モジュールに記述されています。

見てもらえばわかるとおり、各エントリーのコメント、トラックバックへのリンクや、メニューの項目、カレンダー、ページ送りリンク部分などに画像が使われています。これらの画像はサブスキン(後述)に定義してあるので、例えば同じ箇所の画像を自分の作ったものや famfamfam icons などを利用する際には、画像ファイルとリンクの変更だけで差し替えることができます。

Flat Skin

他のスキンがコンテンツ領域と背景を色で区切るのを想定して作られているのに対して、Flat Skin では一体となるデザインを作る土台向けに用意しました。

各要素(タグ)の左右の margin (余白) を 0 にしてグリッドを揃えているので、基本、余白だけで各領域を区別するデザインを作る時に向いています。逆に、Flat Skin から領域を色で区別するようなデザインに変更するのはとても難しいので、その場合は他のスキンを選択してください。

色やフォントで選ばない

配色やフォントの種類等はサブスキンという1枚の CSS ファイルにコメントつきで纏めています。この CSS ファイルは記述量こそ多いですが、全体に関わる定義から優先して記述してあるので、カスタマイズの度合いによっては、数行編集するだけで全体のイメージを変えられます。(後で例を解説します。)

Vicuna のスキンは、一見どれも似通っているのですが、このようにそれぞれに特長があり、構成する CSS ファイルの記述も違いますので、配色やフォント、レイアウトは自由に変更できるものと考えて、最終的にどのようなデザインにしたいかを考え、最も近い特長を持ったスキンを土台として選択してください。

モジュールセット

各スキンには、レイアウトの変更やカレンダー, 上部ナビゲーションを利用した場合に適用する CSS モジュールが複数付属しています。これらの定義は必要な場合にのみ、5-module.css からコメントアウトを解除して読み込む仕組みになっています。

配色の定義などをまとめたサブスキンは、モジュールの1つとして予め読み込まれた状態で配付しています。スキンによっては、サブスキンモジュールと、他のモジュールをまとめたサブスキンモジュールセットを配付しており、スキンフォルダ内の module フォルダの差し替えで適用することができます。

つまり、例えば Smart Canvas スキンであっても、その見栄えは同梱してあるデフォルトの module フォルダのサブスキンで定義してあり、スキンの特長はコアとなる CSS ファイルで定義してあるということです。(上記の画像でいうオレンジのCSSファイル)

Smart Canvas には、

の、サブスキンモジュールセットが用意してあるので、利用したい場合は style-smartCanvas/module を、ダウンロードしたサブスキンモジュールセットの module フォルダを入れ替えて使います。

ちなみに、カレンダーやグローバルナビのCSSモジュールを使わない場合は、module/mod_subSkin フォルダの差し替えだけで正常にサブスキンが適用されます。サブスキンによる配色の変更によって、カレンダーやグローバルナビのデザインも変更されることがあり、これらは必要ないときには読み込まれたくないのでこのような仕様になっています。基本、module フォルダの入れ替えでサブスキンを適用してください。

サブスキンの編集

module フォルダ内、 mod_subSkin/1-subSkin.css には、余白や配置以外の、配色やフォント表示の定義がまとめてあります。

Smart Canvas skin の 1-subSkin.css

この CSS 内の定義は、カスケーディングの流れで最後に位置するので、どんな場合でもそれまでの指定を上書きすることができます。(他のモジュールを利用する場合を除く)

定義は、デザイン上影響力のある箇所 (もっとも出現する要素)から、徐々に局所的な箇所へと順に書かれており、編集する値のほとんどは 16進数の色の定義になっています。編集するとレイアウトや表示がぶっこわれちゃうようなものはここには書かれてありませんので、CSSがよくわからないという人でも、ここである程度デザインを変更することができます。

定義されていない箇所を編集したい場合は、セレクタ (div#headerとか)が記述されているのならば、プロパティを追加し、定義されていない場合は HTML ファイルを見て新たに定義を追加記述する必要があります。

ローカルでの編集

このように、 Vicuna では、スキンは1つのフォルダにパッケージされ、各 CMS ツールはそれらをインポートする仕組みになっています。

ローカルでスキンを構成する CSS ファイルを編集し、FTP でアップロードして表示を確認するのは大変なので、Vicuna の HTML の構成とほぼ同じ HTML ファイルのセットを使い、ローカルで編集、確認したのち、出来上がったスキンをフォルダごとアップロードする方法をお勧めします。

Vicunaのスキンをローカルで編集・調整する方法

コア CSS

スキンはコアとなる以下の4つの CSS ファイルから構成されているので、CSS に詳しい人はこれらを直接編集することもできます。

1-element.css (各要素単独のデザイン)
2-class.css (特定の class を持った要素のデザイン)
3-context.css (文脈によって定義されている要素)
4-layout.css (主要レイアウト)

以下はこれらのコア CSS の定義方法なので、編集する方は参考にしてください。

分割CSSファイルの構成とそのルール

どのような規模のサイトでも対応できるように、また、僕自身がデザインの追加拡張や新しいスキンを作る際に楽なようにと、定義そのものが階層的に分かれていますので、とっつきにくいかもしれませんが、Vicuna のスキンはどれも同じ構成でほとんど記述順序も一緒なので、定義の構成さえ理解できれば割とスムーズに編集できるようになるかもしれませんし、ならないかもしれません。

実際のカスタマイズ手順

Vicuna のスキンをカスタマイズする際の一通りの手順を解説します。

CMS は設置してあるものとして、まずはローカルでスキンの編集を行うことにします。

Step1

ローカル編集用ファイルをダウンロードします。

styleTest.zip

上記ファイルをダウンロードし、解凍しておきます。

Step2

このページで解説した内容をふまえ、スキンページから土台用のスキンをダウンロードします。ここでは、Smart Canvas スキンの利用モジュールを Vega サブスキンモジュールセットに切り替えて土台とすることにします。

まず Smart Canvas Skin と Vega Sub skin module set の2つダウンロードして解凍し、Smart Canvas フォルダ内の module フォルダを、Vega を解凍して出てきた module フォルダと入れ替えます。

Step3

Step2 で出来上がった style-smartCanvas フォルダの中に、Step1 で用意しておいた styleTest　フォルダを入れ、styleTest フォルダ内にある index.html をブラウザで表示します。

このステップでの表示確認

正常に Vega サブスキンが適用されているのが確認できます。この段階では、カレンダーや上部ナビゲーションも表示しない、もっとも基本的な表示になります。

Step4

Vicuna のスキンは、デフォルトでは可変幅となっていますので、まずは、文字サイズによって幅の変わるエラスティックレイアウトに変更してみましょう。

style-smartCanvas/module/mod_subSkin/1-subSkin.css を開き、38行目付近にある以下の記述を編集します。

div#header,
div#content,
div#footer {
	width: 90%; /* (example: 50%~100%, 400px~1000px, 60em, etc. )*/
	min-width: 35em; /* 最小幅 */
	max-width: 70em; /* 最大幅 */
}

width: 90% を、width: 60em とすると、文字サイズによって幅の変更されるエラスティックレイアウトとなり、800pxで、px単位での固定幅になります。ここでは 60em としておきます。また、どのような幅でも全体は中央にくるように設定されていますので、もし左詰めなどに変更したい場合は、4-layout.css を編集してください。

このステップでの表示確認

Step5

Vega サブスキンはメインカラーが青色に設定されています。これを変更するだけでも、ずいぶんイメージを変えることができますので、ここでは濃いピンク色に変更してみます。

1-subSkin.css の 96行目から126行目までの色定義を変更します。

/*---------------
 Link Color
-----------------*/

a:link {
	color: #c50976;
}

a:visited {
	color: #b85376;
}

a:hover {
	color: #fd3d9e;
}

/*---------------
 Website Title
-----------------*/

div#header p.siteName {
	font-size: 138.5%;
	font-weight: bold;
}

div#header p.siteName a {
	color: #f00976;
}

div#header p.siteName a:hover {
	color: #ff4aad;
}

ヘッダーの背景色も変えてみましょう。 67行目付近にあります。

div#header {
	background-color: #111;
	border-bottom: 1px solid #eee;
}

完成!

編集した値の数は7個です。背景色や左右のボーダーの色も変更すればもっとイメージを変えられるでしょう。もちろん、このような編集を行った後も、3カラムやアイキャッチモジュールを利用できます。

モジュール利用時

アイキャッチに好みの画像を表示できれば、まただいぶイメージが変わりますね。

Vicuna では、ユーザーがカスタマイズしたブログを Feedback ページで募集しています。他のユーザーがどのようなカスタマイズをしているかも参考になるので、ぜひ見てくださいね。

Vicuna CMS

rNote * Vicuna CMS

2008-04-13T13:02:13Z

立て続けになりますが、za にて、 Vicuna CMS を rNote という Blog ツールに移植したテンプレートが配付されています。

rNote用のVicuna CMS skin

自分の好みや目的にあった機能を持つブログや CMS ツールを選択できるようなるって素敵ですね！

3.5ping.org

Zen-Codingで楽々コーディング! + コツ1つ

ちょっとしたコツ

まずは簡単なの

最初つまづきそうなとこ

単純に#headerの後に>h1を追加すると、

複雑な構造を1行で書くならこれがいいかも

Twitterに、1回発言するぐらいの文字数と時間で、Webページが1つ完成する!

コツ1つ の まとめ

HTML5 と CSS3 で 死にたい

HTML5 CSS3 DEMOっアニメーション

わーるど・わいど・うヱっヴ : 序

「めた・せまんてっく・ゆにばーす構想」 とは

最後に

CSSの実装状況で変わるボックスのデザイン方法

ボックスひとつができること

その1. IE6を考慮したボックスデザイン

サンプル

その2. IE6を考えないボックスデザイン

背景色 + 透過PNG

サンプル

:after :before疑似要素, contentプロパティ

サンプル

その3. CSS3の新機能

サンプル

CSS3 アニメーション プロパティ

最後に

LimeChatのテーマ作成で遊ぶ、WebKitのCSS3

Mac OSX LimeChat ver.1.0 用テーマ

テーマファイルのダウンロード

適用方法

ブラウザで表示を見る

目つむると上からタマが振ってくる ＠＠

追記

【絶版】実践 Web Standards Design【再出版】

Web デザインに関するアンケート結果

あなたの Web との関わり方を教えてください (複数回答可)

閲覧時の好みのコンテンツ領域の幅を教えてください。(1つ選択)

閲覧時の好みのレイアウトを教えてください。(1つ選択)

閲覧時の好みのカラム(列)数を教えてください。(1つ選択)

公開している(またはしたい)コンテンツの内容を教えてください。(複数選択可)

他のデータ形式

ZenPhoto * Vicuna CMS

Vicuna Adaptor

対応している拡張機能 (2008.6/18)

Vicuna カスタマイズサイト Part3

FC2ブログ用 Vicuna スキン

HTML たん。

HTML(ヒトミル)たん

CSS(シース)

CG(シガ)

ぴーたぐ

Meta(メタ)

therdW(サードウェブ)衆

セクシー Web Teacher

はてブのコメントを好きな場所に表示する

mt.Vicuna for MT4 での設置方法

スキンカスタマイズの手引き

土台用スキンの特長

Origin Skin

Smart Canvas Skin

Ninja Skin

Flat Skin

色やフォントで選ばない

モジュールセット

サブスキンの編集

ローカルでの編集

コア CSS

実際のカスタマイズ手順

Step1

Step2

Step3

Step4

Step5

rNote * Vicuna CMS

コツ1つ　の　まとめ

HTML5 と CSS3 で死にたい

「めた・せまんてっく・ゆにばーす構想」とは

CSS3 アニメーションプロパティ

目つむると上からタマが振ってくる　＠＠