タグクラウドの必要性についての是非はここでは置いておいて、このアイテムのデザインって色々考えさせられますね。 Vicuna CMSでも真面目に対応しようと重いケツを上げましたので、とりあえずサンプルとなるCSSスタイルを色々と書いてみました。 表示例とCSSファイルを置いておきましたので、気に入った表示があったらどうぞ使って下さい。 2007.10/21 追記・編集 Tag Cloud 10,11,12で.level5のフォントサイズが.level4と同じになってたのを修正 応用編としてTag Cloud 13を追加 単純に該当する記事が多いタグが他より目立てばいいだけなので、大抵のスタイルは大小の区別で表示しているけど、それだけじゃちょっと味気ない気もするので サイズ 色 明暗 彩度 色彩 形 というところでタグの強弱をより強調してみました。 HTMLは以下のような要素とクラス名で作って
clearfixの決定版を作るについてコメントしたのですが、なぜか僕のTypeKeyが認証失敗になってしまい、がんばって書いた文章がお伝えできず、消すのももったいないからこっちに書きます。 こんにちは。 僕も以前、clearfixの記述について、なぜあんなに複雑なのか疑問に思いました。CASE10の記述がfloatのclearに必要な最低限の記述とし、ピリオドやvisibility,heightは必要無いんじゃないかとさまざまなブラウザーで検証したのですが、contentで何かを記述しないとボックスが生成されずに正常にクリアできないブラウザーがありました。そして、生成したボックスを消すために、visibilityやheight:0が必要になりました。 モダンブラウザの中でも特にモダン（笑）なものに限ればCASE10だけで大丈夫のようです。ただやはりこういったものは出来るだけ多くのブラウザで
WEBサイトを製作する際には、サイトの情報量からレイアウトをまず先に考えることは多いと思いますが、大きなくくりとして2カラムか3カラムか、また、固定幅か可変幅かを決めなければなりません。企業系サイトでは不思議と2カラム固定幅が多い気がするのですが、固定ならば何ピクセルの固定にするか考えることになります。800px以下か、それ以上か。あー大変。 このまえ作ったテンプレートのスキンでも、レイアウトに関する要望にできるだけ答えるべく、固定・可変の変更や実用的なカラムパターンを一通り組めるように作ったのですが、どれが一番人気なんでしょうね。わかりませんですはい！ 一度MixiのCSSコミュにでもアンケートを放り投げようかと考えていたのですが、caramel*vanillaさんとこでレイアウトに関するアンケートが出てきたので、あーそれじゃあ出来るだけ多くの人に答えてもらいたいなと3ping.orgか
先日の記事で宣伝させていただいたMovable Type用のテンプレートmt.Vicunaですが、そこで同テンプレートを他のCMSツールへ移植してくださる方を募集したところ、以下の方がご協力して下さることに決まりました。 WordPress ma38suさん ma38su.sourceforge.jp Serene Bach Milliさん Riszw Nucleus 輝竜司さん MercuriusLAB 移植作業を完全に丸投げしての勝手な募集だったにも関わらず、mt.Vicunaの設計・思想に賛同していただいたうえで、こんなにもはやくそれぞれのCMSツールでVicunaが作り変えがはじまるとは思ってもみませんでした。手伝ってくださる方の貴重なお時間を移植作業に割いていただけるということで、本当に本当にありがたく思います。 配布サイトの製作、各ツールでの整合性の調整等、少し時間がかかりそ
ウェブ製作では、閲覧者の環境にないフォントを使用するときは画像として製作してimg要素で貼り付けたりCSSで背景画像として表示させたりすることがありますが、そういうテキストを含む画像を作るときにはFLASH8のFlashTypeで作ると通常のアンチエイリアスより綺麗にできちゃう。 FlashTypeっていうのは、WindowsXPに搭載された ClearTypeと同じ仕組みのアンチエイリアス技術で、液晶モニターでは特にその視認性が優れています。ClearTypeは日本語フォントには対応していませんが(Vistaの新日本語フォントのみ対応)、FlashTypeでは英字・日本語フォント全てに対応しており、カスタムアンチエイリアスパネルで細かく調整できます。 次の画像はPhotoshopで製作した通常のアンチエイリアスと、FlashTypeを比較したものです。 中間色ではそれほど変化はみられませ
1年ほど前からMAQUEというMovable Typeのテンプレートを配布しているのですが、利用者も増えて色々とフィードバックをもらい続けていたので、それを活かして新しいものを作りました。βテストも終わって細部を修正して正式リリースしたのでMTユーザーやMTに興味ある方はみてください。そして、それで実践したCSSファイルのモジュール化による管理方法とカスタマイズ方法について解説します。MTユーザーでない方もローカルで確認できるパッケージがあるのでよかったらいじくってみてくださいね。 Movable Type テンプレート mt.vicuna Movable Typeのデフォルトソースを1から書き直し、シンプルで軽量、XHTML1.0 Strict DTD準拠です。基本的には1つのテンプレートソースに対して好みのスキンをあてこむ形で色々なデザインのウェブログが作れるようになっています。ごちゃ
(Amazonから買えるようになったもようです) 九天社より出版される「実践 Web Standards Design - Web 標準の基本と CSS レイアウト &Tips」の執筆をさせていただき、まもなく発売となるので宣伝させてください。 本書籍はhxxk.jpの真琴さん、lucky bag blogのe-luckさんとの共著で、それぞれが連携しながら得意なパートを担当して書き上げました。大まかな構成は次のようになっています。(詳細なアウトラインは記事下部にあります) XHTML, CSSの基礎知識と管理方法 レイアウト編 Tips&Tecnique ずっと作りたかった構成ができた! CSSはまず『(X)HTMLありき』であり、(X)HTMLの正しい知識を覚えた上で学ぶものです。そこで、まずレイアウトや実線編となるまえに、Web Standardsの考え方や(X)HTMLの基本、プレ
この記事はMAQUE Movable Type テンプレートのカスタマイズTipsとして書いた記事ですが、Movable Typeに共通する内容なのでBazookaでエントリーを投稿する事にしました。 Movable Typeは、Menu部分の構成をテンプレートから自由にカスタマイズ出来るのですが、XHTMLの仕様に沿っていて、無駄なく、尚且つカスタマイズしやすい構成となると、ここで紹介するようなパターンに絞られてきます。 紹介するMovable TypeのMenu部分のソースは、 XHTML Strict DTDに準拠している 無駄な要素を作らない CSSによるデザインの柔軟性が高い CSSで、2カラム、3カラムのレイアウトが出来る という条件で構成しました。 Type1. 定義リスト DL Menu全てをdiv要素で包み、その子供に2つのdl要素があります。左のdlを#navigati
授業中、生徒は課題制作で忙しく僕は用無し。ってことで、○○○をXHTML+CSSで組みなおすシリーズ(?)第二段を勝手にこっそり作ってた。 なるべく皆が知ってるサイトで、コーディングが楽しそうなサイトを探してたのだけど、なかなか決まらず、結局、生徒のリクエストでhatenaのトップページを組みなおす事にしました。 hatenaは一部レイアウトにテーブルを使っているものの、基本はCSSでの段組がされているので、mixiを組みなおすような大きな軽量化は出来そうにない。なので、楽しみ方としては、いかに無駄なマークアップを減らしてシンプルなXHTMLで同じ見栄えを再現するかだ。 これがまた、パズルで遊んでいるときの感覚に似ていてとっても楽しい。近い将来、CSSで１つの要素に複数の背景画像がおけるようになったとき、このパズル感が失われてしまうと思うと残念でならない。(半分ホンキ) で、帰ってきて手直
mixiをXHTML+CSSで組みなおすで取り上げた生徒の提出した課題には、記事にも書いたとおり、まだいくつか改善できる点がありました。が、色々修正+αしたようで、再提出してもらいました。 前回提出したものと比べると、XHTMLが部分的に修正され、classの数が減っている。オーイェス。機能ごとにclassを与えて共通するスタイルをまとめることで、管理も編集も楽チンにする事が出来るんだ。 Comments:4 上場 2006年6月10日 23:34 力作ですね。そんな技術があってうらやましいです。 MUSCAT 2006年11月20日 07:23 感動しました。 参考に研究したのですが、小生のは拡大で破壊されました。 どか?んん！ wu 2006年11月23日 04:56 どか～ん！ 僕がレイアウトを組む際は、大小に+2ほどの拡大で可読が可能になるというラインで制作しています。 XHTM
授業内で、既存サイトをXHTML+CSSで組み直す練習をするのですが、生徒が提出したのが「mixi」を書き直したもので、とてもよく出来てました。 mixiはテーブルレイアウトで組まれていて、基本は3カラムだけど、もとがテーブルなだけあって、ヘッダーのメニューが少し複雑だったり、セクションごとのビジュアル的なデザインや、細かい文字の余白のとり方が難しい。 現在のCSSは「どんな見栄えも出来てしまう」とは言えない。本当は言いたいのだけど、実際にはブラウザーのバグを回避するためにバッドノウハウを駆使したり、CSSの限界から、見栄えとは切り離すべきXHTML部分を調整しなくては再現できない見栄えがある。 けど、生徒の提出したものは、見栄えのためだけのdivも無ければ、ヴァリデーターだけを100点で通過するような機械騙しのXHTMLでもない。(一部、リストとしてマークアップできるところはある) もち
僕は専門学校でWEBデザイナーコースの授業を週19コマ受け持っているのですが、２年生のこの時期には毎年決まって出す課題があります。 それは、既存サイトをXHTMLとCSSで組み直すというもので、自分で選んだサイトを見て、見出しのアウトラインを見つけ、デザインのパターンからclassを作り、出来る限りシンプルなXHTMLで文書で、可能な限りCSSでビジュアルを実物と近づけるというものです。 本当、この時期就職活動のための作品も残さなくてはいけないから、時間も貴重なのだけど、出来るだけ多くのサイトを、習ったとおりに作り直して欲しい。これは本当にスキルアップする課題だと思うから。 他人がレイアウトしたものを再現する過程では、自分が考えたものを再現するのとは、逆の順序を辿って考えなければいけない。 まず、見出しのLVを読み取り、アウトラインを作るには、そのページの文章を読み取って理解しなければいけ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く