CSS 3への対応状況

そういえばこのブログをFireFox 3.6.8で見てみたんですが、CSS 3への対応はまだまだ不足しているみたいですね。radiusは効いているんですが、shadowが効いてないようですね。ガジェットがべったりと平面的に表示されています。ブラウザ毎の表示結果の違いを確認できるサービスとかが確かあった気がします。
確認ですね。

ぽちっとよろしくお願いします。m(_._)m

にほんブログ村

Bloggerでの多段組ですが

書き忘れていたので書いておきます。
Bloggerでのウィジットへの多段組の方法ですが、これが一番応用が効くと思います。

管理画面のデザイン > HTMLの編集タブをクリック。テンプレートを編集します。
このときにウィジットを展開するにチェックをいれておいてください。
段組に変更したいウィジットの名前を検索します。
そしてそのウィジットのIDを確認してください。

次に]]></b:skin>という文字列を検索してください。
その手前にウィジット毎の設定を追記するイメージです。

私のブログの場合にはこんな感じの設定を追加しました。
対象は記事のラベル、最新の記事、人気の投稿等のリスト等です。

#Label1 ul li{
float: left;
margin-right:1px;
width: 33%;
}

#HTML1 ul li{
float: left;
width: 25%;
}

#Feed4 ul li{
float: left;
margin-right:2em;
width: 40%;
font-size: 90%;
}

#PopularPosts1
 ul li{
float: left;
margin-right:2em;
width: 40%;
font-size: 90%;
}

#LinkList1 ul li{
float: left;
margin-right:2em;
width: 40%;
}

#Feed3 ul li{
float: left;
margin-right:2em;
width: 40%;
}
]]></b:skin>

私の場合はリスト系を多段組に追い出したかったのでulとliを対象にしていますが、他の要素でももちろん構いません。
適宜変更してください。

floatで右への回り込み、widthで1カラムあたりの幅、margin-rightでカラムとカラムの間隔を設定しています。
幅がきつい場合には更にfont-sizeでフォントを縮小しています。
実際には現物合わせで調整しながらwidthを調整していくと思います。
2段組なら40%前後から、3段組なら30%前後から徐々に調整ですね。

まずはラベルの多段化からでしょうね。

現場のプロから学ぶXHTML+CSS

posted with ヨメレバ at 10.09.16

益子 貴寛 毎日コミュニケーションズ 2008-11-11

Amazonで購入

楽天ブックスで購入

7netで購入

ブックオフで購入

ぽちっとよろしくお願いします。m(_._)m

にほんブログ村

dtタグとddタグを使ったリストを作ってみる。

ちょうど求人・転職情報等に使っているレイアウトですが、CSS関連の記事を書いておられるサイトのCSSを利用させて頂きました。

dtタグやddタグは余り使った事がなかったんですが、そういえば比較的見かけるレイアウトですね。overflowを設定したdivと合わせワザで使用すると履歴系のリストに使えるのではと思います。

ぽちっとよろしくお願いします。m(_._)m

にほんブログ村

CSSでテーブルの見栄えを変更する。

CSSの設定でテーブルの雰囲気もだいぶ変わりますね。

項目１	説明１
項目２	説明２

CSSの設定はこんな感じになります。

table.tb2{
margin-bottom:30px;
width:520px;
color:#666;
border:1px solid #ccc;
border-collapse:separate;
border-spacing:2px;
}
.tb2 th{
padding:5px;
border-right:1px solod #ccc;
background-color:#eee8cd;
}
.tb2 td{
padding:5px;
border-right:1px solod #ccc;
border-bottom:1px solod #ccc;
background-color:#fff8cd;
}

HTML側の記述はこんな感じになりますね。

<table class="tb2">
<tr>
<th>項目１</th><td>説明１</td>
</tr>
<tr>
<th>項目２</th><td>説明２</td>
</tr>
</table>

これはちょっと前の本になりますが、重宝します。さすがは永久保存版ですね。

Web creators (ウェブクリエイターズ) 2008年 10月号 [雑誌]
	インプレスコミュニケーションズ 2008-08-29 売り上げランキング : おすすめ平均 CSS 152の小技 Amazonで詳しく見る by G-Tools

ぽちっとよろしくお願いします。m(_._)m

にほんブログ村

WEBデザイン

今更といえば今更なんですが、CSSや色相等を考えたWEBデザインやレイアウト等をやってます。私は開発系の人間ですのでクリエイティブな（笑）ものというのはやってこなかったというのが実際なんですよね。今回はいい機会だと思って勉強してます。

この部分も身につけられれば一人でできる状態ですからね。

積読状態だった本を新鮮に読み返しています。

ブログデザインの本 (ウェブデザインブック)
	秀和システム 2006-02 売り上げランキング : 618744 おすすめ平均 バリエーションを意識したブログデザインをしたい方には Amazonで詳しく見る by G-Tools

ぽちっとよろしくお願いします。m(_._)m
にほんブログ村

3カラム化のための段組みのつくりかた・・再び

参考にしてみる。


-段組みレイアウト【float】：CSS入門
http://kumacrow.blog111.fc2.com/blog-entry-293.html


-スタイルシート(CSS)で段組を構成する
http://allabout.co.jp/internet/hpcreate/closeup/CU20041111A/index.htm

色名とHEXの対応

16進数での色と名前の対応表探してたんですが、こちらのページを見つけました。
見やすくてとても助かりました。

-原色大辞典
http://www.colordic.org/

レイアウトの決め方

ブログのレイアウトとかについて書いてあります。
まとめサイト風かな。



http://blog.info-rich.jp/archives/2005/05/post_15.html

クリッカブルマップで画像リンク

以下のページに
クリッカブルマップについての説明があります。

http://www008.upp.so-net.ne.jp/netbegin/tetori/html/c030/p030.htm

3カラム化のための段組みのつくりかた

ページの中を分割したレイアウトで使う使い方はここを参考にしました。


わかりやすく書かれていました。
http://desperadoes.biz/style/dan/