MTで実践 - CSSのモジュール化による管理方法と遊び方 - 3ping.org
1年ほど前からMAQUEというMovable Typeのテンプレートを配布しているのですが、利用者も増えて色々とフィードバックをもらい続けていたので、それを活かして新しいものを作りました。βテストも終わって細部を修正して正式リリースしたのでMTユーザーやMTに興味ある方はみてください。そして、それで実践したCSSファイルのモジュール化による管理方法とカスタマイズ方法について解説します。MTユーザーでない方もローカルで確認できるパッケージがあるのでよかったらいじくってみてくださいね。 Movable Type テンプレート mt.vicuna Movable Typeのデフォルトソースを1から書き直し、シンプルで軽量、XHTML1.0 Strict DTD準拠です。基本的には1つのテンプレートソースに対して好みのスキンをあてこむ形で色々なデザインのウェブログが作れるようになっています。ごちゃ
Scrollable HTML table - webtoolkit.info
Scrollable HTML table JavaScript code can be used to convert tables in ordinary HTML into scrollable ones. No additional coding is necessary. Scrollable HTML table JavaScript code can be used to convert tables in ordinary HTML into scrollable ones. No additional coding is necessary. All you need to do is put header rows (if you need them) in THEAD section, table body rows in TBODY section, footer
ちょっとしたメモ - W3Cの新HTML作業部会
昨年10月のバーナーズ＝リーのびっくり発言から約4カ月を経て、W3Cに新しいHTML作業部会が設置された。HTML4とXHTML1をベースに、新しい(X)HTML仕様を2010年を目標に策定していく。従来のHTML作業部会はXHTML2作業部会という扱いになる（HTMLとは違う狙いなので、名前を変えることも検討しているそうだ。そりゃ大いに結構）。 Charter（設立趣意書）によれば、この新作業部会は次のものを策定していく。 HTML4を発展させた、ウェブの文書とアプリケーションのセマンティクスを表現する言語 この言語をXMLによって記述（シリアル化）する拡張可能な形態 既存ブラウザの「クラシックHTML」パーサと互換性のある、XMLではない記述形態 この言語のためのDOMインターフェイス フォームその他のUIで用いるための、プログレッシブバー、メニューなどの共通部品 リンクづけられたメデ
8 web menus you just can't miss
As loyal customers of Kroger, we all appreciate the wide variety of products and excellent customer service they consistently offer. But did you know they’re constantly working on improving our …
5W1H のマークアップ 1: When（日時） - 我的春秋
ちょっと思い立って、5W1H の XHTML マークアップの手段について、少しずつ整理してみることにしました。 理由や意義については、また別エントリーを立てるとして、とりあえず今日のところは、When?（いつ？）...つまり、日時のマークアップ手段から。 (X)HTML meta name="date" syntax <meta name="date" content="[W3C-DTF]" /> [W3C-DTF]: YYYY-MM-DDThh:mm:ssTZD（≒ ISO 8601。必要に応じて、秒・分・時・日・月は省略可。） [TZD]: ±hh:mm | Z（タイムゾーン。日本なら "+09:00"。UTC 協定世界時なら "Z"。） 追記: W3C-DTF のバリアントと (X)HTML における %Datetime について 北村さんよりご指摘をいただきまして（→ はてブ コメ
Bookmark Bliss: 50 sources for web design inspiration by Fuzzy Future
When Bookmark Bliss first got started, I said that our goal was to build content that other people can use to improve their own projects. Almost every day, while I’m checking out a blog or social bookmark site like Del.icio.us or Digg, I see a post entitled something along the lines of “50 beautiful web designs” or “25 amazing wordpress templates.” As a web developer and not really a web designer,
CSS Rounded Corners 'Roundup' | Smiley Cat Web Design
This collection of techniques to create boxes with rounded corners using CSS has become quite popular. The problem now is there are so many choices it’s hard to know which one to choose. To that end I’ve provided some more information about each method in order to help people choose which best fits their needs. Some of these techniques use CSS and one or more background images, some use CSS, JavaS
CSSに見惚れてばかりじゃなくて、もっと私（HTML）を見てよっ！
と、htmlさんが嘆いている気がしたので、こんなサイトですがhtmlさんに付いて書きます。 ウチのサイトの一番の目的は「CSSって面白い！」って思ってもらい、興味を持ってもらう事にある訳ですが、次のSTEPに進む為にやっぱり通らなければならない道である（X）HTMLの正しい記述方法。 もちろん、CSSの勉強の前に（X）HTMLの理解をしてからが理想だと思いますが、ボクはソレがベストだとは思っていません。 何かを覚えるのに、「この順番で覚えなければ絶対にいけない。」なんて事は無いと思います。 ホントのビギナーさんは、CSSビギナー向けから、取りあえずCSSに触ってみるっていうのがボクのオススメです。 楽しんでナンボっす。 で、まぁ今回の対象となる方々は、テーブルレイアウトからCSSに移行した人で、（X）HTMLについては特に触れなかった人とか、Blogで初めてCSSに触れた人とか、CSSの魅
lockエラー | 月額200円からのレンタルサーバー JSN
まずは最近知って便利だと思ったCSSの小技をひとつ。 文章の最後に、「※（米印）」などで注釈を入れたいときに、CSSのみで行の開始位置を揃えるのにすごくシンプルなやり方がこれ。 .note { padding-left:1em; text-indent:-1em; } <p class=”note”>※米印を使う場合はこいつが便利。<br /> 改行してもこの通り。ちゃんと開始位置が揃ってる。</p> 「padding-left : 1em;」でまず１文字分右に動かして、「text-indent : -1em;」で最初の行だけ１文字分左に出す、ということらしいです。これ考えた人はえらいっすねぇ。 他には開始位置を揃えるいわゆる「ぶら下げ」をCSSでやる場合、<div>タグの入れ子を使ってもいいが、<dl><dt><dd>の定義型リストを使うのがおすすめ。Definition Listの略で
第16回 XHTMLの設計〜状況に合った要素選び（1）〜：ITpro
XHTMLの制作でもっとも難しいのは「どの要素を使ってマークアップするか」という判断である。正解がひとつの場合もあれば、ふたつ以上の場合もある。人間の判断に負う部分も大きいので、あるマークアップを適切に感じる人もいれば感じない人もいる。シチュエーションごとの一般的なマークアップ例を見ていこう。 2つの判断レベル: 構文適合性と目的適合性 マークアップの適切さを判断するレベルとしては、構文適合性（validity）と目的適合性（relevance）の2つがある。前者は「要素・属性・属性値の書式が構文的に正しいかどうか」、後者は「要素・属性・属性値の使い方が本来の意味や仕様で示されている方法に合っているかどうか」が問題となる。 まず認識しなければならないのは、構文適合性はバリデータ（ソース検証ツール）などのマシンでチェックできても、少なくとも現在の技術レベルでは目的適合性はチェックできないこと
行間(行の高さ)を調節するなら単位はナシで - ［ホームページ作成］All About
ここでは、「1.4」という数値に単位を付けていません。 行間を調節する際には、この「単位を付けない」という点が重要です。 以下のように、単位を付ける指定も文法的に可能ですが、こうすると少々問題が起こります。 上記の記述は、行の高さを「1.4文字分」にする指定なので、先ほどの「1.4」とだけ記述した場合と結果は同じです。 しかし、ある特定の場合には「1.4em」のように単位を付けて記述した場合だけ、困った表示になります。 単位を指定した場合、しなかった場合 下図は、line-heightプロパティの値として「1.4em」を指定した場合（左）と、「1.4」を指定した場合（右）のキャプチャ画像です。 ▲line-heightプロパティの値：（左）「1.4em」、（右）「1.4」 line-heightプロパティの値として「1.4em」を指定しても「1.4」を指定しても、どちら
一番簡単な画像置換の方法-imageReplace.js--とあるWEBクリエイターのblog
一番簡単な画像置換の方法-imageReplace.js- 画像置換は設置がややこしく。 デメリット・メリットの切り分けが困難です。 そんなわけで一番簡単な画像置換の方法として、画像置換javascriptライブラリ-imageReplace.js-を作ってみました。 設定は簡単head要素内にimageReplace.jsを読み込むだけ。 <script type="text/javascript" src="./imageReplace.js"></script> あとは、画像置換したい要素にclass属性に『imageReplace』と記述しスペースを空けて『置換する画像名』、『ロールオーバーする画像名』を記述します。 例えばこんな感じに。 <a class="imageReplace ajax_a.gif ajax_b.gif" href="/ajax/">Ajax</a> 『ロー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webデザインで特に注意すべき10のヒント / ウェブデザインライブラリー
WEB文章を最後まで読んでもらえない理由は、改行と見出しが足りないから*ホームページを作る人のネタ帳
最初に指定しておくと便利なCSS | Tech de Go
http://youmos.com/news/analytics_myrt.html
W3C、HTML 4の後継となる次期HTMLの標準策定に着手
http://www.caramel-tea.com/2007/03/heatmap/
//// COLOURlovers :: loving colours since 1981
認証がかかっています