メモログ: 検索結果

CSS：column-count で3列レイアウトを作成

フッター部分を3列にしてみようかなと唐突に思いついて、以前から興味あったcolumn-countを使って3列にしてみました。FirefoxとSafariでのみ対応（IEでは1列のまま表示されます）。Picoのデザインのバランスを崩している気がしないでもないですけど、まあいいか。

追加したCSSは下記のよう感じです。他にもいろいろ追加してますけど不要な部分は割愛。

-webkit-column-count: 3; -webkit-column-gap: 10px;
-moz-column-count: 3; -moz-column-gap: 10px;

-webkitがSafari用で-mozがFirefox用。colum-countは列（カラム）の数を指定して、column-gapは列と列の間の隙間の大きさを指定します。

簡単ですなあ。これで背景画像を複数指定できるようになったらdivを複数囲うなんてことは必要なくなるんでしょうね。

親要素の色をリンク色に継承させる

リンクの色の方が優先される理由の記事で、下記のHTMLの場合はリンクの色の方が優先されるという話をした。

<h3 class="entry-header"><a href="/post.html">記事のタイトル</a></h3>
----
a {color: blue;}
h3.entry-header {color: red;}

では、h3.entry-headerで指定した色をリンク色として継承したい場合はどうしたら良いのか。それにはcolorプロパティにinheritを設定する。inheritは親要素の値を継承するので、h3.entry-headerで指定した色になる。これは便利。親要素の色をリンク色に継承するためのclass属性を用意しておけば、一つずつリンク色を指定する必要がなくなる。

<h3 class="entry-header"><a href="/post.html" class="inherit" >記事のタイトル</a></h3>
----
a {color: blue;}
h3.entry-header {color: red;}
.inherit {color: inherit;}

ところが、IE6、IE7ではこの値が機能しない（IE8では機能するらしい）。そのため、しばらくは他の手段で対応するしかないわけですが、いずれはinheritを設定するだけで思いどおりの表示にできそう。世の中はますます便利に。

リンクの色の方が優先される理由

たとえば下記のようなHTMLに、下記のようなCSSを指定した場合、aタグに指定したCSSの方が有効に作用する。

<h3 class="entry-header"><a href="/post.html">記事のタイトル</a></h3>
----
a {color: blue;}
h3.entry-header {color: red;}

まあそういうものなのだと、普段はたいして気にとめていなかったのですが、あらためて説明しようとすると、これがよく分からない。単純に詳細度で考えたら、h3.entry-headerの方が強いのにどうしてだろう。ということで、CSS完全ガイドを購入して、きちんと読んでみました（3章まで）。p71〜p74あたりにそのあたりのことが説明されていた。

要するに、祖先から継承した指定の詳細度は「なし」という扱いになるため、aタグに指定した内容の方が詳細度が高く、より強く作用するということなのだ。うーん、調べてみてみると、そんなに難しい話じゃない。継承した指定の詳細度がもともとと同じ詳細度を持っていたら、たとえば body#foo というような指定があったら、いろんな子孫に不要に作用してしまう。うまくできている。

ふむ。つまり。この件について、CSSを生業としていないような人に質問されたら、「より内側にあるタグに指定したCSSの方が、外側のタグに指定したものより有効に作用します」と伝えても特に問題はなさそうだ。

text-align: justifyで段落を両端揃えにする

text-align−スタイルシートリファレンス

「text-align:justify」は、対応していないブラウザがあるから使わない・・と思っていたのでが、今ではどのブラウザでもだいたい対応しているということに今さら気がつきました。いちど見捨てたプロパティにはなかなか目を向けないものだなと思った次第でございます。

追加したCSSはこんな感じ。特に何のひねりもないです。

.asset-content{text-align:justify; text-justify:distribute;}

IE 6で確認した感じでは、日本語の両端揃えはまだtext-justifyの方が有効に機能するようなので、text-justify:distribute;を入れています。英文であればtext-align:justifyのみで問題なさそうな感じでした。

