« 正しくHTMLを書こうと心がけている人に5つの質問 に答えてみる | Back To Blog Top | CSS Nite shuffleに行ってきました »
デザイナーさんに贈るCSS Tips その1
Shunさんが働いているlivedoorは、「デザイン」、「マークアップ＆CSS」、「プログラム」がほぼ完全に分業されているので、それぞれの作業に集中する事ができます。
ただ、それにはデメリットもあると感じています。 他者の分野について触れる機会が少なくなってしまうんですよね。
コーダー改めマークアップエンジニア通称MEの視点からちょっと思ったのは、Blogのデザインを、もうちょっと遊んだら面白そうだなー、とか。
CSSだけでできるちょっとしたデザイン要素とか、CSSを使う立場じゃないと逆に思いつかなかったりするのかも？ と思ったりも。
なので今日は、そんなちょっとしたTipsをご紹介します。
リンクの下線をデザインする
サンプル
リンクの下線と言えば、良く見る直線が一般的ですけど、実は点線なんかも使えます。
これの仕組みはデフォルトの下線を消して、新たにborderプロパティで点線を指定するというもの。
もちろん、点線以外の線も使えますし、そもそも線以外のデザインもできます。 画像や背景色を使っても面白いかも。
その辺りの詳細は、実際にCSSを書く人と相談してみるのが良いと思います。 やっぱり良いモノって、良いコミュニケーショから生まれますよねｗ
フォームをフォーカスした時のデザイン
サンプル
このBlogのコメントフォームでもそうなんですけど、入力欄をクリックすると色が付きます。
このサイトはIEにも対応させるために（へっぽこな）JavaScriptを使っているんですけど、すみません使ってませんでしたorzIEを無視していいならCSSだけでもできます。
使うのは:focus擬似クラス。 コレをIE様は無視されあそばす訳ですね。
input要素やtextarea要素に、:focus擬似クラスでデザインを指定すればOKです。
これを工夫すれば、MacのSafari風のデザインを真似する事もできます。
ちなみに、Safariは「デフォルトのデザインが最も美しい」という自負があるからか（？）フォームパーツのデザインが効かない事が多いです。
これはこれで困ったちゃんですけど、確かにフォームに関しては、ユーザーが使い慣れたデザインがベストではあります。 デザインしすぎもよく無いんですね。
あとがき
今回はこの二つをご紹介しました。 タイトルに「その1」と付いていますけど、その2は思いついたり思い出したら、また書きますｗ
何やら偉そうにデザイナーさんへ提案のようなモノをしてしまいましたけど、逆に僕も他の分野の勉強もしないとなー、と思います。
IAやUIにも興味ありますし、簡単なJavaScriptを書けるようになったり単純なBBSを作れるようにはなりたい･･････。
うーん、1日が48時間あればいいんですけれどｗ
3 Comment
＞21さん
コメントありがとうございます！
＞underlineの様にフォントサイズと連動しません。
こちらがちょっと分からないのですが、「線の太さが変わらない」という事でしょうか？
だとしたら、そこは考えもしてませんでした。
僕個人としては気にならないのですが、デザイナーさんからすると見逃せないのかもしれませんねえ。
＞スクリプト書くのがマークアップに気を付ける一番の近道と思って勧めるんですが。
基本的な部分でしたら、XMLとかもいいかも？とか思いました。
タグで挟む形式はとっつきやすいと思いますし、そのくせエラるとちゃんとエラーになりますし。
実際の業務で使う機会が少ない（であろう）事が、アレですけれど・・。
Shunさん
>こちらがちょっと分からないのですが
思いっ切り言葉足らずでした。
仰る通り、フォントサイズに追従しないのは、ボーダーの太さです。
私がその非追従を気に入らないのは「どうにもみっともない」って程度の個人的感想だけなので、仕事ではちょくちょく使ってます。
下線だけ色変えて、って仰るお客さんも時々いらっしゃいますし。
但し、前コメントに書き忘れてたんですが、IE7の拡大縮小表示で色々問題出ます。
要素によって太さがまちまちになるだけならともかく（縮小時に一切表示されない事もあるので、ともかくではないんですが）、ボーダーの表示位置までずれる場合があります。
要素によって、ボックス算出がぶっ壊れるみたい。
このエントリのサンプルでも、上部ボックス内はずれるのに、下部の“リンクの下線をデザインしています。”ではずれてませんでした。
#ここのコメントって、「2回改行」は空行2つって判定でしたっけ？
#「段落切って、空行1つ入れたら、『2回改行』だよなあ」って迷ってしまったので。
#勘違いしてると、このコメントはきっと読み辛いです。
“リンクの下線をデザインする”は以前試しましたが、underlineの様にフォントサイズと連動しません。0.01emなんて指定をかけるといい具合かと思いきや、ピクセル算出に無理があるのかFirefoxやIEでレンダリングが不安定な上、Safariでは使い物になりませんでした（Safariでは、border-widthの算出結果が1px未満になる？）。
身近なコーダーさんにはjQuery触らせてスクリプト食わず嫌い減らしてますが、なかなか浸透しません。スクリプト書くのがマークアップに気を付ける一番の近道と思って勧めるんですが。
Name:21 | 2007年04月24日 18:25