MTで実践 - CSSのモジュール化による管理方法と遊び方 - 3ping.org
1年ほど前からMAQUEというMovable Typeのテンプレートを配布しているのですが、利用者も増えて色々とフィードバックをもらい続けていたので、それを活かして新しいものを作りました。βテストも終わって細部を修正して正式リリースしたのでMTユーザーやMTに興味ある方はみてください。そして、それで実践したCSSファイルのモジュール化による管理方法とカスタマイズ方法について解説します。MTユーザーでない方もローカルで確認できるパッケージがあるのでよかったらいじくってみてくださいね。 Movable Type テンプレート mt.vicuna Movable Typeのデフォルトソースを1から書き直し、シンプルで軽量、XHTML1.0 Strict DTD準拠です。基本的には1つのテンプレートソースに対して好みのスキンをあてこむ形で色々なデザインのウェブログが作れるようになっています。ごちゃ
CSS-Based Navigation Menus: Modern Solutions | Smashing Magazine
Usability is an essential goal of any website, and usable navigation is something every website needs. It determines where users are led and how they interact with the website. Without usable navigation, content becomes all but useless. Menus need to be simple enough for the user to understand, but also contain the elements necessary to guide the user through the website — with some creativity and
CSSのfont-family：ヒラギノとＭＳ Ｐゴシックとメイリオの悩ましい関係 : webデザイナーのナナメガキ
CSSでのfont-familyの指定がとても悩ましい。文字コードによって表示が変わったりするし、イレギュラーケースまで想定すると煩雑なコードになってしまう。ちょっと整理しながら考えてみる。 まず、font-familyを何も指定しないと、だいたいのブラウザではデフォルトで設定されているフォントで表示されるのだが、文字コードがUTF-8だとWindowsのIE6で英数文字が「Times New Roman」になってしまう。※文字コードがShift_JISやEUC-JPの場合はデフォルトのフォントで表示される。 それでは例えば総称ファミリー名（generic-family）である「sans-serif」のみ指定してみると、WindowsのIE6では文字コードがShift_JIS・EUC-JPの場合は「Lucida Sans Unicode」で、UFT-8の場合は「Arial」で表示されてしま
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 …
Tableless forms
I consider this a very important step in learning web design the right and straightforward way. CSS is no longer just a way of adding some simple styles to an element in your page. More and more web designers work very much with styles in order to create a unique and easy to maintain website. You can see some inspirational examples by visiting a gallery like CSSREMIX or cssdrive. Those are CSS gal
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
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の略で
フッターとかの区切り『｜』のサンプル4種｜CSS HappyLife
フッター部分のメニューなどを区切る際のサンプルを適当に。 p要素でやるとこんなヤツです。 Home｜アバウト｜イラスト｜BBS サンプルに使うhtmlは、ul要素を使った下記をベースに使用してます。（サンプルに寄ってid名とか変わりますが） <ul id="sampleFooter"> <li><a href="/">Home</a></li> <li><a href="/">About</a></li> <li><a href="/">Gallery</a></li> <li><a href="/">Blog</a></li> </ul> んでは、いってみますか。 一番書きたかった内容は最後に書いてます。 普通に縦線を書いた感じ 実際の表示です。 Home｜ About｜ Gallery｜ Blog 普通にhtmlに｜を記述しているのでソースは当然下記のように。 <ul id="samp
かわいい吹き出しのコメント欄
なんとなくはてブを見ていたら、コメント欄に使えそうなかわいい吹き出しのライブラリーを発見。 ･･････というわけで、さっそくカスタマイズ。 willmayo.com » CSS Speech Bubbles こちらの角丸は、CSSだけでなく JavaScript も使われています。 上記のサイトを参考に 無義さん に協力していただき CSS だけで吹き出しのコメント欄にしてみました。 こんな風に3枚の画像を使用しています。 1 → 2 → 3 → 他にも吹き出しのデザインが紹介されているサイトを参考にどうぞ。 CSSでバブルタイプのblockquote『Bubble Quote』を作りました。 | CREAMU 4色のかわいい吹き出しを配布されているブログ こちらの角丸は、コーナー画像4枚と吹き出しの計5枚のパーツを使用するパターンです。 Dynamic Drive CSS Librar
選択したテキストのスタイル（CSS）状態を簡単に知ることができるFirefox拡張「Font Finder」:phpspot開発日誌
選択したテキストのスタイル（CSS）状態を簡単に知ることができるFirefox拡張「Font Finder」 2007年02月21日- Font Finder | Firefox Add-ons | Mozilla Corporation Get all CSS styles of selected text in Firefox. 選択したテキストのスタイル（CSS）状態を簡単に知ることができるFirefox拡張「Font Finder」。 ページを見ていて、このスタイルシートはどうなっているんだろう、と思うことがあると思います。 そんな場合に使えるツールで、テキスト選択して簡単にスタイル状態を知ることが可能です。 使い方は簡単で、まず、テキストを選択 右クリックで、「Font Finder」をクリック。 すると、次のようなダイアログが表示されます。 FireBugなんかでも同じような情
Wiiブラウザ風CSSボタンを作成「Wii Buttons」:phpspot開発日誌
Simple Round CSS Links ( Wii Buttons ) You may not get a Wii, but you can still get your own Wii Buttons with only 2 tags 1 image one CSS file . Wiiブラウザ風CSSボタンを作成「Wii Buttons」。 CSSと画像が配布されており、実装方法は次のように簡単かつクリーン。 しかし、class名に button はちょっと使い勝手が悪そうなので、別名に変更した方がよいかもしれませんね。 <!-- アンカータグの場合 --> <a class="button" href="?d=-1"><span>ボタンラベル</span></a> <!-- フォームボタン --> <span class="button"><input type="submit
CSSでオシャレな吹き出し形式のブロックを作成する「CSS Speech Bubbles」:phpspot開発日誌
willmayo.com CSS Speech Bubbles Easy to customize speech bubbles coded in CSS and valid XHTML 1.0 strict. CSSでオシャレな吹き出し形式のブロックを作成する「CSS Speech Bubbles」。 次のような吹き出し形式のblockquote要素を作成するサンプルが配布されています。 HTMLコードは次のようにクリーンにできます。 <div class="bubble"> <blockquote> <p>Works great for blog comments!</p> </blockquote> <cite><strong>John Smith</strong> on 1st January 2007 at 3:55pm</cite> </div> 角丸部分にはCSSだけでなく、
CSSとPHPできれいなグラフを描く方法 | SIMPLE*SIMPLE
terrill.caにてCSSとPHPできれいなグラフを描く方法が紹介されていました。 » terrill.ca | Vertical Bar Graphs using CSS and PHP 棒グラフや立体グラフなどがCSSのスタイルで描けます。PHPはデータの抽出と縮尺の設定だけなので、必要でない方は紹介されているCSSだけ使っても良いかも。 ↓なグラフや、 ↓なグラフが描けます。 なお、HTMLのほうの記述は以下のような感じです。わかりやすいですね。変更も簡単かと。 <ul class="barGraph"> <li class="p1" style="height: 57px; left: 0px;">57</li> <li class="p2" style="height: 27px; left: 0px;">27</li> <li class="p3" style="heigh
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最初に指定しておくと便利なCSS | Tech de Go
» 25 Code Snippets for Web Designers (Part1)
//// COLOURlovers :: loving colours since 1981
http://youmos.com/news/niceforms.html
WEB制作時に便利な9つのFirefox拡張機能(Add-ons) - デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記