また、Safari3 では日本語の両端揃えは若干不得意のようで、半角英数が文中に含まれている場合や、禁則処理（「、」が行頭にこないようにしたりすること）をしたりすると、でこぼこしてしまう。でも個人的には許容範囲です。Firefoxでは両端揃えが美しく決まっている。すてきだ。

CSS3にあるtarget疑似クラスをつかって表示をオン・オフすることができるんだよ。それはすごい！というような内容の話。target疑似クラスとはアンカーのあるリンクを特定する方法で、たとえば「#test:target」というCSSは、URLが「http://memolog.org/index.html#test」の場合にのみ作用します。言い換えると、「<a href="index.html#test">test</a>」というリンクをクリックしたあとのページで作用するようなCSSになります。

実際にトラックバック欄で試してみました。下記のCSSを追加しました。

#trackbacks:target #trackbacks-open-content {display:block !important;}

このサイト（メモログ）では、トラックバック入力欄は通常非表示の状態になっていますが、記事タイトル下側にある「トラックバック(0)」というリンクをクリックした場合は、トラックバック入力欄が表示されます。!importantがついているのは、prototype.jsを利用した項目の開閉をするのにインラインにdisplay:none;が入っているため。display:noneをスタイルシート上で指定していれば、!imortantは必要ありません。

CSS3 . Infoによると、target疑似クラスはすべての「current browser」でサポートしているとのこと。実際にFirefox 2.0とsafari 3（mac）で試してみましたが、きちんと動作していました。

:target を利用して表示したコンテンツをふたたび元の状態（非表示）にしたい場合は、たとえば<a href="index.html#void">void</a>みたいに、ターゲットを外すことで可能です。とはいえトリッキーな感じ。Vitaminで紹介しているように、常に何かを表示させておくような、タブ型のコンテンツを作るときのほうがスマートに利用できます。

応用として考えられるのは、たとえばQ&Aのページとか、操作手順のページとか。ページとしては1ページでほしいけれど、ユーザーに明示的にクリックすることでコンテンツを表示したいとか、1ページ内でコンテンツの流れ・動線を作りたい場合。Javascriptでもできますけど、こちらの方がつくるのは楽だと思います。IE6のシェアが下がらないとなかなか実践での利用というのは難しいかもしれませんが、あと1、2年もすれば、表示開閉のためのスタンダードな方法になるのではないかと推察する次第です。

CSS Sprite Generator : 画像を統合してHTTP requestを減らす

「YSLOW 勉強 : 1: Minimize HTTP Requests」の記事でHTTP requestを減らすためのアプローチとしてCSS Spriteという手法が紹介されていましたが、今度はそれを生成するためのジェネレーターが紹介されておりました（変な日本語だなあ）。オフセットなどを設定してzip形式で圧縮したファイルをアップロードすると、画像を統合したファイルとそれぞれの画像を呼び出すためのCSSを表示してくれます。

透明度のクロスブラウザ対応

小ネタ。メモログ：MTIfタグを利用したタブ型ナビゲーションのエントリーで作成した、アクティブ以外のタブには透明度をつけて濃淡の差を出しています（別に透明度で濃淡の差を出す必然性はないのですが使ってみたかった）。指定の仕方は下記のような感じ

opacity: 0.8;-moz-opacity: 0.8;filter: alpha(opacity=80);

opacityはCSS3の、透明度を割り当てるための指定です。safari 2、safari 3、Firefox 2、IE7など最新のブラウザではすでに対応ずみの指定で、この指定だけでもけっこうそのまま使うことができます。ただIE6や古いFirefoxだとopacityは対応していないので、一緒に「-moz-opacity: 0.8;filter: alpha(opacity=80);」を指定しています。-moz...の指定が古いFirefox用で、filterの指定がIE6用。これで代表的なブラウザのすべてで問題なくなります。

