スタイルシート・スタイルブックで毎日勉強中のBQです。
実践編までなんとか漕ぎ付けたのですが、そこでいつも参考にさせていただいてるサイトが紹介されていたので、エントリーしてみました。
実は以前に書いたカメレオンアイコン（勝手に名づけてましてTipでもなんでもなかったりしますが＾＾；）を参考にさせていただいたサイトだったりもするのですが、そのサイトは「Fast Company」というサイトです。
CSSと何気なテクニックを使っていてとても勉強になるサイトなんです。CSSのインポートやTABにリスト、アイコン背景やスタイルスウィッチなどなどCSSのテクニックが満載です。
いつかこんな風にCSSを使いこなしてサイトを作ってみたいなぁと思ったりしますが、今の私には到底ムリなので、かなり部分的になりますが、そのサイトで使われている見出し＋リストの作り方で参考になるかなと思ったところをエントリーしてみました。
余計な部分を削りながらCSSを抜き出したので、誤った部分も含まれているかも知れませんが、その辺はご愛嬌ってことでお願いします。リストの一つのパターンとして参考にでもしていただければと思います。
CSS例
#listsample h4 {
padding: 0;
margin: 0;
margin-bottom: 6px;
color: #c00;
font-size:100%;
font-weight: bold;
letter-spacing: .2em
}
#listsample h4 img {
vertical-align:bottom;
display: inline;
background: #c00
}
#listsample ul {
margin: 0;
padding: 0;
list-style: none
}
#listsample li {
background: url(../../listhead.gif) no-repeat 2px 1px;
padding: 0 0 6px 16px;
line-height: 1em
}
タグ部分
<div id="listsample">
<h4><img src="../../header.gif" /> Subheading</h4>
<ul>
<li><a href="">list 1</a></li>
<li><a href="">list 2</a></li>
<li><a href="">list 3</a></li>
</ul>
</div>
（下記サンプルは画像ですが、CSSの追加や調整だけでいろいろなパターンのリストを作成することができます）
*アイコン画像等は「Fast Company」さんのものを参考にさせていただいています。尚、サンプル中のheader.gifは背景を透過にしたものにCSSを適用しています（画像の説明）
Firefoxをインストールしてとりあえず追加しておきたい拡張機能といえばWeb Developer Extensionだと思います。このツールバーを使えばスタイルシートやJavaScriptをOFFにした状態や、Classにアウトラインをひいてくれたりして、どのようにサイトが作られているのか簡単に知ることが出来ます。このツールがあるから僕はFirefoxをディフォルトにしている・・・といっても過言ではないかもしれません。Bookmarkletをたくさん並べるという方法もありますが、やっぱりこういうツールバー形式になっていたほうが分かりやすいような気がします。
僕的にFirefoxは激しくプッシュしたいのですが、それでもＩＥをディフォルトにしている方は出来る限り使い慣れているブラウザーで作業したいものです。というわけで今回紹介するのはWindows版ＩＥを使っている方に朗報です。
NILS：Accessibility Toolbar
FirefoxのWeb Developer Toolとほぼ同じことが出来るＩＥ専用のツールバーです。柔軟性はFirefoxの拡張機能のほうが上かもしれませんが、それでも十分使えるツールバーだと思いますよ。アップグレードも比較的頻繁に行われているみたいなので、これからも期待出来そうです。マックユーザーとしてはSafari用のツールバーも欲しいところです。
旅行から帰ってきてから初のエントリーです。。。こんばんは、うーやんです(^^)
前のみえさんのエントリーでTopStyleLiteをインストールしてみました。日本語パッチもうまく入ってくれて動作してくれています。やっぱりプレビューあるって助かりますね！
僕はCSSツールとしてStyleNoteを使わせていただいております。MovableType（MT）を使い始めてからCSSをいじり始めたのですが、MTは初めからCSSテンプレートがいくつか用意されていますので、それを基に編集するときに便利です。CSSを勉強し始めたばかりにはフリーのツールはとても助かります。
まだまた初心者ですが、みなさんのエントリーやコメントをみているととても勉強になりますし、何より楽しいです♪
でわでわ
はじめまして、Mie*Maniaxのみえと申します。東京でWebディレクターしてます。CSSに関しては100%我流で、いろいろ実験的に試した結果うまくいった、という感覚でこれまでデザインしてきました。＞いいの？？
はじめまして、みえと申します。都内でWebディレクターしてます。
デザインの分野について、言及するのはいささか憚られますが、勉強も兼ねてこちらで記事を書かせていただくことにいたしました。チラホラと見られる不備、ご了承ください。
※最初にエントリーした内容に不快を感じた方、お怒りをお感じになった方、非常に申し訳ございませんでした。ここに深くお詫びいたします。
最初のエントリーでは自己紹介がてら、使っているCSSツールをご紹介します。
ワタシは、コレの無料版＜Lite＞を大いに利用しています。
どこがお気に入りかというと、やはりプレビュー機能です。CSSを文字に適用したらどう表示されるかすぐにプレビューできます。大便利です。
海外ソフトなので、日本語で入れたコメントなどが文字化けしてしまいますが、日本語のパッチもあるようです。
ワタシはこちらの管理人さんのおっしゃっているとおり、MD5のナンバーが同じじゃなかったのでパッチが当たりませんでした。あら残念。
ワタシはWinユーザーで、かつMacを持っていないためWinでもMacでCSSがどのように見えているのかがわかるソフトがありましたら、簡単に鞍替えする予定です。(￣个￣) うふ。
そんなソフトを、どなたかもし知っておられたら教えていただくと非常にうれしいことこの上ないです。
こんなワタクシですが、今後とも何卒よろしくお願いいたします。
Bokmarkletとは、 JavaScriptで記述された小さなプログラムで、ブラウザのブックマーク（お気に入り）から利用することができるものです。インターネットを徘徊しているとたくさんのBookmarkletを見つける事が出来、日本語のサイトだとこのサイトがオススメです。
今回紹介するのは、スタイルシートで定義したCLASS, ID, ブロックレベルのタグをアウトライン化してくれるBookmarkletです。定義名も見せてくれるので、何処にどのCLASSが指定されているかも一目瞭然です。お気に入りのサイトがどのようにレイアウトを組んでいるのかを知るのには大変便利なスクリプトかもしれません。
Bookmarklet：CSSブロック表示
セットアップは比較的簡単です。まず上のBookmarkletをブックマークに追加したあと、このCSSファイルをダウンロードしてください。落としたCSSファイルをあなたのサイトのサーバーに置くか、ローカルサーバーにアップロード。このとき何処にアップロードしたのかをちゃんと覚えておいてくださいね。Bookmarkletのソースコードは以下のとおりです。
javascript:(
function(){
var newSS;
newSS=document.getElementById('codepoetry-debug-stylesheet');
if(newSS){
newSS.href=null;
document.documentElement.childNodes[0].removeChild(newSS);
} else {
newSS=document.createElement('link');
newSS.rel='stylesheet';
newSS.type='text/css';
newSS.href='http://www.stylesheet-stylebook.net/stuff/css-debug-2.css';
newSS.id='codepoetry-debug-stylesheet';
document.documentElement.childNodes[0].appendChild(newSS);
}
}
)()ブックマークに追加したBookmarkletの情報を表示させ、アドレスの部分を任意の場所に変えて準備完了です。残念ながらマック版IEでは上手く動きませんが、それ以外の新しいブラウザなら上手く動きます。レイアウトチェックには使えるかもしれませんね。
《参考資料》codepoetry：CSS Debugger, Redux