Firefox2、IE7ではopacityだけで問題ないので、あと数ヶ月もしたらこのクロスブラウザ対応はあまり気にしなくても良くなりそうですね。うむ。

9/19 追記。Mac Firefoxで閲覧したときに、opacityの影響でフォントのアンチエイリアスのレンダリングが変な感じになる（文字が細くみえたり太くみえたりする）。全体にopacity:0.9999を入れたり、text-shadowで常に細い状態で表示させることができなくはないようですけど、素直に背景色とフォント色で濃淡をつけるように変更しました（以下のサイトを参考にしました）。

MTIfタグを利用したタブ型ナビゲーション

Movable Type 4 から追加されたMTIfタグを利用して、現在いるページがアクティブな状態になるタブ型ナビゲーションを設置してみました。作業内容的にはMTで奇数行、偶数行ごとに背景色をつける方法と変わりません。今回は分岐の条件をテンプレートの種類（名前）にしています。

まずナビゲーションのHTMLがこちら。アクティブにしたいタブに「here」というclassを指定しています。MTUnless を併用するともう少しかしこいHTMLにできるかもしれません。

<div id="banner-image">
<div id="banner-image-inner">

<div id="topnavi">
<div id="topnavi-inner">
<ul>
<li class="rss"><a href="http://feeds.feedburner.jp/memolog">
<img width="9" height="9" alt="RSS" src="http://memolog.org/mt/mt-static/images/status_icons/feed.gif"/>
RSS</a></li>
<li class="archives<MTIf name="archive_index"> here</MTIf><
MTIf name="entry_template"> here</MTIf><MTIf name="datebased_archive"> here</MTIf>"><a href="
<$MTBlogURL$>/archives.html">archives</a></li>
<li class="profile"><a href="http://memolog.org/mt/mt-search.cgi?tag=profile&IncludeBlogs=5">profile</a></li>
<li class="home <MTIf name="main_index">here</MTIf>"><a href="<$MTBlogURL$>">home</a></li>
</ul>
</div>
</div>

</div>
</div>

CSSはこんな感じ。背景画像の上にタブを載せているので、表示がずれないようにピクセル単位でガチガチに指定しています（ulのマージンが入ることに気づかずに、しばらく悩んだ）。

/* top navigation */
#banner-image {height:160px; background:#fff url(http://memolog.org/site-design/0701/050101.gif) no-repeat; width:940px; margin:0 auto;}
#banner-image-inner {padding-top:125px;}

#topnavi {height:35px;}
#topnavi-inner {padding-bottom:10px; padding-right:20px; text-align:center;}
#topnavi ul {list-style-type:none; margin:0;}
#topnavi li {width:54px; height:25px; margin:0 2px; float:right;}
#topnavi li a {width:46px; height:17px; display:block; padding:4px; background-color:#e6e6e6; 
font-size:11px; font-familiy:Verdana,sans-serif; opacity: 0.8;-moz-opacity: 0.8;filter: alpha(opacity=80);}
#topnavi li a:link, #topnavi li a:visited {text-decoration:none;}
#topnavi li.here a{background-color:#fff; opacity: 1;-moz-opacity: 1;filter: alpha(opacity=100);}
#topnavi li a:hover {background-color:#A1D0FF; opacity: 1;-moz-opacity: 1;filter: alpha(opacity=100);}
#topnavi li.rss img {margin-right:4px;}

Blueprint Grid CSS Generator : Blueprint のグリッド編集ツール

先のBlueprintのエントリーで、「横幅を変更したいときはCSSを手作業で調整する必要となるため、すこし手間がかかる。」と書いたのですが、Blueprint Grid CSS Generatorでは列数、マージン、列あたりの横幅、ページの横幅を入力すると、調整した状態のBlueprintを生成してくれます。

すてきだ。

なぜCSSフレームワークを利用しないのか

Why I don't use CSS Frameworks - Warpspireの記事について。CSSフレームワークを利用してもそんなに開発効率は良くならないし、避けがたいブラウザのバグはフレームワークを使っても避けられない。その上、自分のコードと書き方になれてしまっているし、CSSフレームワーク由来のバグを抱えるかもしれないし、コーディングの勉強にならない。だからCSSフレームを利用していない。乱暴に要約するとそんな内容。

もう二つの反対意見。一つ目は、フレームワークは多くの使っていないスタイルを読み込ませることで動作が重くなるのではというのと、HTMLのマークアップはプロジェクトによって固有のclass・id構造になる。それがセマンティックの強みでフレームワークはその強みを削ってしまうというもの。二つ目はCSSフレームワークは「それを不変なものとして維持させて、HTMLを変更させ」ようとしている、それはHTMLとCSSのそもそもの考え方に適さない、というもの。

Ajaxian » Should we use CSS frameworks?

9/18追記。

Blueprint : CSSのフレームワーク

Blueprintとは、いわゆるひとつのCSS のフレームワークです。ライブラリはbutton.css、grid.css、reset.css、typography.cssの4つのCSSで構成されていて、圧縮版のcompressed.css、ライブラリをインクルードするためのscreen.css、印刷用のprint.cssなどが同封されています。それぞれのCSSはその名の通りで、button.cssはボタン用のCSS、grid.cssはグリッドデザイン用のCSS、reset.cssはいわゆるブラウザのデフォルト設定をリセットするためのCSS、typography.cssはタイポグラフィティ用のCSSです。

わりとシンプルな構成のCSSで、Typographyのサンプルのように奇麗に段組みに仕上げることができる。背景の罫線がきれいにはまっているのに小さく感動を覚えます。Firebugを使ってサンプルサイトを日本語に置き換えてみましたが、日本語でも奇麗に表示できます。

ただ、一つのグリッドのデフォルトの横幅は70px（うちマージンが20px）で、全体を960pxと固定的に指定されてます。横幅を変更したいときはCSSを手作業で調整する必要となるため、すこし手間がかかる。

Font Tester : 使いたいフォントをウェブ上で比較検討

Font Tester

Windows IE でmemolog.orgを閲覧したときに、font-size:12pxに指定している箇所よりfont-size:11pxに指定している箇所の方が大きく表示されていたので、不思議に思っていろいろテストしてたときに思い出したページ。

Font Testerは選択したフォントが、ブラウザ上でどんな感じで表示されるのかをプレビューしてくれるウェブサービスです。画面が3つにわかれているので、フォントを比較検討したいときは便利。

ただ、残念ながら日本語フォントがプルダウンメニューから選択できない。とりあえずFirebugでプルダウンメニューの値をすり替えて表示させたりした（IEでは確認できませんが）。日本語フォントもプルダウンメニューに追加してってfeedbackだすのが良いかもなあ。

結局、原因はfont-familyが「Trebuchet MS」であったためだったようで、font-familyをsans-serifに変更しました。理由までは深く追求せず。

実際に表示されているブロック要素のサイズを表示する

単純にwidthを指定しているところであればブロック要素の横幅はすぐにわかるのですが、borderやpadding、marginが入るとわかりにくくなる。たとえば <div style="width:100px;"><div style="padding:10px;" ></div></div> のように、入れ子で指定されている横幅がいくつになるのか、いちいち計算するのはめんどうくさい（右の例のように単純なときはいいですけど）。

WEB Developerの「Display Block Size」（informationのメニューの中の項目）では、実際に表示されているブロック要素の縦幅と横幅を表示してくれます。欠点はブロック要素がたくさん入れ子になっていると、下の画像のように重なりまくってしまい何がなんだかわからない状態になってしまうところ。

その欠点を補うために、Firefox アドオンの「View Source Chart」を利用。View Source Chart は構造化した状態でHTMLソースを表示してくれます。「Display Block Size」を適用した状態で、View souce chartを表示すると、それぞれのブロック要素のサイズが構造化されたHTMLソース上にうまいこと表示してくれます。これでブロック要素のサイズが重なって見えないということは回避することができる。

Safari 3 (webkit) がサポートしている CSS 3 プロパティ

webkit の拡張タグ上で、すでにいくつかのCSS 3プロパティがsafari 3上で利用することができます。利用可能なのは、box-shadow、border-image、border-radius、border-radiusなど。いずれも「-webkit-」というprefixを入れることで利用することができる。

複数のセレクタを指定したときにIE6バグ

たとえば、<p class="foo bar" > と複数classをつけている場合に、p.foo.bar {font-size:100px;}というかたちで指定すると、IE5と6では、p.bar {font-size:100px;}と指定しているのと同じ状態になってしまう、という話。IE7ではこの現象は発生しない。

この現象は、たとえば「奇数行で最後の行にはこの背景色にして、偶数行で最後の行になる場合はこの背景色にする」というようなことをしたい場合に少し困る。p.odd.last {color:#000;}とp.even.last {color:#fff;} というような指定をしても、どちらもp.lastと解釈されてしまい、CSSファイルの後ろで指定した方が反映されてしまう。

たとえばodd_lastとか、even_lastとか、そういうユニークなクラスを指定するとか、そういった回避方法はなくはないのですが、スマートな方法じゃないし、なによりめんどうくさい。

拡張CSSで角丸コーナーを作る

各ブラウザが独自で用意している拡張CSS（CSS extensions）を利用して、角丸コーナーを作ろうという話。CSS3 にborder-radiusというボーダーの角を丸くするためのプロパティが提案されており、ゆくゆくはborder-radiusにスタイルが引き継がれていくのかなと推測しています。

CSSの指定の仕方は簡単で、下記のようにwebkitやmozのプレフィックスをつけて指定するだけ。webkitはwebkitとsafari向け、mozはmozilla系のブラウザ向けの指定。IEでは適用されません。

-moz-border-radius: 5px; 
-webkit-border-radius: 5px;

実際に右にある「最近のブログ記事」のリストに指定してみました。若干、カクカクした感じになりますけど、個人的には許容範囲。

そのほかにもブラウザが独自に用意している拡張CSSはたくさんあって、そのへんは下記のリンクなどが参考になります。これでしばらくは楽しめそうです。

MTで奇数行、偶数行ごとに背景色をつける方法

The blog of H.Fujimoto：Movable Type 4のブロックタグ内で使える変数

ブロックタグ内で使える変数を利用して、奇数行（odd）と偶数行（even）にわけてclassを指定することができます。偶数行と奇数行にわけて配色したいというときに非常に便利。これだけでデザインの幅がかなり広がる。右側の「最近のブログ記事」の一覧で実践してみました。作成したテンプレートは下記のようなかたち（不要な箇所は割愛しています）。

<MTEntries lastn="10">
<li class="widget-list-item <MTIf name="__odd__">odd</MTElse>even</MTIf>">
<a href="<$MTEntryPermalink$>" ><$MTEntryTitle$></a></li>
</MTEntries>

そして適用したCSSは下記のような感じ。

.widget-archives .widget-header {border:none; padding-bottom:0; margin-bottom:0;}
.widget-archives ul {border:1px solid #ddd;}
.widget-archives li {margin:0;padding:0; overflow:hidden;}
.widget-archives li {display:inline;}
.widget-archives li a {display:block; padding:5px;}
.widget-archives li.odd a {background-color:#f0f0f0;}
.widget-archives li.even a {background-color:#e6e6e6;}
.widget-archives li.even a:hover {background-color:#FFA6E9;}
.widget-archives li.odd a:hover {background-color:#FFBFEF;}

これで完了。MTEntriesの他に、MTCommentsでも利用可能。コメントの場合で、たとえばエントリーの投稿者のコメントには特別のCSSを入れたいという場合には、<MTIfCommenterIsEntryAuthor>author</MTIfCommenterIsEntryAuthor> というような形で、authorというclassを追加すると良いかもしれない。

Single Line CSS

http://orderedlist.com/articles/single-line-css

プロパティごとに改行いれないでさ、1行でまとめて書いたほうが見やすいと思うんだよ！という話。理由は、その方が画面の中にたくさんのCSSを表示することができるから。一覧性がとりやすいから作業効率が良いということらしい。

改行とインデントを入れて、奇麗に見やすい（しかし長くなりがちな）CSSを書くか、1行にまとめて一覧性がとりやすい（しかし見づらい）CSSを書くかは書き手の好みによるとは思います。わたしはどちらかというと、1行で書くのが好きな方です。特にmarginとかpadding、line-height、widht、heightとか汎用的によく使うプロパティは、ほとんど1行で書きます。理由は

見慣れたプロパティは、見にくくても問題ない
影響範囲の狭いプロパティは、見にくくても見直すことがあまりない

とかいろいろ。経験に依るところが大きいです。そして徹底しているわけではなくて、本当に気分次第。表記を統一する気があまりない。仕事ではそういうわけにはいかないと思いますけど。

特に最近では、Firebugzのstyle情報を見れば、混沌とCSSを記述していてもinspectしている要素にどんなCSSが適用されているのかが一発でわかる（しかもきちんと整形した状態で表示してくれる）。だから、ますますあまりCSSそのものの見た目を気にしなくなってしまっている。

CSS3 : resize プロパティ

CSS3のプロパティの一つに「resize」というプロパティがあり、それがSafari 3では利用可能であるという話。実際にコメント欄（comment-open-text）にresize:both;というプロパティをつけてみました。Safari 3では入力フォームの大きさを自由にリサイズすることができます。

どこにも情報を保存しないため、たとえばリロードしたりすると元のサイズに戻ってしまう。よく利用する管理画面ではやはりCookieやDBかどこかにリサイズ情報を保存してたほうが便利だと思いますが、コメント入力欄とか不特定多数の人が1〜2回だけ利用するというような場合にはCSSで対応するほうが便利そう。

Firefox 2ではまだ対応していないようですが、きっと3がでることには対応しているのではないかと期待しています（GranParadiso.appでも確認してみましたが、まだ対応していなかった）。

配色を考えるときに役立つの WEB サイト 3つ

画像処理ツールがペイントしかない環境下で、16進数の色コードを作成したい。と、いったケースに対応すべく、自分のブックマークを探して見つけてきたのが上の3つのリンク。

１つ目の Color Scheme Generator は、指定した色と適したカラーの組み合わせを出力してくれます。即興でウェブサイトの見本を作成しなければいけない、、そんなときに素早く、バランスのとれた配色を決めることができる。

２つ目のColor Wheelは、そのまんまカラーホイールで色を選択できるというもの。色の選択の履歴を左側に出してくれます（さらに「show full list」をクリックするとすべての履歴が参照できる）。動作が軽快なので、てきとうに色を選びまくって、「前の前に選んだ色にしよう」という感じで色を選択することができる。

３つ目のCSS Toolsは、ツールではくツールのリンク集。上の2つ以外にも有用そうなツールが紹介されています。いざ何か必要にせまられたときに、こういったサイトがたまに役に立ちます。

以上。デザイナーじゃないけど、サイトのベースカラーを決めなくてはいけない、そういったときに役立つかと思います。

タグ「css OR html」が付けられているもの

2010年2月 4日

2009年5月 6日

2009年4月27日

2008年6月 9日

2008年2月 3日

2007年9月29日

2007年9月14日

2007年9月13日

2007年9月 1日

2007年8月26日

2007年8月19日

2007年8月14日

2007年8月 8日

2007年8月 4日

2007年8月 4日

2007年8月 3日

2007年8月 1日

2007年7月31日

2007年7月29日

2007年7月26日

検索

タグ

最近のブログ記事

Monthly アーカイブ

タグクラウド